diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index dc6b7fa667..4f72d60d30 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -280,15 +280,41 @@ ul.tree { .search-holder .search .search-bar { width: 100%; margin-top: 4px; - position: relative; } + position: relative; + /* + // Make bubble caret thing + .search-menu-holder:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #CCC; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; + } + + .search-menu-holder:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid white; + border-left: 6px solid transparent; + content: ''; + } + */ } /* line 45, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; top: -4px; width: 100%; height: 19px; - padding-right: 16px; } - /* line 55, ../sass/search/_search.scss */ + padding-right: 16px; + padding-right: 28px; } + /* line 58, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon { color: #737373; font-size: 12px; @@ -297,15 +323,15 @@ ul.tree { height: 0; margin-top: -19px; transition: visibility .15s, opacity .15s; } - /* line 70, ../sass/search/_search.scss */ + /* line 73, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 77, ../sass/search/_search.scss */ + /* line 80, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 83, ../sass/search/_search.scss */ + /* line 86, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -318,17 +344,47 @@ ul.tree { top: -3px; visibility: hidden; opacity: 0; - transition: visibility .15s, opacity .15s; } - /* line 103, ../sass/search/_search.scss */ + transition: visibility .15s, opacity .15s; + right: 16px; + padding-right: 2px; } + /* line 106, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 110, ../sass/search/_search.scss */ + /* line 116, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon { + position: absolute; + display: block; + cursor: pointer; + color: #737373; + font-size: 6px; + padding: 6px; + padding-left: 4px; + right: 0px; + top: -3px; } + /* line 131, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder { + float: right; + margin-top: 12px; + left: -15px; } + /* line 140, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu ul li { + padding: 0; + padding-left: 6px; + padding-right: 6px; + font-size: 0.9em; } + /* line 177, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { + visibility: visible; } + /* line 180, ../sass/search/_search.scss */ + .search-holder .search .search-bar div.search-menu-holder:hover { + visibility: visible; } + /* line 185, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 118, ../sass/search/_search.scss */ + /* line 193, ../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; @@ -338,10 +394,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 132, ../sass/search/_search.scss */ + /* line 207, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 136, ../sass/search/_search.scss */ + /* line 211, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -353,47 +409,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 158, ../sass/search/_search.scss */ + /* line 233, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 162, ../sass/search/_search.scss */ + /* line 237, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 165, ../sass/search/_search.scss */ + /* line 240, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 172, ../sass/search/_search.scss */ + /* line 247, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 175, ../sass/search/_search.scss */ + /* line 250, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 178, ../sass/search/_search.scss */ + /* line 253, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 186, ../sass/search/_search.scss */ + /* line 261, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 188, ../sass/search/_search.scss */ + /* line 263, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 192, ../sass/search/_search.scss */ + /* line 267, ../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 202, ../sass/search/_search.scss */ + /* line 277, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 207, ../sass/search/_search.scss */ + /* line 282, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 212, ../sass/search/_search.scss */ + /* line 287, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 3b38c16ee3..8b0eb471e9 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -50,6 +50,9 @@ // For clear button padding-right: 16px; + + // Modifications for existence of menu icon: + padding-right: 16px + 12px; } .search-icon { @@ -104,6 +107,78 @@ visibility: visible; opacity: 1; } + + // Modifications for existence of menu icon: + right: 16px; + padding-right: 2px; + } + + .menu-icon { + position: absolute; + display: block; + + cursor: pointer; + + color: $colorItemFg; + font-size: 6px; + padding: 6px; + padding-left: 4px; + + right: 0px; + top: -3px; + } + + .search-menu-holder { + //visibility: hidden; + + float: right; + margin-top: 12px;//$textInputHeight; + left: -15px; + + .search-menu { + + ul li { + padding: 0; + padding-left: 6px; + padding-right: 6px; + + font-size: 0.9em; + } + } + } + + /* + // Make bubble caret thing + .search-menu-holder:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #CCC; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; + } + + .search-menu-holder:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid white; + border-left: 6px solid transparent; + content: ''; + } + */ + + // Hovering reveals menu + .menu-icon:hover + div.search-menu-holder { + visibility: visible; + } + div.search-menu-holder:hover { + visibility: visible; } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 73c4519781..e81b638726 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -45,6 +45,24 @@ x + + + + v + + + +
+ diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 96833ca088..4e129cd8f7 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -124,8 +124,17 @@ define(function () { * Clears the input text. */ clear: function () { + // Clear input field $scope.ngModel.input = ''; - $scope.ngModel.search = false; + // Call search to clear the results list too + search(); + }, + + /** + * Opens a menu for more search options. + */ + menu: function () { + console.log('open menu'); } }; }