Markup / scss refactor WIP

- Markup and components corrected;
- Stubbed in snow theme file;

src/MCT.js

@@ -33,6 +33,7 @@ define([
     './ui/registries/ToolbarRegistry',
     './adapter/indicators/legacy-indicators-plugin',
     './styles-new/core.scss',
+    './styles-new/theme-snow.scss',
     './ui/components/layout/Layout.vue',
     'vue'
 ], function (
@@ -48,6 +49,7 @@ define([
     ToolbarRegistry,
     LegacyIndicatorsPlugin,
     coreStyles,
+    themeSnow,
     Layout,
     Vue
 ) {

src/ui/components/controls/splitter.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="c-splitter" :class="cssClass"></div>
+    <div class="c-splitter" :class="{
+    'c-splitter-vertical' : align === 'vertical',
+    'c-splitter-horizontal' : align === 'horizontal'
+    }"></div>
 </template>
 
 <style lang="scss">
@@ -21,7 +24,7 @@
             }
         }
 
-        &--horz {
+        &-vertical {
             cursor: col-resize;
             width: $s;
             &:before {
@@ -33,7 +36,7 @@
             }
         }
 
-        &--vert {
+        &-horizontal {
             cursor: row-resize;
             height: $s;
             &:before {
@@ -50,7 +53,7 @@
 <script>
     export default {
         props: {
-            cssClass: String
+            align: String
         }
     }
 </script>

src/ui/components/layout/Layout.vue

@@ -1,22 +1,22 @@
 <template>
     <div class="l-shell">
         <div class="l-shell__main">
-            <div class="l-pane l-shell__tree-pane" style="width: 400px" ref="shell-tree-pane">
+            <div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
-                <div class="l-pane__elem l-shell__search">
+                <div class="l-shell__search">
-                    <!-- Change to search compoonent -->
+                    <!-- Change to search component -->
                     <input placeholder="Search"/>
                 </div>
-                <div class="l-pane__elem l-shell__tree">
+                <div class="l-shell__tree">
                     <MctTree ref="shell-tree"></MctTree>
                 </div>
             </div>
-            <splitter align="vertical" target="shell-tree-pane"></splitter>
+            <splitter align="vertical" target="shell-pane-tree"></splitter>
-            <div class="l-pane l-shell__main-pane" ref="shell-main-pane">
+            <div class="l-pane l-shell__pane-main" ref="shell-pane-main">
-                <div class="l-shell__object-view c-object-view">c-object-view</div>
+                <div class="l-shell__object-view">c-object-view</div>
-                <div class="l-shell__time-conductor c-time-conductor">c-time-conductor</div>
+                <div class="l-shell__time-conductor">c-time-conductor</div>
             </div>
-            <splitter align="vertical" target="shell-main-pane"></splitter>
+            <splitter align="vertical" target="shell-pane-main"></splitter>
-            <div class="l-pane l-inspector-pane">
+            <div class="l-pane l-shell__pane-inspector">
                 <MctInspector ref="shell-inspector"></MctInspector>
             </div>
         </div>
@@ -68,48 +68,34 @@
         padding: $interiorMarginLg;
     }
 
-    /******************************* OBJECT VIEW */
+    /********** MAIN AREA PANES */
-    &__main-pane {
+    &__pane-tree,
+    &__pane-main,
+    &__pane-inspector {
         display: flex;
         flex-flow: column nowrap;
     }
 
-    &__object-view {
+    &__pane-tree,
-        background: #cc0;
+    &__pane-inspector {
-        flex: 1 1 auto;
-        padding: $interiorMarginLg;
-    }
-
-    &__time-conductor {
-        background: #cac;
-        min-height: 50px;
-        padding: $interiorMarginLg;
-    }
-
-    &__tree-pane,
-    &__inspector-pane {
         max-width: 30%;
         min-width: 5%;
     }
 
-    &__tree-pane {
+    &__pane-tree {
         background: #f90;
-        display: flex;
-        flex-flow: column nowrap;
         padding: $interiorMarginLg;
+        width: 300px
     }
 
-    &__main-pane {
+    &__pane-main {
         flex: 1 1 auto;
     }
 
-    &__inspector-pane {
+    &__pane-inspector {
-        background: #f9c;
+        width: 200px
     }
 }
-
-
-
 </style>
 
 <script>

src/ui/components/layout/MctInspector.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="c-inspector">
         <div class="c-inspector__properties">
-            l-inspector__properties XXX
+            c-inspector__properties
         </div>
-        <splitter cssClass="c-splitter--vert js-p-split-e"></splitter>
+        <splitter align="horizontal"></splitter>
-        <div class="c-inspector__elements">
+        <div class="l-pane c-inspector__elements">
-            l-inspector__elements
+            c-inspector__elements
         </div>
     </div>
 </template>
@@ -15,13 +15,23 @@
 
     /******************************* INSPECTOR */
     .c-inspector {
+        display: flex;
+        flex-flow: column nowrap;
+        height: 100%;
+
         > [class*="__"] {
+            background: #f9c;
+            min-height: 50px;
             padding: $interiorMarginLg;
         }
-        .c-splitter {
+
-            &:hover {
+        &__properties {
-                background: red;
+            flex: 1 1 auto;
-            }
+        }
+
+        &__elements {
+            height: 25%;
+            flex: 0 1 auto;
         }
     }
 </style>

src/ui/components/layout/MctStatus.vue

@@ -1,6 +1,6 @@
 <template>
     <span class="c-status">
-        <span &nbsp;="" Status="" element&nbsp;=""></span>
+        [ Status ]
     </span>
 </template>
 

src/ui/components/layout/MctTree.vue

@@ -2,9 +2,10 @@
     <ul class="c-tree">
         <li class="c-tree__item-h">
             <div class="c-tree__item" onclick="alert('tree item click');">
-                <span class="c-view-control"></span><span class="c-object-name icon-folder">
+                <span class="c-view-control"></span>
-              Tree item x with a long name that forces ellipsis to occur
+                <span class="c-object-name icon-folder">
-              </span>
+                  Tree item x with a long name that forces ellipsis to occur
+                </span>
             </div>
             <ul class="c-tree">
                 <li class="c-tree__item-h">
@@ -22,6 +23,7 @@
 
     .c-tree {
         .c-tree {
+            display: none;
             margin-left: 20px;
         }
 
@@ -38,6 +40,7 @@
             }
 
             .c-view-control {
+                // TODO: move this into a future view-control component or the _controls.scss file
                 $d: 11px;
                 background: rgba(red, 0.4);
                 display: inline-block;