icons

resources/frontend_client/app/css/query_builder.css

@@ -33,8 +33,14 @@
 .Query-section {
     display: flex;
     align-items: center;
-    margin-bottom: 1em;
     color: #91979E;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+.Query-section .SelectionModule {
+    margin-left: 1em;
+    margin-right: 1em;
 }
 
 .QueryVisualization {
@@ -51,6 +57,7 @@
 .Query-filter {
     display: flex;
     align-items: center;
+    border: 1px solid var(--selection-color);
 }
 
 /*
@@ -60,7 +67,7 @@
     color: var(--brand-color);
 }
 
-.SelectionModule .SelectionItems {
+.SelectionItems {
     opacity: 0;
     pointer-events: none;
     position: absolute;
@@ -74,14 +81,12 @@
     right: 0;
     overflow-y: scroll;
     max-height: 360px;
-}
-
-.SelectionItems {
     min-width: 320px;
 }
 
 .SelectionItems.open {
     opacity: 1;
+    transition: opacity .3s linear;
     pointer-events: all;
 }
 
@@ -91,7 +96,6 @@
     cursor: pointer;
     padding: 0.75em;
     font-size: 0.85em;
-    position: relative;
     background-color: #fff;
 }
 
@@ -99,10 +103,26 @@
     background-color: currentColor;
 }
 
+.SelectionItem .Icon-check {
+    opacity: 0;
+    color: #fff;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;   
+}
+
+.SelectionItem:hover .Icon-check {
+    opacity: 1;
+}
+
 .SelectionItem:hover .SelectionModule-display {
     color: #fff;
 }
 
+.SelectionItem.SelectionItem--selected .Icon-check {
+    opacity: 1;
+    color: var(--brand-color);
+}
+
 .SelectionModule.open .SelectionItems {
     opacity: 1;
     pointer-events: all;
@@ -139,7 +159,6 @@
     color: #fff;
 }
 
-
 .Visualization {
     overflow-y: scroll;
     transition: background .3s linear;
@@ -156,6 +175,7 @@
 
 .VisualizationSettings {
     padding-bottom: 1em;
+    padding-top: 1em;
     background-color: #fff;
 }
 

resources/frontend_client/app/query_builder/check_icon.react.js

+var CheckIcon = React.createClass({
+	getDefaultProps: function() {
+	    return {
+	    	width: '32',
+			height: '32',
+			className: 'Icon-check',
+			id: 'check',
+			fill: 'currentcolor'
+	    };
+  	},
+	render: function () {
+		return (
+			<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
+    			<path d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z "></path>
+			</svg>
+
+		);
+	}
+});

resources/frontend_client/app/query_builder/close_icon.react.js

+var CloseIcon = React.createClass({
+	getDefaultProps: function() {
+	    return {
+	    	width: '32',
+			height: '32',
+			className: 'Icon-close',
+			id: 'check',
+			fill: 'currentcolor'
+	    };
+  	},
+	render: function () {
+		return (
+			<svg className={this.props.className} id={this.props.id} viewBox="0 0 32 32" fill={this.props.fill} width={this.props.width} height={this.props.height}>
+				<path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z "></path>
+			</svg>
+		);
+	}
+});

resources/frontend_client/app/query_builder/selection_module.react.js

@@ -66,11 +66,12 @@ var SelectionModule = React.createClass({
                 var display = item[this.props.display] || item;
                 var itemClassName = cx({
                     'SelectionItem' : true,
-                    'selected': selection == display
+                    'SelectionItem--selected': selection == display
                 });
                 // if children are provided, use the custom layout display
                 return (
                     <li className={itemClassName} onClick={this._select.bind(null, item)} key={index}>
+                        <CheckIcon width="12px" height="12px" />
                         <span className="SelectionModule-display">
                             {display}
                         </span>
@@ -133,10 +134,10 @@ var SelectionModule = React.createClass({
 
         if(this.props.remove) {
             remove = (
-                <svg viewBox="0 0 32 32" width="16px" height="16px" fill="currentcolor" onClick={this.props.remove.bind(null, this.props.index)}>
-                    <path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z "></path>
-                </svg>
-            );
+                <div onClick={this.props.remove.bind(null, this.props.index)}>
+                    <CloseIcon width="16px" height="16px" />
+                </div>
+            )
         }
 
         return (