Status Bar Migration WIP

- Suppress background in Indicators;
- Restore Snow as default theme;

example/notifications/res/dialog-launch.html

@@ -1,9 +1,9 @@
 <span class="h-indicator" ng-controller="DialogLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="ls-indicator icon-box-with-arrow s-status-available"><span class="label">
-        <a ng-click="launchProgress(true)">Known</a>
-        <a ng-click="launchProgress(false)">Unknown</a>
-        <a ng-click="launchError()">Error</a>
-        <a ng-click="launchInfo()">Info</a>
+    <div class="c-indicator c-indicator--clickable icon-box-with-arrow s-status-available"><span class="label c-indicator__label">
+        <button ng-click="launchProgress(true)">Known</button>
+        <button ng-click="launchProgress(false)">Unknown</button>
+        <button ng-click="launchError()">Error</button>
+        <button ng-click="launchInfo()">Info</button>
     </span></div>
 </span>

example/notifications/res/notification-launch.html

@@ -1,9 +1,9 @@
 <span class="h-indicator" ng-controller="NotificationLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="ls-indicator icon-bell s-status-available"><span class="label">
-        <a ng-click="newInfo()">Success</a>
-        <a ng-click="newError()">Error</a>
-        <a ng-click="newAlert()">Alert</a>
-        <a ng-click="newProgress()">Progress</a>
+    <div class="c-indicator c-indicator--clickable icon-bell s-status-available"><span class="label c-indicator__label">
+        <button ng-click="newInfo()">Success</button>
+        <button ng-click="newError()">Error</button>
+        <button ng-click="newAlert()">Alert</button>
+        <button ng-click="newProgress()">Progress</button>
     </span></div>
 </span>

index.html

@@ -87,6 +87,7 @@
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
         openmct.install(openmct.plugins.GoToOriginalAction());
+        openmct.install(openmct.plugins.GlobalClearIndicator());
         openmct.start();
     </script>
 </html>

platform/commonUI/general/res/templates/angular-indicator.html

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class="ls-indicator {{ngModel.getCssClass()}}"
+<div class="c-indicator {{ngModel.getCssClass()}}"
 	 title="{{ngModel.getDescription()}}"
 	 ng-show="ngModel.getText().length > 0">
-	<span class="label">{{ngModel.getText()}}</span>
+	<span class="label c-indicator__label">{{ngModel.getText()}}</span>
 </div>

platform/commonUI/notification/res/notification-indicator.html

@@ -1,8 +1,8 @@
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div ng-show="notifications.length > 0" class="ls-indicator s-status-{{highest.severity}} icon-bell"
+<div ng-show="notifications.length > 0" class="c-indicator c-indicator--clickable s-status-{{highest.severity}} icon-bell"
       ng-controller="NotificationIndicatorController">
