From f67f03af47ac4d2e22e8cca7ccb39a0dff14ea96 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Wed, 15 Aug 2018 12:43:32 -0700
Subject: [PATCH 1/2] new multipane

---
 src/ui/components/controls/multipane.vue | 88 ++++++++++++++++++++++++
 src/ui/components/controls/pane.vue      | 71 +++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 src/ui/components/controls/multipane.vue
 create mode 100644 src/ui/components/controls/pane.vue

diff --git a/src/ui/components/controls/multipane.vue b/src/ui/components/controls/multipane.vue
new file mode 100644
index 0000000000..24f4c0e22a
--- /dev/null
+++ b/src/ui/components/controls/multipane.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="multipane"
+         :class="{
+             'multipane--vertical': type === 'vertical',
+             'multipane--horizontal': type === 'horizontal'
+         }">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+.multipane {
+    $backgroundColor: #06f;
+    $size: 10px;
+
+    & > .multipane__pane > .multipane__splitter {
+        z-index: 1;
+        display: block;
+        background: #ccc;
+        position: absolute;
+
+        &:before {
+            content: '';
+        }
+
+        &:hover {
+            background: rgba($backgroundColor, 0.3);
+            &:before {
+                background: $backgroundColor;
+            }
+        }
+    }
+
+    &--horizontal > .multipane__pane > .multipane__splitter {
+        cursor: col-resize;
+        width: $size;
+        top: 0px;
+        bottom: 0px;
+        &--before {
+            left: (- $size / 2);
+        }
+        &--after {
+            right: (- $size / 2);
+        }
+        &:before {
+            // Divider line
+            width: 1px;
+            height: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    &--vertical > .multipane__pane > .multipane__splitter {
+        cursor: row-resize;
+        height: $size;
+        left: 0px;
+        right: 0px;
+        &--before {
+            top: (- $size / 2);
+        }
+        &--after {
+            left: (- $size / 2);
+        }
+
+        &:before {
+            // Divider line
+            width: 100%;
+            height: 1px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+}
+</style>
+
+<script>
+export default {
+    props: {
+        type: {
+            type: String,
+            validator: function (value) {
+                return ['vertical', 'horizontal'].indexOf(value) !== -1;
+            }
+        }
+    }
+}
+</script>
diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue
new file mode 100644
index 0000000000..5e4f0d6689
--- /dev/null
+++ b/src/ui/components/controls/pane.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="multipane__pane">
+         <div v-if="splitter"
+              class="multipane__splitter"
+              :class="{
+                  'multipane__splitter--before': splitter === 'before',
+                  'multipane__splitter--after': splitter === 'after',
+              }"
+              @mousedown="start"
+              ></div>
+         <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        splitter: {
+            type: String,
+            validator: function (value) {
+                return ['before', 'after'].indexOf(value) !== -1;
+            }
+        }
+    },
+    mounted() {
+        this.type = this.$parent.type;
+        this.trackSize();
+    },
+    methods: {
+        trackSize: function() {
+            if (this.type === 'vertical') {
+                this.initial = this.$el.offsetHeight;
+            } else if (this.type === 'horizontal') {
+                this.initial = this.$el.offsetWidth;
+            }
+        },
+        getPosition: function (event) {
+            return this.type === 'horizontal' ?
+                event.pageX :
+                event.pageY;
+        },
+        getNewSize: function (event) {
+            let delta = this.startPosition - this.getPosition(event);
+            if (this.splitter === "before") {
+                return `${this.initial + delta}px`;
+            }
+            if (this.splitter === "after") {
+                return `${this.initial - delta}px`;
+            }
+        },
+        updatePosition: function (event) {
+            let size = this.getNewSize(event);
+            if (this.type === 'horizontal') {
+                this.$el.style.width = size;
+            } else {
+                this.$el.style.height = size;
+            }
+        },
+        start: function (event) {
+            this.startPosition = this.getPosition(event);
+            document.body.addEventListener('mousemove', this.updatePosition);
+            document.body.addEventListener('mouseup', this.end);
+        },
+        end: function (event) {
+            document.body.removeEventListener('mousemove', this.updatePosition);
+            document.body.removeEventListener('mouseup', this.end);
+            this.trackSize();
+        }
+    }
+}
+</script>

