[Frontend] Adding s-status-pending classes to tree item labels

open #431
In-progress;

platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

@@ -24,11 +24,11 @@
     100% { transform: rotate(359deg); }
 }
 
-@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
+@mixin spinner($b: 5px, $c: $colorAlt1) {
     @include keyframes(rotateCentered) {
-         0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
-         100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
-     }
+        0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
+        100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
+    }
     @include animation-name(rotateCentered);
     @include animation-duration(0.5s);
     @include animation-iteration-count(infinite);
@@ -36,8 +36,13 @@
     border-color: rgba($c, 0.25);
     border-top-color: rgba($c, 1.0);
     border-style: solid;
-    border-width: 5px;
+    border-width: $b;
     @include border-radius(100%);
+}
+
+
+@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
+    @include spinner($b, $c);
     @include box-sizing(border-box);
     display: block;
     position: absolute;

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -59,7 +59,6 @@ ul.tree {
 		}
 	}
 
-	.label,
 	.t-object-label {
 		display: block;
 		@include absPosDefault();
@@ -76,38 +75,6 @@ ul.tree {
             @include transform(translateY(-50%));
         }
 
-		.type-icon {
-			//@include absPosDefault(0, false);
-			$d: $treeTypeIconH;
-			@include txtShdwSubtle($shdwItemTreeIcon);
-			font-size: $treeTypeIconH;
-			color: $colorItemTreeIcon;
-			left: $interiorMargin;
-			position: absolute;
-			@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
-			line-height: 100%;
-			right: auto; width: $treeTypeIconH;
-
-			.icon {
-				&.l-icon-link,
-				&.l-icon-alert {
-					position: absolute;
-					z-index: 2;
-				}
-				&.l-icon-alert {
-					$d: 8px;
-					@include ancillaryIcon($d, $colorAlert);
-					top: 1px;
-					right: -2px;
-				}
-				&.l-icon-link {
-					$d: 8px;
-					@include ancillaryIcon($d, $colorIconLink);
-					left: -3px;
-					bottom: 0px;
-				}
-			}
-		}
 		.title-label,
         .t-title-label {
 			@include absPosDefault();
@@ -161,7 +128,21 @@ ul.tree {
 }
 
 .tree-item {
-	.t-object-label {
-		left: $interiorMargin + $treeVCW;
-	}
+    mct-representation {
+        .t-object-label {
+            left: $interiorMargin + $treeVCW;
+        }
+        &.s-status-pending {
+            .t-object-label {
+                &:before {
+                    @include tItemIcon();
+                    @include spinner(0.25em, $colorItemTreeIcon);
+                    content: "";
+                }
+                .t-item-icon .t-item-icon-glyph {
+                    display: none;
+                }
+            }
+        }
+    }
 }

platform/commonUI/general/res/templates/label.html

@@ -20,6 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <span class="t-object-label">
-<span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">{{type.getGlyph()}}</span>
-<span class='t-title-label'>{{model.name}}</span>
+    <span class="t-item-icon" ng-class="{ 'l-icon-link':location.isLink() }">
+        <span class="t-item-icon-glyph">{{type.getGlyph()}}</span>
+    </span>
+    <span class='t-title-label'>{{model.name}}</span>
 </span>