Getting vue-toolbar reverted back to latest

- Merging this branch with vue-layout may cause conflicts;

app.js

@@ -46,7 +46,7 @@ webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
 webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
 
 webpackConfig.entry.openmct = [
-    'webpack-hot-middleware/client',
+    'webpack-hot-middleware/client?reload=true',
     webpackConfig.entry.openmct
 ];
 

src/MCT.js

@@ -226,6 +226,7 @@ define([
         this.legacyRegistry = defaultRegistry;
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
+        this.install(this.plugins.DisplayLayout());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));

src/plugins/displayLayout/DisplayLayout.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="l-layout">
+        <div class="l-layout__object">
+            <!-- Background grid -->
+            <div class="l-layout__grid-holder c-grid" v-if="!drilledIn">
+                <div class="c-grid__x l-grid l-grid-x"
+                     v-if="gridSize[0] >= 3"
+                     :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
+                </div>
+                <div class="c-grid__y l-grid l-grid-y"
+                     v-if="gridSize[1] >= 3"
+                     :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
+            </div>
+
+            <layout-frame v-for="item in frameItems"
+                          class="l-layout__frame"
+                          :key="item.id"
+                          :item="item"
+                          @drilledIn="updateDrilledInState"
+                          @selected="updateSelectedState">
+            </layout-frame>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .l-layout,
+    .c-grid,
+    .c-grid__x,
+    .c-grid__y {
+        @include abs();
+    }
+
+    .l-layout {
+        display: flex;
+        flex-direction: column;
+
+        &__grid-holder {
+            display: none;
+        }
+
+        &__object {
+            flex: 1 1 auto;
+            overflow: auto;
+        }
+
+        &__frame {
+            position: absolute;
+        }
+    }
+
+    .c-grid {
+        z-index: -1;
+        pointer-events: none;
+
+        &__x  { @include bgTicks($colorGridLines, 'x'); }
+        &__y  { @include bgTicks($colorGridLines, 'y'); }
+    }
+
+    .is-editing {
+        .l-layout {
+            background: rgba($colorKey, 0.1);
+
+            &.s-selected,
+            &.s-selected-parent {
+                [class*="__grid-holder"] {
+                    display: block;
+                }
+            }
+        }
+    }
+</style>
+
+
+<script>
+    import LayoutFrame from './LayoutFrame.vue';
+
+    const DEFAULT_GRID_SIZE = [32, 32],
+          DEFAULT_DIMENSIONS = [12, 8],
+          MINIMUM_FRAME_SIZE = [320, 180];
+
+    export default {
+        data() {
+            return {
+                gridSize: DEFAULT_GRID_SIZE,
+                frameItems: [],
+                frames: [],                
+                composition: Object,
+                frameStyles: [],
+                rawPositions: {},
+                isEditing: true,
+                initSelect: true,
+                drilledIn: undefined
+            }
+        },          
+        inject: ['openmct'],
+        props: ['domainObject'],
+        components: {
+            LayoutFrame
+        },
+        created: function () {
+            console.log("domainObject", JSON.parse(JSON.stringify(this.domainObject)));                    
+
+            this.populatePositions(this.domainObject.configuration.layout.panels);
+
+            this.composition = this.openmct.composition.get(this.domainObject);
+            this.composition.on('add', this.onAddComposition);
+            this.composition.on('remove', this.onRemoveComposition);
+            this.composition.load();
+        },
+        methods: {            
+            onAddComposition(domainObject) {
+                console.log('composition object', domainObject);
+                const id = this.openmct.objects.makeKeyString(domainObject.identifier)
+                this.frameItems.push({
+                    id: id,
+                    hasFrame: this.hasFrame(id),
+                    domainObject,
+                    style: this.frameStyles[id],
+                    drilledIn: this.isDrilledIn(id),
+                    selected: false
+                });
+            },
+            onRemoveComposition(identifier) {
+                // TODO: remove the object from frameItems
+            },
+            populatePositions(panels) {
+                Object.keys(panels).forEach(function (key, index) {
+                    this.rawPositions[key] = {
+                        position: panels[key].position || this.defaultPosition(index),
+                        dimensions: panels[key].dimensions || this.defaultDimensions()
+                    };
+                    this.frameStyles[key] = this.convertPosition(this.rawPositions[key]);
+                    this.frames[key] = panels[key].hasFrame;
+                }.bind(this));
+            },
+            defaultPosition(index) {
+                return [index, index];
+            },
+            defaultDimensions() {
+                let gridSize = this.gridSize;
+                return MINIMUM_FRAME_SIZE.map(function (min, i) {
+                    return Math.max(
+                        Math.ceil(min / gridSize[i]),
+                        DEFAULT_DIMENSIONS[i]
+                    );
+                });
+            },
+            convertPosition(raw) {
+                return {
+                    left: (this.gridSize[0] * raw.position[0]) + 'px',
+                    top: (this.gridSize[1] * raw.position[1]) + 'px',
+                    width: (this.gridSize[0] * raw.dimensions[0]) + 'px',
+                    height: (this.gridSize[1] * raw.dimensions[1]) + 'px',
+                    minWidth: (this.gridSize[0] * raw.dimensions[0]) + 'px',
+                    minHeight: (this.gridSize[1] * raw.dimensions[1]) + 'px'
+                };
+            },
+            hasFrame(id) {
+                return this.frames[id]
+            },
+            setSelection(selection) {
+                if (selection.length === 0) {
+                    return;
+                }
+
+                this.updateDrilledInState();
+                this.updateSelectedState();
+            },
+            updateDrilledInState(id) {
+                this.drilledIn = id;
+                this.frameItems.forEach(function (item) {
+                    item.drilledIn = item.id === id;
+                });
+            },
+            updateSelectedState(id) {
+                this.frameItems.forEach(function (item) {
+                    item.selected = item.id === id;
+                });
+            },
+            isDrilledIn(id) {
+                return this.drilledIn === id;
+            }
+        },
+        mounted() {
+            this.removeSelectable = this.openmct.selection.selectable(
+                this.$el,
+                {
+                    item: this.domainObject
+                },
+                this.initSelect
+            );
+
+            this.openmct.selection.on('change', this.setSelection);
+        },
+        destroyed: function () {
+            this.composition.off('add', this.onAddComposition);
+            this.composition.off('remove', this.onRemoveComposition);
+            this.openmct.off('change', this.selection);
+            this.removeSelectable();
+        }
+    }
+    
+</script>

src/plugins/displayLayout/LayoutFrame.vue