From 43f978e185094231d326a6e14d5d1df01d2948dd Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Wed, 15 Aug 2018 13:52:34 -0700
Subject: [PATCH 2/2] Use multipane instead of splitter

---
 src/ui/components/controls/multipane.vue  | 132 +++++++++++++++++-----
 src/ui/components/controls/pane.vue       |  41 +++++--
 src/ui/components/layout/Layout.vue       |  32 +++---
 src/ui/components/layout/MctInspector.vue |  21 ++--
 4 files changed, 168 insertions(+), 58 deletions(-)

diff --git a/src/ui/components/controls/multipane.vue b/src/ui/components/controls/multipane.vue
index 24f4c0e22a..1043d794d3 100644
--- a/src/ui/components/controls/multipane.vue
+++ b/src/ui/components/controls/multipane.vue
@@ -10,66 +10,142 @@
 
 <style lang="scss">
 .multipane {
-    $backgroundColor: #06f;
-    $size: 10px;
+    @import "~styles/constants";
+    @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);
-            &:before {
-                background: $backgroundColor;
-            }
+            background: $colorSplitterHover;
         }
     }
 
     &--horizontal > .multipane__pane > .multipane__splitter {
         cursor: col-resize;
-        width: $size;
-        top: 0px;
-        bottom: 0px;
+        width: $splitterHandleD;
+        top: 0;
+        bottom: 0;
         &--before {
-            left: (- $size / 2);
+            left: 0;
         }
         &--after {
-            right: (- $size / 2);
+            right: 0;
         }
         &:before {
-            // Divider line
-            width: 1px;
-            height: 100%;
-            left: 50%;
-            transform: translateX(-50%);
+            top: 0;
+            right: $hitMargin * -1;
+            bottom: 0;
+            left: $hitMargin * -1;
         }
     }
 
     &--vertical > .multipane__pane > .multipane__splitter {
         cursor: row-resize;
-        height: $size;
-        left: 0px;
-        right: 0px;
+        height: $splitterHandleD;
+        left: 0;
+        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 {
-            // Divider line
-            width: 100%;
-            height: 1px;
-            top: 50%;
-            transform: translateY(-50%);
+        &:hover {
+            background: $colorSplitterHover;
         }
+
+        &: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>
diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue
index 5e4f0d6689..e62d2e006f 100644
--- a/src/ui/components/controls/pane.vue
+++ b/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.width = size;
-            } else {
-                this.$el.style.height = size;
-            }
+            this.$el.style[this.styleProp] = size;
         },
         start: function (event) {
             this.startPosition = this.getPosition(event);
+            this.trackSize();
             document.body.addEventListener('mousemove', this.updatePosition);
             document.body.addEventListener('mouseup', this.end);
         },
diff --git a/src/ui/components/layout/Layout.vue b/src/ui/components/layout/Layout.vue
index c7a6285683..e42aee0e74 100644
--- a/src/ui/components/layout/Layout.vue
+++ b/src/ui/components/layout/Layout.vue
@@ -1,27 +1,31 @@
 <template>
     <div class="l-shell">
-        <div class="l-shell__main">
-            <div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
+        <multipane class="l-shell__main"
+                   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>
-            <splitter align="vertical" target="shell-pane-tree" collapse="to-left"></splitter>
-            <div class="l-pane l-shell__pane-main" ref="shell-pane-main">
+            </pane>
+            <pane class="l-pane l-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">
-                <MctInspector ref="shell-inspector"></MctInspector>
-            </div>
-        </div>
+            <pane class="l-pane l-shell__pane-inspector"
+                  splitter="before"
+                  collapsable>
+                <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>
diff --git a/src/ui/components/layout/MctInspector.vue b/src/ui/components/layout/MctInspector.vue
index e11513082d..5454fd1f37 100644
--- a/src/ui/components/layout/MctInspector.vue
+++ b/src/ui/components/layout/MctInspector.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="c-inspector">
-        <div class="c-inspector__properties">
+    <multipane class="c-inspector"
+               type="vertical">
+        <pane class="c-inspector__properties">
             c-inspector__properties
-        </div>
-        <splitter align="horizontal"></splitter>
-        <div class="l-pane c-inspector__elements">
+        </pane>
+        <pane class="l-pane c-inspector__elements"
+              splitter="before">
             c-inspector__elements
-        </div>
-    </div>
+        </pane>
+    </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>