From b26aa3cab793b7872a1495549538cb44cdd15eef Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 11:45:46 -0700 Subject: [PATCH] [Search] Filter search Filtering search using the search menu works. Load more does not work with this yet. --- platform/commonUI/general/res/css/tree.css | 53 ++++++++++--------- .../general/res/sass/search/_search.scss | 16 ++++-- platform/search/res/templates/search.html | 4 +- .../src/controllers/SearchController.js | 48 ++++++++++------- 4 files changed, 71 insertions(+), 50 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 29855117aa..25f1f23261 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -347,18 +347,21 @@ ul.tree { border-top: 0; } /* line 141, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { - padding: 0px 4px; + padding-top: 0; + padding-bottom: 0; + padding-left: 4px; + padding-right: 6px; font-size: 0.8em; } - /* line 146, ../sass/search/_search.scss */ + /* line 150, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { - margin-top: 4px; + margin-top: 0.3em; padding-left: 0; margin-right: 0; } - /* line 156, ../sass/search/_search.scss */ - .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-icon { + /* line 160, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; - padding-left: 2px; } - /* line 165, ../sass/search/_search.scss */ + padding-left: 3px; } + /* line 173, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -368,18 +371,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 178, ../sass/search/_search.scss */ + /* line 186, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 181, ../sass/search/_search.scss */ + /* line 189, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 186, ../sass/search/_search.scss */ + /* line 194, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 194, ../sass/search/_search.scss */ + /* line 202, ../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; @@ -389,10 +392,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 208, ../sass/search/_search.scss */ + /* line 216, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 212, ../sass/search/_search.scss */ + /* line 220, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -404,47 +407,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 234, ../sass/search/_search.scss */ + /* line 242, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 238, ../sass/search/_search.scss */ + /* line 246, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 241, ../sass/search/_search.scss */ + /* line 249, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 248, ../sass/search/_search.scss */ + /* line 256, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 251, ../sass/search/_search.scss */ + /* line 259, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 254, ../sass/search/_search.scss */ + /* line 262, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 262, ../sass/search/_search.scss */ + /* line 270, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 264, ../sass/search/_search.scss */ + /* line 272, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 268, ../sass/search/_search.scss */ + /* line 276, ../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 278, ../sass/search/_search.scss */ + /* line 286, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 283, ../sass/search/_search.scss */ + /* line 291, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 288, ../sass/search/_search.scss */ + /* line 296, ../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 bf9cee8eb9..b77a4b78e5 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -140,12 +140,16 @@ .search-menu-item { // Padding only on sides - padding: 0px 4px; + padding-top: 0; + padding-bottom: 0; + padding-left: 4px; + padding-right: 6px; + font-size: 0.8em; .search-menu-checkbox { // Vertically center - margin-top: 4px; + margin-top: 0.3em; // Get rid of weird checkbox positioning // from label.checkbox.custom @@ -153,9 +157,13 @@ margin-right: 0; } - .search-menu-icon { + .search-menu-glyph { color: white; - padding-left: 2px; + padding-left: 3px; + } + + &:hover { + // Do nothing } } } diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index cb879729d5..424c14185e 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -62,11 +62,11 @@ - + {{ type.glyph }} diff --git a/platform/search/src/controllers/SearchController.js b/platform/search/src/controllers/SearchController.js index 9a34809b56..abefccee41 100644 --- a/platform/search/src/controllers/SearchController.js +++ b/platform/search/src/controllers/SearchController.js @@ -36,7 +36,26 @@ define(function () { loading = false, fullResults = {hits: []}; - console.log('types', types); + // Scope variables are + // $scope.results, $scope.types + // $scope.ngModel.input, $scope.ngModel.search, $scope.ngModel.checked + $scope.types = []; + $scope.ngModel.checked = {}; + + function filter(hits) { + var newResults = [], + i = 0; + + while (newResults.length < numResults && i < hits.length) { + // If this is of an acceptable type, add it to the list + if ($scope.ngModel.checked[hits[i].object.getModel().type] === true) { + newResults.push(fullResults.hits[i]); + } + i += 1; + } + + return newResults; + } function search(maxResults) { var inputText = $scope.ngModel.input; @@ -60,7 +79,8 @@ define(function () { // Send the query searchService.query(inputText, maxResults).then(function (result) { fullResults = result; - $scope.results = result.hits.slice(0, numResults); + //$scope.results = result.hits.slice(0, numResults); + $scope.results = filter(result.hits); // Update whether the file tree should be displayed // Reveal tree only when finishing search @@ -73,31 +93,21 @@ define(function () { }); } - function filter(types) { - var newResults = [], - i = 0; - - while (newResults.length < numResults && newResults.length < fullResults.hits.length) { - // If this is of an acceptable type, add it to the list - if (types.indexOf(fullResults.hits[i].getModel().type) !== -1) { - newResults.push(fullResults.hits[i]); - } - i += 1; - } - - $scope.results = newResults; - } - - $scope.types = []; // 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 + // descriptions are probably human user usable types if (type.key && type.description) { $scope.types.push(type); + $scope.ngModel.checked[type.key] = true; } }); + // Re-filter the results when the checked type options change + $scope.$watch("$scope.ngModel.checked", function () { + $scope.results = filter(fullResults.hits); + }); + return { /** * Search the filetree.