@@ -0,0 +1,251 @@
+<template>
+    <!-- - TODO: styles for selectable, moveable, etc. -->
+    <div class="c-frame has-local-controls"
+         :style="item.style"
+         :class="classObject"
+         @dblclick="drill(item.id, $event)">
+        <div class="c-frame__header">
+            <div class="c-frame__header__start">
+                <div class="c-frame__name icon-object">Header</div>
+                <div class="c-frame__context-actions c-disclosure-button"></div>
+            </div>
+            <div class="c-frame__header__end">
+                <div class="c-button icon-expand local-controls--hidden"></div>
+            </div>
+        </div>
+        <object-view
+                class="c-frame__object-view"
+                :object="item.domainObject"></object-view>
+
+        <!-- Drag handles -->
+        <div class="c-frame-edit">
+            <div class="c-frame-edit__move"></div>
+            <div class="c-frame-edit__handle --nw"></div>
+            <div class="c-frame-edit__handle --ne"></div>
+            <div class="c-frame-edit__handle --se"></div>
+            <div class="c-frame-edit__handle --sw"></div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    /******************************* FRAME */
+    .c-frame {
+        display: flex;
+        flex-direction: column;
+
+        /*************************** HEADER */
+        &__header {
+            display: flex;
+            align-items: center;
+            flex: 0 0 auto;
+            margin-bottom: $interiorMargin;
+
+            > [class*="__"] {
+                display: flex;
+                align-items: center;
+            }
+
+            [class*="__start"] {
+                flex: 0 0 auto;
+            }
+
+            [class*="__end"] {
+                justify-content: flex-end;
+                flex: 1 1 auto;
+
+                [class*="button"] {
+                    font-size: 0.7em;
+                }
+            }
+        }
+
+        &__name {
+            @include ellipsize();
+            flex: 0 1 auto;
+            font-size: 1.2em;
+
+            &:before {
+                // Object type icon
+                flex: 0 0 auto;
+                margin-right: $interiorMarginSm;
+            }
+        }
+
+        /*************************** OBJECT VIEW */
+        &__object-view {
+            flex: 1 1 auto;
+            overflow: auto;
+        }
+
+        /*************************** NO-FRAME */
+        &.no-frame {
+            [class*="__header"] {
+                display: none;
+            }
+        }
+
+        &:not(.no-frame) {
+            background: $colorBodyBg;
+            border: 1px solid $colorInteriorBorder;
+            padding: $interiorMargin;
+        }
+
+        /*************************** SELECTION */
+        &.s-selected {
+            //Legacy name for now
+            border-color: $colorKey;
+        }
+
+        &.is-drilled-in {
+            border: 1px dashed deeppink;
+        }
+    }
+
+    /*************************** EDITING */
+    .is-editing .c-frame:not(.is-drilled-in) {
+        border: 1px dotted rgba($colorKey, 0.5);
+
+        &.s-selected {
+            > .c-frame-edit {
+                display: block;
+            }
+        }
+    }
+
+    .c-frame-edit {
+        $z: 10;
+
+        @include abs();
+        box-shadow: rgba($colorKey, 1) 0 0 10px;
+        display: none;
+
+        &__move {
+            @include abs();
+            cursor: move;
+            z-index: $z;
+        }
+
+        &__handle {
+            $d: 8px;
+            $o: floor($d * -0.5);
+            background: rgba($colorKey, 0.3);
+            border: 1px solid $colorKey;
+            position: absolute;
+            width: $d; height: $d;
+            top: auto; right: auto; bottom: auto; left: auto;
+            z-index: $z + 1;
+
+            &:before {
+                // Extended hit area
+                $m: -5px;
+                content: '';
+                display: block;
+                position: absolute;
+                top: $m; right: $m; bottom: $m; left: $m;
+                z-index: -1;
+            }
+
+            &:hover {
+                background: $colorKey;
+            }
+
+            &.--nw {
+                cursor: nw-resize;
+                left: $o; top: $o;
+            }
+
+            &.--ne {
+                cursor: ne-resize;
+                right: $o; top: $o;
+            }
+
+            &.--se {
+                cursor: se-resize;
+                right: $o; bottom: $o;
+            }
+
+            &.--sw {
+                cursor: sw-resize;
+                left: $o; bottom: $o;
+            }
+        }
+    }
+
+</style>
+
+
+<script>
+    import ObjectView from '../../ui/components/layout/ObjectView.vue'
+
+    export default {
+        inject: ['openmct'],
+        props: {
+            item: Object
+        },
+        components: {
+            ObjectView
+        },
+        computed: {
+            classObject: function () {
+                return {
+                    'is-drilled-in': this.item.drilledIn,
+                    'no-frame': !this.item.hasFrame
+                }
+            }
+        },
+        methods: {
+            setSelection(selection) {
+                if (selection.length === 0) {
+                    return;
+                }
+
+                let id = this.openmct.objects.makeKeyString(selection[0].context.item.identifier);
+                if (this.item.id === id) {
+                    this.$emit('selected', id);
+                }
+            },
+            drill(id, $event) {
+                if ($event) {
+                    $event.stopPropagation();
+                }
+
+                if (!this.isBeingEdited(this.item.domainObject)) {
+                    return;
+                }
+
+                if (this.openmct.composition.get(this.item.domainObject) === undefined) {
+                    return;
+                }
+
+                // Disable for fixed position.
+                if (this.item.domainObject.type === 'telemetry.fixed') {
+                    return;
+                }
+
+                this.$emit('drilledIn', id);
+            },
+            isBeingEdited(object) {
+                // TODO: add logic when inEditContext() is implemented in Vue.
+                return true;
+            }
+        },
+        mounted() {
+            this.removeSelectable = this.openmct.selection.selectable(
+                this.$el,
+                {
+                    item: this.item.domainObject
+                },
+                this.item.selected
+            );
+
+            this.openmct.selection.on('change', this.setSelection);
+        },
+        destroyed() {
+            this.openmct.off('change', this.selection);
+            this.removeSelectable();
+        }
+    }
+</script>

src/plugins/displayLayout/plugin.js

@@ -0,0 +1,45 @@
+import Layout from './DisplayLayout.vue'
+import Vue from 'vue'
+import objectUtils from '../../api/objects/object-utils.js'
+
+export default function () {
+    return function (openmct) {
+        console.log("Installing Layout component...");
+
+        openmct.objectViews.addProvider({
+            key: 'layout.view',
+            canView: function (domainObject) {
+                return domainObject.type === 'layout';
+            },
+            view: function (domainObject) {
+                let component;
+                return {
+                    show(container) {
+                        component = new Vue({
+                            components: {
+                                Layout
+                            },
+                            template: '<layout :domain-object="domainObject"></layout>',
+                            provide: {
+                                openmct,
+                                objectUtils
+                            },
+                            el: container,
+                            data () {
+                                return {
+                                    domainObject: domainObject
+                                }
+                            }                            
+                        });
+                    },
+                    destroy() {
+                        component.$destroy();
+                    }
+                };
+            },
+            priority() {
+                return 1;
+            }
+        });
+    }
+}

src/plugins/notebook/res/templates/entry.html

@@ -28,7 +28,7 @@
     </div>
 
     <div class="c-ne__local-controls--hidden">
-        <a class="c-icon-button icon-trash"
+        <a class="c-click-icon icon-trash"
            title="Delete this entry"
            v-on:click="deleteEntry"></a>
     </div>

src/plugins/plugins.js

