Use multipane instead of splitter

src/ui/components/controls/multipane.vue

@@ -10,66 +10,142 @@
 
 <style lang="scss">
 .multipane {
-    $backgroundColor: #06f;
+    @import "~styles/constants";
-    $size: 10px;
+    @import "~styles/constants-snow";
+    @import "~styles/mixins";
+    @import "~styles/glyphs";
+
+    $hitMargin: 4px;
 
     & > .multipane__pane > .multipane__splitter {
         z-index: 1;
         display: block;
-        background: #ccc;
+        background: $colorSplitterBg;
         position: absolute;
 
+        transition: $transOut;
+
         &:before {
             content: '';
         }
 
+        &:active, &:hover {
+            transition: $transIn;
+        }
+
+        &:active {
+            background: $colorSplitterActive;
+        }
+
         &:hover {
-            background: rgba($backgroundColor, 0.3);
+            background: $colorSplitterHover;
-            &:before {
-                background: $backgroundColor;
-            }
         }
     }
 
     &--horizontal > .multipane__pane > .multipane__splitter {
         cursor: col-resize;
-        width: $size;
+        width: $splitterHandleD;
-        top: 0px;
+        top: 0;
-        bottom: 0px;
+        bottom: 0;
         &--before {
-            left: (- $size / 2);
+            left: 0;
         }
         &--after {
-            right: (- $size / 2);
+            right: 0;
         }
         &:before {
-            // Divider line
+            top: 0;
-            width: 1px;
+            right: $hitMargin * -1;
-            height: 100%;
+            bottom: 0;
-            left: 50%;
+            left: $hitMargin * -1;
-            transform: translateX(-50%);
         }
     }
 
     &--vertical > .multipane__pane > .multipane__splitter {
         cursor: row-resize;
-        height: $size;
+        height: $splitterHandleD;
-        left: 0px;
+        left: 0;
-        right: 0px;
+        right: 0;
         &--before {
-            top: (- $size / 2);
+            top: 0
         }
         &--after {
-            left: (- $size / 2);
+            bottom: 0;
+        }
+        &:before {
+            top: $hitMargin * -1;
+            right: 0;
+            bottom: $hitMargin * -1;
+            left: 0;
+        }
+    }
+
+    /* collapsed panes */
+    &--horizontal > .multipane__pane--collapsed {
+        // TODO: make it fully collapse
+        width: 0px;
+    }
+
+    &--vertical > .multipane__pane--collapsed {
+        // TODO: make it fully collapse
+        height: 0px;
+    }
+
+    /* Collapse button styling */
+
+    & > .multipane__pane > .multipane__splitter .multipane__splitter__button {
+        background: $colorSplitterBg;
+        transition: $transOut;
+
+        &:active, &:hover {
+            transition: $transIn;
         }
 
-        &:before {
+        &:hover {
-            // Divider line
+            background: $colorSplitterHover;
-            width: 100%;
-            height: 1px;
-            top: 50%;
-            transform: translateY(-50%);
         }
+
+        &:active {
+            background: $colorSplitterActive;
+        }
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        z-index: 3;
+        &:before {
+            color: $colorSplitterFg;
+            display: block;
+            font-size: 0.8em;
+            font-family: symbolsfont;
+        }
+    }
+
+    &--horizontal > .multipane__pane > .multipane__splitter {
+        & > .multipane__splitter__button {
+            width: $splitterD;
+            height: 40px;
+        }
+
+        &--before .multipane__splitter__button {
+            border-bottom-right-radius: $controlCr;
+            left: 0;
+            &:before {
+                content: $glyph-icon-arrow-right;
+            }
+        }
+        &--after .multipane__splitter__button {
+            border-bottom-left-radius: $controlCr;
+            right: 0;
+            &:before {
+                content: $glyph-icon-arrow-left;
+            }
+        }
+    }
+
+    &--vertical > .multipane__pane > .multipane__splitter__button {
+        /* TODO: style buttons for vertical collapse. */
     }
 }
 </style>

src/ui/components/controls/pane.vue

@@ -1,13 +1,20 @@
 <template>
-    <div class="multipane__pane">
+    <div class="multipane__pane"
+         :class="{
+             'multipane__pane--collapsed': collapsed
+         }">
          <div v-if="splitter"
               class="multipane__splitter"
               :class="{
                   'multipane__splitter--before': splitter === 'before',
-                  'multipane__splitter--after': splitter === 'after',
+                  'multipane__splitter--after': splitter === 'after'
               }"
               @mousedown="start"
-              ></div>
+              >
+              <a class="multipane__splitter__button"
+                 @click="toggleCollapse"
+                 v-if="collapsable"></a>
+         </div>
          <slot></slot>
     </div>
 </template>
