Merge remote-tracking branch 'origin/open278' into open278-proto

platform/commonUI/browse/res/templates/browse-object.html

@@ -52,7 +52,7 @@
                 <mct-toolbar name="mctToolbar"
                              structure="toolbar.structure"
                              ng-model="toolbar.state"
-                             class="flex-elem grow">
+                             class="flex-elem grows">
                 </mct-toolbar>
                 <mct-representation key="'edit-action-buttons'"
                                     mct-object="domainObject"

platform/commonUI/general/res/sass/_effects.scss

@@ -51,14 +51,11 @@ a.disabled {
 	@include animation-name(pulse, 0.2);
 }
 
-@include keyframes(pulse) {
+@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-	0%   { opacity: 0.5; }
+    @include keyframes(pulse) {
-	100% { opacity: 1; }
+        0%   { opacity: $opacity0; }
-}
+        100% { opacity: $opacity100; }
-
+    }
-
-@mixin pulse($dur: 500ms, $iteration: infinite) {
-	//@include customKeyframes(pulse, 0.2);
 	@include animation-name(pulse);
 	@include animation-duration($dur);
 	@include animation-direction(alternate);
@@ -66,10 +63,10 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
-@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) {
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
 	@include keyframes(pulseBorder) {
-		0%   { border-color: transparent; }
+		0%   { border-color: rgba($c, $opacity0); }
-		100% { border-color: $c; }
+		100% { border-color: rgba($c, $opacity100); }
 	}
 	@include animation-name(pulseBorder);
 	@include animation-duration($dur);

platform/commonUI/general/res/sass/_inspector.scss

@@ -23,7 +23,7 @@
 
 .l-inspect,
 .l-inspect table tr td {
-    font-size: 0.7rem;
+    font-size: 0.75rem;
 }
 
 .l-inspect {
@@ -31,6 +31,9 @@
     background: $colorInspectorBg;
     color: $colorInspectorFg;
     line-height: 140%;
+
+    .flex-elem.holder:not(:last-child) { margin-bottom: $interiorMargin; }
+
     .pane-header {
         color: pushBack($colorInspectorFg, 20%);
         font-size: 0.8rem;
@@ -43,6 +46,16 @@
             vertical-align: bottom;
         }
     }
+
+    .split-layout {
+        .split-pane-component.pane {
+            &.bottom {
+                height: 30%;
+                min-height: 20%;
+                max-height: 80%;
+            }
+        }
+    }
     
     ul {
         @include box-sizing(border-box);
@@ -109,4 +122,23 @@
             width: 4px;
         }
     }
-}
+    .holder-elements {
+        .current-elements {
+            position: relative;
+            .tree-item {
+                .t-object-label {
+                    // Elements pool is a flat list, so don't indent items.
+                    left: 0;
+                    .t-item-icon {
+                        font-size: 1em;
+                        width: 1em;
+                    }
+                    .t-title-label {
+                        left: 20px + $interiorMargin;
+                    }
+                }
+            }
+        }
+    }
+}
+

platform/commonUI/general/res/sass/_mixins.scss

@@ -315,11 +315,11 @@
 	}
 }
 
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
 	@include appearance(none);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
+	@include box-shadow(inset $shdw);
 	background: $bg;
 	border: none;
 	color: $fg;
