Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap

src/ui/components/controls/multipane.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="multipane"
+         :class="{
+             'multipane--vertical': type === 'vertical',
+             'multipane--horizontal': type === 'horizontal'
+         }">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+.multipane {
+    @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: $colorSplitterBg;
+        position: absolute;
+
+        transition: $transOut;
+
+        &:before {
+            content: '';
+        }
+
+        &:active, &:hover {
+            transition: $transIn;
+        }
+
+        &:active {
+            background: $colorSplitterActive;
+        }
+
+        &:hover {
+            background: $colorSplitterHover;
+        }
+    }
+
+    &--horizontal > .multipane__pane > .multipane__splitter {
+        cursor: col-resize;
+        width: $splitterHandleD;
+        top: 0;
+        bottom: 0;
+        &--before {
+            left: 0;
+        }
+        &--after {
+            right: 0;
+        }
+        &:before {
+            top: 0;
+            right: $hitMargin * -1;
+            bottom: 0;
+            left: $hitMargin * -1;
+        }
+    }
+
+    &--vertical > .multipane__pane > .multipane__splitter {
+        cursor: row-resize;
+        height: $splitterHandleD;
+        left: 0;
+        right: 0;
+        &--before {
+            top: 0
+        }
+        &--after {
+            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;
+        }
+
+        &: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>
+
+<script>
+export default {
+    props: {
+        type: {
+            type: String,
+            validator: function (value) {
+                return ['vertical', 'horizontal'].indexOf(value) !== -1;
+            }
+        }
+    }
+}
+</script>

src/ui/components/controls/pane.vue

@@ -0,0 +1,96 @@
+<template>
+    <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'
+              }"
+              @mousedown="start"
+              >
+              <a class="multipane__splitter__button"
+                 @click="toggleCollapse"
+                 v-if="collapsable"></a>
+         </div>
+         <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        splitter: {
+            type: String,
+            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;
+            } 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);
+            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);
+        },
+        end: function (event) {
+            document.body.removeEventListener('mousemove', this.updatePosition);
+            document.body.removeEventListener('mouseup', this.end);
+            this.trackSize();
+        }
+    }
+}
+</script>

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>