Vue Browse Bar (#2164)

* Object browse bar IN PROGRESS

* Object browse bar VERY WIP

* Object browse bar WIP

- view-control renamed to disclosure-triangle;
- Good progress on object browse bar elements;

* Object browse bar WIP

- Layout of start-side elements now working with ellipsis;
- TODO: cleanups and consolidation;

* Object browse bar shippable

- Better layout approach;
- Refinements to button classes;

* Sanding and shimming on misc styles

- Tree icon shrinkage fixed;
- c-icon-button much better relative sizing;
- Removed c-button-set wrapper from Layout.vue;
- Added uppercasing of Create button for Snow theme;

* working object name, css class

* working dynamic name, css classes and view switcher

src/styles-new/_constants-snow.scss

@@ -12,7 +12,7 @@
 }
 
 // Global
-$fontBaseSize: 13px;
+$fontBaseSize: 12px;
 $colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
 $colorGenBg: #fff;
@@ -71,6 +71,7 @@ $sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
+$createBtnTextTransform: uppercase;
 
 // Foundation Colors
 $colorAlt1: #776ba2;

src/styles-new/_controls.scss

@@ -1,8 +1,10 @@
-/**************************** BUTTONS */
+/******************************************************** BUTTONS */
 %c-control {
     @include userSelectNone();
+    $fs: 1em;
     display: inline-flex;
     align-items: center;
+    font-size: $fs;
     justify-content: start;
     cursor: pointer;
 
@@ -13,12 +15,13 @@
         flex: 0 0 auto;
     }
 
