From 5726dd0e0cab6ec9d261f80dd4164a20316300e7 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 15:11:17 -0700 Subject: [PATCH] [Search] Filter display Added display below the search bar of what search filters are currently active. Not yet correctly aligned wrt search results list. --- platform/commonUI/general/res/css/tree.css | 88 +++++++++++-------- .../general/res/sass/search/_search.scss | 27 ++++-- platform/search/res/templates/search.html | 15 +++- .../src/controllers/SearchController.js | 13 ++- 4 files changed, 98 insertions(+), 45 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 88a21665c2..011a07a6fe 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -279,9 +279,10 @@ ul.tree { /* line 36, ../sass/search/_search.scss */ .search-holder .search .search-bar { width: 100%; + height: 19px; margin-top: 4px; position: relative; } - /* line 45, ../sass/search/_search.scss */ + /* line 46, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input { position: relative; top: -4px; @@ -289,7 +290,7 @@ ul.tree { height: 19px; padding-right: 16px; padding-right: 28px; } - /* line 58, ../sass/search/_search.scss */ + /* line 59, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon { color: #737373; font-size: 12px; @@ -298,18 +299,18 @@ ul.tree { height: 0; margin-top: -19px; transition: visibility .15s, opacity .15s, color .2s; } - /* line 72, ../sass/search/_search.scss */ + /* line 73, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } - /* line 80, ../sass/search/_search.scss */ + /* line 81, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:focus + div.search-icon { visibility: hidden; opacity: 0; } - /* line 86, ../sass/search/_search.scss */ + /* line 87, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-input:hover + div.search-icon { color: #a6a6a6; } - /* line 90, ../sass/search/_search.scss */ + /* line 91, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -325,11 +326,11 @@ ul.tree { transition: visibility .15s, opacity .15s; right: 16px; padding-right: 2px; } - /* line 110, ../sass/search/_search.scss */ + /* line 111, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 120, ../sass/search/_search.scss */ + /* line 121, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -341,41 +342,41 @@ ul.tree { right: 0px; top: -3px; transition: color .2s; } - /* line 136, ../sass/search/_search.scss */ + /* line 137, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 141, ../sass/search/_search.scss */ + /* line 142, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 146, ../sass/search/_search.scss */ + /* line 147, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 149, ../sass/search/_search.scss */ + /* line 150, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; font-size: 0.8em; } - /* line 158, ../sass/search/_search.scss */ + /* line 159, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 3px; } - /* line 171, ../sass/search/_search.scss */ + /* line 172, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; } - /* line 179, ../sass/search/_search.scss */ + /* line 176, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; - background-color: #737373; } - /* line 183, ../sass/search/_search.scss */ + background-color: gray; } + /* line 180, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 192, ../sass/search/_search.scss */ + /* line 189, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -385,18 +386,33 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 205, ../sass/search/_search.scss */ + /* line 202, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 208, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 213, ../sass/search/_search.scss */ + /* line 210, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display { + font-size: .6em; + height: auto; } + /* line 214, ../sass/search/_search.scss */ + .search-holder .search .active-filter-display .clear-filters-icon { + position: absolute; + right: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 9px; + padding-left: 4px; + cursor: pointer; + color: #737373; + font-size: 6px; } + /* line 230, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 221, ../sass/search/_search.scss */ + /* line 238, ../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; @@ -406,10 +422,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 235, ../sass/search/_search.scss */ + /* line 252, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 239, ../sass/search/_search.scss */ + /* line 256, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -421,47 +437,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 261, ../sass/search/_search.scss */ + /* line 278, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 265, ../sass/search/_search.scss */ + /* line 282, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 268, ../sass/search/_search.scss */ + /* line 285, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 275, ../sass/search/_search.scss */ + /* line 292, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 278, ../sass/search/_search.scss */ + /* line 295, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 281, ../sass/search/_search.scss */ + /* line 298, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 289, ../sass/search/_search.scss */ + /* line 306, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 291, ../sass/search/_search.scss */ + /* line 308, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 295, ../sass/search/_search.scss */ + /* line 312, ../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 305, ../sass/search/_search.scss */ + /* line 322, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 310, ../sass/search/_search.scss */ + /* line 327, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 315, ../sass/search/_search.scss */ + /* line 332, ../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 8ba5f1f839..e2eeb4e54a 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -38,6 +38,7 @@ $textInputHeight: 19px; // This is equal to the default value, 19px width: 100%; + height: $textInputHeight; margin-top: $heightAdjust; position: relative; @@ -172,13 +173,9 @@ color: white; } - &:hover { - // Do nothing - } - &.special { font-weight: bold; - background-color: lighten($colorBodyBg, 25%); + background-color: lighten($colorBodyBg, 30%); .search-menu-label { font-size: 1.1em; @@ -210,6 +207,26 @@ } } + .active-filter-display { + font-size: .6em; + height: auto; + + .clear-filters-icon { + position: absolute; + right: 0px; + + padding-top: 2px; + padding-bottom: 2px; + padding-right: $rightPadding + 4px; + padding-left: 4px; + + cursor: pointer; + + color: $colorItemFg; + font-size: 6px; + } + } + .search-scroll { // Spacing away from the search input top: 25px; diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 26389e70be..754905dc59 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -61,7 +61,8 @@ - - + +
+ Filtered by: {{ filtersString }} + + x + +
+
diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index b9fc098837..e4a0170924 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -41,6 +41,7 @@ define(function () { // $scope.ngModel.input, $scope.ngModel.search, $scope.ngModel.checked $scope.types = []; $scope.ngModel.checked = {}; + $scope.filtersString = ""; function filter(hits) { var newResults = [], @@ -185,13 +186,23 @@ define(function () { updateOptions: function () { var type; - // Update all-checked status + // Update all-checked status and the filters string $scope.ngModel.checkAll = true; + $scope.filtersString = ''; for (type in $scope.ngModel.checked) { if (!$scope.ngModel.checked[type]) { $scope.ngModel.checkAll = false; + } else { + if ($scope.filtersString === '') { + $scope.filtersString += type; + } else { + $scope.filtersString += ', ' + type; + } } } + if ($scope.ngModel.checkAll === true) { + $scope.filtersString = ''; + } // Re-filter results $scope.results = filter(fullResults.hits);