mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 13:43:09 +00:00
[Search] Selecting results works
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
parent
8c08f7b93e
commit
c65a278fcf
@ -30,7 +30,8 @@
|
||||
</mct-representation>
|
||||
<div class='search-holder'>
|
||||
<mct-include key="'search'"
|
||||
mct-object="domainObject">
|
||||
mct-object="domainObject"
|
||||
ng-model="treeModel">
|
||||
</mct-include>
|
||||
</div>
|
||||
<div class='holder tree-holder abs'>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,16 +20,16 @@
|
||||
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"
|
||||
ng-controller="SearchItemController as controller">
|
||||
<mct-representation
|
||||
key="'label'"
|
||||
mct-object="domainObject"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = domainObject"
|
||||
>
|
||||
ng-class="{selected: controller.isSelected()}">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="domainObject"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = domainObject">
|
||||
</mct-representation>
|
||||
|
||||
<!--span
|
||||
class="search-result-item menus-to-left"
|
||||
ng-class="{selected: controller.isSelected()}"
|
||||
@ -42,18 +42,6 @@
|
||||
>
|
||||
{{toggle.isActive() ? "v" : ">"}}
|
||||
</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-->
|
||||
</div>
|
||||
</span>
|
||||
@ -34,7 +34,8 @@
|
||||
<div class="results">
|
||||
<mct-representation key="'search-item'"
|
||||
ng-repeat="result in results"
|
||||
mct-object="result.object">
|
||||
mct-object="result.object"
|
||||
ng-model="ngModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user