[Search] Item background highlight

Each result item now has a highlighted
background, with correct rounding of
edges. Need to now detect when to
highlight (on selection).

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; }

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;

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": [

platform/features/search/res/templates/searchbar-item.html

@@ -20,36 +20,40 @@
  at runtime from the About dialog for additional information.
 --> 
 
-<div class="search-result-item">
-    <mct-representation
-        key="'label'"
-        mct-object="domainObject"
-        ng-model="ngModel"
-        ng-click="ngModel.selectedObject = domainObject"
-        >
-    </mct-representation>
-    <!-- span
-        class="tree-item menus-to-left"
-        ng-class="{selected: treeNode.isSelected()}"
-        >
-        <!-- span
-            class='ui-symbol view-control'
-            ng-click="toggle.toggle(); treeNode.trackExpansion()"
+<span ng-controller="ToggleController as toggle">
+    <div class="search-result-item"
+         ng-controller="SearchbarItemController as controller">
+        <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()}"
+            >
+            asdf
+            <!--span
+                class='ui-symbol view-control'
+                ng-click="toggle.toggle(); controller.trackExpansion()"
+                ng-if="model.composition !== undefined"
+                >
+                {{toggle.isActive() ? "v" : ">"}}
+            </span->
+        </span>
+        <span
+            class="tree-item-subtree"
+            ng-show="toggle.isActive()"
             ng-if="model.composition !== undefined"
             >
-            {{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->
 
-        <mct-representation key="'subtree'"
-                            ng-model="ngModel"
-                            mct-object="treeNode.hasBeenExpanded() && domainObject">
-        </mct-representation>
-
-    </span-->
-</div>
+        </span-->
+    </div>
+</span>

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;
+});

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;
+    }
+);