From c65a278fcf8c2b493024ce56bc6a0aa076eed19e Mon Sep 17 00:00:00 2001 From: shale Date: Thu, 23 Jul 2015 10:50:00 -0700 Subject: [PATCH] [Search] Selecting results works Can now click on search results. The view will be updated, as well as the selected object being higlighted. --- .../commonUI/browse/res/templates/browse.html | 3 +- platform/commonUI/general/res/css/tree.css | 19 +++++++++---- .../general/res/sass/search/_search.scss | 17 +++++++++-- .../search/res/templates/search-item.html | 28 ++++++------------- .../features/search/res/templates/search.html | 3 +- .../src/controllers/SearchItemController.js | 22 ++++++++------- 6 files changed, 52 insertions(+), 40 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 992e851bee..c897b4272d 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -30,7 +30,8 @@
+ mct-object="domainObject" + ng-model="treeModel">
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index d7e21b33b9..c9247b5d05 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -284,26 +284,35 @@ ul.tree { /* line 40, ../sass/search/_search.scss */ .search-holder .search .results .search-result-item { margin-bottom: 5px; - background: #005177; border-radius: 2px; padding-top: 2px; padding-bottom: 1px; } - /* line 50, ../sass/search/_search.scss */ + /* line 49, ../sass/search/_search.scss */ .search-holder .search .results .search-result-item .label { margin-left: 6px; } - /* line 59, ../sass/search/_search.scss */ + /* line 58, ../sass/search/_search.scss */ .search-holder .search .results .search-result-item .label .title-label { display: inline-block; position: absolute; - width: auto; left: 29px; right: 0; font-size: .8em; line-height: 17px; + width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 82, ../sass/search/_search.scss */ + /* line 79, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item.selected { + background: #005177; + color: #fff; } + /* line 83, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item.selected .view-control { + color: #0099cc; } + /* line 86, ../sass/search/_search.scss */ + .search-holder .search .results .search-result-item.selected .label .type-icon { + color: #fff; } + /* line 93, ../sass/search/_search.scss */ .search-holder .search .load-more-button { margin-top: 5px; position: relative; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index fa6dab7e10..a23443fb2e 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -42,7 +42,6 @@ margin-bottom: 5px; // Make the highlights the right color and shape - background: $colorKeySelectedBg; // Later make this apply to only certain ones border-radius: 2px; padding-top: 2px; padding-bottom: 1px; @@ -61,7 +60,6 @@ position: absolute; // Give some padding away from the left side - width: auto; left: $leftMargin + 3px + $iconWidth; right: 0; @@ -70,12 +68,25 @@ line-height: 17px; // Hide overflow text - // Only works when width is defined + 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; //$colorItemTreeIconHover; + } + } } } diff --git a/platform/features/search/res/templates/search-item.html b/platform/features/search/res/templates/search-item.html index 9640efc19c..e3285baef4 100644 --- a/platform/features/search/res/templates/search-item.html +++ b/platform/features/search/res/templates/search-item.html @@ -20,16 +20,16 @@ at runtime from the About dialog for additional information. --> - + +
- + ng-class="{selected: controller.isSelected()}"> + +
\ 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 932330da69..e359629757 100644 --- a/platform/features/search/res/templates/search.html +++ b/platform/features/search/res/templates/search.html @@ -34,7 +34,8 @@
+ mct-object="result.object" + ng-model="ngModel">
diff --git a/platform/features/search/src/controllers/SearchItemController.js b/platform/features/search/src/controllers/SearchItemController.js index 3d47384773..d3b88ee12c 100644 --- a/platform/features/search/src/controllers/SearchItemController.js +++ b/platform/features/search/src/controllers/SearchItemController.js @@ -22,16 +22,17 @@ /*global define*/ /** - * Module defining SearchbarItemController. Based on TreeNodeController. + * Module defining SearchItemController. Based on TreeNodeController. * Created by shale on 07/22/2015. */ define(function () { "use strict"; - function SearchbarItemController($scope) { - var selectedObject = ($scope.ngModel || {}).selectedObject, - isSelected = false; + function SearchItemController($scope) { + var selectedObject = ($scope.ngModel || {}).selectedObject;//, + //isSelected = false; + /* // Consider the currently-navigated object and update // parameters which support display. function checkSelection() { @@ -43,7 +44,7 @@ define(function () { navObject.getCapability('context'), nodePath, navPath; - + // Deselect; we will reselect below, iff we are // exactly at the end of the path. isSelected = false; @@ -76,17 +77,17 @@ define(function () { } } } - + */ + // Callback for the selection updates; track the currently // navigated object and update display parameters as needed. function setSelection(object) { selectedObject = object; - checkSelection(); } // Listen for changes which will effect display parameters $scope.$watch("ngModel.selectedObject", setSelection); - $scope.$watch("domainObject", checkSelection); + //$scope.$watch("domainObject", checkSelection); return { /** @@ -97,9 +98,10 @@ define(function () { * @returns true if this should be highlighted */ isSelected: function () { - return isSelected; + // If this object is the same as the model's selected object + return $scope.ngModel.selectedObject === $scope.domainObject; } }; } - return SearchbarItemController; + return SearchItemController; });