-    &:before {
+    &:after {
         font-size: 0.8em;
     }
 
-    &:after {
+    [class*="__label"] {
-        font-size: 0.6em;
+        line-height: $fs; // Remove effect on top and bottom padding
+        font-size: $fs;
     }
 
 }
@@ -56,10 +59,14 @@
 .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;
+    $pLR: 3px;
+    $pTB: 3px;
     border-radius: $controlCr;
     color: $colorKey;
-    padding: nth($btnPad, 1) floor(nth($btnPad, 2) * 0.8);
+    font-size: $fontBaseSize * 1.2;
+    padding: $pTB $pLR ;
 
     &:hover {
         background: rgba($colorKey, 0.2);
@@ -77,7 +84,7 @@
     // c-icon-buttons get grouped more closely together
     // When one set is adjacent to another, provides a divider between
 
-    display: flex;
+    display: inline-flex;
 
     > * {
         // Assume buttons are immediate descendants
@@ -118,6 +125,8 @@
 /********* 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;
@@ -132,9 +141,106 @@
         margin-left: $m;
         opacity: 0.5;
     }
+
+    &--w {
+        // Wraps c-menu-button, contains button and menu
+        .c-menu {
+            // Default position
+            top: 100%; left: 0;
+        }
+
+        &.c-menu-button--menus-up {
+            .c-menu {
+                top: auto; bottom: 100%;
+            }
+        }
+
+        &.c-menu-button--menus-left {
+            .c-menu {
+                left: auto; right: 0;
+            }
+        }
+    }
 }
 
-/**************************** MENUS */
+/******************************************************** DISCLOSURE CONTROLS */
+/********* Disclosure 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;
+    margin-left: $interiorMarginSm;
+
+    &:before {
+        content: $glyph-icon-arrow-down;
+        font-family: symbolsfont;
+        font-size: 0.7em;
+    }
+}
+    /********* Disclosure Triangle */
+// Provides an arrow icon that when clicked expands an element to reveal its contents.
+// Used in tree items. Always placed BEFORE an element.
+.c-disclosure-triangle {
+    $d: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: $d;
+    position: relative;
+
+    &.is-enabled:before {
+        $s: .65;
+        content: $glyph-icon-arrow-right-equilateral;
+        display: block;
+        font-family: symbolsfont;
+        font-size: 1rem * $s;
+        position: absolute;
+        transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
+        transition: transform 100ms ease-in-out;
+    }
+
+    &--expanded {
+        &:before {
+            transform: rotate(90deg);
+        }
+    }
+}
+
+
+/******************************************************** 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 {
+    @include input-base();
+    border: 1px solid transparent;
+    display: block !important;
+    min-width: 0;
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+    transition: all 250ms ease;
+    white-space: nowrap;
+
+    &:not(:focus) {
+        text-overflow: ellipsis;
+    }
+
+    &:hover,
+    &:focus {
+        padding-left: $inputTextPLeftRight;
+        padding-right: $inputTextPLeftRight;
+    }
+    &:hover {
+        border-color: rgba($colorBodyFg, 0.2);
+    }
+    &:focus {
+        @include nice-input($shdw: rgba(0, 0, 0, 0.6) 0 1px 3px);
+        border-color: transparent;
+    }
+}
+
+/******************************************************** MENUS */
 @mixin menuOuter() {
     border-radius: $basicCr;
     background: $colorMenuBg;
@@ -171,8 +277,6 @@
     }
 }
 
-
-
 .c-menu {
     @include menuOuter();
     @include menuInner();

src/styles-new/_global.scss

@@ -43,6 +43,15 @@ div {
     display: contents;
 }
 
+.u-space {
+    // Provides a separator space between elements
+    &--right {
+        + [class*="__"] {
+            margin-left: $interiorMarginLg !important;
+        }
+    }
+}
+
 /******************************* BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {

src/styles-new/_mixins.scss

@@ -110,13 +110,10 @@
 }
 
 /************************** CONTROLS, BUTTONS */
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
+@mixin input-base() {
     appearance: none;
-    background: $bg;
     border: none;
-    color: $fg;
     border-radius: $controlCr;
-    box-shadow: inset $shdw;
     outline: none;
 
     &:focus {
@@ -129,6 +126,15 @@
     }
 }
 
+
+
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
+    @include input-base();
+    background: $bg;
+    color: $fg;
+    box-shadow: inset $shdw;
+}
+
 @mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
     background: $bg;
     color: $fg;

src/ui/components/controls/CreateButton.vue

@@ -2,7 +2,7 @@
     <div class="c-create-button--w">
         <div class="c-create-button c-menu-button c-button--major icon-plus"
              @click="toggleCreateMenu">
-            Create
+            <span class="c-button__label">Create</span>
         </div>
         <div class="c-create-menu c-super-menu"
              v-if="showCreateMenu">
@@ -43,6 +43,10 @@
         font-size: 1.1em;
     }
 
+    .c-create-button .c-button__label {
+        text-transform: $createBtnTextTransform;
+    }
+
     .c-create-menu {
         max-height: 80vh;
         max-width: 500px;

src/ui/components/controls/MainViewBrowseBar.vue

@@ -0,0 +1,178 @@
+<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>
+            <div v-bind:class="['l-browse-bar__object-name--w', type.cssClass]">
+                <span 
+                    class="l-browse-bar__object-name c-input-inline"
+                    v-on:blur="updateName" 
+                    contenteditable>
+                    {{ domainObject.name }}
+                </span>
+            </div>
+            <div class="l-browse-bar__context-actions c-disclosure-button"></div>
+        </div>
+
+        <div class="l-browse-bar__end">
+            <div class="l-browse-bar__view-switcher c-menu-button--w c-menu-button--menus-left"
+                 v-if="domainObjectViews.length > 1">
+                <div v-bind:class="['c-menu-button', currentView.cssClass]"
+                     title="Switch view type"
+                     @click="toggleViewMenu">
+                    <span class="c-button__label">{{ currentView.name }}</span>
+                </div>
+                <div class="c-menu" v-if="showViewMenu">
+                    <ul>
+                        <li v-for="(view,index) in domainObjectViews"
+                            @click="updateViewParams(view)"
+                            :key="index"
+                            :class="view.cssClass"
+                            :title="view.title">
+                            {{ view.name }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!-- Action buttons -->
+            <div class="l-browse-bar__actions">
+                <div class="l-browse-bar__action c-button icon-eye-open" title="Preview"></div>
+                <div class="l-browse-bar__action c-button icon-notebook" title="New Notebook entry"></div>
+                <div class="l-browse-bar__action c-button c-button--major icon-pencil" title="Edit"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MenuPlaceholder from '../controls/ContextMenu.vue';
+
+    export default {
+        inject: ['openmct'],
+        props: {
+            editNameEnabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        methods: {
+            toggleViewMenu: function (event) {
+                event.stopPropagation();
+                this.showViewMenu = !this.showViewMenu;
+            },
+            updateName: function (event) {
+                if (event.target.innerText !== this.domainObject.name) {
+                    this.openmct.objects.mutate(this.domainObject, 'name', event.target.innerText);
+                }
+            },
+            updateViewParams: function (view) {
+                this.openmct.router.updateParams({view: view.key});
+            },
+            updateCurrentView: function (viewKey) {
+                viewKey = viewKey || this.openmct.router.getParams().view;
+                
+                if (viewKey) {
+                    this.currentView = this.domainObjectViews.find((view) => view.key === viewKey) || {};
+                }
+            }
+        },
+        data: function () {
+            return {
+                showViewMenu: false,
+                domainObject: {},
+                domainObjectViews: [],
+                currentView: {}
+            }
+        },
+        components: {
+            MenuPlaceholder
+        },
+        computed: {
+            type() {
+                return this.openmct.types.get(this.domainObject.type).definition;
+            }
+        },
+        mounted: function () {
+            this.$root.$on('main-view-domain-object', (domainObject) => {
+                this.legacyObject = domainObject;
+                this.domainObject = domainObject.useCapability('adapter');
+                this.domainObjectViews = domainObject.useCapability('view');
+
+                this.updateCurrentView();
+            });
+
+            document.addEventListener('click', () => {
+                if (this.showViewMenu) {
+                    this.showViewMenu = false;
+                }
+            });
+
+            this.openmct.router.on('change:params', (params) => {this.updateCurrentView(params.view)});
+        }
+    }
+</script>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    /******************************* START */
+
+    .l-browse-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        [class*="__"] {
+            // Removes extraneous horizontal white space
+            display: inline-flex;
+        }
+
+        &__start {
+            display: flex;
+            align-items: center;
+            flex: 1 1 auto;
+            font-size: 1.4em;
+            margin-right: $interiorMargin;
+            min-width: 0; // Forces interior to compress when pushed on
+        }
+
+        &__end {
+            display: flex;
+            align-items: center;
+            flex: 0 0 auto;
+
+            [class*="__"] + [class*="__"] {
+                margin-left: $interiorMarginSm;
+            }
+        }
+
+        &__nav-to-parent-button,
+        &__disclosure-button {
+            flex: 0 0 auto;
+        }
+
+        &__nav-to-parent-button {
+            // This is an icon-button
+            $p: $interiorMarginLg;
+            margin-right: $interiorMargin;
+            padding-left: $p;
+            padding-right: $p;
+        }
+
+        &__object-name--w {
+            align-items: center;
+            display: flex;
+            flex: 0 1 auto;
+            min-width: 0;
+
+            &:before {
+                // Icon
+                opacity: 0.5;
+                margin-right: $interiorMargin;
+            }
+        }
+
+        &__object-name {
+            flex: 0 1 auto;
+        }
+    }
+</style>

src/ui/components/controls/pane.vue

@@ -152,7 +152,7 @@
 
             &__collapse-button {
                 $m: 2px;
-                $h: 12px; //nth($splitterBtnD, 1) - ($m * 2);
+                $h: 12px;
                 color: $splitterBtnColorFg;
                 flex: 0 0 nth($splitterBtnD, 1);
                 font-size: $h * .9;
@@ -192,6 +192,7 @@
                 // Name of the pane
                 @include ellipsize();
                 display: block;
+                padding-right: nth($splitterBtnD, 2) + $interiorMargin; // Force label to ellipsis
                 text-transform: uppercase;
                 transform-origin: top left;
                 flex: 1 0 90%;

src/ui/components/controls/viewControl.vue

@@ -1,43 +1,12 @@
 <template>
-    <span class="c-view-control"
+    <span class="c-disclosure-triangle"
     :class="{
-        'c-view-control--expanded' : expanded,
+        'c-disclosure-triangle--expanded' : expanded,
         'is-enabled' : enabled
     }"
     @click="toggle"></span>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";;
-
-    .c-view-control {
-        $d: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-        width: $d;
-        position: relative;
-
-        &.is-enabled:before {
-            $s: .65;
-            content: $glyph-icon-arrow-right-equilateral;
-            display: block;
-            font-family: symbolsfont;
-            font-size: 1rem * $s;
-            position: absolute;
-            transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
-            transition: transform 100ms ease-in-out;
-        }
-
-        &--expanded {
-            &:before {
-                transform: rotate(90deg);
-            }
-        }
-    }
-</style>
-
 <script>
     export default {
         props: {

src/ui/components/layout/BrowseObject.vue

@@ -114,6 +114,7 @@ export default {
                 this.templateMap["browseObject"]
             );
             document.title = object.getModel().name;
+            this.$root.$emit('main-view-domain-object', object);
             this.scheduleDigest();
         },
 

src/ui/components/layout/Layout.vue

@@ -3,10 +3,8 @@
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
             <div class="l-shell__controls">
-                <div class="l-controls__elem c-button-set">
+                <a class="c-icon-button icon-new-window" title="Open in a new browser tab"></a>
-                    <a class="c-icon-button 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-icon-button icon-fullscreen-collapse" title="Enable full screen mode"></a>
-                </div>
             </div>
             <div class="l-shell__app-logo">[ App Logo ]</div>
         </div>
@@ -24,8 +22,8 @@
                 </div>
             </pane>
             <pane class="l-shell__pane-main">
-                <browse-object class="l-shell__main-container">
+                <MainViewBrowseBar class="l-shell__main-view-browse-bar"></MainViewBrowseBar>
-                </browse-object>
+                <browse-object class="l-shell__main-container"></browse-object>
                 <mct-template template-key="conductor"
                               class="l-shell__time-conductor">
                 </mct-template>
@@ -149,7 +147,7 @@
         &__main-container {
             // Wrapper for main views
             flex: 1 1 100%;
-            font-size: 16px; // TEMP FOR LEGACY STYLING
+            font-size: 16px; // TEMP FOR LEGACY STYLING - TODO: REMOVE!
         }
 
         &__tree {
@@ -193,6 +191,7 @@
     import search from '../controls/search.vue';
     import multipane from '../controls/multipane.vue';
     import pane from '../controls/pane.vue';
+    import MainViewBrowseBar from '../controls/MainViewBrowseBar.vue';
 
     export default {
         components: {
@@ -205,7 +204,8 @@
             CreateButton,
             search,
             multipane,
-            pane
+            pane,
+            MainViewBrowseBar
         }
     }
 </script>

src/ui/components/layout/mct-tree.vue

@@ -69,7 +69,8 @@
 
         &:before {
             // Type icon
-            display: inline-block;
+            display: block;
+            flex: 0 0 auto;
             font-size: 1.3em;
             margin-right: $interiorMarginSm;
         }