@@ -329,7 +329,7 @@
 	}
 }
 
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
 	@include input-base($bg, $fg);
 	padding: 0 $interiorMarginSm;
 }

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -31,7 +31,6 @@
 }
 
 .form {
-//	@include test(orange);
 	color: $colorFormText;
 	.form-section {
 		position: relative;
@@ -112,12 +111,8 @@
 
 		.selector-list {
 			// Used in create overlay to display tree view
-			@include nice-input($colorInputBg, $colorInputFg);
+			@include nice-input();
 			$h: 150px;
-			//@include border-radius($basicCr);
-			//@include box-sizing(border-box);
-			//background: rgba(black, 0.2);
-			//padding: $interiorMargin;
 			position: relative;
 			height: $h;
 //			max-width: 50%;
@@ -162,13 +157,9 @@ label.form-control.checkbox {
 	}
 }
 
-input[type="text"] {
+input[type="text"],
-	@include nice-input($colorInputBg, $colorInputFg);
+input[type="search"] {
-	&.filter {
+	@include nice-input();
-		&.ng-dirty {
-			//            background: red;
-		}
-	}
 	&.numeric {
 		text-align: right;
 	}
@@ -176,7 +167,6 @@ input[type="text"] {
 
 textarea {
 	@include nice-textarea($colorInputBg, $colorInputFg);
-	//	font-size: 0.9em;
 	position: absolute;
 	height: 100%;
 	width: 100%;

platform/commonUI/general/res/sass/forms/_filter.scss

@@ -21,20 +21,7 @@
  *****************************************************************************/
 .filter,
 .t-filter {
-	input.filter,
 	input.t-filter-input {
-		@include subdued-input();
-	}
-	input.t-filter-input {
-		height: $formInputH;
-		width: 200px;
-		&:not(.ng-dirty) {
-//			TO-DO: Update compass install to support this
-//			@include input-placeholder {
-//				color: rgba(#fff, 0.3);
-//				font-style: italic;
-//			}
-		}
 		&:not(.ng-dirty) + .t-a-clear {
 			display: none;
 		}
@@ -76,13 +63,6 @@
 			background-color: $colorKey;
 		}
 	}
-//	&:not(ng-dirty)
-}
-
-.l-filter {
-	// Holds an input and a clear button
-	display:inline-block;
-	position: relative;
 }
 
 .top-bar {
@@ -100,4 +80,75 @@
 	.icon-filter {
 		font-size: 1.4em;
 	}
+}
+
+.l-filter {
+    $iconEdgeM: 4px;
+    $iconD: $formInputH - ($iconEdgeM * 2);
+    // Adds a magnifying glass before, holds an input and a clear button
+    display: inline-block;
+    position: relative;
+
+    input[type="search"] {
+        padding: 2px ($iconD + $interiorMargin);
+    }
+    .clear-icon,
+    .menu-icon,
+    &:before {
+        @include box-sizing(border-box);
+        display: inline-block;
+        line-height: inherit;
+        position: absolute;
+        top: 50%;
+        @include transform(translateY(-50%));
+        z-index: 1;
+    }
+
+    &:before {
+        // Magnify glass icon
+        content:'\4d';
+        left: $interiorMargin;
+        @include trans-prop-nice(color, 250ms);
+        pointer-events: none;
+    }
+
+    .clear-icon {
+        right: $iconEdgeM;
+        // Icon is visible only when there is text input
+        visibility: hidden;
+        opacity: 0;
+        &.show {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        &:hover {
+            color: pullForward($colorInputIcon, 10%);
+        }
+    }
+}
+
+.s-filter {
+    input[type="search"] {
+        @include input-base();
+    }
+    .clear-icon,
+    .menu-icon,
+    &:before {
+        color: $colorInputIcon;
+        cursor: pointer;
+        font-family: symbolsfont;
+        @include trans-prop-nice((opacity, color), 150ms);
+    }
+    // Make icon lighten when hovering over search bar
+    &:hover:before {
+        color: pullForward($colorInputIcon, 10%);
+    }
+
+    .clear-icon {
+        // 'x' in circle icon
+        &:before {
+            content: '\e607';
+        }
+    }
 }

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -102,7 +102,7 @@
     }
 
     .object-browse-bar {
-        left: 45px !important;
+        margin-left: 45px;
         .context-available {
             opacity: 1 !important;
         }

platform/commonUI/general/res/sass/search/_search.scss

@@ -20,91 +20,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-.clear-icon,
-.menu-icon {
-    cursor: pointer;
-    font-family: symbolsfont;
-    @include trans-prop-nice((opacity, color), 150ms);
-}
-
-.clear-icon {
-    // 'x' in circle icon
-    &:before {
-        content: '\e607';
-    }
-}
-
 .holder-search {
+    // Moved a lot of stuff in here to _filter.scss
+    // to generalize approach to search input controls.
+
 	$iconWidth: 20px;
+    $textInputHeight: 19px;
+    $iconEdgeM: 4px;
+    $iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 
 	.search-bar {
-		$textInputHeight: 19px; // This is equal to the default value, 19px
-		$iconEdgeM: 4px;
-		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
 		max-width: 250px;
 		position: relative;
 
-		.search-input {
+		input[type="search"] {
 			height: $treeSearchInputBarH;
 			line-height: $treeSearchInputBarH;
+            position: relative;
+            width: 100%;
+            padding-left: $iconD + $interiorMargin !important;
+            padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
 		}
 		
-		&:before,
+        .clear-icon {
-		.clear-icon,
+            right: $iconD + $interiorMargin;
-		.menu-icon {
-			@include box-sizing(border-box);
-			color: $colorInputIcon;
-			height: $iconD;
-            width: $iconD;
-			line-height: $iconD;
-			position: absolute;
-			text-align: center;
-			top: $iconEdgeM;
-		}
-
-		.search-input {
-			position: relative;
-			width: 100%;
-			padding-left: $iconD + $interiorMargin !important;
-			padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
-
-			// Make work for mct-control textfield
-			input {
-				width: inherit; // was 100%
-			}
-		}
-
-		&:before {
-            // Magnify glass icon
-            content:'\4d';
-            font-family: symbolsfont;
-            left: $interiorMarginSm;
-            @include trans-prop-nice(color, 250ms);
-            pointer-events: none;
         }
 
-		// Make icon lighten when hovering over search bar
-		&:hover:before {
-			color: pullForward($colorInputIcon, 10%);
-		}
-
-		.clear-icon {
-			right: $iconD + $interiorMargin;
-
-			// Icon is visible only when there is text input
-            visibility: hidden;
-			opacity: 0;
-			&.show {
-                visibility: visible;
-				opacity: 1;
-			}
-
-			&:hover {
-				color: pullForward($colorInputIcon, 10%);
-			}
-		}
-
 		.menu-icon {
             // 'v' invoke menu icon
             &:before { content: '\76'; }

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -143,6 +143,31 @@ ul.tree {
 		}
 	}
 
+    &.active {
+        // The item is being edited
+        background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important;
+        pointer-events: none;
+        &:before {
+            // Pencil icon
+            @extend .ui-symbol;
+            @include pulse($dur: 1s, $opacity0: 0.25);
+            color: $colorItemTreeEditingFg;
+            content: '\70';
+            margin-left: $interiorMarginSm;
+        }
+        .t-object-label {
+            .t-item-icon,
+            .t-title-label {
+                color: $colorItemTreeEditingFg;
+                @include text-shadow(none);
+            }
+            .t-title-label {
+                font-style: italic;
+            }
+        }
+        .view-control, + .tree-item-subtree { display: none; }
+    }
+
 	&:not(.loading) {
 		cursor: pointer;
 	}
@@ -160,8 +185,9 @@ ul.tree {
 	}
 }
 
-.tree-item {
+.tree-item,
+.search-result-item.active {
 	.t-object-label {
 		left: $interiorMargin + $treeVCW;
 	}
-}
+}

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -67,7 +67,6 @@
         right: $bodyMargin;
         bottom: $bodyMargin + $ueFooterH;
         .tool-bar {
-            border-bottom: 1px solid $colorInteriorBorder;
             bottom: auto;
             height: $tbH;
             line-height: $btnToolbarH;
@@ -78,7 +77,6 @@
         }
     }
 
-	// from _bottom-bar.scss
 	.ue-bottom-bar {
 		@include absPosDefault(0);// New status bar design
 		top: auto;
@@ -209,12 +207,18 @@
             top: $bodyMargin;
             bottom: $bodyMargin;
         }
-        .holder-inspector-elements {
+        .holder-inspector {
             top: $bodyMargin;
             bottom: $bodyMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }
+        .holder-elements {
+            top: 0;
+            bottom: $bodyMargin;
+            left: $bodyMargin;
+            right: $bodyMargin;
+        }
     }
 }
 
@@ -225,16 +229,16 @@
 
 .l-object-wrapper {
     @extend .abs;
-    //top: $ueTopBarH + $interiorMarginLg;
 
     .object-holder-main {
         @extend .abs;
     }
 
     &.active {
-        @include pulseBorder($colorKey, 150ms, 8, 0.5s);
+        @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
         @include border-radius($controlCr);
-        border-color: $colorKey;
+        background-color: $colorEditAreaBg;
+        border-color: $colorEditAreaFg;
         border-width: 2px;
         border-style: dotted;
         .l-object-wrapper-inner {
@@ -248,14 +252,15 @@
 }
 
 .l-edit-controls {
-    @include trans-prop-nice-resize(0.25s);
+    @include trans-prop-nice((opacity, height), 0.25s);
-    height: 0;
+    border-bottom: 1px solid $colorInteriorBorder;
+    line-height: $ueEditToolBarH;
+    height: 0px;
     opacity: 0;
     overflow: hidden;
     &.active {
-        border-bottom: 1px solid $colorInteriorBorder;
         height: $ueEditToolBarH + $interiorMargin;
-        line-height: $ueEditToolBarH;
+        margin-bottom: $interiorMargin;
         opacity: 1;
     }
 }
@@ -281,7 +286,6 @@
 /***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
     // Converting to use flexbox layout
-    //@include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
@@ -295,9 +299,7 @@
     }
 }
 
-// When the tree is hidden, these are the
+// When the tree is hidden, these are the classes used for the left menu and the right representation.
-// classes used for the left menu and the
-// right representation.
 .pane-tree-hidden {
     // Sets the left tree menu when the tree is hidden.
     .tree-holder,
@@ -332,9 +334,6 @@
 
 .pane-inspect-hidden {
     .l-object-and-inspector {
-        .t-inspect {
-            z-index: 1 !important; // Move down so that primary pane elements are clickable
-        }
         .l-inspect,
         .splitter-inspect {
             opacity: 0;

platform/commonUI/general/res/templates/controls/input-filter.html

@@ -20,15 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- look at action-button for example -->
-<span class="t-filter l-filter"
+<span class="t-filter l-filter s-filter"
       ng-controller="GetterSetterController">
 	<input type="search"
            class="t-filter-input"
-           ng-model="getterSetter.value"
+           ng-model="getterSetter.value"/>
-           placeholder="Filter..."/>
+	<a class="clear-icon"
-	<a class="ui-symbol t-a-clear s-a-clear"
+       ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
-       ng-show="getterSetter.value !== ''"
        ng-click="getterSetter.value = ''">
-        x
     </a>
 </span>

platform/commonUI/general/res/templates/object-inspector.html

@@ -19,45 +19,68 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+<!-- TO-DO: get rid of this ng-init and replace with a live state value -->
+<div ng-init="editMode = true;"></div>
+
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
-    <div class="abs holder holder-inspector-elements l-flex-col">
+    <div ng-controller="PaneController as modelPaneEdit">
-    <div class="pane-header flex-elem">Inspection</div>
+        <mct-split-pane class='abs contents split-layout' anchor='bottom'>
-    <ul class="flex-elem grows vscroll">
+            <div class="split-pane-component pane top">
-        <li>
+                <div class="abs holder holder-inspector l-flex-col">
-            <em>Properties</em>
+                    <div class="pane-header flex-elem">Inspection</div>
-            <div class="inspector-properties"
+                    <ul class="flex-elem grows vscroll">
-                 ng-repeat="data in metadata"
+                        <li>
-                 ng-class="{ first:$index === 0 }">
+                            <em>Properties</em>
-                <div class="label">{{ data.name }}</div>
+                            <div class="inspector-properties"
-                <div class="value">{{ data.value }}</div>
+                                 ng-repeat="data in metadata"
+                                 ng-class="{ first:$index === 0 }">
+                                <div class="label">{{ data.name }}</div>
+                                <div class="value">{{ data.value }}</div>
+                            </div>
+                        </li>
+                        <li ng-if="contextutalParents.length > 0">
+                            <em title="The location of this linked object.">Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in contextutalParents"
+                                  ng-class="{ last:($index + 1) === contextualParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                        <li ng-if="primaryParents.length > 0">
+                            <em title="The location of the original object that this was linked from.">Original Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in primaryParents"
+                                  ng-class="{ last:($index + 1) === primaryParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                    </ul>
+                </div><!--/ holder-inspector -->
+            </div><!--/ split-pane-component -->
+            <mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
+            <div class="split-pane-component pane bottom" ng-show="editMode">
+                <div class="abs holder holder-elements l-flex-col">
+                    <em class="flex-elem">Elements</em>
+                    <mct-include key="'input-filter'"
+                                class="flex-elem holder">
+                    </mct-include>
+                    <mct-representation
+                            key="'edit-elements'"
+                            mct-object="domainObject"
+                            class="flex-elem holder grows vscroll current-elements">
+                    </mct-representation>
+                </div>
             </div>
-        </li>
+        </mct-split-pane>
-        <li ng-if="contextutalParents.length > 0">
+    </div><!--/ PaneController -->
-            <em title="The location of this linked object.">Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in contextutalParents"
-                  ng-class="{ last:($index + 1) === contextualParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-        <li ng-if="primaryParents.length > 0">
-            <em title="The location of the original object that this was linked from.">Original Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in primaryParents"
-                  ng-class="{ last:($index + 1) === primaryParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-    </ul>
-    </div>
 </span>

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -6,6 +6,8 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
+$colorEditAreaBg: #31363e;
+$colorEditAreaFg: #587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
 $colorA: #ccc;
 $colorAHov: #fff;
@@ -43,8 +45,6 @@ $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
@@ -69,8 +69,8 @@ $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff3300;
 $colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
+$colorFormSectionHeader: rgba(#fff, 0.1);
-$colorInputBg: rgba(#fff, 0.1);
+$colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
@@ -80,7 +80,7 @@ $colorInspectorBg: pullForward($colorBodyBg, 3%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: pushBack($colorBodyFg, 15%);
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Status colors, mainly used for messaging and item ancillary symbols
@@ -109,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 
 // Bubble colors
-$colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: #ddd;
+$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -126,7 +126,7 @@ $colorItemBg: lighten($colorBodyBg, 5%);
 $colorItemBgHov: pullForward($colorItemBg, 15%);
 $colorItemFg: lighten($colorItemBg, 50%);
 $colorItemFgDetails: lighten($colorItemBg, 30%);
-$colorItemIc: $colorKey; //pullForward($colorItemFg, 20%);
+$colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.1) 0 1px 2px;
@@ -153,12 +153,14 @@ $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeEditingBg: #344154;
+$colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: rgba(#fff, 0.3);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
-$colorItemTreeVCHover: $colorAlt1;
 $shdwItemTreeIcon: 0.6;
 
 // Scrollbar
@@ -171,7 +173,7 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even
 $splitterHandleD: 1px;
-$colorSplitterBg: pullForward($colorBodyBg, 5%);
+$colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
 $colorSplitterHover: pullForward($colorBodyBg, 15%);
@@ -191,5 +193,5 @@ $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
 $colorAboutLink: #84b3ff;
 
 // Loading
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
 $colorLoadingFg: $colorAlt1;
+$colorLoadingBg: rgba($colorBodyFg, 0.2);

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -6,6 +6,8 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
+$colorEditAreaBg: #eafaff;
+$colorEditAreaFg: #4bb1c7; //587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
@@ -55,10 +57,10 @@ $colorMenuIc: $colorKey;
 $colorMenuHovBg: pullForward($colorMenuBg, 10%);
 $colorMenuHovFg: $colorMenuFg;
 $colorMenuHovIc: $colorMenuIc;
-$colorCreateMenuLgIcon: $colorKey;
-$colorCreateMenuText: $colorBodyFg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
+$colorCreateMenuLgIcon: $colorKey;
+$colorCreateMenuText: $colorBodyFg;
 
 // Form colors
 $colorCheck: $colorKey;
@@ -107,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 
 // Bubble colors
-$colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -127,12 +129,11 @@ $colorItemFgDetails: pushBack($colorItemFg, 15%);
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: none; //rgba(black, 0.2) 0 1px 2px;
+$shdwItemText: none;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
 $colorTabBorder: pullForward($colorBodyBg, 10%);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
@@ -149,12 +150,15 @@ $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
 $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
 $colorItemTreeVCHover: $colorKey;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
+$colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;

platform/search/res/templates/search.html

@@ -20,9 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="l-flex-col flex-elem grows holder holder-search"  ng-controller="SearchController as controller">
-    <div class="search-bar flex-elem" ng-controller="ClickAwayController as toggle">
+    <div class="search-bar search-input l-filter s-filter flex-elem" ng-controller="ClickAwayController as toggle">
-        <input class="search-input"
+        <input type="search"
-               type="text"
                ng-model="ngModel.input"
                ng-keyup="controller.search()" />
         <a class="clear-icon"