ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-25 05:20:10 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Search] Selecting results works

Browse Source 
Can now click on search results. The view will
be updated, as well as the selected object
being higlighted.
This commit is contained in:
shale 2015-07-23 10:50:00 -07:00
parent 8c08f7b93e
commit c65a278fcf
6 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/browse/res/templates/browse.html
View File

@ -30,7 +30,8 @@
</mct-representation> </mct-representation>
<div class='search-holder'> <div class='search-holder'>
<mct-include key="'search'" <mct-include key="'search'"
mct-object="domainObject"> mct-object="domainObject"
ng-model="treeModel">
</mct-include> </mct-include>
</div> </div>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>

19
platform/commonUI/general/res/css/tree.css
View File

@ -284,26 +284,35 @@ ul.tree {
/* line 40, ../sass/search/_search.scss */ /* line 40, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item { .search-holder .search .results .search-result-item {
margin-bottom: 5px; margin-bottom: 5px;
background: #005177;
border-radius: 2px; border-radius: 2px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 1px; } padding-bottom: 1px; }
/* line 50, ../sass/search/_search.scss */ /* line 49, ../sass/search/_search.scss */
.search-holder .search .results .search-result-item .label { .search-holder .search .results .search-result-item .label {
margin-left: 6px; } 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 { .search-holder .search .results .search-result-item .label .title-label {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: auto;
left: 29px; left: 29px;
right: 0; right: 0;
font-size: .8em; font-size: .8em;
line-height: 17px; line-height: 17px;
width: auto;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } 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 { .search-holder .search .load-more-button {
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;

17
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -42,7 +42,6 @@
margin-bottom: 5px; margin-bottom: 5px;
// Make the highlights the right color and shape // Make the highlights the right color and shape
background: $colorKeySelectedBg; // Later make this apply to only certain ones
border-radius: 2px; border-radius: 2px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 1px; padding-bottom: 1px;
@ -61,7 +60,6 @@
position: absolute; position: absolute;
// Give some padding away from the left side // Give some padding away from the left side
width: auto;
left: $leftMargin + 3px + $iconWidth; left: $leftMargin + 3px + $iconWidth;
right: 0; right: 0;
@ -70,12 +68,25 @@
line-height: 17px; line-height: 17px;
// Hide overflow text // Hide overflow text
// Only works when width is defined width: auto;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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;
}
}
} }
} }

28
platform/features/search/res/templates/search-item.html
View File

@ -20,16 +20,16 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span ng-controller="ToggleController as toggle"> <span ng-controller="SearchItemController as controller">
<div class="search-result-item" <div class="search-result-item"
ng-controller="SearchItemController as controller"> ng-class="{selected: controller.isSelected()}">
<mct-representation <mct-representation key="'label'"
key="'label'" mct-object="domainObject"
mct-object="domainObject" ng-model="ngModel"
ng-model="ngModel" ng-click="ngModel.selectedObject = domainObject">
ng-click="ngModel.selectedObject = domainObject"
>
</mct-representation> </mct-representation>
<!--span <!--span
class="search-result-item menus-to-left" class="search-result-item menus-to-left"
ng-class="{selected: controller.isSelected()}" ng-class="{selected: controller.isSelected()}"
@ -42,18 +42,6 @@
> >
{{toggle.isActive() ? "v" : ">"}} {{toggle.isActive() ? "v" : ">"}}
</span-> </span->
</span>
<span
class="tree-item-subtree"
ng-show="toggle.isActive()"
ng-if="model.composition !== undefined"
>
qwer
<!--mct-representation key="'subtree'"
ng-model="ngModel"
mct-object="treeNode.hasBeenExpanded() && domainObject">
</mct-representation->
</span--> </span-->
</div> </div>
</span> </span>

3
platform/features/search/res/templates/search.html
View File

@ -34,7 +34,8 @@
<div class="results"> <div class="results">
<mct-representation key="'search-item'" <mct-representation key="'search-item'"
ng-repeat="result in results" ng-repeat="result in results"
mct-object="result.object"> mct-object="result.object"
ng-model="ngModel">
</mct-representation> </mct-representation>
</div> </div>

18
platform/features/search/src/controllers/SearchItemController.js
View File

@ -22,16 +22,17 @@
/*global define*/ /*global define*/
/** /**
* Module defining SearchbarItemController. Based on TreeNodeController. * Module defining SearchItemController. Based on TreeNodeController.
* Created by shale on 07/22/2015. * Created by shale on 07/22/2015.
*/ */
define(function () { define(function () {
"use strict"; "use strict";
function SearchbarItemController($scope) { function SearchItemController($scope) {
var selectedObject = ($scope.ngModel || {}).selectedObject, var selectedObject = ($scope.ngModel || {}).selectedObject;//,
isSelected = false; //isSelected = false;
/*
// Consider the currently-navigated object and update // Consider the currently-navigated object and update
// parameters which support display. // parameters which support display.
function checkSelection() { function checkSelection() {
@ -76,17 +77,17 @@ define(function () {
} }
} }
} }
*/
// Callback for the selection updates; track the currently // Callback for the selection updates; track the currently
// navigated object and update display parameters as needed. // navigated object and update display parameters as needed.
function setSelection(object) { function setSelection(object) {
selectedObject = object; selectedObject = object;
checkSelection();
} }
// Listen for changes which will effect display parameters // Listen for changes which will effect display parameters
$scope.$watch("ngModel.selectedObject", setSelection); $scope.$watch("ngModel.selectedObject", setSelection);
$scope.$watch("domainObject", checkSelection); //$scope.$watch("domainObject", checkSelection);
return { return {
/** /**
@ -97,9 +98,10 @@ define(function () {
* @returns true if this should be highlighted * @returns true if this should be highlighted
*/ */
isSelected: function () { 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;
}); });