From 2e767c94c41ef7be28254ccbf09c10e8d7dcc120 Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 13:19:25 -0700 Subject: [PATCH] [Search] Update load-more, add check-all Make the 'Load more' button work with the new filtered results. Added 'ALL' to the top of the search menu which allows the user to toggle all of the filtering options easily. --- platform/commonUI/general/res/css/tree.css | 53 +++++++++++-------- .../general/res/sass/search/_search.scss | 13 ++++- platform/search/res/templates/search.html | 35 +++++++++--- .../src/controllers/SearchController.js | 49 ++++++++++++++--- 4 files changed, 112 insertions(+), 38 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 25f1f23261..359b933be8 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -356,12 +356,19 @@ ul.tree { .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; } - /* line 160, ../sass/search/_search.scss */ + margin-right: 0; + padding-right: 3px; } + /* line 163, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { - color: white; - padding-left: 3px; } - /* line 173, ../sass/search/_search.scss */ + color: white; } + /* line 171, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { + font-weight: bold; + background-color: gray; } + /* line 175, ../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 184, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -371,18 +378,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 186, ../sass/search/_search.scss */ + /* line 197, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 189, ../sass/search/_search.scss */ + /* line 200, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 194, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 202, ../sass/search/_search.scss */ + /* line 213, ../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; @@ -392,10 +399,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 216, ../sass/search/_search.scss */ + /* line 227, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 220, ../sass/search/_search.scss */ + /* line 231, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -407,47 +414,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 242, ../sass/search/_search.scss */ + /* line 253, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 246, ../sass/search/_search.scss */ + /* line 257, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 249, ../sass/search/_search.scss */ + /* line 260, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 256, ../sass/search/_search.scss */ + /* line 267, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 259, ../sass/search/_search.scss */ + /* line 270, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 262, ../sass/search/_search.scss */ + /* line 273, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 270, ../sass/search/_search.scss */ + /* line 281, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 272, ../sass/search/_search.scss */ + /* line 283, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 276, ../sass/search/_search.scss */ + /* line 287, ../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 286, ../sass/search/_search.scss */ + /* line 297, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 291, ../sass/search/_search.scss */ + /* line 302, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 296, ../sass/search/_search.scss */ + /* line 307, ../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 b77a4b78e5..b0a58389ff 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -155,16 +155,27 @@ // from label.checkbox.custom padding-left: 0; margin-right: 0; + + // Spacing with labels + padding-right: 3px; } .search-menu-glyph { color: white; - padding-left: 3px; } &:hover { // Do nothing } + + &.special { + font-weight: bold; + background-color: lighten($colorBodyBg, 30%); + + .search-menu-label { + font-size: 1.1em; + } + } } } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 424c14185e..081331ccdd 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -46,23 +46,42 @@ - - + v - +
+
+
    + +
  • + + + + + ALL + + +
    • + +
  • @@ -70,11 +89,15 @@ {{ type.glyph }} - {{ type.name }} + + {{ type.name }} +
+
+
diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index abefccee41..b9fc098837 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -95,13 +95,13 @@ define(function () { // On initialization, fill the scope's types with type keys types.forEach(function (type) { - // We only want some types: the ones that have keys and - // descriptions are probably human user usable types - if (type.key && type.description) { + // We only want some types, the ones that are probably human readable + if (type.key && type.name) { $scope.types.push(type); $scope.ngModel.checked[type.key] = true; } }); + $scope.ngModel.checkAll = true; // Re-filter the results when the checked type options change $scope.$watch("$scope.ngModel.checked", function () { @@ -128,9 +128,21 @@ define(function () { }, /** - * Checks to see if there are more search results to display. + * Checks to see if there are more search results to display. If the answer + * is unclear, this function will err on there being more results. */ areMore: function () { + var i; + + // Check to see if any of the not displayed results are of an allowed type + for (i = numResults; i < fullResults.hits.length; i += 1) { + if ($scope.ngModel.checked[fullResults.hits[i].object.getModel().type.key]) { + return true; + } + } + + // If none of the ones at hand are correct, there still may be more if we + // re-search with a larger maxResults return numResults < fullResults.total; }, @@ -145,7 +157,7 @@ define(function () { // Resend the query if we are out of items to display, but there are more to get search(numResults); } else { - $scope.results = fullResults.hits.slice(0, numResults); + $scope.results = filter(fullResults.hits);//fullResults.hits.slice(0, numResults); } }, @@ -168,10 +180,31 @@ define(function () { }, /** - * Opens a menu for more search options. + * Re-filters the search restuls. Called when ngModel.checked changes. */ - menu: function () { - console.log('open menu'); + updateOptions: function () { + var type; + + // Update all-checked status + $scope.ngModel.checkAll = true; + for (type in $scope.ngModel.checked) { + if (!$scope.ngModel.checked[type]) { + $scope.ngModel.checkAll = false; + } + } + + // Re-filter results + $scope.results = filter(fullResults.hits); + }, + + /** + * Resets options. + */ + checkAll: function () { + var type; + for (type in $scope.ngModel.checked) { + $scope.ngModel.checked[type] = $scope.ngModel.checkAll; + } } }; }