diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 51a3d70880..bd7d170e32 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -271,28 +271,37 @@ ul.tree { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 27, ../sass/search/_search.scss */ -span.search-holder .searchbar { +/* line 28, ../sass/search/_search.scss */ +.search-holder .searchbar { width: 100%; margin-top: 20px; } -/* line 32, ../sass/search/_search.scss */ -span.search-holder .results { +/* line 33, ../sass/search/_search.scss */ +.search-holder .results { margin-top: 10px; } - /* line 35, ../sass/search/_search.scss */ - span.search-holder .results .search-result-item { - margin-bottom: 5px; } - /* line 45, ../sass/search/_search.scss */ - span.search-holder .results .search-result-item .label .title-label { - display: inline-block; - position: absolute; - width: auto; - left: 20px; - right: 0; - font-size: .8em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } -/* line 63, ../sass/search/_search.scss */ -span.search-holder .load-more-button { + /* line 36, ../sass/search/_search.scss */ + .search-holder .results .search-result-item { + margin-bottom: 5px; + background: #005177; + border-radius: 2px; + padding-top: 2px; + padding-bottom: 1px; } + /* line 43, ../sass/search/_search.scss */ + .search-holder .results .search-result-item .label { + left: 15px; + margin-left: 8px; } + /* line 53, ../sass/search/_search.scss */ + .search-holder .results .search-result-item .label .title-label { + display: inline-block; + position: absolute; + width: auto; + left: 31px; + right: 0; + font-size: .8em; + line-height: 17px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } +/* line 72, ../sass/search/_search.scss */ +.search-holder .load-more-button { width: 100%; margin-top: 5px; } diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 9a99038395..a4623556b5 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -20,9 +20,10 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -span.search-holder { - $iconwidth: 20px; +.search-holder { + $iconWidth: 20px; //$iconheight: 17px; + $leftMargin: 8px; .searchbar { width: 100%; @@ -34,8 +35,15 @@ span.search-holder { .search-result-item { margin-bottom: 5px; + background: $colorKeySelectedBg; // Later make this apply to only certain ones + border-radius: 2px; + padding-top: 2px; + padding-bottom: 1px; .label { + //position: absolute; + left: 15px; + margin-left: $leftMargin; .type-icon { .icon { @@ -47,10 +55,11 @@ span.search-holder { position: absolute; width: auto; - left: $iconwidth; + left: $leftMargin + 3px + $iconWidth; right: 0; font-size: .8em; + line-height: 17px; overflow: hidden; text-overflow: ellipsis; diff --git a/platform/features/search/bundle.json b/platform/features/search/bundle.json index 0158a3534f..c7fe967012 100644 --- a/platform/features/search/bundle.json +++ b/platform/features/search/bundle.json @@ -7,6 +7,16 @@ "key": "SearchbarController", "implementation": "controllers/SearchbarController.js", "depends": [ "$scope", "$timeout", "searchService" ] + }, + { + "key": "SearchbarItemController", + "implementation": "controllers/SearchbarItemController.js", + "depends": [ "$scope" ] + }, + { + "key": "ToggleController", + "implementation": "controllers/ToggleController.js", + "depends": [ ] } ], "templates": [ diff --git a/platform/features/search/res/templates/searchbar-item.html b/platform/features/search/res/templates/searchbar-item.html index b626f8ae41..9ef432e35a 100644 --- a/platform/features/search/res/templates/searchbar-item.html +++ b/platform/features/search/res/templates/searchbar-item.html @@ -20,36 +20,40 @@ at runtime from the About dialog for additional information. --> -
- - - - -
\ No newline at end of file + + + \ No newline at end of file diff --git a/platform/features/search/src/controllers/SearchbarItemController.js b/platform/features/search/src/controllers/SearchbarItemController.js new file mode 100644 index 0000000000..3d47384773 --- /dev/null +++ b/platform/features/search/src/controllers/SearchbarItemController.js @@ -0,0 +1,105 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define*/ + +/** + * Module defining SearchbarItemController. Based on TreeNodeController. + * Created by shale on 07/22/2015. + */ +define(function () { + "use strict"; + + function SearchbarItemController($scope) { + var selectedObject = ($scope.ngModel || {}).selectedObject, + isSelected = false; + + // Consider the currently-navigated object and update + // parameters which support display. + function checkSelection() { + var nodeObject = $scope.domainObject, + navObject = selectedObject, + nodeContext = nodeObject && + nodeObject.getCapability('context'), + navContext = navObject && + navObject.getCapability('context'), + nodePath, + navPath; + + // Deselect; we will reselect below, iff we are + // exactly at the end of the path. + isSelected = false; + + // Expand if necessary (if the navigated object will + // be in this node's subtree) + if (nodeContext && navContext) { + // Get the paths as arrays of identifiers + nodePath = nodeContext.getPath().map(getId); + navPath = navContext.getPath().map(getId); + + // Check to see if the node's path lies entirely + // within the navigation path; otherwise, navigation + // has happened in some other subtree. + if (navPath.length >= nodePath.length && + checkPath(nodePath, navPath)) { + + // nodePath is along the navPath; if it's + // at the end of the path, highlight; + // otherwise, expand. + if (nodePath.length === navPath.length) { + isSelected = true; + } else { // node path is shorter: Expand! + if ($scope.toggle) { + $scope.toggle.setState(true); + } + trackExpansion(); + } + + } + } + } + + // 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); + + return { + /** + * Check whether or not the domain object represented by + * this tree node should be highlighted. + * An object will be highlighted if it matches + * ngModel.selectedObject + * @returns true if this should be highlighted + */ + isSelected: function () { + return isSelected; + } + }; + } + return SearchbarItemController; +}); diff --git a/platform/features/search/src/controllers/ToggleController.js b/platform/features/search/src/controllers/ToggleController.js new file mode 100644 index 0000000000..0d3bd664ca --- /dev/null +++ b/platform/features/search/src/controllers/ToggleController.js @@ -0,0 +1,66 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise*/ + +define( + [], + function () { + "use strict"; + + /** + * A ToggleController is used to activate/deactivate things. + * A common usage is for "twistie" + * + * @constructor + */ + function ToggleController() { + var state = false; + + return { + /** + * Get the current state of the toggle. + * @return {boolean} true if active + */ + isActive: function () { + return state; + }, + /** + * Set a new state for the toggle. + * @return {boolean} true to activate + */ + setState: function (newState) { + state = newState; + }, + /** + * Toggle the current state; activate if it is inactive, + * deactivate if it is active. + */ + toggle: function () { + state = !state; + } + }; + + } + + return ToggleController; + } +); \ No newline at end of file