From e7e91e21fc14279366037ba3d4c7575abb891610 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 24 Mar 2016 14:25:28 -0700
Subject: [PATCH] [Frontend] Markup and CSS for loading tree items

#445
New wait-spinner constants;
Markup fixed in wait-node.html;
Styles for .loading when applied to
.tree-item.wait-node;
Changed from percent-of-parent-
width sizing of spinner to fixed size;
---
 .../commonUI/general/res/sass/_constants.scss |  3 ++
 .../res/sass/helpers/_wait-spinner.scss       | 37 +++++++++----------
 .../general/res/templates/tree/wait-node.html |  7 +---
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index d5f725862f..8bde2cd7b8 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -98,6 +98,9 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
+// Wait Spinner Defaults
+$waitSpinnerD: 32px;
+$waitSpinnerBorderW: 5px;
 
 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;
diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
index 310f72d1b4..565d8f0ef2 100644
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -46,10 +46,7 @@
 }
 
 .wait-spinner {
-	$d: 5%;
-	@include spinner(0.5em, $colorKey);
-	height: auto; width: auto;
-	padding: $d; // Will size object based on parent container WIDTH
+	@include spinner($waitSpinnerBorderW, $colorKey);
 	pointer-events: none;
 	z-index: 2;
 	&.inline {
@@ -60,15 +57,6 @@
 	}
 }
 
-.treeview .wait-spinner {
-    // Only used in subtree.html, which I don't think this is actually being used
-	$d: 10px;
-	height: $d; width: $d;
-	margin: 0 !important;
-	padding: 0 !important;
-	top: 2px; left: 0;
-}
-
 .loading {
 	// Can be applied to any block element with height and width
     pointer-events: none;
@@ -77,8 +65,8 @@
         content: '';
     }
 	&:before {
-        @include spinner(5px, $colorLoadingFg);
-        padding: 5%;
+        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
+        height: $waitSpinnerD; width: $waitSpinnerD;
         z-index: 10;
 	}
     &:after {
@@ -87,8 +75,19 @@
         display: block;
         z-index: 9;
     }
-    &.tree-item:before {
-        padding: $menuLineH / 4;
-        border-width: 2px;
+    &.tree-item.t-wait-node {
+        $d: $treeTypeIconW;
+        $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2;
+        font-style: italic;
+        padding-left: $spinnerL + $d/2 + $interiorMargin;
+        &:before {
+            height: $d;
+            width: $d;
+            border-width: 3px;
+            left: $spinnerL;
+        }
+        &:after {
+            display: none;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/platform/commonUI/general/res/templates/tree/wait-node.html b/platform/commonUI/general/res/templates/tree/wait-node.html
index 79dffa73b5..12bcecdc34 100644
--- a/platform/commonUI/general/res/templates/tree/wait-node.html
+++ b/platform/commonUI/general/res/templates/tree/wait-node.html
@@ -19,9 +19,4 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<li>
-    <span class="tree-item">
-        <span class="icon wait-spinner"></span>
-        <span class="title-label">Loading...</span>
-    </span>
-</li>
+<li class='tree-item t-wait-node loading'>Loading...</li>