Markup / scss refactor WIP

- Tree item styling

src/styles-new/_constants-snow.scss

@@ -205,11 +205,11 @@ $legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
-$colorTreeBg: #f5f5f5;
+$colorTreeBg: #f5f5f5; // Used
 $colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
-$colorItemTreeIcon: $colorKey;
+$colorItemTreeIcon: $colorKey; // Used
-$colorItemTreeIconHover: $colorItemTreeIcon;
+$colorItemTreeIconHover: $colorItemTreeIcon; // Used
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;

src/styles-new/_constants.scss

@@ -14,4 +14,6 @@ $interiorMargin: 5px;
 $interiorMarginLg: 10px;
 $inputTextPTopBtm: 2px;
 $inputTextPLeftRight: 5px;
-$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
+$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
+
+$treeTypeIconW: 18px;

src/ui/components/controls/viewControl.vue

@@ -1,29 +1,29 @@
 <template>
     <span class="c-view-control"
-    :class="{ 'c-view-control-expanded' : expanded }"></span>
+    :class="{ 'c-view-control-expanded' : expanded }"
+    @click="toggle"></span>
 </template>
 
 <style lang="scss">
     @import "~styles/sass-base";;
 
     .c-view-control {
-        $d: 14px;
+        $d: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 0 0 auto;
-        height: $d;
         width: $d;
-        margin-right: $interiorMargin;
         position: relative;
 
         &:before {
+            $s: .75;
             content: $glyph-icon-arrow-right-equilateral;
             display: block;
             font-family: symbolsfont;
-            font-size: 0.75rem;
+            font-size: 1rem * $s;
             position: absolute;
-            transform-origin: center;
+            transform-origin: floor(($d / 2) * $s);
             transition: transform 100ms ease-in-out;
         }
 
@@ -39,6 +39,11 @@
     export default {
         props: {
             expanded: Boolean
+        },
+        methods: {
+            toggle() {
+                this.expanded = !this.expanded;
+            }
         }
     }
 </script>

src/ui/components/layout/MctTree.vue

@@ -2,9 +2,9 @@
     <ul class="c-tree">
         <li class="c-tree__item-h">
             <div class="c-tree__item">
-                <viewControl></viewControl>
+                <viewControl class="c-tree__item__view-control"></viewControl>
-                <span class="c-object-name icon-folder">
+                <span class="c-tree__item__name c-object-name icon-folder">
-                  Tree item x with a long name that forces ellipsis to occur
+                    <span class="c-object-name__name">Tree item x with a long name that forces ellipsis to occur</span>
                 </span>
             </div>
             <ul class="c-tree">
@@ -28,16 +28,52 @@
         }
 
         &__item {
-            border-radius: 5px;
+            border-radius: $controlCr;
+            color: $colorItemTreeFg;
             display: flex;
-            flex-flow: row nowrap;
+            align-items: stretch;
-            align-items: center;
             cursor: pointer;
             padding: 5px;
+            transition: background 150ms ease;
 
             &:hover {
-                background: rgba(white, 0.2);
+                background: $colorItemTreeHoverBg;
+                .c-tree__item__name:before {
+                    // Type icon
+                    color: $colorItemTreeIconHover;
+                }
             }
+
+            .c-tree__item__view-control {
+                color: $colorItemTreeVC;
+                margin-right: $interiorMarginSm;
+            }
+
+            &__name {
+                &:before {
+                    color: $colorItemTreeIcon;
+                    width: $treeTypeIconW;
+                }
+            }
+        }
+    }
+
+    .c-object-name {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:before {
+            // Type icon
+            display: inline-block;
+            font-size: 1.3em;
+            margin-right: $interiorMarginSm;
+        }
+
+        &__name {
+            @include ellipsize();
+            display: inline;
         }
     }
 </style>