@@ -34,7 +34,8 @@ define([
     './plot/plugin',
     './telemetryTable/plugin',
     './staticRootPlugin/plugin',
-    './notebook/plugin'
+    './notebook/plugin',
+    './displayLayout/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -49,7 +50,8 @@ define([
     PlotPlugin,
     TelemetryTablePlugin,
     StaticRootPlugin,
-    Notebook
+    Notebook,
+    DisplayLayoutPlugin
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -159,6 +161,7 @@ define([
     plugins.TelemetryMean = TelemetryMean;
     plugins.URLIndicator = URLIndicatorPlugin;
     plugins.Notebook = Notebook;
+    plugins.DisplayLayout = DisplayLayoutPlugin.default;
 
     return plugins;
 });

src/styles-new/_constants-snow.scss

@@ -49,6 +49,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
+$colorBtnCautionBg: #f16f6f;
+$colorBtnCautionBgHov: #f1504e;
+$colorBtnCautionFg: $colorBtnFg;
 $colorClickIcon: $colorKey;
 $colorClickIconHov: $colorKeyHov;
 $colorToggleIcon: rgba($colorClickIcon, 0.5);
@@ -107,6 +110,11 @@ $colorCreateMenuLgIcon: $colorKey;
 $colorCreateMenuText: $colorBodyFg;
 $menuItemPad: ($interiorMargin, nth($btnPad, 2));
 
+// Palettes and Swatches
+$paletteItemBorderOuterColorSelected: black;
+$paletteItemBorderInnerColorSelected: white;
+$paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
+
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
@@ -278,12 +286,6 @@ $colorCalCellSelectedBg: $colorItemTreeSelectedBg;
 $colorCalCellSelectedFg: $colorItemTreeSelectedFg;
 $colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
 
-// Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
-$colorPaletteSelected: #333;
-$shdwPaletteFg: none;
-$shdwPaletteSelected: inset 0 0 0 1px #fff;
-
 // About Screen
 $colorAboutLink: #84b3ff;
 

src/styles-new/_constants.scss

@@ -96,7 +96,7 @@ $glyph-icon-pointer-right: '\e1028';
 $glyph-icon-refresh: '\e1029';
 $glyph-icon-save: '\e1030';
 $glyph-icon-sine: '\e1031';
-$glyph-icon-T: '\e1032';
+$glyph-icon-font: '\e1032';
 $glyph-icon-thumbs-strip: '\e1033';
 $glyph-icon-two-parts-both: '\e1034';
 $glyph-icon-two-parts-one-only: '\e1035';
@@ -113,7 +113,7 @@ $glyph-icon-frame-show: '\e1045';
 $glyph-icon-frame-hide: '\e1046';
 $glyph-icon-import: '\e1047';
 $glyph-icon-export: '\e1048';
-$glyph-icon-minimize: '\e1049'; // 12px only
+$glyph-icon-font-size: '\e1049';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';

src/styles-new/_controls.scss

@@ -1,12 +1,35 @@
-/******************************************************** BUTTONS */
+/*****************************************************************************
-%c-control {
+ * Open MCT, Copyright (c) 2014-2018, United States Government
-    @include userSelectNone();
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// VERSION MANUALLY RESTORED FROM VUE-LAYOUT
+
+/******************************************************** PLACEHOLDERS */
+@mixin cControl() {
     $fs: 1em;
+    @include userSelectNone();
     display: inline-flex;
     align-items: center;
-    font-size: $fs;
+    justify-content: center;
-    justify-content: start;
+    overflow: hidden;
-    cursor: pointer;
 
     &:before,
     &:after {
@@ -20,17 +43,19 @@
     }
 
     [class*="__label"] {
+        @include ellipsize();
+        display: block;
         line-height: $fs; // Remove effect on top and bottom padding
         font-size: $fs;
     }
-
 }
 
-%c-button {
+@mixin cButton() {
-    @extend %c-control;
+    @include cControl();
     background: $colorBtnBg;
     border-radius: $controlCr;
     color: $colorBtnFg;
+    cursor: pointer;
     padding: nth($btnPad, 1) nth($btnPad, 2);
 
     &:hover {
@@ -47,119 +72,121 @@
             color: $colorBtnMajorFgHov;
         }
     }
+
+    &[class*='--caution'] {
+        background: $colorBtnCautionBg;
+        color: $colorBtnCautionFg;
+
+        &:hover {
+            background: $colorBtnCautionBgHov;
+        }
+    }
 }
 
-/********* Buttons */
+@mixin cClickIcon() {
-// Optionally can include icon in :before via markup
-.c-button,
-button {
-    @extend %c-button;
-}
-
-/********* Icon Buttons */
-.c-icon-button {
     // A clickable element that just includes the icon, no background
     // Padding is included to facilitate a bigger hit area
     // Make the icon bigger relative to its container
-    @extend %c-control;
+    @include cControl();
     $pLR: 3px;
     $pTB: 3px;
     border-radius: $controlCr;
     color: $colorKey;
-    font-size: $fontBaseSize * 1.2;
+    cursor: pointer;
     padding: $pTB $pLR ;
 
     &:hover {
         background: rgba($colorKey, 0.2);
     }
 
-    &:before {
+    &:before,
-        font-size: 1.1em;
+    *:before {
+        // *:before handles any nested containers that may contain glyph elements
+        // Needed for c-togglebutton.
+        font-size: 1.3em;
     }
 }
 
-/********* Button Sets */
+@mixin cCtrlWrapper {
-.c-button-set {
+    // Provides a wrapper around  buttons and other controls
-    // Buttons are smashed together with minimal margin
+    // Contains control and provides positioning context for contained menu/palette.
-    // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+    // Wraps --menu elements, contains button and menu
-    // c-icon-buttons get grouped more closely together
+    overflow: visible;
-    // When one set is adjacent to another, provides a divider between
 
-    display: inline-flex;
+    .c-menu {
+        // Default position of contained menu
+        top: 100%; left: 0;
+    }
 
+    &[class*='--menus-up'] {
+        .c-menu {
+            top: auto; bottom: 100%;
+        }
+    }
+
+    &[class*='--menus-left'] {
+        .c-menu {
+            left: auto; right: 0;
+        }
+    }
+}
+
+/********* Buttons */
+// Optionally can include icon in :before via markup
+.c-button,
+.c-button--menu,
+button {
+    @include cButton();
+}
+
+.c-button--menu {
+    $m: $interiorMargin;
+
+    &:before,
     > * {
-        // Assume buttons are immediate descendants
-        flex: 0 0 auto;
-
-        &[class^="c-button"] {
-            // Only apply the following to buttons that have background, eg. c-button
-            border-radius: 0;
-
-            + * {
-                margin-left: 1px;
-            }
-
-            &:first-child {
-                border-top-left-radius: $controlCr;
-                border-bottom-left-radius: $controlCr;
-            }
-
-            &:last-child {
-                border-top-right-radius: $controlCr;
-                border-bottom-right-radius: $controlCr;
-            }
-        }
-    }
-
-    + .c-button-set {
-        $m: $interiorMarginSm;
-        &:before {
-            content: '';
-            display: block;
-            width: $m;
-            border-right: 1px solid $colorInteriorBorder;
-            margin-right: $m;
-        }
-    }
-}
-
-/********* Menu Buttons */
-// Always includes :after dropdown arrow
-// Optionally can include icon in :before
-// Default menu position is down and to the right
-// Apply c-menu-button--menus-up and c-menu-button--menus-left to --w wrapper element to modify menu position
-.c-menu-button {
-    $m: $interiorMarginSm;
-    @extend %c-button;
-
-    &:before {
         margin-right: $m;
     }
 
     &:after {
         content: $glyph-icon-arrow-down;
         font-family: symbolsfont;
-        margin-left: $m;
         opacity: 0.5;
     }
+}
 
-    &--w {
+/********* Icon Buttons */
-        // Wraps c-menu-button, contains button and menu
+.c-click-icon {
-        .c-menu {
+    @include cClickIcon();
-            // Default position
+
-            top: 100%; left: 0;
+    &--menu {
+        &:after {
+            content: $glyph-icon-arrow-down;
+            font-family: symbolsfont;
+            font-size: 0.6em;
+            margin-left: floor($interiorMarginSm * 0.8);
+            opacity: 0.5;
+        }
+    }
+
+    &--swatched {
+        // Color control, show swatch element
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+
+        > [class*='swatch'] {
+            box-shadow: inset rgba(black, 0.2) 0 0 1px;
+            flex: 0 0 auto;
+            height: 4px;
+            width: 100%;
+            margin-top: 1px;
         }
 
-        &.c-menu-button--menus-up {
+        &:before {
-            .c-menu {
+            // Reduce size of icon to make a bit of room
-                top: auto; bottom: 100%;
+            flex: 1 1 auto;
-            }
+            font-size: 1.1em;
-        }
-
-        &.c-menu-button--menus-left {
-            .c-menu {
-                left: auto; right: 0;
-            }
         }
     }
 }
@@ -169,7 +196,7 @@ button {
 // Provides a downward arrow icon that when clicked displays a context menu
 // Always placed AFTER an element
 .c-disclosure-button {
-    @extend .c-icon-button;
+    @include cClickIcon();
     margin-left: $interiorMarginSm;
 
     &:before {
@@ -211,8 +238,8 @@ button {
 
 /******************************************************** FORM ELEMENTS */
 /********* Inline inputs */
-// A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
 .c-input-inline {
+    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
     @include input-base();
     border: 1px solid transparent;
     display: block !important;
@@ -241,6 +268,27 @@ button {
     }
 }
 
+.c-labeled-input {
+    // An input used in the Toolbar
+    // Assumes label is before the input
+    @include cControl();
+
+    input {
+        margin-left: $interiorMarginSm;
+    }
+}
+
+/******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
+.c-hyperlink {
+    &--link {
+        color: $colorKey;
+    }
+
+    &--button {
+        @include cButton();
+    }
+}
+
 /******************************************************** MENUS */
 @mixin menuOuter() {
     border-radius: $basicCr;
@@ -256,7 +304,8 @@ button {
 @mixin menuInner() {
     color: $colorMenuFg;
     li {
-        @extend %c-control;
+        @include cControl();
+        justify-content: start;
         color: $colorMenuFg;
         display: flex;
         padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
@@ -281,11 +330,6 @@ button {
 .c-menu {
     @include menuOuter();
     @include menuInner();
-     li {
-         &:not(:first-child) {
-             border-top: 1px solid pullForward($colorMenuBg, 10%);
-         }
-     }
 }
 
 .c-super-menu {
@@ -354,3 +398,155 @@ button {
     }
 }
 
+/******************************************************** PALETTES */
+.c-palette {
+    display: flex;
+    flex-flow: column nowrap;
+
+    &__items {
+        flex: 1 1 auto;
+        display: grid;
+        grid-template-columns: repeat(10, [col] auto );
+        grid-gap: 1px;
+    }
+
+    &__item {
+        $d: 16px;
+
+        border: 1px solid transparent;
+        cursor: pointer;
+        width: 16px; height: 16px;
+        transition: $transOut;
+
+        &:hover {
+            transition: $transIn;
+            $o: 0.7;
+            border-color: rgba($paletteItemBorderOuterColorSelected, $o);
+            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
+        }
+
+        &.is-selected {
+            border-color: $paletteItemBorderOuterColorSelected !important;
+            border-width: 2px;
+            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+        }
+    }
+
+    &__item-none {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        margin-bottom: $interiorMarginSm;
+
+        .c-palette__item {
+            @include noColor();
+            border-color: $paletteItemBorderInnerColor;
+            margin-right: $interiorMarginSm;
+        }
+    }
+}
+
+/******************************************************** TOOLBAR */
+.c-ctrl-wrapper {
+    @include cCtrlWrapper();
+}
+
+.c-toolbar,
+.c-toolbar .c-ctrl-wrapper {
+    display: flex;
+    align-items: stretch;
+}
+
+.c-toolbar {
+    height: 24px; // Need to standardize the height
+
+    .c-click-icon {
+        @include cControl();
+        $pLR: $interiorMargin - 1;
+        $pTB: 2px;
+        color: $colorBodyFg;
+        padding: $pTB $pLR;
+
+        &--swatched {
+            padding-bottom: floor($pTB / 2);
+            width: 2em; // Standardize the width
+        }
+
+        &[class*='--caution'] {
+            &:before {
+                color: $colorBtnCautionBg;
+            }
+
+            &:hover {
+                background: rgba($colorBtnCautionBgHov, 0.2);
+                :before {
+                    color: $colorBtnCautionBgHov;
+                }
+            }
+        }
+    }
+
+    .c-labeled-input {
+        font-size: 0.9em;
+        input[type='number'] {
+            width: 40px; // Number input sucks and must have size set using this method
+        }
+
+        + .c-labeled-input {
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+/********* Button Sets */
+.c-button-set {
+    // When one set is adjacent to another, provides a divider between
+
+    display: inline-flex;
+    flex: 0 0 auto;
+
+    > * {
+        // Assume buttons are immediate descendants
+        flex: 0 0 auto;
+
+        + * {
+            // margin-left: $interiorMarginSm;
+        }
+    }
+
+    + .c-button-set {
+        $m: $interiorMargin;
+        $b: 1px;
+        &:before {
+            content: '';
+            display: block;
+            width: $m + $b; // Allow for border
+            border-right: $b solid $colorInteriorBorder;
+            margin-right: $m;
+        }
+    }
+
+    &[class*='--strip'] {
+        // Buttons are smashed together with minimal margin
+        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+        // c-click-icons get grouped more closely together
+        &[class^="c-button"] {
+            // Only apply the following to buttons that have background, eg. c-button
+            border-radius: 0;
+
+            + * {
+                margin-left: 1px;
+            }
+
+            &:first-child {
+                border-top-left-radius: $controlCr;
+                border-bottom-left-radius: $controlCr;
+            }
+
+            &:last-child {
+                border-top-right-radius: $controlCr;
+                border-bottom-right-radius: $controlCr;
+            }
+        }
+    }
+}

src/styles-new/_global.scss

@@ -89,6 +89,13 @@ body.desktop {
     }
 }
 
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    //margin: -1px -5px inherit -5px !important;
+    margin-right: -5px !important;
+    margin-top: -1px !important;
+}
+
 /************************** HTML ENTITIES */
 a {
     color: $colorA;
@@ -283,21 +290,6 @@ a.disabled {
     text-align: center;
 }
 
-.no-selection {
-    // aka selection = "None". Used in palettes and their menu buttons.
-    $c: red;
-    $s: 48%;
-    $e: 52%;
-    background-image: linear-gradient(-45deg,
-            transparent $s - 5%,
-            $c $s,
-            $c $e,
-            transparent $e + 5%
-    );
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
 .scrolling,
 .scroll {
     overflow: auto;
@@ -380,3 +372,8 @@ a.disabled {
 .t-imagery {
     display: contents;
 }
+
+.t-frame-outer {
+    min-width: 200px;
+    min-height: 200px;
+}

src/styles-new/_glyphs.scss

@@ -91,7 +91,7 @@
 .icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
 .icon-save {  @include glyphBefore($glyph-icon-save); }
 .icon-sine {  @include glyphBefore($glyph-icon-sine); }
-.icon-T {  @include glyphBefore($glyph-icon-T); }
+.icon-font {  @include glyphBefore($glyph-icon-font); }
 .icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
 .icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
 .icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
@@ -108,6 +108,7 @@
 .icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
 .icon-import {  @include glyphBefore($glyph-icon-import); }
 .icon-export {  @include glyphBefore($glyph-icon-export); }
+.icon-font-size {  @include glyphBefore($glyph-icon-font-size); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }

src/styles-new/_mixins.scss

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+// VERSION MANUALLY RESTORED FROM VUE-LAYOUT
+
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
@@ -53,6 +55,37 @@
     background-size: $bgsize $bgsize;
 }
 
+@mixin noColor() {
+    // A "no fill/stroke" selection option. Used in palettes.
+    $c: red;
+    $s: 48%;
+    $e: 52%;
+    background-image: linear-gradient(-45deg,
+        transparent $s - 5%,
+        $c $s,
+        $c $e,
+        transparent $e + 5%
+    );
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
+    $deg: 90deg;
+    @if ($repeatDir != 'x') {
+        $deg: 0deg;
+        $repeatDir: repeat-y;
+    } @else {
+        $repeatDir: repeat-x;
+    }
+
+    background-image: linear-gradient($deg,
+            $c 1px, transparent 1px,
+            transparent 100%
+    );
+    background-repeat: $repeatDir;
+}
+
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     @include background-image(linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
@@ -63,6 +96,11 @@
 }
 
 /************************** LAYOUT */
+@mixin abs($m: 0) {
+    position: absolute;
+    top: $m; right: $m; bottom: $m; left: $m;
+}
+
 @mixin gridTwoColumn() {
     display: grid;
     grid-row-gap: 0;
@@ -126,8 +164,6 @@
     }
 }
 
-
-
 @mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
     @include input-base();
     background: $bg;
@@ -142,6 +178,63 @@
     box-shadow: $shdw;
 }
 
+@mixin wrappedInput() {
+    // An input that is wrapped. Optionally includes a __label or icon element.
+    // Based on .c-search.
+    @include nice-input();
+    display: flex;
+    align-items: center;
+    padding-left: 4px;
+    padding-right: 4px;
+
+    &:before,
+    [class*='__label'] {
+        opacity: 0.5;
+    }
+
+    &:before {
+        // Adds an icon. Content defined in class.
+        direction: rtl; // Aligns glyph to right-hand side of container, for transition
+        display: block;
+        font-family: symbolsfont;
+        flex: 0 0 auto;
+        overflow: hidden;
+        padding: 2px 0; // Prevents clipping
+        transition: width 250ms ease;
+        width: 1em;
+    }
+
+    &:hover {
+        box-shadow: inset rgba(black, 0.8) 0 0px 2px;
+        &:before {
+            opacity: 0.9;
+        }
+    }
+
+    &--major {
+        padding: 4px;
+    }
+
+    &__input,
+    input[type='text'],
+    input[type='search'],
+    input[type='number'] {
+        background: none  !important;
+        box-shadow: none !important; // !important needed to override default for [input]
+        flex: 1 1 auto;
+        padding-left: 2px !important;
+        padding-right: 2px !important;
+        min-width: 10px; // Must be set to allow input to collapse below browser min
+    }
+
+    &.is-active {
+        &:before {
+            padding: 2px 0px;
+            width: 0px;
+        }
+    }
+}
+
 /************************** MATH */
 @function percentToDecimal($p) {
     @return $p / 100%;

src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "openmct-symbols-16px",
     "lastOpened": 0,
-    "created": 1529545133464
+    "created": 1537817705550
   },
   "iconSets": [
     {
@@ -525,7 +525,7 @@
           "tempChar": ""
         },
         {
-          "order": 102,
+          "order": 149,
           "prevSize": 24,
           "name": "icon-T",
           "id": 84,
@@ -660,13 +660,21 @@
           "code": 921672,
           "tempChar": ""
         },
+        {
+          "order": 150,
+          "id": 119,
+          "name": "icon-font-size-alt1",
+          "prevSize": 24,
+          "code": 921673,
+          "tempChar": ""
+        },
         {
           "order": 37,
           "prevSize": 24,
           "name": "icon-activity",
           "id": 32,
           "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 36,
@@ -674,7 +682,7 @@
           "name": "icon-activity-mode",
           "id": 31,
           "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -682,7 +690,7 @@
           "name": "icon-autoflow-tabular",
           "id": 47,
           "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -690,7 +698,7 @@
           "name": "icon-clock",
           "id": 50,
           "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -698,7 +706,7 @@
           "name": "icon-database",
           "id": 53,
           "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 57,
@@ -706,7 +714,7 @@
           "name": "icon-database-query",
           "id": 52,
           "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 17,
@@ -714,7 +722,7 @@
           "name": "icon-dataset",
           "id": 12,
           "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 22,
@@ -722,7 +730,7 @@
           "name": "icon-datatable",
           "id": 17,
           "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -730,7 +738,7 @@
           "name": "icon-dictionary",
           "id": 54,
           "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 62,
@@ -738,7 +746,7 @@
           "name": "icon-folder",
           "id": 57,
           "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 66,
@@ -746,7 +754,7 @@
           "name": "icon-image",
           "id": 61,
           "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -754,7 +762,7 @@
           "name": "icon-layout",
           "id": 63,
           "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 77,
@@ -762,7 +770,7 @@
           "name": "icon-object",
           "id": 72,
           "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 78,
@@ -770,7 +778,7 @@
           "name": "icon-object-unknown",
           "id": 73,
           "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -778,7 +786,7 @@
           "name": "icon-packet",
           "id": 74,
           "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -786,7 +794,7 @@
           "name": "icon-page",
           "id": 75,
           "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 135,
@@ -794,7 +802,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -802,7 +810,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -810,7 +818,7 @@
           "name": "icon-session",
           "id": 5,
           "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -818,7 +826,7 @@
           "name": "icon-tabular",
           "id": 19,
           "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -826,7 +834,7 @@
           "name": "icon-tabular-lad",
           "id": 2,
           "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -834,7 +842,7 @@
           "name": "icon-tabular-lad-set",
           "id": 1,
           "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -842,7 +850,7 @@
           "name": "icon-tabular-realtime",
           "id": 3,
           "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 23,
@@ -850,7 +858,7 @@
           "name": "icon-tabular-scrolling",
           "id": 18,
           "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 112,
@@ -858,7 +866,7 @@
           "name": "icon-telemetry",
           "id": 86,
           "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -866,7 +874,7 @@
           "name": "icon-telemetry-panel",
           "id": 85,
           "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 93,
@@ -874,15 +882,15 @@
           "name": "icon-timeline",
           "id": 88,
           "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 116,
           "id": 101,
-          "name": "icon-timer-v1.5",
+          "name": "icon-timer-v15",
           "prevSize": 24,
           "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -890,7 +898,7 @@
           "name": "icon-topic",
           "id": 6,
           "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -898,7 +906,7 @@
           "name": "icon-box-with-dashed-lines",
           "id": 29,
           "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -906,7 +914,7 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -914,13 +922,13 @@
           "name": "icon-notebook",
           "prevSize": 24,
           "code": 921905,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "metadata": {
         "name": "openmct-symbols-16px",
         "importSize": {
-          "width": 512,
+          "width": 745,
           "height": 512
         },
         "designer": "Charles Hacskaylo",
@@ -2360,7 +2368,7 @@
         },
         {
           "paths": [
-            "M0 0v256h128v-64h256v704h-192v128h640v-128h-192v-704h256v64h128v-256z"
+            "M800 1024h224l-384-1024h-256l-384 1024h224l84-224h408zM380 608l132-352 132 352z"
           ],
           "grid": 16,
           "tags": [
@@ -2368,9 +2376,15 @@
           ],
           "defaultCode": 228,
           "id": 84,
-          "attrs": [],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "colorPermutations": {
-            "1161751207457516161751": []
+            "1161751207457516161751": [
+              {}
+            ]
           }
         },
         {
@@ -2840,6 +2854,30 @@
             ]
           }
         },
+        {
+          "id": 119,
+          "paths": [
+            "M1226.4 320h-176l-76.22 203.24 77 205.34 87.22-232.58 90.74 242h-174.44l49.5 132h174.44l57.76 154h154l-264-704z",
+            "M384 0l-384 1024h224l84-224h408l84 224h224l-384-1024zM380 608l132-352 132 352z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "width": 1490,
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-font-size-alt1"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {},
+              {}
+            ]
+          }
+        },
         {
           "paths": [
             "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
@@ -3740,7 +3778,9 @@
       "classSelector": ".ui-symbol",
       "showMetrics": true,
       "showMetadata": true,
-      "embed": false
+      "embed": false,
+      "noie8": true,
+      "ie7": false
     },
     "imagePref": {
       "prefix": "icon-",

src/styles-new/fonts/openmct-symbols-16px.svg

@@ -71,7 +71,7 @@
 <glyph unicode="&#xe1029;" glyph-name="icon-refresh" d="M960 528v432l-164.8-164.8c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2s-131.2-197.2-131.2-316.8 46.6-232.2 131.2-316.8c84.6-84.6 197.2-131.2 316.8-131.2s232.2 46.6 316.8 131.2c69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.8-145.8-159-256-313.6-256-176.4 0-320 143.6-320 320s143.8 320 320.2 320c72 0 138.4-23.8 192-64l-176-176h432z" />
 <glyph unicode="&#xe1030;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
 <glyph unicode="&#xe1031;" glyph-name="icon-sine" d="M1022.294 448c-1.746 7.196-3.476 14.452-5.186 21.786-20.036 85.992-53.302 208.976-98 306.538-22.42 48.938-45.298 86.556-69.946 115.006-48.454 55.93-98.176 67.67-131.356 67.67s-82.902-11.74-131.356-67.672c-24.648-28.45-47.528-66.068-69.948-115.006-44.696-97.558-77.962-220.544-98-306.538-21.646-92.898-46.444-175.138-71.71-237.836-16.308-40.46-30.222-66.358-40.6-82.604-10.378 16.246-24.292 42.142-40.6 82.604-23.272 57.75-46.144 132.088-66.524 216.052h-197.362c1.746-7.196 3.476-14.452 5.186-21.786 20.036-85.992 53.302-208.976 98-306.538 22.42-48.938 45.298-86.556 69.946-115.006 48.454-55.932 98.176-67.672 131.356-67.672s82.902 11.74 131.356 67.672c24.648 28.45 47.528 66.068 69.948 115.006 44.696 97.558 77.962 220.544 98 306.538 21.646 92.898 46.444 175.138 71.71 237.836 16.308 40.46 30.222 66.358 40.6 82.604 10.378-16.246 24.292-42.142 40.6-82.604 23.274-57.748 46.146-132.086 66.526-216.050h197.36z" />
-<glyph unicode="&#xe1032;" glyph-name="icon-T" d="M0 960v-256h128v64h256v-704h-192v-128h640v128h-192v704h256v-64h128v256z" />
+<glyph unicode="&#xe1032;" glyph-name="icon-T" d="M800-64h224l-384 1024h-256l-384-1024h224l84 224h408zM380 352l132 352 132-352z" />
 <glyph unicode="&#xe1033;" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
 <glyph unicode="&#xe1034;" glyph-name="icon-two-parts-both" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM128 832h320v-768h-320v768zM896 64h-320v768h320v-768z" />
 <glyph unicode="&#xe1035;" glyph-name="icon-two-parts-one-only" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-320v768h320v-768z" />
@@ -88,6 +88,7 @@
 <glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
 <glyph unicode="&#xe1047;" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
 <glyph unicode="&#xe1048;" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
+<glyph unicode="&#xe1049;" glyph-name="icon-font-size-alt1" horiz-adv-x="1490" d="M1226.4 640h-176l-76.22-203.24 77-205.34 87.22 232.58 90.74-242h-174.44l49.5-132h174.44l57.76-154h154l-264 704zM384 960l-384-1024h224l84 224h408l84-224h224l-384 1024zM380 352l132 352 132-352z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
@@ -115,7 +116,7 @@
 <glyph unicode="&#xe1124;" glyph-name="icon-telemetry" d="M32 328.34c14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 37.4 95.5 99.14 207.14 188.94 232.46-90.462 152.598-254.314 253.3-441.686 253.3-0.075 0-0.15 0-0.226 0-282.748 0-511.988-229.24-511.988-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.255 8.968-7.457 16.648-13.417 21.428-15.297zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-37.4-95.5-99.14-207.14-188.94-232.46 90.462-152.598 254.314-253.3 441.686-253.3 0.075 0 0.15 0 0.226 0 282.748 0 511.988 229.24 511.988 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.255-8.968 7.457-16.648 13.417-21.428 15.297z" />
 <glyph unicode="&#xe1125;" glyph-name="icon-telemetry-panel" d="M169.2 512c14 56.4 33 122 56.6 176.8 15.4 35.8 31.2 63.2 48.2 84 18.4 22.4 49 49.2 91 49.2s72.6-26.8 91-49.2c17-20.6 32.6-48.2 48.2-84 23.6-54.8 42.8-120.4 56.6-176.8h461.2v256c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-256h171.2zM718.6 384h-127.2c25-93.4 48.4-144.4 63.6-168.6 15.2 24.2 38.6 75.2 63.6 168.6zM301.4 512h127.2c-25 93.4-48.4 144.4-63.6 168.6-15.2-24.2-38.6-75.2-63.6-168.6zM850.8 384c-14-56.4-33-122-56.6-176.8-15.4-35.8-31.2-63.2-48.2-84-18.4-22.4-49-49.2-91-49.2s-72.6 26.8-91 49.2c-17 20.6-32.6 48.2-48.2 84-23.6 54.8-42.8 120.4-56.6 176.8h-461.2v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-171.2z" />
 <glyph unicode="&#xe1126;" glyph-name="icon-timeline" d="M256 704h384v-128h-384v128zM384 512h384v-128h-384v128zM320 320h384v-128h-384v128zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.2c0 0.2 0.2 0.2 0.4 0.4h127.6v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
-<glyph unicode="&#xe1127;" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
+<glyph unicode="&#xe1127;" glyph-name="icon-timer-v15" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
 <glyph unicode="&#xe1128;" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
 <glyph unicode="&#xe1129;" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
 <glyph unicode="&#xe1130;" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />

src/ui/components/controls/CreateButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="c-create-button--w">
+    <div class="c-ctrl-wrapper">
-        <div class="c-create-button c-menu-button c-button--major icon-plus"
+        <div class="c-create-button c-button--menu c-button--major icon-plus"
              @click="toggleCreateMenu">
             <span class="c-button__label">Create</span>
         </div>
@@ -31,10 +31,6 @@
 
     .c-create-button,
     .c-create-menu {
-        &--w {
-            // Wrapper for Create button and menu
-            overflow: visible;
-        }
 
         font-size: 1.1em;
     }

src/ui/components/controls/checkboxCustom.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="c-custom-checkbox">
+        <input type="checkbox"
+               :id="id"
+               :name="name"
+               :value="value"
+               :required="required"
+               :disabled="disabled"
+               @change="onChange"
+               :checked="state">
+        <label :for="id">
+            <div class="c-custom-checkbox__box"></div>
+            <div class="c-custom-checkbox__label-text">
+                <slot></slot>
+            </div>
+        </label>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-custom-checkbox {
+        $d: 14px;
+        display: flex;
+        align-items: center;
+
+        label {
+            @include userSelectNone();
+            display: flex;
+            align-items: center;
+        }
+
+        &__box {
+            @include nice-input();
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            line-height: $d;
+            width: $d;
+            height: $d;
+            margin-right: $interiorMarginSm;
+        }
+
+        input {
+            opacity: 0;
+            position: absolute;
+
+            &:checked + label > .c-custom-checkbox__box {
+                background: $colorKey;
+                &:before {
+                    color: $colorKeyFg;
+                    content: $glyph-icon-check;
+                    font-family: symbolsfont;
+                    font-size: 0.6em;
+                }
+            }
+
+            &:not(:disabled) + label {
+                cursor: pointer;
+            }
+
+            &:disabled + label {
+                opacity: 0.5;
+            }
+        }
+    }
+</style>
+
+<script>
+    /*
+    Custom checkbox control. Use just like a checkbox in HTML, except label string is passed within tag.
+    Supports value, true-value, false-value, checked and disabled attributes.
+    Example usage:
+    <checkbox checked>Enable markers</checkbox>
+     */
+    export default {
+        model: {
+            prop: 'modelValue',
+            event: 'input'
+        },
+
+        props: {
+            id: {
+                type: String,
+                default: function () {
+                    return 'checkbox-id-' + this._uid;
+                },
+            },
+            name: {
+                type: String,
+                default: null,
+            },
+            value: {
+                default: null,
+            },
+            modelValue: {
+                default: undefined,
+            },
+            checked: {
+                type: Boolean,
+                default: false,
+            },
+            required: {
+                type: Boolean,
+                default: false,
+            },
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+            model: {}
+        },
+
+        computed: {
+            state() {
+                if (this.modelValue === undefined) {
+                    return this.checked;
+                }
+
+                if (Array.isArray(this.modelValue)) {
+                    return this.modelValue.indexOf(this.value) > -1;
+                }
+
+                return !!this.modelValue;
+            }
+        },
+
+        methods: {
+            onChange() {
+                this.toggle();
+            },
+
+            toggle() {
+                let value;
+
+                if (Array.isArray(this.modelValue)) {
+                    value = this.modelValue.slice(0);
+
+                    if (this.state) {
+                        value.splice(value.indexOf(this.value), 1);
+                    } else {
+                        value.push(this.value);
+                    }
+                } else {
+                    value = !this.state;
+                }
+
+                this.$emit('input', value);
+            }
+        },
+
+        watch: {
+            checked(newValue) {
+                if (newValue !== this.state) {
+                    this.toggle();
+                }
+            }
+        },
+
+        mounted() {
+            if (this.checked && !this.state) {
+                this.toggle();
+            }
+        },
+    };
+</script>
+

src/ui/components/controls/labeledNumberInput.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="c-labeled-input"
+        :title="title">
+        <div class="c-labeled-input__label">{{ label }}</div>
+        <input type="number"
+               v-bind="$attrs"
+               v-bind:value="value"
+               v-on="inputListeners"/>
+    </div>
+</template>
+
+<script>
+    /* Emits input and clear events */
+    export default {
+        inheritAttrs: false,
+        props: {
+            value: String,
+            label: String,
+            title: String
+        },
+        computed: {
+            inputListeners: function () {
+                let vm = this;
+                return Object.assign({},
+                    this.$listeners,
+                    {
+                        input: function (event) {
+                            vm.$emit('input', event.target.value);
+                        },
+                        change: function (event) {
+                            vm.$emit('change', event.target.value);
+                        }
+                    }
+                )
+            }
+        },
+        data: function() {
+            return {
+                // active: false
+            }
+        },
+        methods: {
+            clearInput() {
+                // Clear the user's input and set 'active' to false
+                this.value = '';
+                this.$emit('clear','');
+                this.active = false;
+            }
+        }
+    }
+</script>

src/ui/components/controls/search.vue

@@ -13,47 +13,17 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";;
+    @import "~styles/sass-base";
 
-    /******************************* SEARCH */
     .c-search {
-        @include nice-input();
+        @include wrappedInput();
-        display: flex;
+
-        align-items: center;
+        padding-top: 2px;
-        padding: 2px 4px;
+        padding-bottom: 2px;
 
         &:before {
             // Mag glass icon
             content: $glyph-icon-magnify;
-            direction: rtl; // Aligns glyph to right-hand side of container, for transition
-            display: block;
-            font-family: symbolsfont;
-            flex: 0 0 auto;
-            opacity: 0.5;
-            overflow: hidden;
-            padding: 2px 0; // Prevents clipping
-            transition: width 250ms ease;
-            width: 1em;
-        }
-
-        &:hover {
-            box-shadow: inset rgba(black, 0.8) 0 0px 2px;
-            &:before {
-                opacity: 0.9;
-            }
-        }
-
-        &--major {
-            padding: 4px;
-        }
-
-        &__input {
-            background: none  !important;
-            box-shadow: none !important; // !important needed to override default for [input]
-            flex: 1 1 auto;
-            padding-left: 2px !important;
-            padding-right: 2px !important;
-            min-width: 10px; // Must be set to allow input to collapse below browser min
         }
 
         &__clear-input {
@@ -61,11 +31,6 @@
         }
 
         &.is-active {
-            &:before {
-                padding: 2px 0px;
-                width: 0px;
-            }
-
             .c-search__clear-input {
                 display: block;
             }

src/ui/components/controls/toggleButton.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="c-togglebutton">
+        <input type="checkbox"
+               :id="id"
+               :name="name"
+               :value="value"
+               :required="required"
+               :disabled="disabled"
+               @change="onChange"
+               :checked="state">
+        <label :for="id">
+            <div class="c-togglebutton__on"
+                :class="innerClassOn"></div>
+            <div class="c-togglebutton__off"
+                :class="innerClassOff"></div>
+        </label>
+    </div>
+    
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-togglebutton {
+        $d: 14px;
+        display: flex;
+        align-items: center;
+
+        label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .c-togglebutton__on {
+                display: none;
+            }
+        }
+
+        input {
+            opacity: 0;
+            position: absolute;
+
+            &:checked + label {
+                .c-togglebutton__on {
+                    display: block;
+                }
+                .c-togglebutton__off {
+                    display: none;
+                }
+            }
+
+            &:not(:disabled) + label {
+                cursor: pointer;
+            }
+
+            &:disabled + label {
+                opacity: 0.5;
+            }
+        }
+    }
+</style>
+
+<script>
+    /*
+    Toggle button control, based on checkboxCustom. Use just like a checkbox in HTML.
+    Requires inner-class-on and -off attributes to be passed.
+    Supports checked and disabled attributes.
+    Example usage:
+    <toggle-button checked
+                    class="c-click-icon"
+                    inner-class-on="icon-grid-snap-to"
+                    inner-class-off="icon-grid-snap-no"></toggle-button>
+     */
+    export default {
+        model: {
+            prop: 'modelValue',
+            event: 'input'
+        },
+
+        props: {
+            innerClassOn: {
+                type: String,
+                default: null,
+                required: true
+            },
+            innerClassOff: {
+                type: String,
+                default: null,
+                required: true
+            },
+            id: {
+                type: String,
+                default: function () {
+                    return 'checkbox-id-' + this._uid;
+                },
+            },
+            name: {
+                type: String,
+                default: null,
+            },
+            value: {
+                default: null,
+            },
+            modelValue: {
+                default: undefined,
+            },
+            checked: {
+                type: Boolean,
+                default: false,
+            },
+            required: {
+                type: Boolean,
+                default: false,
+            },
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+            model: {}
+        },
+
+        computed: {
+            state() {
+                if (this.modelValue === undefined) {
+                    return this.checked;
+                }
+
+                if (Array.isArray(this.modelValue)) {
+                    return this.modelValue.indexOf(this.value) > -1;
+                }
+                return !!this.modelValue;
+            },
+            stateClass() {
+                return this.onClass;
+            }
+        },
+
+        methods: {
+            onChange() {
+                this.toggle();
+            },
+
+            toggle() {
+                let value;
+
+                if (Array.isArray(this.modelValue)) {
+                    value = this.modelValue.slice(0);
+
+                    if (this.state) {
+                        value.splice(value.indexOf(this.value), 1);
+                    } else {
+                        value.push(this.value);
+                    }
+                } else {
+                    value = !this.state;
+                }
+
+                this.$emit('input', value);
+            }
+        },
+
+        watch: {
+            checked(newValue) {
+                if (newValue !== this.state) {
+                    this.toggle();
+                }
+            }
+        },
+
+        mounted() {
+            if (this.checked && !this.state) {
+                this.toggle();
+            }
+        },
+    };
+</script>

src/ui/components/layout/BrowseBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <a class="l-browse-bar__nav-to-parent-button c-icon-button icon-pointer-left"></a>
+            <a class="l-browse-bar__nav-to-parent-button c-click-icon icon-pointer-left"></a>
             <div class="l-browse-bar__object-name--w"
                  :class="type.cssClass">
                 <span
@@ -17,7 +17,7 @@
         <div class="l-browse-bar__end">
             <div class="l-browse-bar__view-switcher c-menu-button--w c-menu-button--menus-left"
                  v-if="views.length > 1">
-                <div class="c-menu-button"
+                <div class="c-button--menu"
                      :class="currentView.cssClass"
                      title="Switch view type"
                      @click="toggleViewMenu">

src/ui/components/layout/Layout.vue

@@ -3,8 +3,8 @@
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
             <div class="l-shell__controls">
-                <a class="c-icon-button icon-new-window" title="Open in a new browser tab"></a>
+                <a class="c-click-icon icon-new-window" title="Open in a new browser tab"></a>
-                <a class="c-icon-button icon-fullscreen-collapse" title="Enable full screen mode"></a>
+                <a class="c-click-icon icon-fullscreen-collapse" title="Enable full screen mode"></a>
             </div>
             <div class="l-shell__app-logo">[ App Logo ]</div>
         </div>
@@ -21,16 +21,15 @@
                     <mct-tree></mct-tree>
                 </div>
             </pane>
-            <pane class="l-shell__pane-main">
+            <pane class="l-shell__pane-main"
+                :class="{ 'is-editing' : true }">
                 <browse-bar class="l-shell__main-view-browse-bar"
-                                   ref="browseBar">
+                        ref="browseBar"></browse-bar>
-                </browse-bar>
+                <toolbar class="l-shell__toolbar"></toolbar>
                 <object-view class="l-shell__main-container"
-                             ref="browseObject">
+                             ref="browseObject"></object-view>
-                </object-view>
                 <mct-template template-key="conductor"
-                              class="l-shell__time-conductor">
+                              class="l-shell__time-conductor"></mct-template>
-                </mct-template>
             </pane>
             <pane class="l-shell__pane-inspector l-pane--holds-multipane"
                   handle="before"
@@ -152,7 +151,7 @@
             margin-right: 2.5%;
         }
 
-        /********** MAIN AREA */
+        /******************************* MAIN AREA */
         &__main-container {
             // Wrapper for main views
             flex: 1 1 auto;
@@ -186,6 +185,11 @@
             &__pane-inspector {
                 width: 200px;
             }
+
+            &__toolbar {
+                flex: 0 0 auto;
+                margin-bottom: $interiorMargin;
+            }
         }
     }
 </style>
@@ -202,6 +206,7 @@
     import multipane from '../controls/multipane.vue';
     import pane from '../controls/pane.vue';
     import BrowseBar from './BrowseBar.vue';
+    import Toolbar from './Toolbar.vue';
 
     export default {
         components: {
@@ -215,7 +220,8 @@
             search,
             multipane,
             pane,
-            BrowseBar
+            BrowseBar,
+            Toolbar
         }
     }
 </script>

src/ui/components/layout/ObjectView.vue

@@ -2,7 +2,7 @@
 </template>
 
 <style lang="scss">
-    .l-object-view {
+    .c-object-view {
         display: contents;
     }
 </style>
@@ -33,6 +33,7 @@ export default {
         this.debounceUpdateView = _.debounce(this.updateView, 10);
     },
     mounted() {
+        this.currentObject = this.object;
         this.updateView();
     },
     methods: {
@@ -50,7 +51,7 @@ export default {
                 return;
             }
             this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('l-object-view');
+            this.viewContainer.classList.add('c-object-view');
             this.$el.append(this.viewContainer);
             let provider = this.openmct.objectViews.getByProviderKey(this.viewKey);
             if (!provider) {

src/ui/components/layout/Toolbar.vue

@@ -0,0 +1,291 @@
+<template>
+    <div class="c-toolbar">
+        <!-- VERSION MANUALLY RESTORED FROM VUE-LAYOUT -->
+        <div class="c-button-set">
+            <div class="c-ctrl-wrapper">
+                <div class="c-button--menu js-add-button icon-plus"
+                    @click="toggleMenus">
+                    <div class="c-button__label">Add</div>
+                </div>
+                <div class="c-menu" v-if="showMenus">
+                    <ul>
+                        <li v-for="item in addMenuItems"
+                            :class="item.class"
+                            :title="item.title">
+                            {{ item.name }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected">
+            <div class="c-ctrl-wrapper"
+                 v-if="toolsItemSelected">
+                <div class="c-click-icon c-click-icon--menu js-layers icon-layers"
+                     @click="toggleMenus"></div>
+                <div class="c-menu" v-if="showMenus">
+                    <ul>
+                        <li v-for="item in layersMenuItems"
+                            :class="item.class"
+                            :title="item.title">
+                            {{ item.name }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="c-ctrl-wrapper"
+                 v-if="toolsColorFill">
+                <div class="c-click-icon c-click-icon--swatched js-color-fill icon-paint-bucket"
+                     @click="toggleMenus">
+                    <div class="c-swatch" style="background: #33ff00;"></div>
+                </div>
+                <div class="c-menu c-palette c-palette--color"
+                    v-if="showMenus">
+                    <div class="c-palette__item-none"
+                        vif="this.palette.itemNone === true">
+                        <div class="c-palette__item"
+                             @click="this.setColor('no-color')"></div>
+                        No fill
+                    </div>
+                    <div class="c-palette__items">
+                        <div class="c-palette__item"
+                            v-for="color in colorPalette"
+                            :style="{ background: color.value }"
+                            @click="this.setColor(color.value)"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="c-ctrl-wrapper"
+                 v-if="toolsColorStroke">
+                <div class="c-click-icon c-click-icon--swatched js-color-stroke icon-pencil">
+                    <div class="c-toolbar-button__swatch" style="background: #ffffff;"></div>
+                </div>
+            </div>
+
+            <div class="c-ctrl-wrapper"
+                 v-if="toolsColorText">
+                <div class="c-click-icon c-click-icon--swatched js-color-text icon-font">
+                    <div class="c-toolbar-button__swatch" style="background: #333333;"></div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected && toolsFontSize">
+            <div class="c-ctrl-wrapper">
+                <div class="c-click-icon c-click-icon--menu js-font-size"
+                     @click="toggleMenus">
+                    <div class="c-button__label">11 px</div>
+                </div>
+                <div class="c-menu" v-if="showMenus">
+                    <ul>
+                        <li v-for="item in fontSizeMenuItems">
+                            {{ item.name }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected && toolsEditProperties">
+            <div class="c-ctrl-wrapper">
+                <div class="c-click-icon js-image icon-gear"></div>
+            </div>
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected">
+            <labeledNumberInput label="X" value=1 title="X position"></labeledNumberInput>
+            <labeledNumberInput label="Y" value=2 title="Y position"></labeledNumberInput>
+            <labeledNumberInput label="W" value=3 title="Width"></labeledNumberInput>
+            <labeledNumberInput label="H" value=4 title="Height"></labeledNumberInput>
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected">
+            <div class="c-click-icon c-click-icon--caution icon-trash"></div>
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected">
+            <checkbox checked title="This is a checkbox">Checkbox</checkbox>
+        </div>
+
+        <div class="c-button-set"
+             v-if="toolsItemSelected">
+            <toggle-button title="Toggle frame" checked
+                           class="c-click-icon"
+                           inner-class-on="icon-frame-show"
+                           inner-class-off="icon-frame-hide"></toggle-button>
+            <toggle-button title="Snap to grid" checked
+                    class="c-click-icon"
+                    inner-class-on="icon-grid-snap-to"
+                    inner-class-off="icon-grid-snap-no"></toggle-button>
+            <toggle-button title="Show label and value" checked
+                    class="c-click-icon"
+                    inner-class-on="icon-two-parts-both"
+                    inner-class-off="icon-two-parts-one-only"></toggle-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import labeledNumberInput from '../controls/labeledNumberInput.vue';
+    import checkbox from '../controls/checkboxCustom.vue';
+    import toggleButton from '../controls/toggleButton.vue';
+
+    export default {
+        components: {
+            labeledNumberInput,
+            checkbox,
+            toggleButton
+        },
+        methods: {
+            toggleMenus: function () {
+                this.showMenus = !this.showMenus;
+            }
+        },
+        props: {
+            toolsItemSelected: { type: Boolean,  default: true },
+            toolsColorFill: { type: Boolean,  default: true },
+            toolsColorStroke: { type: Boolean,  default: true },
+            toolsColorText: { type: Boolean,  default: true },
+            toolsFontSize: { type: Boolean,  default: true },
+            toolsEditProperties: { type: Boolean,  default: true },
+            toolSetBox: ['toolsColorFill', 'toolsColorStroke'],
+            toolSetLine: ['toolsColorStroke'],
+            toolSetText: ['toolsColorFill', 'toolsColorStroke', 'toolsColorText', 'toolsFontSize', 'toolsEditProperties'],
+            toolSetImage: ['toolsColorStroke', 'toolsEditProperties'],
+            toolSetTelemetry: ['toolsColorFill', 'toolsColorStroke', 'toolsColorText', 'toolsFontSize', 'toolsLabelValue']
+        },
+        data: function () {
+            return {
+                showMenus: false,
+                addMenuItems: [
+                    { name: 'Box', class: 'icon-box', title: 'Add Box' },
+                    { name: 'Line', class: 'icon-line-horz', title: 'Add Line' },
+                    { name: 'Text', class: 'icon-font', title: 'Add Text' },
+                    { name: 'Image', class: 'icon-image', title: 'Add Image' }
+                ],
+                layersMenuItems: [
+                    { name: 'Move to top', class: 'icon-arrow-double-up', title: 'Move to top' },
+                    { name: 'Move up', class: 'icon-arrow-up', title: 'Move up' },
+                    { name: 'Move down', class: 'icon-arrow-down', title: 'Move down' },
+                    { name: 'Move to bottom', class: 'icon-arrow-double-down', title: 'Move to bottom' }
+                ],
+                fontSizeMenuItems: [
+                    { value: '9', name: '9 px' },
+                    { value: '10', name: '10 px' },
+                    { value: '11', name: '11 px' },
+                    { value: '12', name: '12 px' },
+                    { value: '13', name: '13 px' },
+                    { value: '14', name: '14 px' },
+                    { value: '16', name: '16 px' },
+                    { value: '18', name: '18 px' },
+                    { value: '20', name: '20 px' },
+                    { value: '24', name: '24 px' },
+                    { value: '28', name: '28 px' },
+                    { value: '32', name: '32 px' },
+                    { value: '40', name: '40 px' },
+                    { value: '48', name: '48 px' },
+                    { value: '56', name: '56 px' },
+                    { value: '64', name: '64 px' },
+                    { value: '72', name: '72 px' },
+                    { value: '80', name: '80 px' },
+                    { value: '88', name: '88 px' },
+                    { value: '96', name: '96 px' },
+                    { value: '128', name: '128 px' },
+                    { value: '160', name: '160 px' }
+                ],
+                colorPalette: [
+                    { value: '#000000' },
+                    { value: '#434343' },
+                    { value: '#666666' },
+                    { value: '#999999' },
+                    { value: '#b7b7b7' },
+                    { value: '#cccccc' },
+                    { value: '#d9d9d9' },
+                    { value: '#efefef' },
+                    { value: '#f3f3f3' },
+                    { value: '#ffffff' },
+                    { value: '#980000' },
+                    { value: '#ff0000' },
+                    { value: '#ff9900' },
+                    { value: '#ffff00' },
+                    { value: '#00ff00' },
+                    { value: '#00ffff' },
+                    { value: '#4a86e8' },
+                    { value: '#0000ff' },
+                    { value: '#9900ff' },
+                    { value: '#ff00ff' },
+                    { value: '#e6b8af' },
+                    { value: '#f4cccc' },
+                    { value: '#fce5cd' },
+                    { value: '#fff2cc' },
+                    { value: '#d9ead3' },
+                    { value: '#d0e0e3' },
+                    { value: '#c9daf8' },
+                    { value: '#cfe2f3' },
+                    { value: '#d9d2e9' },
+                    { value: '#ead1dc' },
+                    { value: '#dd7e6b' },
+                    { value: '#dd7e6b' },
+                    { value: '#f9cb9c' },
+                    { value: '#ffe599' },
+                    { value: '#b6d7a8' },
+                    { value: '#a2c4c9' },
+                    { value: '#a4c2f4' },
+                    { value: '#9fc5e8' },
+                    { value: '#b4a7d6' },
+                    { value: '#d5a6bd' },
+                    { value: '#cc4125' },
+                    { value: '#e06666' },
+                    { value: '#f6b26b' },
+                    { value: '#ffd966' },
+                    { value: '#93c47d' },
+                    { value: '#76a5af' },
+                    { value: '#6d9eeb' },
+                    { value: '#6fa8dc' },
+                    { value: '#8e7cc3' },
+                    { value: '#c27ba0' },
+                    { value: '#a61c00' },
+                    { value: '#cc0000' },
+                    { value: '#e69138' },
+                    { value: '#f1c232' },
+                    { value: '#6aa84f' },
+                    { value: '#45818e' },
+                    { value: '#3c78d8' },
+                    { value: '#3d85c6' },
+                    { value: '#674ea7' },
+                    { value: '#a64d79' },
+                    { value: '#85200c' },
+                    { value: '#990000' },
+                    { value: '#b45f06' },
+                    { value: '#bf9000' },
+                    { value: '#38761d' },
+                    { value: '#134f5c' },
+                    { value: '#1155cc' },
+                    { value: '#0b5394' },
+                    { value: '#351c75' },
+                    { value: '#741b47' },
+                    { value: '#5b0f00' },
+                    { value: '#660000' },
+                    { value: '#783f04' },
+                    { value: '#7f6000' },
+                    { value: '#274e13' },
+                    { value: '#0c343d' },
+                    { value: '#1c4587' },
+                    { value: '#073763' },
+                    { value: '#20124d' },
+                    { value: '#4c1130' }
+                ]
+            }
+        }
+    }
+</script>

webpack.config.js

@@ -27,7 +27,7 @@ const webpackConfig = {
             "bourbon": "bourbon.scss",
             "espresso": path.join(__dirname, "src/styles/theme-espresso.scss"),
             "snow": path.join(__dirname, "src/styles/theme-snow.scss"),
-            "vue": path.join(__dirname, "node_modules/vue/dist/vue.min.js"),
+            "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
             "styles": path.join(__dirname, "src/styles-new")
         }