diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index afba02c116..80829e839b 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -704,7 +704,7 @@ mct-container { .split-layout.vertical > .pane:first-child .holder { position: relative; } -/* line 42, ../sass/search/_layout.scss */ +/* line 44, ../sass/search/_layout.scss */ .pane.treeview.left .tree-holder { top: 0; } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index c49bb1892b..1aa70c3ead 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -273,86 +273,90 @@ ul.tree { *****************************************************************************/ /* line 23, ../sass/search/_search.scss */ .search-holder { - overflow-y: auto; padding-right: 5px; } - /* line 34, ../sass/search/_search.scss */ + /* line 36, ../sass/search/_search.scss */ .search-holder .search .search-input { margin-top: 10px; width: 100%; } - /* line 40, ../sass/search/_search.scss */ - .search-holder .search .load-icon { - position: relative; } - /* line 42, ../sass/search/_search.scss */ - .search-holder .search .load-icon.loading { - pointer-events: none; - margin-left: 6px; } - /* line 46, ../sass/search/_search.scss */ - .search-holder .search .load-icon.loading .title-label { - font-style: italic; - font-size: .9em; - opacity: 0.5; - margin-left: 26px; - line-height: 24px; } - /* line 56, ../sass/search/_search.scss */ - .search-holder .search .load-icon.loading .wait-spinner { - margin-left: 6px; } - /* line 61, ../sass/search/_search.scss */ - .search-holder .search .load-icon:not(.loading) { - cursor: pointer; } - /* line 66, ../sass/search/_search.scss */ - .search-holder .search .results { - margin-top: 10px; } - /* line 70, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item { - -moz-transition: background-color 0.25s; - -o-transition: background-color 0.25s; - -webkit-transition: background-color 0.25s; - transition: background-color 0.25s; - margin-bottom: 2px; - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; } - /* line 84, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item .label { - margin-left: 6px; } - /* line 88, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - left: 29px; - right: 5px; - font-size: .8em; - line-height: 17px; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - /* line 110, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item.selected { - background: #005177; - color: #fff; } - /* line 114, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item.selected .view-control { - color: #0099cc; } - /* line 117, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item.selected .label .type-icon { + /* line 42, ../sass/search/_search.scss */ + .search-holder .search .search-scroll { + height: 100%; + overflow: auto; } + /* line 46, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results { + margin-top: 10px; } + /* line 50, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item { + -moz-transition: background-color 0.25s; + -o-transition: background-color 0.25s; + -webkit-transition: background-color 0.25s; + transition: background-color 0.25s; + margin-bottom: 2px; + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; } + /* line 64, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label { + margin-left: 6px; } + /* line 68, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + left: 29px; + right: 5px; + font-size: .8em; + line-height: 17px; + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 90, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected { + background: #005177; color: #fff; } - /* line 124, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item:not(.selected):hover { - background: #404040; - color: #cccccc; } - /* line 127, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item:not(.selected):hover .context-trigger { - display: block; } - /* line 130, ../sass/search/_search.scss */ - .search-holder .search .results .search-result-item:not(.selected):hover .icon { - color: #33ccff; } - /* line 138, ../sass/search/_search.scss */ - .search-holder .search .load-more-button { - margin-top: 5px; - position: relative; - left: 25%; - width: 50%; - height: 20px; - line-height: 11px; - font-size: 0.7em; } + /* line 94, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .view-control { + color: #0099cc; } + /* line 97, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { + color: #fff; } + /* line 104, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { + background: #404040; + color: #cccccc; } + /* line 107, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { + display: block; } + /* line 110, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { + color: #33ccff; } + /* line 118, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon { + position: relative; } + /* line 120, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading { + pointer-events: none; + margin-left: 6px; } + /* line 124, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .title-label { + font-style: italic; + font-size: .9em; + opacity: 0.5; + margin-left: 26px; + line-height: 24px; } + /* line 134, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon.loading .wait-spinner { + margin-left: 6px; } + /* line 139, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-icon:not(.loading) { + cursor: pointer; } + /* line 144, ../sass/search/_search.scss */ + .search-holder .search .search-scroll .load-more-button { + margin-top: 5px; + margin-bottom: 5px; + position: relative; + left: 25%; + width: 50%; + height: 20px; + line-height: 11px; + font-size: 0.7em; } diff --git a/platform/commonUI/general/res/sass/search/_layout.scss b/platform/commonUI/general/res/sass/search/_layout.scss index 8bf2d05e1f..d5653859e2 100644 --- a/platform/commonUI/general/res/sass/search/_layout.scss +++ b/platform/commonUI/general/res/sass/search/_layout.scss @@ -39,6 +39,8 @@ .pane { &.treeview.left { + //overflow: auto; // This one works! (But the bar goes too high) + .tree-holder { // Want tree holder to start right below the search bar top: 0; @@ -46,7 +48,12 @@ // Make tree invisible when there are things in search results &.search-in-use { //display: none; + } } + + .search-holder { + //overflow: auto; + } } } \ 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 59361e4a72..0ec84d1416 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -26,10 +26,12 @@ $rightPadding: 5px; //position: relative; - overflow-y: auto; // This should make it scroll, but isn't wokring :( + //overflow-y: auto; // This should make it scroll, but isn't wokring :( padding-right: $rightPadding; .search { + //height: auto; + //overflow: auto; .search-input { // Align with the top of the divider bar, below create button @@ -37,117 +39,126 @@ width: 100%; } - .load-icon { - position: relative; - &.loading { - pointer-events: none; - margin-left: $leftMargin; - - .title-label { - // Text styling - font-style: italic; - font-size: .9em; - opacity: 0.5; - - // Text positioning - margin-left: $iconWidth + $leftMargin; - line-height: 24px; - } - .wait-spinner { - margin-left: $leftMargin; - } - } + .search-scroll { + height: 100%; + overflow: auto; + + .results { + // Spacing away from the search input + margin-top: 10px; - &:not(.loading) { - cursor: pointer; - } - } + .search-result-item { + // Include transitions (for the highlights) + @include single-transition(background-color, 0.25s); - .results { - // Spacing away from the search input - margin-top: 10px; + // Space the results from each other + margin-bottom: 2px; - .search-result-item { - // Include transitions (for the highlights) - @include single-transition(background-color, 0.25s); - - // Space the results from each other - margin-bottom: 2px; - - // Make the highlights the right color and shape. - // Attempting to match the style in the tree, but we - // while having these be compact. - border-radius: 2px; - padding-top: 4px; - padding-bottom: 2px; - - .label { - // Give some padding away from the left side - margin-left: $leftMargin; - - .title-label { - display: inline-block; - position: absolute; + // Make the highlights the right color and shape. + // Attempting to match the style in the tree, but + // while having these be compact. + border-radius: 2px; + padding-top: 4px; + padding-bottom: 2px; + .label { // Give some padding away from the left side - left: $leftMargin + 3px + $iconWidth; - // and the right side - right: $rightPadding; + margin-left: $leftMargin; - // Size and position the text - font-size: .8em; - line-height: 17px; + .title-label { + display: inline-block; + position: absolute; - // Hide overflow text - width: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - // Change styling when it's selected - &.selected { - $c: #fff; - background: $colorKeySelectedBg; - color: $c; - .view-control { - color: $colorItemTreeIcon; - } - .label .type-icon { - color: #fff; - } - } - - // Change styling when it's being hovered over - &:not(.selected) { - &:hover { - background: lighten($colorBodyBg, 5%); - color: lighten($colorBodyFg, 20%); - .context-trigger { - display: block; + // Give some padding away from the left side + left: $leftMargin + 3px + $iconWidth; + // and the right side + right: $rightPadding; + + // Size and position the text + font-size: .8em; + line-height: 17px; + + // Hide overflow text + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .icon { - color: $colorItemTreeIconHover; + } + + // Change styling when it's selected + &.selected { + $c: #fff; + background: $colorKeySelectedBg; + color: $c; + .view-control { + color: $colorItemTreeIcon; + } + .label .type-icon { + color: #fff; + } + } + + // Change styling when it's being hovered over + &:not(.selected) { + &:hover { + background: lighten($colorBodyBg, 5%); + color: lighten($colorBodyFg, 20%); + .context-trigger { + display: block; + } + .icon { + color: $colorItemTreeIconHover; + } } } } } - } - .load-more-button { - // Space away form the results list - margin-top: 5px; + .load-icon { + position: relative; + &.loading { + pointer-events: none; + margin-left: $leftMargin; - // Center it - position: relative; - left: 25%; - width: 50%; + .title-label { + // Text styling + font-style: italic; + font-size: .9em; + opacity: 0.5; - // Make smallish button - height: 20px; - line-height: 11px; - font-size: 0.7em; + // Text positioning + margin-left: $iconWidth + $leftMargin; + line-height: 24px; + } + .wait-spinner { + margin-left: $leftMargin; + } + } + + &:not(.loading) { + cursor: pointer; + } + } + + .load-more-button { + // Space away form the results list + margin-top: 5px; + margin-bottom: 5px; + + // Center it + position: relative; + left: 25%; + width: 50%; + + // Make smallish button + height: 20px; + line-height: 11px; + font-size: 0.7em; + } + + // temp + //margin-bottom: 30px; } } } \ No newline at end of file diff --git a/platform/features/search/res/templates/search.html b/platform/features/search/res/templates/search.html index 75c580da63..977a3619f8 100644 --- a/platform/features/search/res/templates/search.html +++ b/platform/features/search/res/templates/search.html @@ -19,7 +19,7 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
@@ -28,30 +28,38 @@ type="text" value="" ng-keyup="controller.search('searchbarinput')" /> +
- -
- - + +
+ + +
+ + +
+ + +
+ + Loading... +
+ + +
+ +
+
- - -
- - Loading... -
- - -
- -
- \ No newline at end of file +
\ No newline at end of file