Cleaned up the rendering of search form

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

@@ -98,8 +98,9 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 				React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, [
 					React.DOM.span({'className':'label'}, "Untagged"),
 					React.DOM.span({'className':'count'}, this.props['untaggedCardsCount'] ? this.props['untaggedCardsCount'] : '-')
-				])
+				]),
-			]),
+//			]),
+/*
 			React.DOM.div({'className':'search'}, [
 				React.DOM.form({'className':'searchForm'}, [
 					React.DOM.div({}, [
@@ -113,6 +114,21 @@ Clipperz.PM.UI.Components.Selections = React.createClass({
 					React.DOM.span({}, selectedCardCount)
 				])
 			]),
+*/
+			React.DOM.div({'className':'search'}, [
+				React.DOM.form({'className':'searchForm'}, [
+					React.DOM.div({}, [
+						React.DOM.input({'type':'text', 'id':'searchValue', 'onFocus':this.handleSearchChange, 'onChange':this.handleSearchChange, 'onKeyDown':this.handleKeyDown, 'name':'search', 'value':this.props['searchTerm'] /*, 'placeholder':"search" */ }),
+						React.DOM.label({'htmlFor':'searchValue'}, 'search'),
+						React.DOM.div({'className':'searchClear', 'onClick':this.clearSearch}, [
+							React.DOM.span({'className':'count'}, selectedCardCount),
+							React.DOM.span({'className':'clear'}, "clear")
+						]),
+					])
+				]),
+			]),
+			]),
+
 			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}),

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

@@ -44,8 +44,8 @@ Clipperz.PM.UI.Components.TagIndexItem = React.createClass({
 		}
 	
 		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':'label'}, this.props['label']),
-			React.DOM.span({'className':'tagCount'}, this.props['count'])
+			React.DOM.span({'className':'count'}, this.props['count'])
 		]);
 	},
 

frontend/delta/scss/core/flex.scss

@@ -46,6 +46,35 @@
 // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
 // * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
 
+/*
+
+# Flex container notes
+	display: flex | inline-flex;
+
+	flex-direction: row | row-reverse | column | column-reverse;
+	flex-wrap: nowrap | wrap | wrap-reverse;
+
+	flex-flow: <flex-direction> <flex-wrap>;
+
+	justify-content: flex-start | flex-end | center | space-between | space-around;
+
+	align-items: stretch | flex-start | flex-end | center | baseline;
+	align-content: stretch | flex-start | flex-end | center | space-between | space-around;
+
+# Flex items
+	visibility: collapse;
+	flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ];
+	order: 0;
+	min-width: min-content;
+	margin-left: auto;
+	align-self: auto | flex-start | flex-end | center | baseline | stretch;
+
+
+http://css-tricks.com/snippets/css/a-guide-to-flexbox/
+http://jonibologna.com/flexbox-cheatsheet/
+
+*/
+
 //----------------------------------------------------------------------
 
 // Flexbox Containers

frontend/delta/scss/style/selectionPanel.scss

@@ -9,7 +9,7 @@
 	$spacing: 5px;
 
 	ul.defaultSet {
-		font-weight: bold;
+//		font-weight: bold;
 		padding-top: 10px;
 		padding-bottom: 10px;
 
@@ -17,7 +17,6 @@
 			@include flexbox();
 			@include flex-direction(row);
 
-			
 			span.label {
 				@include flex(auto);
 			}
@@ -43,46 +42,97 @@
 
 	.search {
 		form {
-			padding:2px;
+//			padding:2px;
-			position:relative;
+//			position:relative;
-			box-sizing:border-box;
+//			box-sizing:border-box;
-			width:95%;
+//			width:95%;
 
-			input {
+			div {
-				font-family: "clipperz-font";
+				@include flexbox();
-				color: #999;
+				@include flex-direction(row);
-				font-size: 18pt;
-				padding: 0px 30px;
-				margin: 0px 5px;
-				width: 100%;
-				box-sizing:border-box;
-			}
 
-			label {
+				input {
-				@include icon-font();
+					@include flex(auto);
-				font-size: 18pt;
+					@include order(1);
-				padding-left: $spacing;
-//				padding-right:5px;
-				position:absolute;
-				top:9px;
-				left:9px;
-				color: #666;
-			}
 
-			.searchClear {
+					font-family: "clipperz-font";
-				@include icon-font();
+					font-size: 18pt;
-				@include border-radius(50%);
+					color: white;
-				background-color: #aaa;
+					background-color: black;
-				color: white;
+					border: 0px;
-				position:absolute;
+					border-bottom: 1px solid #333;
-				right:9px;
+					outline: none;
-				top:9px;
+					margin-right: 10px;
-				cursor: pointer;
-				padding: 5px;
-				font-size: 10pt;
 
-				&:hover {
+//					color: #999;
-					background-color: #666;
+//					padding: 0px 30px;
+//					margin: 0px 5px;
+//					width: 100%;
+//					box-sizing:border-box;
+
+					@include placeholder {
+						font-style: italic;
+						color: #ccc;
+					}
+				}
+
+				label {
+					@include flex(none);
+					@include order(0);
+					@include icon-font();
+
+					font-weight: normal;
+					padding-left: 8px;
+					padding-right: 8px;
+					font-size: 14pt;
+					vertical-align: baseline;
+					
+					margin-top: 10px;
+
+//					font-size: 18pt;
+//					padding-left: $spacing;
+//					padding-right:5px;
+//					position:absolute;
+//					top:9px;
+//					left:9px;
+//					color: #666;
+				}
+
+				.searchClear {
+					@include flex(none);
+					@include order(2);
+					@include align-self(flex-end);
+					cursor: pointer;
+					margin: 12px 12px 6px 0px;
+
+					.count {
+						margin-right: 0px;
+						display: none;
+					}
+					.clear {
+						@include icon-font();
+						display: none;
+
+//						@include border-radius(50%);
+						@include border-radius(4px);
+						color: white;
+						background-color: gray;
+//						right:9px;
+//						top:9px;
+//						padding: 5px;
+						padding: 3px 5px;
+						font-size: 10pt;
+					}
+
+					&:hover {
+						.count {
+							display: none;
+						}
+						.clear {
+							background-color: #666;
+							display: block;
+						}
+					}
 				}
 			}
 		}
@@ -103,19 +153,27 @@
 		padding-top: 10px;
 
 		li {
+			@include flexbox();
+			@include flex-direction(row);
+
 			&:before {
 				content: "tag";
 			}
 
-			span.tagLabel {
+			span.label {
+				font-size: 14pt;
+				@include flex(auto);
 			}
 		
-			span.tagCount {
+			span.count {
-				background-color: gray;
+				@include flex(none);
-				font-size: 10pt;
+				@include align-self(flex-end);
-				margin-left: 10px;
+
-				padding: 0px 4px;
+//				background-color: gray;
-				@include border-radius(4px);
+//				font-size: 10pt;
+//				margin-left: 10px;
+//				padding: 0px 4px;
+//				@include border-radius(4px);
 			}
 		}
 	}
@@ -199,9 +257,26 @@ $selectionColor: $clipperz-orange;
 
 #selections.SEARCH {
 	div.search {
-		.searchResultInfo {
+//		.searchResultInfo {
-			color: $selectionColor;
+//			color: $selectionColor;
-			display: block;
+//			display: block;
+//		}
+		
+		form {
+			label {
+				color: $selectionColor;
+			}
+			.searchClear {
+				.count {
+					display: block;
+				}
+				
+				&:hover {
+					.count {
+						display: none;
+					}
+				}
+			}
 		}
 	}
 }