Highlighted selected items in the selection panel.

Also added some improvements suggested here: http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

frontend/delta/js/Clipperz/PM/UI/Components/Selections.js

@@ -58,12 +58,16 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 		var	archivedCardsCount;
 		var	selectedCardCount;
 		var	filterType;
+		var	filterValue;
 
+console.log("SELECTIONS PROPS", this.props);
 		tagInfo = this.props['tags'] ? this.props['tags'] : {};
 		tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, MochiKit.Base.keys(tagInfo)).sort(Clipperz.Base.caseInsensitiveCompare);
 		archivedCardsCount = this.props['archivedCardsCount'];
 		selectedCardCount = this.props['cards'] ? this.props['cards'].length : 0;
+
 		filterType = (this.props['filter'] && this.props['filter']['type']) ? this.props['filter']['type'] : 'ALL';
+		filterValue = (this.props['filter'] && this.props['filter']['value']) ? this.props['filter']['value'] : null;
 
 		return	React.DOM.div({'key':'selections', 'id':'selections', 'className':filterType}, [
 			React.DOM.ul({'className':'defaultSet'}, [
@@ -80,7 +84,7 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 					React.DOM.div({}, [ React.DOM.span({'className':'count'}, selectedCardCount) ])
 				])
 			]),
-			React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag]}); }, tags)),
+			React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag], 'selected':aTag == filterValue}); }, tags)),
 			React.DOM.div({'className':'showArchivedCards', 'onClick':this.handleCheckboxChanges}, [
 				React.DOM.input({'type':'checkbox', 'checked':this.props['shouldIncludeArchivedCards'] ? 'checked' : null}),
 				React.DOM.span({'className':'label'}, "Show archived cards"),

frontend/delta/js/Clipperz/PM/UI/Components/TagIndexItem.js

@@ -39,7 +39,11 @@ Clipperz.PM.UI.Components.TagIndexItem = React.createClass({
 	},
 	
 	render: function () {
-		return	React.DOM.li({'onClick': this.handleClick, 'data-tag':this.props['label']}, [
+		var	classes = {
+			'selected':	this.props['selected']
+		}
+	
+		return	React.DOM.li({'onClick': this.handleClick, 'className':React.addons.classSet(classes), 'data-tag':this.props['label']}, [
 			React.DOM.span({'className':'tagLabel'}, this.props['label']),
 			React.DOM.span({'className':'tagCount'}, this.props['count'])
 		]);

frontend/delta/scss/core/behavior.scss

@@ -56,7 +56,7 @@ $transition-duration: 0.5s;
 @mixin sliding-panel ($side, $size) {
 	position: fixed;
 	z-index: 20;
-	overflow: scroll;
+	@include overflow-scroll;
 
 	@if $side == left {
 		@include sliding-panel-left($size);

frontend/delta/scss/core/layout.scss

@@ -2,6 +2,7 @@
 
 .page {
 	@include pageElement();
+	@include user-select(none);
 }
 
 .mainPage {

frontend/delta/scss/core/mixin.scss

@@ -141,3 +141,20 @@
 	0% { @include transform(0deg, 0, 0); }
 	100% { @include transform(359deg, 0, 0); }
 }
+
+@mixin user-select($value) {
+	//	http://css-tricks.com/almanac/properties/u/user-select/
+	//	none | text | all | element
+	-webkit-user-select: $value;	/* Chrome all / Safari all */
+	-moz-user-select: $value;		/* Firefox all */
+	-ms-user-select: $value;		/* IE 10+ */
+
+	/* No support for these yet, use at own risk */
+	-o-user-select: $value;
+	user-select: $value;
+}
+
+@mixin overflow-scroll () {
+	overflow: scroll;
+	-webkit-overflow-scrolling: touch;
+}

frontend/delta/scss/style/card.scss

@@ -220,6 +220,8 @@ $cardViewBasePadding: 10px;
 
 .content {
 	.cardLabel {
+		@include user-select(text);
+		
 		font-size: 24pt;
 		padding: $cardViewBasePadding;
 	}
@@ -258,6 +260,7 @@ $cardViewBasePadding: 10px;
 
 			.fieldValue {
 				font-size: 18pt;
+				@include user-select(text);
 
 				&.hidden {
 					font-family: clipperz-password;

frontend/delta/scss/style/loginPage.scss

@@ -1,5 +1,5 @@
 #loginPage {
-	overflow: scroll;
+	@include overflow-scroll;
 
 	div.loginForm {
 		@include flexbox;

frontend/delta/scss/style/selectionPanel.scss

@@ -2,7 +2,7 @@
 	background-color: $main-alternate-color;
 	color: $main-alternate-text-color;
 	font-size: 18pt;
-	overflow: scroll;
+	@include overflow-scroll;
 //	height: 100%;
 
 	$iconColumnWidth: 40px;
@@ -90,3 +90,39 @@
 		}
 	}
 }
+
+$selectionColor: yellow;
+
+#selections.ALL {
+	li.allCards {
+		color: $selectionColor;
+	}
+}
+
+#selections.RECENT {
+	li.recentCards {
+		color: $selectionColor;
+	}
+}
+
+#selections.UNTAGGED {
+	li.untaggedCards {
+		color: $selectionColor;
+	}
+}
+
+#selections.SEARCH {
+	div.search {
+		color: $selectionColor;
+	}
+}
+
+#selections.TAG {
+	ul.tagList {
+		li.selected {
+			color: $selectionColor;
+		}
+	}
+}
+
+