Markup / scss refactor WIP

Fixes #2140
- Use MctTree component with passed properties;
- MctTree markup and CSS ported from codepen;

src/ui/components/layout/Layout.vue

@@ -1,34 +1,14 @@
 <template>
 <div class="l-shell">
     <div class="l-shell__main">
-        <div class="l-shell__tree l-pane" style="width: 400px" ref="shell-tree">
+        <MctTree cssClass="l-shell__tree-pane" cssStyle="width: 400px" ref="shell-tree"></MctTree>
-            <div class="l-pane__elem c-search">
-                <input placeholder="Search" />
-            </div>
-            <ul class="l-pane__elem l-tree">
-                <li class="l-tree__item-h">
-                    <div class="l-tree__item" onclick="alert('tree item click');">
-                        <span class="c-view-control"></span><span class="c-object-name icon-folder">
-        Tree item x with a long name that forces ellipsis to occur
-        </span>
-                    </div>
-                    <ul class="l-tree">
-                        <li class="l-tree__item-h">
-                            <div class="l-tree__item" onclick="alert('tree item click');">
-                                <span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
-                            </div>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
         <splitter cssClass="c-splitter--horz js-t-split-o"></splitter>
-        <div class="l-shell__object l-object-view">
+        <div class="l-shell__object-pane l-object-view">
             <div class="l-object-view__object-h" ref="shell-status">l-object-h</div>
             <div class="l-object-view__time-conductor-h c-time-conductor" ref="shell-time-conductor">c-time-conductor</div>
         </div>
         <splitter cssClass="c-splitter--horz js-o-split-i"></splitter>
-        <div class="l-shell__inspector l-inspector" style="width: 200px" ref="shell-inspector">
+        <div class="l-shell__inspector-pane l-inspector" style="width: 200px" ref="shell-inspector">
             <div class="l-inspector__properties" style="height: 300px">
                 l-inspector__properties
             </div>
@@ -53,7 +33,7 @@
         display: flex;
         flex-flow: column nowrap;
 
-        /********** HEAD */
+        /********** STATUS AREA */
         &__status {
             background: #666;
             color: #ccc;
@@ -63,7 +43,7 @@
             padding: $interiorMarginLg;
         }
 
-        /********** MAIN */
+        /********** MAIN AREA */
         &__main {
             flex: 1 1 auto;
             display: flex;
@@ -71,31 +51,31 @@
             order: 2;
         }
 
-        &__tree,
+        &__tree-pane,
-        &__inspector {
+        &__inspector-pane {
             max-width: 30%;
             min-width: 5%;
         }
 
-        &__tree {
+        &__tree-pane {
             background: #f90;
             display: flex;
             flex-flow: column nowrap;
             padding: $interiorMarginLg;
         }
 
-        &__object {
+        &__object-pane {
             flex: 1 1 auto;
         }
 
-        &__inspector {
+        &__inspector-pane {
             background: #f9c;
         }
     }
 </style>
 
 <script>
-// import MctTree from './MctTree.vue'
+import MctTree from './MctTree.vue'
 import splitter from '../controls/splitter.vue'
 
 export default {
@@ -105,6 +85,7 @@ export default {
         }
     },
     components: {
+        MctTree,
         splitter
     }
 }

src/ui/components/layout/MctTree.vue

@@ -1,19 +1,62 @@
 <template>
-  <div class="MCT_Tree">I'm a tree</div>
+<div class="l-pane" :class="cssClass" :style="cssStyle">
+    <div class="l-pane__elem c-search">
+        <input placeholder="Search"/>
+    </div>
+    <ul class="l-pane__elem l-tree">
+        <li class="l-tree__item-h">
+            <div class="l-tree__item" onclick="alert('tree item click');">
+                <span class="c-view-control"></span><span class="c-object-name icon-folder">
+          Tree item x with a long name that forces ellipsis to occur
+          </span>
+            </div>
+            <ul class="l-tree">
+                <li class="l-tree__item-h">
+                    <div class="l-tree__item" onclick="alert('tree item click');">
+                        <span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
+                    </div>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
 </template>
 
 <style lang="scss">
-.MCT_Tree {
+  .l-tree {
-    position: absolute;
+    .l-tree {
-    width: 100px;
+      margin-left: 20px;
-    left: 0px;
+    }
-    top: 0px;
+
-    bottom: 20px;
+    &__item {
-    background: red;
+      border-radius: 5px;
-}
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      cursor: pointer;
+      padding: 5px;
+
+      &:hover {
+        background: rgba(white, 0.2);
+      }
+
+      .c-view-control {
+        $d: 11px;
+        background: rgba(red, 0.4);
+        display: inline-block;
+        flex: 0 0 auto;
+        height: $d; width: $d;
+        margin-right: 5px;
+      }
+    }
+  }
 </style>
 
 <script>
-export default {
+  export default {
-}
+      props: {
+          cssClass: String,
+          cssStyle: String
+      }
+  }
 </script>