@@ -20,13 +27,34 @@ export default {
             validator: function (value) {
                 return ['before', 'after'].indexOf(value) !== -1;
             }
+        },
+        collapsable: Boolean
+    },
+    data() {
+        return {
+            collapsed: false
         }
     },
     mounted() {
         this.type = this.$parent.type;
+        if (this.type === 'horizontal') {
+            this.styleProp = 'width';
+        } else {
+            this.styleProp = 'height';
+        }
         this.trackSize();
     },
     methods: {
+        toggleCollapse: function () {
+            this.collapsed = !this.collapsed;
+            if (this.collapsed) {
+                this.currentSize = this.$el.style[this.styleProp];
+                this.$el.style[this.styleProp] = '';
+            } else {
+                this.$el.style[this.styleProp] = this.currentSize;
+                delete this.currentSize;
+            }
+        },
         trackSize: function() {
             if (this.type === 'vertical') {
                 this.initial = this.$el.offsetHeight;
@@ -50,14 +78,11 @@ export default {
         },
         updatePosition: function (event) {
             let size = this.getNewSize(event);
-            if (this.type === 'horizontal') {
+            this.$el.style[this.styleProp] = size;
-                this.$el.style.width = size;
-            } else {
-                this.$el.style.height = size;
-            }
         },
         start: function (event) {
             this.startPosition = this.getPosition(event);
+            this.trackSize();
             document.body.addEventListener('mousemove', this.updatePosition);
             document.body.addEventListener('mouseup', this.end);
         },

src/ui/components/layout/Layout.vue

@@ -1,27 +1,31 @@
 <template>
     <div class="l-shell">
-        <div class="l-shell__main">
+        <multipane class="l-shell__main"
-            <div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
+                   type="horizontal">
+            <pane class="l-pane l-shell__pane-tree"
+                  splitter="after"
+                  collapsable>
                 <div class="l-shell__search">
                     <search ref="shell-search"></search>
                 </div>
                 <div class="l-shell__tree">
                     <MctTree ref="shell-tree"></MctTree>
                 </div>
-            </div>
+            </pane>
-            <splitter align="vertical" target="shell-pane-tree" collapse="to-left"></splitter>
+            <pane class="l-pane l-shell__pane-main" >
-            <div class="l-pane l-shell__pane-main" ref="shell-pane-main">
                 <div class="l-shell__object-view">c-object-view</div>
                 <div class="l-shell__time-conductor">c-time-conductor</div>
-            </div>
+            </pane>
             <splitter align="vertical" target="shell-pane-main" collapse="to-right"></splitter>
-            <div class="l-pane l-shell__pane-inspector">
+            <pane class="l-pane l-shell__pane-inspector"
-                <MctInspector ref="shell-inspector"></MctInspector>
+                  splitter="before"
-            </div>
+                  collapsable>
-        </div>
+                <MctInspector></MctInspector>
+            </pane>
+        </multipane>
         <div class="l-shell__status">
             [ Create Button ]
-            <MctStatus ref="shell-status"></MctStatus>
+            <MctStatus></MctStatus>
             [ App Logo ]
         </div>
     </div>
@@ -102,7 +106,8 @@
     import MctStatus from './MctStatus.vue';
     import MctTree from './MctTree.vue';
     import search from '../controls/search.vue';
-    import splitter from '../controls/splitter.vue';
+    import multipane from '../controls/multipane.vue';
+    import pane from '../controls/pane.vue';
 
     export default {
         data () {
@@ -116,7 +121,8 @@
             MctStatus,
             MctTree,
             search,
-            splitter
+            multipane,
+            pane
         }
     }
 </script>

src/ui/components/layout/MctInspector.vue

@@ -1,13 +1,14 @@
 <template>
-    <div class="c-inspector">
+    <multipane class="c-inspector"
-        <div class="c-inspector__properties">
+               type="vertical">
+        <pane class="c-inspector__properties">
             c-inspector__properties
-        </div>
+        </pane>
-        <splitter align="horizontal"></splitter>
+        <pane class="l-pane c-inspector__elements"
-        <div class="l-pane c-inspector__elements">
+              splitter="before">
             c-inspector__elements
-        </div>
+        </pane>
-    </div>
+    </multipane>
 </template>
 
 <style lang="scss">
@@ -36,10 +37,12 @@
 </style>
 
 <script>
-    import splitter from '../controls/splitter.vue'
+    import multipane from '../controls/multipane.vue';
+    import pane from '../controls/pane.vue';
     export default {
         components: {
-            splitter
+            multipane,
+            pane
         }
     }
 </script>