[Frontend] Converting tree items and labels to flex-box

open #431
In-progress;
TO-DO: need to fix mobile styles!

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

@@ -26,8 +26,8 @@
 
 @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%   { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); }
+        100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); }
     }
     @include animation-name(rotateCentered);
     @include animation-duration(0.5s);

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

@@ -38,20 +38,33 @@ ul.tree {
 	@include box-sizing(border-box);
 	@include border-radius($basicCr);
 	@include single-transition(background-color, 0.25s);
-	display: block;
 	font-size: 0.8rem;
 	height: $menuLineH;
 	line-height: $menuLineH;
 	margin-bottom: $interiorMarginSm;
+    padding: 0 $interiorMarginSm;
 	position: relative;
 
 	.view-control {
+        @extend .flex-elem;
 		color: $colorItemTreeVC;
-		display: inline-block;
-		margin-left: $interiorMargin;
+		//display: inline-block;
+		margin-right: $interiorMargin;
 		font-size: 0.75em;
 		width: $treeVCW;
-		$runningItemW: $interiorMargin + $treeVCW;
+        &.has-children {
+            &:before {
+                //@include trans-prop-nice(rotate);
+                content: ">";
+                //position: absolute;
+                //top: 50%;
+                //left: 50%;
+            }
+            &.expanded:before {
+                //@include transform(translateX(-50%) translateY(-50%) rotate(90deg));
+                content: "v";
+            }
+        }
 		@include desktop {
 			&:hover {
 				color: $colorItemTreeVCHover !important;
@@ -60,29 +73,27 @@ ul.tree {
 	}
 
 	.t-object-label {
-		display: block;
-		@include absPosDefault();
+		//display: block;
+		//@include absPosDefault();
 		line-height: $menuLineH;
 
         .t-item-icon {
             @include txtShdwSubtle($shdwItemTreeIcon);
             font-size: $treeTypeIconH;
             color: $colorItemTreeIcon;
-            position: absolute;
-            left: $interiorMargin;
-            top: 50%;
+            //position: absolute;
+            //left: $interiorMargin;
+            //top: 50%;
             width: $treeTypeIconH;
-            @include transform(translateY(-50%));
+            //@include transform(translateY(-50%));
         }
 
 		.title-label,
         .t-title-label {
-			@include absPosDefault();
-			display: block;
-			left: $runningItemW + ($interiorMargin * 3);
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+            @include ellipsize();
+			//@include absPosDefault();
+			//display: block;
+			//left: $runningItemW + ($interiorMargin * 3);
 		}
 	}
 
@@ -129,13 +140,12 @@ ul.tree {
 
 .tree-item {
     mct-representation {
-        .t-object-label {
-            left: $interiorMargin + $treeVCW;
-        }
+        //.t-object-label {
+        //    left: $interiorMargin + $treeVCW;
+        //}
         &.s-status-pending {
             .t-object-label {
                 &:before {
-                    @include tItemIcon();
                     @include spinner(0.25em, $colorItemTreeIcon);
                     content: "";
                 }

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

@@ -19,9 +19,9 @@
  this source code distribution or the Licensing information page available
  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() }">
+<span class="t-object-label l-flex-row flex-elem grows">
+    <span class="t-item-icon flex-elem" 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 class='t-title-label flex-elem grows'>{{model.name}}</span>
 </span>

platform/commonUI/general/res/templates/tree-node.html

@@ -22,21 +22,20 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-            class="tree-item menus-to-left"
+            class="tree-item l-flex-row menus-to-left"
             ng-class="{selected: treeNode.isSelected()}"
             >
             <span
                 mct-device="desktop"
-                class='ui-symbol view-control'
+                class='ui-symbol view-control flex-elem'
+                ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
-                ng-if="model.composition !== undefined"
                 >
-                {{toggle.isActive() ? "v" : ">"}}
             </span>
 
             <mct-representation
                 mct-device="desktop"
-                class="mobile-hide"
+                class="mobile-hide l-flex-row flex-elem grows"
                 key="'label'"
                 mct-object="domainObject"
                 ng-click="treeNode.select()"