From ebb5474b3402d1a34b60b2cfd9476223d652dd48 Mon Sep 17 00:00:00 2001
From: shale <sarah.hale@nasa.gov>
Date: Thu, 23 Jul 2015 11:41:17 -0700
Subject: [PATCH] [Search] Hover and loading

Added styling to result items when they are
hovered over.
Also added a loading icon.
---
 platform/commonUI/general/res/css/tree.css    | 44 ++++++++++++++++---
 .../general/res/sass/search/_search.scss      | 42 +++++++++++++++++-
 .../features/search/res/templates/search.html |  8 ++++
 .../src/controllers/SearchController.js       |  9 +++-
 4 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 6a75b9617e..582594e1bc 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -280,18 +280,38 @@ ul.tree {
     margin-top: 10px;
     width: 100%; }
   /* line 39, ../sass/search/_search.scss */
+  .search-holder .search .load-icon {
+    position: relative; }
+    /* line 41, ../sass/search/_search.scss */
+    .search-holder .search .load-icon.loading {
+      pointer-events: none;
+      margin-left: 6px; }
+      /* line 45, ../sass/search/_search.scss */
+      .search-holder .search .load-icon.loading .title-label {
+        font-style: italic;
+        font-size: .9em;
+        opacity: 0.5;
+        margin-left: 26px;
+        line-height: 24px; }
+      /* line 55, ../sass/search/_search.scss */
+      .search-holder .search .load-icon.loading .wait-spinner {
+        margin-left: 6px; }
+    /* line 60, ../sass/search/_search.scss */
+    .search-holder .search .load-icon:not(.loading) {
+      cursor: pointer; }
+  /* line 65, ../sass/search/_search.scss */
   .search-holder .search .results {
     margin-top: 10px; }
-    /* line 43, ../sass/search/_search.scss */
+    /* line 69, ../sass/search/_search.scss */
     .search-holder .search .results .search-result-item {
       margin-bottom: 5px;
       border-radius: 2px;
       padding-top: 2px;
       padding-bottom: 1px; }
-      /* line 52, ../sass/search/_search.scss */
+      /* line 78, ../sass/search/_search.scss */
       .search-holder .search .results .search-result-item .label {
         margin-left: 6px; }
-        /* line 56, ../sass/search/_search.scss */
+        /* line 82, ../sass/search/_search.scss */
         .search-holder .search .results .search-result-item .label .title-label {
           display: inline-block;
           position: absolute;
@@ -303,17 +323,27 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 78, ../sass/search/_search.scss */
+      /* line 104, ../sass/search/_search.scss */
       .search-holder .search .results .search-result-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 82, ../sass/search/_search.scss */
+        /* line 108, ../sass/search/_search.scss */
         .search-holder .search .results .search-result-item.selected .view-control {
           color: #0099cc; }
-        /* line 85, ../sass/search/_search.scss */
+        /* line 111, ../sass/search/_search.scss */
         .search-holder .search .results .search-result-item.selected .label .type-icon {
           color: #fff; }
-  /* line 92, ../sass/search/_search.scss */
+      /* line 118, ../sass/search/_search.scss */
+      .search-holder .search .results .search-result-item:not(.selected):hover {
+        background: #404040;
+        color: #cccccc; }
+        /* line 121, ../sass/search/_search.scss */
+        .search-holder .search .results .search-result-item:not(.selected):hover .context-trigger {
+          display: block; }
+        /* line 124, ../sass/search/_search.scss */
+        .search-holder .search .results .search-result-item:not(.selected):hover .icon {
+          color: #33ccff; }
+  /* line 132, ../sass/search/_search.scss */
   .search-holder .search .load-more-button {
     margin-top: 5px;
     position: relative;
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 307824ca37..1131a0d16e 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -35,6 +35,32 @@
             margin-top: 10px;
             width: 100%;
         }
+        
+        .load-icon {
+            position: relative;
+            &.loading {
+                pointer-events: none;
+                margin-left: $leftMargin;
+                
+                .title-label {
+                    // Text styling
+                    font-style: italic;
+                    font-size: .9em;
+                    opacity: 0.5;
+                    
+                    // Text positioning 
+                    margin-left: $iconWidth + $leftMargin;
+                    line-height: 24px;
+                }
+                .wait-spinner {
+                    margin-left: $leftMargin;
+                }
+            }
+
+            &:not(.loading) {
+                cursor: pointer;
+            }
+        }
 
         .results {
             // Spacing away from the search input
@@ -83,7 +109,21 @@
                         color: $colorItemTreeIcon;
                     }
                     .label .type-icon {
-                        color: #fff; //$colorItemTreeIconHover;
+                        color: #fff;
+                    }
+                }
+                
+                // Change styling when it's being hovered over
+                &:not(.selected) {
+                    &:hover {
+                        background: lighten($colorBodyBg, 5%);
+                        color: lighten($colorBodyFg, 20%);
+                        .context-trigger {
+                            display: block;
+                        }
+                        .icon {
+                            color: $colorItemTreeIconHover;
+                        }
                     }
                 }
             }
diff --git a/platform/features/search/res/templates/search.html b/platform/features/search/res/templates/search.html
index e359629757..59e98040f0 100644
--- a/platform/features/search/res/templates/search.html
+++ b/platform/features/search/res/templates/search.html
@@ -39,6 +39,14 @@
         </mct-representation>
     </div>
     
+    <!-- Loading icon -->
+    <div class="load-icon"
+         ng-class="{loading: controller.isLoading()}"
+         ng-if="controller.isLoading()">
+        <span class="icon wait-spinner"></span>
+        <span class="title-label">Loading...</span>
+    </div>
+    
     <!-- Load more --> 
     <div ng-if="controller.areMore()">
         <button class="load-more-button btn very-subtle"
diff --git a/platform/features/search/src/controllers/SearchController.js b/platform/features/search/src/controllers/SearchController.js
index c84ac34143..37b5119bc4 100644
--- a/platform/features/search/src/controllers/SearchController.js
+++ b/platform/features/search/src/controllers/SearchController.js
@@ -32,7 +32,8 @@ define(function () {
     
     function SearchController($scope, $timeout, searchService) {
         // Starting amount of results to load. Will get increased. 
-        var numResults = INITIAL_LOAD_NUMBER;
+        var numResults = INITIAL_LOAD_NUMBER,
+            loading = false;
         
         function update(timestamp) {
             // Get the results 
@@ -45,10 +46,12 @@ define(function () {
                 // If any of the timestamps are older than the one we made the query with
                 if (areOld) {
                     // Then wait and try to update again
+                    loading = true;
                     searchService.updateResults();
                     $timeout(waitForLatest, 100);
                 } else {
                     // We got the latest results now 
+                    loading = false;
                     $scope.results = searchService.getLatestResults(0, numResults);
                 }
             }
@@ -88,6 +91,10 @@ define(function () {
                 }
             },
             
+            isLoading: function () {
+                return loading;
+            },
+            
             /**
              * Checks to see if there are more search results to display.
              */