diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 359b933be8..7fff207df2 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -336,39 +336,43 @@ ul.tree { padding: 6px; padding-left: 4px; right: 0px; - top: -3px; } - /* line 131, ../sass/search/_search.scss */ + top: -3px; + transition: color .2s; } + /* line 132, ../sass/search/_search.scss */ + .search-holder .search .search-bar .menu-icon:hover { + color: #a6a6a6; } + /* line 137, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 138, ../sass/search/_search.scss */ + /* line 142, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 141, ../sass/search/_search.scss */ + /* line 145, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; font-size: 0.8em; } - /* line 150, ../sass/search/_search.scss */ + /* line 154, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 3px; } - /* line 163, ../sass/search/_search.scss */ + /* line 167, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; } - /* line 171, ../sass/search/_search.scss */ + /* line 175, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; background-color: gray; } - /* line 175, ../sass/search/_search.scss */ + /* line 179, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 184, ../sass/search/_search.scss */ + /* line 188, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -378,18 +382,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 197, ../sass/search/_search.scss */ + /* line 201, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 200, ../sass/search/_search.scss */ + /* line 204, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 205, ../sass/search/_search.scss */ + /* line 209, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 213, ../sass/search/_search.scss */ + /* line 217, ../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; @@ -399,10 +403,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 227, ../sass/search/_search.scss */ + /* line 231, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 231, ../sass/search/_search.scss */ + /* line 235, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -414,47 +418,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 253, ../sass/search/_search.scss */ + /* line 257, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 257, ../sass/search/_search.scss */ + /* line 261, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 260, ../sass/search/_search.scss */ + /* line 264, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 267, ../sass/search/_search.scss */ + /* line 271, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 270, ../sass/search/_search.scss */ + /* line 274, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 273, ../sass/search/_search.scss */ + /* line 277, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 281, ../sass/search/_search.scss */ + /* line 285, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 283, ../sass/search/_search.scss */ + /* line 287, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 287, ../sass/search/_search.scss */ + /* line 291, ../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 297, ../sass/search/_search.scss */ + /* line 301, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 302, ../sass/search/_search.scss */ + /* line 306, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 307, ../sass/search/_search.scss */ + /* line 311, ../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 b0a58389ff..1f01f3a613 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -126,11 +126,15 @@ right: 0px; top: -3px; + + transition: color .2s; + + &:hover { + color: lighten($colorItemFg, 20%); + } } .search-menu-holder { - //visibility: hidden; - float: right; margin-top: $textInputHeight - 2px; left: -25px; diff --git a/platform/search/bundle.json b/platform/search/bundle.json index 7d87f0312d..236f7658f0 100644 --- a/platform/search/bundle.json +++ b/platform/search/bundle.json @@ -19,6 +19,11 @@ "key": "SearchItemController", "implementation": "controllers/SearchItemController.js", "depends": [ "$scope" ] + }, + { + "key": "ClickAwayController", + "implementation": "controllers/ClickAwayController.js", + "depends": [ "$scope", "$document" ] } ], "templates": [ diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 081331ccdd..26389e70be 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -23,7 +23,8 @@ ng-controller="SearchController as controller"> -
+
- + v -
+
@@ -63,7 +67,7 @@ + ng-change="controller.checkAll(); controller.updateOptions()" /> diff --git a/platform/search/src/controllers/ClickAwayController.js b/platform/search/src/controllers/ClickAwayController.js new file mode 100644 index 0000000000..75b1d985da --- /dev/null +++ b/platform/search/src/controllers/ClickAwayController.js @@ -0,0 +1,101 @@ +/***************************************************************************** + * 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 ClickAwayController is used to toggle things (such as context + * menus) where clicking elsewhere in the document while the toggle + * is in an active state is intended to dismiss the toggle. + * + * @constructor + * @param $scope the scope in which this controller is active + * @param $document the document element, injected by Angular + */ + function ClickAwayController($scope, $document) { + var state = false, + clickaway; + + // Track state, but also attach and detach a listener for + // mouseup events on the document. + function deactivate() { + state = false; + $document.off("mouseup", clickaway); + } + + function activate() { + state = true; + $document.on("mouseup", clickaway); + } + + function changeState() { + if (state) { + deactivate(); + } else { + activate(); + } + } + + // Callback used by the document listener. Deactivates; + // note also $scope.$apply is invoked to indicate that + // the state of this controller has changed. + clickaway = function () { + deactivate(); + $scope.$apply(); + return 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) { + if (state !== newState) { + changeState(); + } + }, + /** + * Toggle the current state; activate if it is inactive, + * deactivate if it is active. + */ + toggle: function () { + changeState(); + } + }; + + } + + return ClickAwayController; + } +); \ No newline at end of file