From a8d563975a91d780409a22a7574ca472ff0fca99 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 16 Nov 2015 17:20:15 -0800 Subject: [PATCH] [Frontend] Refinements to Inspector elements, search inputs open #199 open #279 Treeview indent removed; Significant refactoring of search classes to generalize approach to search inputs; --- .../commonUI/general/res/sass/_inspector.scss | 4 + .../commonUI/general/res/sass/_mixins.scss | 6 +- .../general/res/sass/forms/_elems.scss | 7 +- .../general/res/sass/forms/_filter.scss | 85 ++++- .../general/res/sass/search/_search.scss | 84 +---- .../res/templates/controls/input-filter.html | 10 +- .../res/templates/object-inspector.html | 5 +- .../espresso/res/css/theme-espresso.css | 349 ++++++++++-------- .../themes/espresso/res/sass/_constants.scss | 2 +- .../themes/snow/res/css/theme-snow.css | 341 +++++++++-------- platform/search/res/templates/search.html | 5 +- 11 files changed, 476 insertions(+), 422 deletions(-) diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss index e34177dda5..d89703fd26 100644 --- a/platform/commonUI/general/res/sass/_inspector.scss +++ b/platform/commonUI/general/res/sass/_inspector.scss @@ -122,6 +122,10 @@ .holder-elements { .current-elements { position: relative; + .tree-item .t-object-label { + // Elements pool is a flat list, so don't indent items. + left: 0; + } } } } diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index ac4006e58b..c0df207758 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/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; } diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index 8ffdce8df8..66a94c8d1b 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -112,7 +112,7 @@ .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); @@ -162,8 +162,9 @@ label.form-control.checkbox { } } -input[type="text"] { - @include nice-input($colorInputBg, $colorInputFg); +input[type="text"], +input[type="search"] { + @include nice-input(); &.filter { &.ng-dirty { // background: red; diff --git a/platform/commonUI/general/res/sass/forms/_filter.scss b/platform/commonUI/general/res/sass/forms/_filter.scss index 55eeef7c98..60ba40344b 100644 --- a/platform/commonUI/general/res/sass/forms/_filter.scss +++ b/platform/commonUI/general/res/sass/forms/_filter.scss @@ -21,13 +21,9 @@ *****************************************************************************/ .filter, .t-filter { - input.filter, input.t-filter-input { - @include subdued-input(); - } - input.t-filter-input { - height: $formInputH; - width: 200px; + //height: $formInputH; + //width: 200px; &:not(.ng-dirty) { // TO-DO: Update compass install to support this // @include input-placeholder { @@ -79,12 +75,6 @@ // &:not(ng-dirty) } -.l-filter { - // Holds an input and a clear button - display:inline-block; - position: relative; -} - .top-bar { input.filter { $h: $ueTopBarH; @@ -100,4 +90,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%)); + } + + &: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'; + } + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 78071c085f..62b869706b 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/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, - .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; + .clear-icon { + right: $iconD + $interiorMargin; } - // 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'; } diff --git a/platform/commonUI/general/res/templates/controls/input-filter.html b/platform/commonUI/general/res/templates/controls/input-filter.html index 1e119c3bb2..07446ed35e 100644 --- a/platform/commonUI/general/res/templates/controls/input-filter.html +++ b/platform/commonUI/general/res/templates/controls/input-filter.html @@ -20,15 +20,13 @@ at runtime from the About dialog for additional information. --> - - + - x \ No newline at end of file diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html index 20025a690b..efbc475ee6 100644 --- a/platform/commonUI/general/res/templates/object-inspector.html +++ b/platform/commonUI/general/res/templates/object-inspector.html @@ -20,6 +20,7 @@ at runtime from the About dialog for additional information. -->
+
@@ -69,7 +70,9 @@
Elements -
+ +
-
- +