-    <span class="label">
-        <a ng-click="showNotificationsList()">
-           {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span></a>
-    </span><span class="count">{{notifications.length}}</span>
+    <span class="label c-indicator__label">
+        <button ng-click="showNotificationsList()">
+           {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span></button>
+    </span><span class="c-indicator__count">{{notifications.length}}</span>
 </div>

platform/features/clock/src/indicators/ClockIndicator.js

@@ -49,7 +49,7 @@ define(
         };
 
         ClockIndicator.prototype.getCssClass = function () {
-            return "t-indicator-clock icon-clock no-collapse float-right";
+            return "t-indicator-clock icon-clock no-minify c-indicator--not-clickable";
         };
 
         ClockIndicator.prototype.getText = function () {

platform/persistence/couch/src/CouchIndicator.js

@@ -100,7 +100,7 @@ define(
         }
 
         CouchIndicator.prototype.getCssClass = function () {
-            return "icon-database " + this.state.statusClass;
+            return "c-indicator--clickable icon-database " + this.state.statusClass;
         };
 
         CouchIndicator.prototype.getGlyphClass = function () {

platform/persistence/elastic/src/ElasticIndicator.js

@@ -84,7 +84,7 @@ define(
         }
 
         ElasticIndicator.prototype.getCssClass = function () {
-            return "icon-database";
+            return "c-indicator--clickable icon-database";
         };
         ElasticIndicator.prototype.getGlyphClass = function () {
             return this.state.glyphClass;

platform/persistence/local/src/LocalStorageIndicator.js

@@ -41,7 +41,7 @@ define(
         }
 
         LocalStorageIndicator.prototype.getCssClass = function () {
-            return "icon-database s-status-caution";
+            return "c-indicator--clickable icon-database s-status-caution";
         };
         LocalStorageIndicator.prototype.getGlyphClass = function () {
             return 'caution';

src/api/indicators/SimpleIndicator.js

@@ -28,7 +28,7 @@ define(['zepto', './res/indicator-template.html'],
             this.openmct = openmct;
             this.element = $(indicatorTemplate)[0];
 
-            this.textElement = this.element.querySelector('.indicator-text');
+            this.textElement = this.element.querySelector('.js-indicator-text');
 
             //Set defaults
             this.text('New Indicator');

src/api/indicators/res/indicator-template.html

@@ -1,3 +1,3 @@
-<div class="ls-indicator" title="">
-    <span class="label indicator-text"></span>
+<div class="c-indicator c-indicator--clickable c-indicator--simple" title="">
+    <span class="label js-indicator-text c-indicator__label"></span>
 </div>

src/api/overlays/components/DialogComponent.vue

@@ -93,7 +93,7 @@
         &.message-severity-error:before {
             @include legacyMessage();
             content: $glyph-icon-alert-triangle;
-            color: $colorWarningLo;
+            color: $colorWarningHi;
         }
 
         // Messages in a list

src/plugins/globalClearIndicator/components/globalClearIndicator.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="c-indicator c-indicator--clickable icon-session">
+        <span class="label c-indicator__label">
+            <button @click="globalClearEmit">Clear All Data</button>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    methods: {
+        globalClearEmit() {
+            this.openmct.notifications.emit('clear');
+        }
+    }
+}
+</script>

src/plugins/globalClearIndicator/plugin.js

@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * 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.
+ *****************************************************************************/
+
+define([
+    './components/globalClearIndicator.vue',
+    'vue'
+], function (
+    GlobaClearIndicator,
+    Vue
+) {
+    return function plugin() {
+        return function install(openmct) {
+            let component = new Vue ({
+                    provide: {
+                        openmct
+                    },
+                    components: {
+                        GlobalClearIndicator: GlobaClearIndicator.default
+                    },
+                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
+                }),
+                indicator = {
+                    element: component.$mount().$el
+                };
+
+            openmct.indicators.add(indicator);
+        };
+    };
+});

src/plugins/plot/src/configuration/PlotSeries.js

@@ -377,6 +377,19 @@ define([
                 delete this.unsubscribe;
             }
             this.fetch();
+        },
+
+        /**
+         * Clears the plot series, unsubscribes and resubscribes
+         * @public
+         */
+        refresh: function () {
+            this.reset();
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                delete this.unsubscribe;
+            }
+            this.fetch();
         }
     });
 

src/plugins/plot/src/telemetry/PlotController.js

@@ -80,6 +80,10 @@ define([
             'configuration.filters',
             this.updateFiltersAndResubscribe.bind(this)
         );
+
+        this.refresh = this.refresh.bind(this);
+
+        this.openmct.notifications.on('clear', this.refresh);
     }
 
     eventHelpers.extend(PlotController.prototype);
@@ -166,6 +170,8 @@ define([
         if (this.filterObserver) {
             this.filterObserver();
         }
+
+        this.openmct.notifications.off('clear', this.refresh);
     };
 
     PlotController.prototype.loadMoreData = function (range, purge) {
@@ -263,6 +269,12 @@ define([
         });
     };
 
+    PlotController.prototype.refresh = function (updatedFilters) {
+        this.config.series.forEach(function (series) {
+            series.refresh();
+        });
+    };
+
     /**
      * Export view as JPG.
      */

src/plugins/plugins.js

@@ -43,7 +43,8 @@ define([
     './LADTable/plugin',
     './filters/plugin',
     './objectMigration/plugin',
-    './goToOriginalAction/plugin'
+    './goToOriginalAction/plugin',
+    './globalClearIndicator/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -67,7 +68,8 @@ define([
     LADTable,
     Filters,
     ObjectMigration,
-    GoToOriginalAction
+    GoToOriginalAction,
+    GlobalClearIndicator
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -166,6 +168,7 @@ define([
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
     plugins.GoToOriginalAction = GoToOriginalAction.default;
+    plugins.GlobalClearIndicator = GlobalClearIndicator;
 
     return plugins;
 });

src/plugins/telemetryTable/TelemetryTable.js

@@ -62,6 +62,7 @@ define([
 
             openmct.time.on('bounds', this.refreshData);
             openmct.time.on('timeSystem', this.refreshData);
+            openmct.notifications.on('clear', this.refreshData);
         }
 
         initialize() {
@@ -240,6 +241,7 @@ define([
             Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
             this.openmct.time.off('bounds', this.refreshData);
             this.openmct.time.off('timeSystem', this.refreshData);
+            this.openmct.notifications.off('clear', this.refreshData);
             if (this.filterObserver) {
                 this.filterObserver();
             }

src/styles-new/_constants-espresso.scss

@@ -70,9 +70,6 @@ $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;
-$colorStatusBarBg: $colorHeadBg;
-$colorStatusBarFg: $colorBodyFg;
-$colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
 $colorKeyHov: #26d8ff;
@@ -103,8 +100,8 @@ $colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351de
 $colorStatusBtnBg: #666; // Where is this used?
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
-$colorWarningHi: #990000;
-$colorWarningHiFg: #FF9594;
+$colorWarningHi: #ff0000;
+$colorWarningHiFg: #ffdad0;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
@@ -277,6 +274,11 @@ $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;
+$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
+$colorIndicatorMenuBg: $colorHeadBg;
+$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
+$colorIndicatorMenuFg: $colorHeadFg;
+$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

src/styles-new/_constants-maelstrom.scss

@@ -74,9 +74,6 @@ $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;
-$colorStatusBarBg: $colorHeadBg;
-$colorStatusBarFg: $colorBodyFg;
-$colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
 $colorKeyHov: #26d8ff;
@@ -107,8 +104,8 @@ $colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351de
 $colorStatusBtnBg: #666; // Where is this used?
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
-$colorWarningHi: #990000;
-$colorWarningHiFg: #FF9594;
+$colorWarningHi: #ff0000;
+$colorWarningHiFg: #ffdad0;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
@@ -281,6 +278,11 @@ $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;
+$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
+$colorIndicatorMenuBg: $colorHeadBg;
+$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
+$colorIndicatorMenuFg: $colorHeadFg;
+$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

src/styles-new/_constants-snow.scss

@@ -70,9 +70,6 @@ $colorBodyFgEm: #333;
 $colorGenBg: #fff;
 $colorHeadBg: #eee;
 $colorHeadFg: $colorBodyFg;
-$colorStatusBarBg: #000;
-$colorStatusBarFg: #999;
-$colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
 $colorKeyHov: #00c0f6;
@@ -277,6 +274,11 @@ $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #444;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #666;
+$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
+$colorIndicatorMenuBg: white;
+$colorIndicatorMenuBgShdw: rgba(black, 0.6) 0 0 6px;
+$colorIndicatorMenuFg: $colorHeadFg;
+$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

src/styles-new/_controls.scss

@@ -49,6 +49,21 @@ button {
         }
     }
 
+    &[class*='__collapse-button'] {
+        box-shadow: none;
+        background: $splitterBtnColorBg;
+        color: $splitterBtnColorFg;
+        border-radius: $smallCr;
+        font-size: 6px;
+        line-height: 90%;
+        padding: 3px 15px;
+
+        @include hover() {
+            background: $colorBtnBgHov;
+            color: $colorBtnFgHov;
+        }
+    }
+
     &.is-active {
         background: $colorBtnActiveBg;
         color: $colorBtnActiveFg;
@@ -70,13 +85,7 @@ button {
     @include cClickIconButton();
 
     &--menu {
-        &:after {
-            content: $glyph-icon-arrow-down;
-            font-family: symbolsfont;
-            font-size: 0.7em;
-            margin-left: floor($interiorMarginSm * 0.8);
-            opacity: 0.5;
-        }
+        @include hasMenu();
     }
 }
 
@@ -126,7 +135,7 @@ button {
 
 /******************************************************** DISCLOSURE CONTROLS */
 /********* Disclosure Button */
-// Provides a downward arrow icon that when clicked displays a context menu
+// Provides a downward arrow icon that when clicked displays additional options and/or info.
 // Always placed AFTER an element
 .c-disclosure-button {
     @include cClickIcon();

src/styles-new/_legacy.scss

@@ -782,126 +782,6 @@ mct-indicators mct-include {
     display: contents;
 }
 
-.ls-indicator {
-    $bg: rgba(white, 0.2) !important;
-    $hbg: $colorStatusBarBg;
-    $hshdw: rgba(white, 0.4) 0 0 3px;
-    $br: $controlCr;
-    $hoverYOffset: -35px;
-    background: transparent !important;
-    border-radius: $br;
-    display: inline-block;
-    position: relative;
-    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
-    text-transform: uppercase;
-
-    &:before {
-        display: inline-block;
-    }
-
-    .label {
-        // Hover bubbles that appear when hovering on an Indicator
-        display: inline-block;
-
-        a,
-        button,
-        s-button,
-        .c-button {
-            // Make <a> in label look like buttons
-            transition: $transIn;
-            background: transparent;
-            border: 1px solid rgba($colorStatusBarFg, 0.5);
-            border-radius: $br;
-            box-sizing: border-box;
-            color: inherit;
-            font-size: inherit;
-            height: auto;
-            line-height: normal;
-            padding: 0 2px;
-            &:hover {
-                background: $bg;
-                color: #fff;
-            }
-        }
-
-        [class*='icon-'] {
-            // If any elements within label include the class 'icon-*' then deal with their :before's
-            &:before {
-                font-size: 0.8em;
-                margin-right: $interiorMarginSm;
-            }
-        }
-    }
-
-    &.no-collapse {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-
-        > *,
-        &:before {
-            flex: 1 1 auto;
-        }
-
-        &:before {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &:not(.no-collapse) {
-        &:before {
-            margin-right: 0 !important;
-        }
-
-        .label {
-            transition: all 250ms ease-in 100ms;
-            background: $hbg;
-            border-radius: $br;
-            font-size: .6rem;
-            left: 0;
-            bottom: 140%;
-            opacity: 0;
-            padding: $interiorMarginSm $interiorMargin;
-            position: absolute;
-            transform-origin: 10px 100%;
-            transform: scale(0.0);
-            white-space: nowrap;
-            z-index: 50;
-
-            &:before {
-                // Infobubble-style arrow element
-                content: '';
-                display: block;
-                position: absolute;
-                top: 100%;
-                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
-            }
-        }
-
-        @include hover() {
-            background: $bg;
-
-            .label {
-                opacity: 1;
-                transform: scale(1.0);
-                transition: all 100ms ease-out 0s;
-            }
-        }
-    }
-
-    &.float-right {
-        float: right;
-    }
-}
-
-/* Mobile */
-// Hide the clock indicator when we're phone portrait
-body.phone.portrait {
-    .ls-indicator.t-indicator-clock {
-        display: none;
-    }
-}
-
 /************************************************* DATETIME UI */
 @mixin complexFieldHolder($myW) {
     width: $myW + $interiorMargin;

src/styles-new/_mixins.scss

@@ -420,20 +420,9 @@
     }
 }
 
-@mixin cClickIconButton() {
-    // A clickable element that just includes the icon
-    // Background is displayed on hover
-    // Padding is included to facilitate a bigger hit area
-    // Make the icon bigger relative to its container
+@mixin cClickIconButtonLayout() {
     $pLR: 4px;
     $pTB: 4px;
-
-    @include cControl();
-    background: none;
-    box-shadow: none;
-    cursor: pointer;
-    transition: $transOut;
-    border-radius: $controlCr;
     padding: $pTB $pLR;
 
     &:before,
@@ -442,6 +431,20 @@
         // Needed for c-togglebutton.
         font-size: 1.25em;
     }
+}
+
+@mixin cClickIconButton() {
+    // A clickable element that just includes the icon
+    // Background is displayed on hover
+    // Padding is included to facilitate a bigger hit area
+    // Make the icon bigger relative to its container
+    @include cControl();
+    @include cClickIconButtonLayout();
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+    transition: $transOut;
+    border-radius: $controlCr;
 
     @include hover() {
         transition: $transIn;
@@ -478,6 +481,16 @@
     }
 }
 
+@mixin hasMenu() {
+    &:after {
+        content: $glyph-icon-arrow-down;
+        font-family: symbolsfont;
+        font-size: 0.7em;
+        margin-left: floor($interiorMarginSm * 0.8);
+        opacity: 0.5;
+    }
+}
+
 @mixin cSelect($bg, $fg, $arwClr, $shdw) {
     $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
     background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;

src/styles-new/_status.scss

@@ -61,7 +61,7 @@
 }
 
 @mixin indicatorStatusColors($c) {
-    &:before, .count {
+    &:before, .c-indicator__count {
         color: $c;
     }
 }
@@ -127,7 +127,7 @@ tr {
 .s-status-icon-ok:before { content: $glyph-icon-check; }
 
 /*************************************************** INDICATOR COLORING */
-.ls-indicator {
+.c-indicator {
     &.s-status-info {
         @include indicatorStatusColors($colorInfo);
     }

src/ui/layout/Layout.vue

@@ -2,9 +2,15 @@
     <div class="l-shell" :class="{
             'is-editing': isEditing
         }">
-        <div class="l-shell__head">
+        <div class="l-shell__head" :class="{
+            'l-shell__head--expanded': headExpanded,
+            'l-shell__head--minify-indicators': !headExpanded
+             }">
             <CreateButton class="l-shell__create-button"></CreateButton>
-            <div class="l-shell__controls">
+            <indicators class="l-shell__head-section l-shell__indicators">
+            </indicators>
+            <notification-banner></notification-banner>
+            <div class="l-shell__head-section l-shell__controls">
                 <button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
@@ -15,6 +21,8 @@
                 </button>
             </div>
             <app-logo></app-logo>
+            <button class="l-shell__head__collapse-button c-button"
+                    @click="toggleShellHead"></button>
         </div>
         <multipane class="l-shell__main"
                    type="horizontal">
@@ -44,9 +52,6 @@
                 <Inspector :isEditing="isEditing" ref="inspector"></Inspector>
             </pane>
         </multipane>
-        <div class="l-shell__status">
-            <StatusBar></StatusBar>
-        </div>
     </div>
 </template>
 
@@ -61,12 +66,6 @@
         flex-flow: column nowrap;
         overflow: hidden;
 
-        &__status {
-            background: $colorStatusBarBg;
-            color: $colorStatusBarFg;
-            padding: $interiorMarginSm;
-        }
-
         &__pane-tree {
             width: 40%;
 
@@ -160,14 +159,52 @@
         }
 
         &__head {
-            align-items: center;
+            align-items: stretch;
             background: $colorHeadBg;
             justify-content: space-between;
-            padding: $interiorMargin;
+            padding: $interiorMargin $interiorMargin + 2;
 
             > [class*="__"] + [class*="__"] {
                 margin-left: $interiorMargin;
             }
+
+            [class*='__head__collapse-button'] {
+                align-self: start;
+                $p: 6px;
+                padding-left: $p !important;
+                padding-right: $p !important;
+
+                &:before {
+                    content: $glyph-icon-arrow-down;
+                    font-size: 1.1em;
+                }
+            }
+
+            &-section {
+                // Subdivides elements across the head
+                display: flex;
+                flex: 0 1 auto;
+                padding: 0 $interiorMargin;
+            }
+
+            &--expanded {
+                .c-indicator__label {
+                    transition: none !important;
+                }
+
+                [class*='__head__collapse-button'] {
+                    &:before {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        &__controls {
+            $brdr: 1px solid $colorInteriorBorder;
+            border-right: $brdr;
+            border-left: $brdr;
+            align-items: start;
         }
 
         &__create-button,
@@ -175,11 +212,17 @@
             flex: 0 0 auto;
         }
 
-        &__controls {
-            flex: 1 1 100%;
-            display: flex;
-            justify-content: flex-end;
-            margin-right: 2.5%;
+        &__create-button { margin-right: $interiorMarginLg; }
+
+        &__indicators {
+            //@include test();
+            flex: 1 1 auto;
+            flex-wrap: wrap;
+            [class*='indicator-clock'] { order: 90; }
+
+            .c-indicator .label {
+                font-size: 0.9em;
+            }
         }
 
         /******************************* MAIN AREA */
@@ -266,9 +309,10 @@
     import multipane from './multipane.vue';
     import pane from './pane.vue';
     import BrowseBar from './BrowseBar.vue';
-    import StatusBar from './status-bar/StatusBar.vue';
     import Toolbar from '../toolbar/Toolbar.vue';
     import AppLogo from './AppLogo.vue';
+    import Indicators from './status-bar/Indicators.vue';
+    import NotificationBanner from './status-bar/NotificationBanner.vue';
 
     var enterFullScreen = () => {
         var docElm = document.documentElement;
@@ -309,9 +353,10 @@
             multipane,
             pane,
             BrowseBar,
-            StatusBar,
             Toolbar,
-            AppLogo
+            AppLogo,
+            Indicators,
+            NotificationBanner
         },
         mounted() {
             this.openmct.editor.on('isEditing', (isEditing)=>{
@@ -321,11 +366,18 @@
             this.openmct.selection.on('change', this.toggleHasToolbar);
         },
         data: function () {
+            let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
+            let headExpanded = true;
+            if (storedHeadProps) {
+                headExpanded = JSON.parse(storedHeadProps).expanded;
+            }
+
             return {
                 fullScreen: false,
                 conductorComponent: undefined,
                 isEditing: false,
-                hasToolbar: false
+                hasToolbar: false,
+                headExpanded
             }
         },
         computed: {
@@ -334,6 +386,18 @@
             }
         },
         methods: {
+            toggleShellHead() {
+                this.headExpanded = !this.headExpanded;
+
+                window.localStorage.setItem(
+                    'openmct-shell-head',
+                    JSON.stringify(
+                        {
+                            expanded: this.headExpanded
+                        }
+                    )
+                );
+            },
             fullScreenToggle() {
                 if (this.fullScreen) {
                     this.fullScreen = false;

src/ui/layout/pane.vue

@@ -148,21 +148,6 @@
                 font-size: floor(12px * .9);
             }
 
-            &__collapse-button {
-                box-shadow: none;
-                background: $splitterBtnColorBg;
-                color: $splitterBtnColorFg;
-                border-radius: $smallCr;
-                font-size: 6px;
-                line-height: 90%;
-                padding: 3px 15px;
-
-                @include hover() {
-                    background: $colorBtnBgHov;
-                    color: $colorBtnFgHov;
-                }
-            }
-
             &__label {
                 // Name of the pane
                 @include ellipsize();

src/ui/layout/status-bar/Indicators.vue

@@ -17,10 +17,137 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<span id='status' class='status-holder'></span>
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-indicator {
+        @include cControl();
+        @include cClickIconButtonLayout();
+        button { text-transform: uppercase; }
+
+        background: none !important;
+        border-radius: $controlCr;
+        overflow: visible;
+        position: relative;
+        text-transform: uppercase;
+
+
+        &.no-minify {
+            // For items that cannot be minified
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+
+            > *,
+            &:before {
+                flex: 1 1 auto;
+            }
+
+            &:before {
+                margin-right: $interiorMarginSm;
+            }
+        }
+
+        &:not(.no-minify) {
+            &:before {
+                margin-right: 0 !important;
+            }
+        }
+    }
+
+    .c-indicator__label {
+        // Label element. Appears as a hover bubble element when Indicators are minified;
+        // Appears as an inline element when not.
+        display: inline-block;
+        transition:none;
+        white-space: nowrap;
+
+        a,
+        button,
+        s-button,
+        .c-button {
+            // Make <a> in label look like buttons
+            transition: $transIn;
+            background: transparent;
+            border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
+            border-radius: $controlCr;
+            box-sizing: border-box;
+            color: inherit;
+            font-size: inherit;
+            height: auto;
+            line-height: normal;
+            padding: 0 2px;
+            &:hover {
+                background: rgba($colorIndicatorMenuFg, 0.1);
+                border-color: rgba($colorIndicatorMenuFg, 0.75);
+                color: $colorIndicatorMenuFgHov;
+            }
+        }
+
+        [class*='icon-'] {
+            // If any elements within label include the class 'icon-*' then deal with their :before's
+            &:before {
+                font-size: 0.8em;
+                margin-right: $interiorMarginSm;
+            }
+        }
+    }
+
+    .c-indicator__count {
+        display: none; // Only displays when Indicator is minified, see below
+    }
+
+    [class*='minify-indicators'] {
+        // All styles for minified Indicators should go in here
+        .c-indicator:not(.no-minify) {
+            @include hover() {
+                background: $colorIndicatorBgHov;
+                .c-indicator__label {
+                    box-shadow: $colorIndicatorMenuBgShdw;
+                    transform: scale(1.0);
+                    transition: transform 100ms ease-out 100ms;
+                }
+            }
+            .c-indicator__label {
+                transition: transform 250ms ease-in 200ms;
+                background: $colorIndicatorMenuBg;
+                color: $colorIndicatorMenuFg;
+                border-radius: $controlCr;
+                left: 0;
+                top: 130%;
+                padding: $interiorMargin $interiorMargin;
+                position: absolute;
+                transform-origin: 10px 0;
+                transform: scale(0.0);
+                overflow: visible;
+                z-index: 50;
+
+                &:before {
+                    // Infobubble-style arrow element
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    bottom: 100%;
+                    @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
+                }
+            }
+
+            .c-indicator__count {
+                display: inline-block;
+                margin-left: $interiorMarginSm;
+            }
+        }
+    }
+
+    /* Mobile */
+    // Hide the clock indicator when we're phone portrait
+    body.phone.portrait {
+        .c-indicator.t-indicator-clock {
+            display: none;
+        }
+    }
 </style>
 
 <script>
@@ -29,12 +156,7 @@
 
         mounted() {
             this.openmct.indicators.indicatorObjects.forEach((indicator) => {
-                // So that we can consistently position indicator elements,
-                // guarantee that they are wrapped in an element we control
-                var wrapperNode = document.createElement('span');
-                wrapperNode.className = 'l-indicator';
-                wrapperNode.appendChild(indicator.element);
-                this.$el.appendChild(wrapperNode);
+                this.$el.appendChild(indicator.element);
             });
         }
     }

src/ui/layout/status-bar/NotificationBanner.vue

@@ -57,20 +57,19 @@
 
     .c-message-banner {
         $closeBtnSize: 7px;
-        $m: 1px;
 
         border-radius: $controlCr;
         @include statusBannerColors($colorStatusDefault, $colorStatusFg);
         cursor: pointer;
-
         display: flex;
         align-items: center;
         left: 50%;
+        top: 50%;
         max-width: 50%;
-        padding: $interiorMargin $interiorMargin $interiorMargin $interiorMarginLg;
+        max-height: 25px;
+        padding: $interiorMarginSm $interiorMargin $interiorMarginSm $interiorMarginLg;
         position: absolute;
-        transform: translateX(-50%);
-        bottom: $m;
+        transform: translate(-50%, -50%);
         z-index: 2;
 
         > * + * {

src/ui/layout/status-bar/StatusBar.vue

@@ -1,42 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2018, United States Government
- 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.
--->
-<template>
-    <span class="c-status">
-    <indicators></indicators>
-    <notification-banner></notification-banner>
-    </span>
-</template>
-
-<style lang="scss">
-    .c-status {
-        width: 100%;
-    }
-</style>
-
-<script>
-    import Indicators from './Indicators.vue';
-    import NotificationBanner from './NotificationBanner.vue';
-
-    export default {
-        components: {
-            Indicators,
-            NotificationBanner
-        }
-    }
-</script>