Persist table sort options

Added background property to table __headers-w element (#2325 )
format created and modified time to utc (#2324 )
2025-06-30 20:49:19 +00:00 · 2019-03-22 17:44:29 -07:00 · 2019-03-21 15:37:09 -07:00 · 2019-03-21 15:14:45 -07:00 · 2019-03-21 15:07:16 -07:00 · 2019-03-21 13:57:41 -07:00
56 changed files with 1404 additions and 809 deletions
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@ -1,10 +1,10 @@
-<div class="l-message"
+<div class="c-message"
     ng-class="'message-severity-' + ngModel.severity">
    <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.title}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.title}}</div>
        </div>
-        <div class="hint" ng-hide="ngModel.hint === undefined">
+        <div class="c-message__hint" ng-hide="ngModel.hint === undefined">
            {{ngModel.hint}}
            <span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
        </div>
@ -16,17 +16,17 @@
                         ng-model="ngModel"
                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
        </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-               class="s-button"
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+               class="c-button"
               ng-click="dialogOption.callback()">
                {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
+            </button>
+            <button class="c-button c-button--major"
               ng-if="ngModel.primaryOption"
               ng-click="ngModel.primaryOption.callback()">
                {{ngModel.primaryOption.label}}
-            </a>
+            </button>
        </div>
    </div>
 </div>
--- a/platform/commonUI/dialog/res/templates/notification-message.html
+++ b/platform/commonUI/dialog/res/templates/notification-message.html
@ -1,25 +1,25 @@
-<div class="l-message"
+<div class="c-message"
     ng-class="'message-severity-' + ngModel.severity">
    <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.message}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.message}}</div>
        </div>
        <div class="message-body">
            <mct-include key="'progress-bar'"
                         ng-model="ngModel"
                         ng-show="ngModel.progressPerc !== undefined"></mct-include>
        </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-                class="s-button"
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+                class="c-button"
                ng-click="dialogOption.callback()">
                    {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
+            </button>
+            <button class="c-button c-button--major"
                ng-if="ngModel.primaryOption"
                ng-click="ngModel.primaryOption.callback()">
                    {{ngModel.primaryOption.label}}
-            </a>
+            </button>
        </div>
    </div>
 </div>
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html
@ -1,22 +1,23 @@
 <mct-container key="overlay">
-    <div class="t-message-list">
-        <div class="top-bar">
-            <div class="dialog-title">{{ngModel.dialog.title}}</div>
-            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
-                                                                                                  ngModel.dialog.messages.length == 0">s</span>
+    <div class="t-message-list c-overlay__contents">
+        <div class="c-overlay__top-bar">
+            <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+            <div class="c-overlay__dialog-hint">Displaying {{ngModel.dialog.messages.length}} message<span
+                    ng-show="ngModel.dialog.messages.length > 1 ||
+                            ngModel.dialog.messages.length == 0">s</span>
            </div>
        </div>
-        <div class="w-messages">
+        <div class="w-messages c-overlay__messages">
            <mct-include
                ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
                key="'notification-message'" ng-model="msg.model"></mct-include>
        </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-button major"
+        <div class="c-overlay__bottom-bar">
+            <button ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="c-button c-button--major"
               ng-click="dialogAction.action()">
                {{dialogAction.label}}
-            </a>
+            </button>
        </div>
    </div>
 </mct-container>
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@ -22,9 +22,9 @@
 <div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
    <div class="c-overlay__blocker"></div>
    <div class="c-overlay__outer">
-        <a ng-click="ngModel.cancel()"
+        <button ng-click="ngModel.cancel()"
           ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
        <div class="c-overlay__contents" ng-transclude></div>
    </div>
 </div>
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ b/platform/commonUI/general/res/templates/message-banner.html
@ -1,13 +1,13 @@
 <div ng-controller="BannerController" ng-show="active.notification"
-     class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
+     class="c-message-banner {{active.notification.model.severity}}" ng-class="{
     'minimized': active.notification.model.minimized,
     'new': !active.notification.model.minimized}"
     ng-click="maximize(active.notification)">
-    <span class="banner-elem label">
+    <span class="c-message-banner__message">
        {{active.notification.model.title}}
    </span>
    <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
-        <mct-include key="'progress-bar'" class="banner-elem"
+        <mct-include key="'progress-bar'" class="c-message-banner__progress-bar"
                     ng-model="active.notification.model">
        </mct-include>
    </span>
@ -16,5 +16,5 @@
       ng-click="action(active.notification.model.primaryOption.callback, $event)">
        {{active.notification.model.primaryOption.label}}
    </a>
-    <a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
+    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle" ng-click="dismiss(active.notification, $event)"></button>
 </div>
--- a/platform/features/clock/res/templates/timer.html
+++ b/platform/features/clock/res/templates/timer.html
@ -24,10 +24,10 @@
        <button ng-click="timer.clickStopButton()"
                ng-hide="timer.timerState == 'stopped'"
                title="Reset"
-                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
+                class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
        <button ng-click="timer.clickButton()"
                title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
+                class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
    </div>
    <div class="c-timer__direction {{timer.signClass()}}"
        ng-hide="!timer.signClass()"></div>
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@ -1,22 +1,18 @@
-<div class="t-imagery" ng-controller="ImageryController as imagery">
+<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
    <mct-split-pane class='abs' anchor="bottom" alias="imagery">
-    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col"
-        ng-mouseenter="showLocalControls = true;"
-        ng-mouseleave="showLocalControls = false;">
-        <div class="h-local-controls h-local-controls-overlay-content h-local-controls-trans s-local-controls local-controls-hidden l-flex-row">
-            <span class="holder flex-elem grows">
+    <div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+            <span class="holder flex-elem grows c-imagery__lc__sliders">
                <input class="icon-brightness" type="range"
                       min="0"
                       max="500"
-                       ng-model="filters.brightness">
-                </input>
+                       ng-model="filters.brightness" />
                <input class="icon-contrast" type="range"
                       min="0"
                       max="500"
-                       ng-model="filters.contrast">
-                </input>
+                       ng-model="filters.contrast" />
            </span>
-            <span class="holder flex-elem t-reset-btn-holder">
+            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
                <a class="s-icon-button icon-reset t-btn-reset"
                   ng-click="filters = { brightness: 100, contrast: 100 }"></a>
            </span>
--- a/src/api/composition/CompositionAPISpec.js
+++ b/src/api/composition/CompositionAPISpec.js
@ -98,18 +98,24 @@ define([
                    composition.reorder(1, 0);
                    let newComposition =
                        publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];

-                    expect(listener).toHaveBeenCalledWith(1, 0);
+                    expect(reorderPlan.oldIndex).toBe(1);
+                    expect(reorderPlan.newIndex).toBe(0);
                    expect(newComposition[0].key).toEqual('b');
                    expect(newComposition[1].key).toEqual('a');
+                    expect(newComposition[2].key).toEqual('c');
                });
                it('', function () {
                    composition.reorder(0, 2);
                    let newComposition =
                        publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];

-                    expect(listener).toHaveBeenCalledWith(0, 2);
-                    expect(newComposition[0].key).toEqual('c');
+                    expect(reorderPlan.oldIndex).toBe(0);
+                    expect(reorderPlan.newIndex).toBe(2);
+                    expect(newComposition[0].key).toEqual('b');
+                    expect(newComposition[1].key).toEqual('c');
                    expect(newComposition[2].key).toEqual('a');
                })
            });
--- a/src/api/composition/CompositionCollection.js
+++ b/src/api/composition/CompositionCollection.js
@ -236,19 +236,15 @@ define([
     * @name remove
     */
    CompositionCollection.prototype.reorder = function (oldIndex, newIndex, skipMutate) {
-        if (!skipMutate) {
-            this.provider.reorder(this.domainObject, oldIndex, newIndex);
-        } else {
-            this.emit('reorder', oldIndex, newIndex);
-        }
+        this.provider.reorder(this.domainObject, oldIndex, newIndex);
    };

    /**
     * Handle reorder from provider.
     * @private
     */
-    CompositionCollection.prototype.onProviderReorder = function (oldIndex, newIndex) {
-        this.reorder(oldIndex, newIndex, true);
+    CompositionCollection.prototype.onProviderReorder = function (reorderMap) {
+        this.emit('reorder', reorderMap);
    };

    /**
--- a/src/api/composition/DefaultCompositionProvider.js
+++ b/src/api/composition/DefaultCompositionProvider.js
@ -206,8 +206,32 @@ define([

    DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {
        let newComposition = domainObject.composition.slice();
-        newComposition[newIndex] = domainObject.composition[oldIndex];
-        newComposition[oldIndex] = domainObject.composition[newIndex];
+        let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
+        let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
+        //Insert object in new position
+        newComposition.splice(insertPosition, 0, domainObject.composition[oldIndex]);
+        newComposition.splice(removeId, 1);
+
+        let reorderPlan = [{
+            oldIndex,
+            newIndex
+        }];
+
+        if (oldIndex > newIndex) {
+            for (let i = newIndex; i < oldIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i + 1
+                });
+            }
+        } else {
+            for (let i = oldIndex + 1; i <= newIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i - 1
+                });
+            }
+        }
        this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);

        let id = objectUtils.makeKeyString(domainObject.identifier);
@ -221,9 +245,9 @@ define([

        function notify(listener) {
            if (listener.context) {
-                listener.callback.call(listener.context, oldIndex, newIndex);
+                listener.callback.call(listener.context, reorderPlan);
            } else {
-                listener.callback(oldIndex, newIndex);
+                listener.callback(reorderPlan);
            }
        }
    };
--- a/src/api/objects/ObjectAPI.js
+++ b/src/api/objects/ObjectAPI.js
@ -226,7 +226,20 @@ define([
                    (identifier.namespace === identifiers[0].namespace &&
                        identifier.key === identifiers[0].key);
            });
-    }
+    };
+
+    ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
+        return this.get(identifier).then((domainObject) => {
+            path.push(domainObject);
+            let location = domainObject.location;
+
+            if (location) {
+                return this.getOriginalPath(utils.parseKeyString(location), path);
+            } else {
+                return path;
+            }
+        });
+    };

    /**
     * Uniquely identifies a domain object.
--- a/src/api/overlays/components/DialogComponent.vue
+++ b/src/api/overlays/components/DialogComponent.vue
@ -27,10 +27,16 @@
 <style lang="scss">
    @import "~styles/sass-base";

+    @mixin legacyMessage() {
+        flex: 0 1 auto;
+        font-family: symbolsfont;
+        font-size: $messageIconD; // Singleton message in a dialog
+        margin-right: $interiorMarginLg;
+    }
+
    .c-message {
        display: flex;
-        align-items: center;
-        padding: $interiorMarginLg;
+        align-items: flex-start;

        > * + * {
            margin-left: $interiorMarginLg;
@ -58,7 +64,33 @@
        &__title,
        &__action-text {
            font-size: 1.2em; // TEMP
+        }

+        /************************** LEGACY */
+        &.message-severity-info:before {
+            @include legacyMessage();
+            content: $glyph-icon-info;
+            color: $colorInfo;
+        }
+
+        &.message-severity-alert:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-rect;
+            color: $colorWarningLo;
+        }
+
+        &.message-severity-error:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-triangle;
+            color: $colorWarningLo;
+        }
+
+        // Messages in a list
+        .c-overlay__messages & {
+            padding: $interiorMarginLg;
+            &:before {
+                font-size: $messageListIconD;
+            }
        }
    }
 </style>
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@ -56,9 +56,11 @@
        }

        &__close-button {
-            $p: $interiorMarginSm;
+            $p: $interiorMargin;
            border-radius: 100% !important;
+            color: $overlayColorFg;
            display: inline-block;
+            font-size: 1.25em;
            position: absolute;
            top: $p; right: $p;
        }
@ -151,6 +153,7 @@
            }
        }

+        .t-dialog-sm .l-overlay-small, // Legacy dialog support
        .l-overlay-fit {
            .c-overlay__outer {
                @include overlaySizing(auto);
--- a/src/plugins/LADTable/components/LADTable.vue
+++ b/src/plugins/LADTable/components/LADTable.vue
@ -66,10 +66,11 @@ export default {

            this.items.splice(index, 1);
        },
-        reorder(oldIndex, newIndex) {
-            let objectAtOldIndex = this.items[oldIndex];
-            this.$set(this.items, oldIndex, this.items[newIndex]);
-            this.$set(this.items, newIndex, objectAtOldIndex);
+        reorder(reorderPlan) {
+            let oldItems = this.items.slice();
+            reorderPlan.forEach((reorderEvent) => {
+                this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
+            });
        }
    },
    mounted() {
--- a/src/plugins/LADTable/components/LadTableSet.vue
+++ b/src/plugins/LADTable/components/LadTableSet.vue
@ -93,11 +93,11 @@
            this.primaryTelemetryObjects.splice(index,1);
            primary = undefined;
        },
-        reorderPrimary(oldIndex, newIndex) {
-            let objectAtOldIndex = this.primaryTelemetryObjects[oldIndex];
-            this.$set(this.primaryTelemetryObjects, oldIndex, this.primaryTelemetryObjects[newIndex]);
-            this.$set(this.primaryTelemetryObjects, newIndex, objectAtOldIndex);
-
+        reorderPrimary(reorderPlan) {
+            let oldComposition = this.primaryTelemetryObjects.slice();
+            reorderPlan.forEach(reorderEvent => {
+                this.$set(this.primaryTelemetryObjects, reorderEvent.newIndex, oldComposition[reorderEvent.oldIndex]);
+            });
        },
        addSecondary(primary) {
            return (domainObject) => {
--- a/src/plugins/folderView/components/GridItem.vue
+++ b/src/plugins/folderView/components/GridItem.vue
@ -16,7 +16,7 @@
        </div>
        <div class="c-grid-item__controls">
            <div class="icon-people" title='Shared'></div>
-            <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
+            <button class="c-icon-button icon-info c-info-button" title='More Info'></button>
            <div class="icon-pointer-right c-pointer-icon"></div>
        </div>
    </a>
--- a/src/plugins/notebook/res/templates/entry.html
+++ b/src/plugins/notebook/res/templates/entry.html
@ -26,7 +26,7 @@
    </div>

    <div class="c-ne__local-controls--hidden">
-        <button class="c-click-icon c-click-icon--major icon-trash"
+        <button class="c-icon-button c-icon-button--major icon-trash"
           title="Delete this entry"
           @click="deleteEntry">
        </button>
--- a/src/plugins/plot/res/templates/mct-plot.html
+++ b/src/plugins/plot/res/templates/mct-plot.html
@ -136,7 +136,7 @@
            <span class="t-object-alert t-alert-unsynced"
                  title="This plot is not currently displaying the latest data.
                Reset Pan/zoom to return to view latest data."></span>
-            <div class="gl-plot-display-area">
+            <div class="gl-plot-display-area has-local-controls has-cursor-guides">
                <mct-ticks axis="xAxis">
                    <div class="gl-plot-hash hash-v"
                         ng-repeat="tick in ticks track by tick.value"
@ -147,7 +147,6 @@
                     </div>
                </mct-ticks>

-
                <mct-ticks axis="yAxis">
                     <div class="gl-plot-hash hash-h"
                          ng-repeat="tick in ticks track by tick.value"
@ -155,7 +154,6 @@
                     </div>
                </mct-ticks>

-
                <mct-chart config="config"
                           series="series"
                           rectangles="rectangles"
@ -164,23 +162,37 @@
                           the-y-axis="yAxis">
                </mct-chart>

-                <div class="h-local-controls h-local-controls-overlay-content"
-                     ng-show="plotHistory.length">
-                    <div class="l-btn-set">
-                        <a class="s-button icon-arrow-left"
-                           ng-click="plot.back()"
-                           title="Restore previous pan/zoom">
-                        </a>
-                        <a class="s-button icon-reset"
-                           ng-click="plot.clear()"
-                           title="Reset pan/zoom">
-                        </a>
+                <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
+                    <div class="c-button-set c-button-set--strip-h">
+                        <button class="c-button icon-minus"
+                                ng-click="plot.zoom('out', 0.2)"
+                                title="Zoom out">
+                        </button>
+                        <button class="c-button icon-plus"
+                                ng-click="plot.zoom('in', 0.2)"
+                                title="Zoom in">
+                        </button>
+                    </div>
+                    <div class="c-button-set c-button-set--strip-h"
+                         ng-disabled="!plotHistory.length">
+                        <button class="c-button icon-arrow-left"
+                                ng-click="plot.back()"
+                                title="Restore previous pan/zoom">
+                        </button>
+                        <button class="c-button icon-reset"
+                                ng-click="plot.clear()"
+                                title="Reset pan/zoom">
+                        </button>
                    </div>
                </div>

-                <span class="t-wait-spinner loading" ng-show="plot.isRequestPending()">
-                </span>
-
+                <!--Cursor guides-->
+                <div class="c-cursor-guide--v js-cursor-guide--v"
+                    ng-show="plot.cursorGuide">
+                </div>
+                <div class="c-cursor-guide--h js-cursor-guide--h"
+                    ng-show="plot.cursorGuide">
+                </div>
            </div>

            <div class="gl-plot-axis-area gl-plot-x"
--- a/src/plugins/plot/res/templates/plot.html
+++ b/src/plugins/plot/res/templates/plot.html
@ -20,31 +20,34 @@
 at runtime from the About dialog for additional information.
 -->
 <span ng-controller="PlotController as controller"
-    class="abs holder holder-plot has-control-bar"
-    ng-class="{
-        'loading': !!pending
-    }"
-    >
+    class="abs holder holder-plot has-control-bar">
    <div class="l-control-bar" ng-show="!controller.hideExportButtons">
-         <span class="c-button-set c-button-set--strip">
-            <a class="c-button icon-download"
+         <span class="c-button-set c-button-set--strip-h">
+            <button class="c-button icon-download"
               ng-click="controller.exportPNG()"
               title="Export This View's Data as PNG">
                 <span class="c-button__label">PNG</span>
-            </a>
-            <a class="c-button"
+            </button>
+            <button class="c-button"
               ng-click="controller.exportJPG()"
               title="Export This View's Data as JPG">
                 <span class="c-button__label">JPG</span>
-            </a>
+            </button>
        </span>
+        <button class="c-button icon-crosshair"
+                ng-class="{ 'is-active': controller.cursorGuide }"
+                ng-click="controller.toggleCursorGuide($event)"
+                title="Toggle cursor guides">
+        </button>
    </div>

    <div class="l-view-section">
+        <div class="c-loading--overlay loading"
+            ng-show="!!pending"></div>
        <mct-plot config="controller.config"
                  series="series"
                  the-y-axis="yAxis"
                  the-x-axis="xAxis">
-                  </mct-plot>
+        </mct-plot>
    </div>
 </span>
--- a/src/plugins/plot/res/templates/stacked-plot.html
+++ b/src/plugins/plot/res/templates/stacked-plot.html
@ -20,26 +20,29 @@
 at runtime from the About dialog for additional information.
 -->
 <span ng-controller="StackedPlotController as stackedPlot"
-      class="abs holder holder-plot has-control-bar t-plot-stacked"
-      ng-class="{
-          'loading': !!currentRequest.pending
-      }">
-
+      class="abs holder holder-plot has-control-bar t-plot-stacked">
    <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
-       <span class="c-button-set c-button-set--strip">
-          <a class="c-button icon-download"
+       <span class="c-button-set c-button-set--strip-h">
+          <button class="c-button icon-download"
             ng-click="stackedPlot.exportPNG()"
             title="Export This View's Data as PNG">
              <span class="c-button__label">PNG</span>
-          </a>
-          <a class="c-button"
+          </button>
+          <button class="c-button"
             ng-click="stackedPlot.exportJPG()"
             title="Export This View's Data as JPG">
              <span class="c-button__label">JPG</span>
-          </a>
-      </span>
+          </button>
+        </span>
+        <button class="c-button icon-crosshair"
+                ng-class="{ 'is-active': stackedPlot.cursorGuide }"
+                ng-click="stackedPlot.toggleCursorGuide($event)"
+                title="Toggle cursor guides">
+        </button>
    </div>
    <div class="l-view-section">
+        <div class="c-loading--overlay loading"
+             ng-show="!!currentRequest.pending"></div>
        <div class="gl-plot child-frame"
            ng-repeat="telemetryObject in telemetryObjects"
            ng-class="{
--- a/src/plugins/plot/src/plot/MCTPlotController.js
+++ b/src/plugins/plot/src/plot/MCTPlotController.js
@ -78,6 +78,7 @@ define([
        this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
        this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
        this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
+        this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);

        this.watchForMarquee();

@ -92,6 +93,12 @@ define([
        this.$scope.series = this.config.series.models;
        this.$scope.legend = this.config.legend;

+        this.cursorGuideVertical = this.$element[0].querySelector('.js-cursor-guide--v');
+        this.cursorGuideHorizontal = this.$element[0].querySelector('.js-cursor-guide--h');
+        this.cursorGuide = false;
+
+        this.listenTo(this.$scope, 'cursorguide', this.toggleCursorGuide, this);
+
        this.listenTo(this.$scope, '$destroy', this.destroy, this);
        this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
        this.listenTo(this.$scope, 'plot:highlight:set', this.onPlotHighlightSet, this);
@ -143,6 +150,9 @@ define([
            y: this.yScale.invert(this.positionOverElement.y)
        };

+        if (this.cursorGuide) {
+            this.updateCrosshairs($event);
+        }
        this.highlightValues(this.positionOverPlot.x);
        this.updateMarquee();
        this.updatePan();
@ -150,6 +160,11 @@ define([
        $event.preventDefault();
    };

+    MCTPlotController.prototype.updateCrosshairs = function ($event) {
+        this.cursorGuideVertical.style.left = ($event.clientX - this.chartElementBounds.x) + 'px';
+        this.cursorGuideHorizontal.style.top = ($event.clientY - this.chartElementBounds.y) + 'px';
+    };
+
    MCTPlotController.prototype.trackChartElementBounds = function ($event) {
        if ($event.target === this.$canvas[1]) {
            this.chartElementBounds = $event.target.getBoundingClientRect();
@ -266,6 +281,102 @@ define([
        this.marquee = undefined;
    };

+    MCTPlotController.prototype.zoom = function (zoomDirection, zoomFactor) {
+        this.freeze();
+        this.trackHistory();
+        var currentXaxis = this.$scope.xAxis.get('displayRange'),
+            currentYaxis = this.$scope.yAxis.get('displayRange'),
+            xAxisDist= (currentXaxis.max - currentXaxis.min) * zoomFactor,
+            yAxisDist = (currentYaxis.max - currentYaxis.min) * zoomFactor;
+
+        if (zoomDirection === 'in') {
+            this.$scope.xAxis.set('displayRange', {
+                min: currentXaxis.min + xAxisDist,
+                max: currentXaxis.max - xAxisDist
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: currentYaxis.min + yAxisDist,
+                max: currentYaxis.max - yAxisDist
+            });
+        } else if (zoomDirection === 'out') {
+            this.$scope.xAxis.set('displayRange', {
+                min: currentXaxis.min - xAxisDist,
+                max: currentXaxis.max + xAxisDist
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: currentYaxis.min - yAxisDist,
+                max: currentYaxis.max + yAxisDist
+            });
+        }
+
+        this.$scope.$emit('user:viewport:change:end');
+    };
+
+    MCTPlotController.prototype.wheelZoom = function (event) {
+        event.preventDefault();
+
+        if (!this.positionOverPlot) {
+            return;
+        }
+
+        this.freeze();
+        window.clearTimeout(this.stillZooming);
+
+        let xDisplayRange = this.$scope.xAxis.get('displayRange'),
+            yDisplayRange = this.$scope.yAxis.get('displayRange'),
+            xAxisDist = (xDisplayRange.max - xDisplayRange.min),
+            yAxisDist = (yDisplayRange.max - yDisplayRange.min),
+            xDistMouseToMax = xDisplayRange.max - this.positionOverPlot.x,
+            xDistMouseToMin = this.positionOverPlot.x - xDisplayRange.min,
+            yDistMouseToMax = yDisplayRange.max - this.positionOverPlot.y,
+            yDistMouseToMin = this.positionOverPlot.y - yDisplayRange.min,
+            xAxisMaxDist = xDistMouseToMax / xAxisDist,
+            xAxisMinDist = xDistMouseToMin / xAxisDist,
+            yAxisMaxDist = yDistMouseToMax / yAxisDist,
+            yAxisMinDist = yDistMouseToMin / yAxisDist;
+
+        let plotHistoryStep;
+
+        if (!plotHistoryStep) {
+            plotHistoryStep = {
+                x: xDisplayRange,
+                y: yDisplayRange
+            };
+        }
+
+        if (event.wheelDelta < 0) {
+
+            this.$scope.xAxis.set('displayRange', {
+                min: xDisplayRange.min + ((xAxisDist * 0.01) * xAxisMinDist),
+                max: xDisplayRange.max - ((xAxisDist * 0.01) * xAxisMaxDist)
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: yDisplayRange.min + ((yAxisDist * 0.01) * yAxisMinDist),
+                max: yDisplayRange.max - ((yAxisDist * 0.01) * yAxisMaxDist)
+            });
+        } else if (event.wheelDelta >= 0) {
+
+            this.$scope.xAxis.set('displayRange', {
+                min: xDisplayRange.min - ((xAxisDist * 0.01) * xAxisMinDist),
+                max: xDisplayRange.max + ((xAxisDist * 0.01) * xAxisMaxDist)
+            });
+
+            this.$scope.yAxis.set('displayRange', {
+                min: yDisplayRange.min - ((yAxisDist * 0.01) * yAxisMinDist),
+                max: yDisplayRange.max + ((yAxisDist * 0.01) * yAxisMaxDist)
+            });
+        }
+
+        this.stillZooming = window.setTimeout(function () {
+            this.plotHistory.push(plotHistoryStep);
+            plotHistoryStep = undefined;
+            this.$scope.$emit('user:viewport:change:end');
+        }.bind(this), 250);
+    };
+
    MCTPlotController.prototype.startPan = function ($event) {
        this.trackMousePosition($event);
        this.freeze();
@ -362,5 +473,9 @@ define([
        this.stopListening();
    };

+    MCTPlotController.prototype.toggleCursorGuide = function ($event) {
+        this.cursorGuide = !this.cursorGuide;
+    };
+
    return MCTPlotController;
 });
--- a/src/plugins/plot/src/telemetry/PlotController.js
+++ b/src/plugins/plot/src/telemetry/PlotController.js
@ -59,6 +59,7 @@ define([
        this.openmct = openmct;
        this.objectService = objectService;
        this.exportImageService = exportImageService;
+        this.cursorGuide = false;

        $scope.pending = 0;

@ -258,8 +259,8 @@ define([
    PlotController.prototype.updateFiltersAndResubscribe = function (updatedFilters) {
        this.config.series.forEach(function (series) {
            series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
-        })
-    }
+        });
+    };

    /**
     * Export view as JPG.
@ -283,6 +284,11 @@ define([
            }.bind(this));
    };

+    PlotController.prototype.toggleCursorGuide = function ($event) {
+        this.cursorGuide = !this.cursorGuide;
+        this.$scope.$broadcast('cursorguide', $event);
+    };
+
    return PlotController;

 });
--- a/src/plugins/plot/src/telemetry/StackedPlotController.js
+++ b/src/plugins/plot/src/telemetry/StackedPlotController.js
@ -35,6 +35,8 @@ define([

        this.$element = $element;
        this.exportImageService = exportImageService;
+        this.$scope = $scope;
+        this.cursorGuide = false;

        $scope.telemetryObjects = [];

@ -145,5 +147,10 @@ define([
            }.bind(this));
    };

+    StackedPlotController.prototype.toggleCursorGuide = function ($event) {
+        this.cursorGuide = !this.cursorGuide;
+        this.$scope.$broadcast('cursorguide', $event);
+    };
+
    return StackedPlotController;
 });
--- a/src/plugins/summaryWidget/res/widgetTemplate.html
+++ b/src/plugins/summaryWidget/res/widgetTemplate.html
@ -3,7 +3,7 @@
        <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
        <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
    </a>
-    <div class="c-summary-widget__message holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
+    <div class="c-summary-widget__message holder flex-elem t-message-inline c-message message-severity-alert t-message-widget-no-data">
        <div class="w-message-contents l-message-body-only">
            <div class="message-body">
                You must add at least one telemetry object to edit this widget.
--- a/src/plugins/telemetryTable/TelemetryTable.js
+++ b/src/plugins/telemetryTable/TelemetryTable.js
@ -59,7 +59,9 @@ define([
            this.filterObserver = undefined;

            this.createTableRowCollections();
+
            openmct.time.on('bounds', this.refreshData);
+            openmct.time.on('timeSystem', this.refreshData);
        }

        initialize() {
@ -73,13 +75,17 @@ define([

        createTableRowCollections() {
            this.boundedRows = new BoundedTableRowCollection(this.openmct);
-
-            //By default, sort by current time system, ascending.
            this.filteredRows = new FilteredTableRowCollection(this.boundedRows);
-            this.filteredRows.sortBy({
+
+            //Fetch any persisted default sort
+            let sortOptions = this.configuration.getConfiguration().sortOptions;
+
+            //If no persisted sort order, default to sorting by time system, ascending.
+            sortOptions = sortOptions || {
                key: this.openmct.time.timeSystem().key,
                direction: 'asc'
-            });
+            };
+            this.filteredRows.sortBy(sortOptions);
        }

        loadComposition() {
@ -166,6 +172,7 @@ define([
            if (!isTick) {
                this.filteredRows.clear();
                this.boundedRows.clear();
+                this.boundedRows.sortByTimeSystem(this.openmct.time.timeSystem());
                this.telemetryObjects.forEach(this.requestDataFor);
            }
        }
@ -208,11 +215,22 @@ define([
            delete this.subscriptions[keyString];
        }

+        sortBy(sortOptions) {
+            this.filteredRows.sortBy(sortOptions);
+
+            if (this.openmct.editor.isEditing()) {
+                let configuration = this.configuration.getConfiguration();
+                configuration.sortOptions = sortOptions;
+                this.configuration.updateConfiguration(configuration);
+            }
+        }
+
        destroy() {
            this.boundedRows.destroy();
            this.filteredRows.destroy();
            Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
            this.openmct.time.off('bounds', this.refreshData);
+            this.openmct.time.on('timeSystem', this.refreshData);
            if (this.filterObserver) {
                this.filterObserver();
            }
--- a/src/plugins/telemetryTable/collections/BoundedTableRowCollection.js
+++ b/src/plugins/telemetryTable/collections/BoundedTableRowCollection.js
@ -41,7 +41,6 @@ define(
                this.bounds = this.bounds.bind(this)

                this.sortByTimeSystem(openmct.time.timeSystem());
-                openmct.time.on('timeSystem', this.sortByTimeSystem);

                this.lastBounds = openmct.time.bounds();
                openmct.time.on('bounds', this.bounds);
@ -51,8 +50,8 @@ define(
                // Insert into either in-bounds array, or the future buffer.
                // Data in the future buffer will be re-evaluated for possible 
                // insertion on next bounds change
-                let beforeStartOfBounds = item.datum[this.sortOptions.key] < this.lastBounds.start;
-                let afterEndOfBounds = item.datum[this.sortOptions.key] > this.lastBounds.end;
+                let beforeStartOfBounds = this.parseTime(item.datum[this.sortOptions.key]) < this.lastBounds.start;
+                let afterEndOfBounds = this.parseTime(item.datum[this.sortOptions.key]) > this.lastBounds.end;

                if (!afterEndOfBounds && !beforeStartOfBounds) {
                    return super.addOne(item);
@ -64,6 +63,12 @@ define(

            sortByTimeSystem(timeSystem) {
                this.sortBy({key: timeSystem.key, direction: 'asc'});
+                let formatter = this.openmct.telemetry.getValueFormatter({
+                    key: timeSystem.key,
+                    source: timeSystem.key,
+                    format: timeSystem.timeFormat
+                });
+                this.parseTime = formatter.parse.bind(formatter);
                this.futureBuffer.sortBy({key: timeSystem.key, direction: 'asc'});
            }

@ -131,7 +136,6 @@ define(
            }

            destroy() {
-                this.openmct.time.off('timeSystem', this.sortByTimeSystem);
                this.openmct.time.off('bounds', this.bounds);
            }
        }
--- a/src/plugins/telemetryTable/collections/SortedTableRowCollection.js
+++ b/src/plugins/telemetryTable/collections/SortedTableRowCollection.js
@ -127,7 +127,8 @@ define(
                    if (testRowValue > lastValue) {
                        return this.rows.length;
                    } else if (testRowValue === lastValue) {
-                        return this.rows.length - 1;
+                        // Maintain stable sort
+                        return this.rows.length;
                    } else if (testRowValue <= firstValue) {
                        return 0;
                    } else {
@ -141,7 +142,8 @@ define(
                    } else if (testRowValue < lastValue) {
                        return this.rows.length;
                    } else if (testRowValue === lastValue) {
-                        return this.rows.length - 1;
+                        // Maintain stable sort
+                        return this.rows.length;
                    } else {
                        // Use a custom comparison function to support descending sort.
                        return lodashFunction(rows, testRow, (thisRow) => {
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@ -23,11 +23,11 @@
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
     :class="{'loading': loading}">
    <div class="c-table__control-bar c-control-bar">
-        <a class="c-button icon-download labeled"
+        <button class="c-button icon-download labeled"
           v-on:click="exportAsCSV()"
           title="Export This View's Data">
            <span class="c-button__label">Export As CSV</span>
-        </a>
+        </button>
    </div>
    <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
    <!-- Headers table -->
@ -142,6 +142,7 @@
            // Wraps __headers table
            flex: 0 0 auto;
            overflow: hidden;
+            background: $colorTabHeaderBg;
        }

        /******************************* TABLES */
@ -408,7 +409,7 @@ export default {
                    direction: 'asc'
                }
            }
-            this.table.filteredRows.sortBy(this.sortOptions);
+            this.table.sortBy(this.sortOptions);
        },
        scroll() {
            if (!this.processingScroll) {
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@ -21,7 +21,7 @@
 *****************************************************************************/
 <template>
    <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
-        <a class="c-click-icon icon-calendar"
+        <a class="c-icon-button icon-calendar"
           @click="toggle"></a>
        <div class="c-menu c-menu--mobile-modal c-datetime-picker"
             v-if="open">
@ -30,10 +30,10 @@
                        @click="toggle"></button>
            </div>
            <div class="c-datetime-picker__pager c-pager l-month-year-pager">
-                <div class="c-pager__prev c-click-icon icon-arrow-left"
+                <div class="c-pager__prev c-icon-button icon-arrow-left"
                   @click.stop="changeMonth(-1)"></div>
                <div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
-                <div class="c-pager__next c-click-icon icon-arrow-right"
+                <div class="c-pager__next c-icon-button icon-arrow-right"
                   @click.stop="changeMonth(1)"></div>
            </div>
            <div class="c-datetime-picker__calendar c-calendar">
@ -91,7 +91,7 @@
        grid-template-columns: auto 1fr auto;
        align-items: center;

-        .c-click-icon {
+        .c-icon-button {
            font-size: 0.8em;
        }

--- a/src/styles-new/_about.scss
+++ b/src/styles-new/_about.scss
@ -21,6 +21,46 @@
 *****************************************************************************/

 // Used by About screen, licenses, etc.
+.c-splash-image {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-image: url('../ui/layout/assets/images/bg-splash.jpg');
+
+    &:before,
+    &:after {
+        background-position: center;
+        background-repeat: no-repeat;
+        position: absolute;
+        background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
+        background-size: contain;
+        content: '';
+    }
+
+    &:before {
+        // NASA logo, dude
+        $w: 5%;
+        $m: 10px;
+        background-image: url('../ui/layout/assets/images/logo-nasa.svg');
+        top: $m;
+        right: auto;
+        bottom: auto;
+        left: $m;
+        height: auto;
+        width: $w * 2;
+        padding-bottom: $w;
+        padding-top: $w;
+    }
+
+    &:after {
+        // App logo
+        top: 0;
+        right: 15%;
+        bottom: 0;
+        left: 15%;
+    }
+}
+
 .c-about {
    &--splash {
        // Large initial image after click on app logo with text beneath
@ -37,48 +77,6 @@
    &__text {
        height: 50%;
        flex: 1 1 0;
-        position: relative;
-    }
-
-    &__image {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-image: url('../ui/layout/assets/images/bg-splash.jpg');
-        position: relative;
-
-        &:before,
-        &:after {
-            background-position: center;
-            background-repeat: no-repeat;
-            position: absolute;
-            background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
-            background-size: contain;
-            content: '';
-        }
-
-        &:before {
-            // NASA logo, dude
-            $w: 5%;
-            $m: 10px;
-            background-image: url('../ui/layout/assets/images/logo-nasa.svg');
-            top: $m;
-            right: auto;
-            bottom: auto;
-            left: $m;
-            height: auto;
-            width: $w * 2;
-            padding-bottom: $w;
-            padding-top: $w;
-        }
-
-        &:after {
-            // App logo
-            top: 0;
-            right: 15%;
-            bottom: 0;
-            left: 15%;
-        }
    }

    &__text {
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@ -173,9 +173,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
@ -183,6 +183,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
+$colorCursorGuide: rgba(white, 0.6);
+$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);

 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@ -241,7 +244,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 20%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property

 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@ -264,12 +267,19 @@ $colorLimitRedIc: #ff4222;

 // Status
 $colorAlert: #ff3c00;
+$colorAlertFg: #fff;
 $colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
 $colorCommand: #3693bd;
+$colorCommandFg: #fff;
 $colorInfo: #2294a2;
+$colorInfoFg: #fff;
 $colorOk: #33cc33;
+$colorOkFg: #fff;

 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@ -177,9 +177,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
@ -187,6 +187,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
+$colorCursorGuide: rgba(white, 0.6);
+$shdwCursorGuide: rgba(black, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);

 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@ -245,7 +248,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 20%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property

 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@ -268,12 +271,19 @@ $colorLimitRedIc: #ff4222;

 // Status
 $colorAlert: #ff3c00;
+$colorAlertFg: #fff;
 $colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
 $colorCommand: #3693bd;
+$colorCommandFg: #fff;
 $colorInfo: #2294a2;
+$colorInfoFg: #fff;
 $colorOk: #33cc33;
+$colorOkFg: #fff;

 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
--- a/src/styles-new/_constants-mobile.scss
+++ b/src/styles-new/_constants-mobile.scss
@ -27,8 +27,8 @@ $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 34px;
-$phoneItemH: floor($ueBrowseGridItemLg/4);
-$tabletItemH: floor($ueBrowseGridItemLg/3);
+$phoneItemH: floor($gridItemMobile / 4);
+$tabletItemH: floor($gridItemMobile / 3);

 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@ -173,9 +173,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.2);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.2);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: pushBack($colorDropHint, 40%);
@ -183,6 +183,9 @@ $colorDropHintFg: pushBack($colorDropHint, 0);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
+$colorCursorGuide: rgba(black, 0.6);
+$shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);

 // Menus
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@ -241,7 +244,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 40%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1); // Applied in a filter: property

 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@ -264,12 +267,19 @@ $colorLimitRedIc: #ffa99a;

 // Status
 $colorAlert: #ff3c00;
+$colorAlertFg: #fff;
 $colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
 $colorCommand: #3693bd;
+$colorCommandFg: #fff;
 $colorInfo: #2294a2;
+$colorInfoFg: #fff;
 $colorOk: #33cc33;
+$colorOkFg: #fff;

 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@ -81,6 +81,9 @@ $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
 $waitSpinnerBorderW: 5px;
 $waitSpinnerTreeBorderW: 4px;
+/*************** Messages */
+$messageIconD: 80px;
+$messageListIconD: 32px;

 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@ -55,9 +55,13 @@ button {
 }

 /********* Icon Buttons */
-.c-click-icon,
-.c-click-swatch {
+.c-click-icon {
    @include cClickIcon();
+}
+
+.c-icon-button,
+.c-click-swatch {
+    @include cClickIconButton();

    &--menu {
        &:after {
@ -70,8 +74,8 @@ button {
    }
 }

-.c-click-icon {
-    .c-click-icon__label {
+.c-icon-button {
+    .c-icon-button__label {
        margin-left: $interiorMargin;
    }

@ -245,7 +249,13 @@ select {
    background-position: right .4em top 80%, 0 0;
    border: none;
    border-radius: $controlCr;
-    padding: 4px 20px 4px $interiorMargin;
+    padding: 1px 20px 1px $interiorMargin;
+
+    *,
+    option {
+        background: $colorBtnBg;
+        color: $colorBtnFg;
+    }
 }

 // CHECKBOX LISTS
@ -502,12 +512,12 @@ select {
        @include cToolbarSeparator();
    }

-    .c-click-icon,
+    .c-icon-button,
    .c-labeled-input {
        color: $editUIBaseColorFg;
    }

-    .c-click-icon {
+    .c-icon-button {
        @include cControl();
        $pLR: $interiorMargin - 1;
        $pTB: 2px;
@ -551,8 +561,6 @@ select {

 /********* Button Sets */
 .c-button-set {
-    // When one set is adjacent to another, provides a divider between
-
    display: inline-flex;
    flex: 0 0 auto;

@ -561,21 +569,24 @@ select {
        flex: 0 0 auto;
    }

-    + .c-button-set {
-        &:before {
-            @include cToolbarSeparator();
-            content: '';
-        }
-    }
-
    &[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
+        // c-icon-buttons get grouped more closely together
        [class^="c-button"] {
            // Only apply the following to buttons that have background, eg. c-button
            border-radius: 0;
+        }
+    }

+    &[class*='--strip-h'] {
+        // Horizontal strip
+
+        + .c-button-set {
+            margin-left: $interiorMargin;
+        }
+
+        [class^="c-button"] {
            + * {
                margin-left: 1px;
            }
@ -647,6 +658,46 @@ input[type="range"] {
    }
 }

+/***************************************************** LOCAL CONTROLS */
+.h-local-controls {
+    // Holder for local controls
+    &--horz {
+        // Horizontal layout be
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &--overlay-content {
+        > .c-button {
+            background: $colorLocalControlOvrBg;
+            border-radius: $controlCr;
+            box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
+        }
+    }
+}
+
+.c-local-controls {
+    // Controls that are in close proximity to an element they effect
+    &--show-on-hover {
+        // Hidden by default; requires a hover 1 - 3 levels above to display
+        transition: $transOut;
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.has-local-controls:hover {
+    > .c-local-controls--show-on-hover,
+    > * > .c-local-controls--show-on-hover,
+    > * > * > .c-local-controls--show-on-hover,
+    > * > * > * > .c-local-controls--show-on-hover
+    {
+        transition: $transIn;
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
+
 /***************************************************** DRAG AND DROP */
 .c-drop-hint {
    // Used in Tabs View, Flexible Grid Layouts
@ -701,19 +752,3 @@ input[type="range"] {
    display: flex;
    align-items: center;
 }
-
-.h-local-controls {
-    &-overlay-content {
-        box-shadow: $colorBodyBg 0 0 0 2px;
-        display: inline-block;
-        position: absolute;
-        right: $interiorMargin; top: $interiorMargin;
-        z-index: 2;
-    }
-
-    &-trans {
-        // Has a translucent background plate
-        background: rgba($colorBodyBg, 0.8);
-        border-radius: $controlCr;
-    }
-}
--- a/src/styles-new/_forms.scss
+++ b/src/styles-new/_forms.scss
@ -338,7 +338,6 @@
    }
 }

-
 mct-form.validates {
    .form-row.validates {
        > .label {
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@ -233,6 +233,7 @@ mct-container {
    padding: 1em;
 }

+*[disabled],
 .disabled,
 a.disabled {
    opacity: $controlDisabledOpacity;
--- a/src/styles-new/_legacy-messages.scss
+++ b/src/styles-new/_legacy-messages.scss
@ -0,0 +1,144 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/******************************************************************* MESSAGES */
+.w-message-contents {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+
+    > * + * {
+        margin-bottom: $interiorMargin;
+    }
+
+    .message-body {
+        flex: 1 1 100%;
+    }
+}
+
+// Singleton in an overlay dialog
+.t-message-single .l-message,
+.t-message-single.l-message {
+    $iconW: $messageListIconD;
+    &:before {
+        font-size: $iconW;
+        width: $iconW + 2;
+    }
+    .title {
+        font-size: 1.2em;
+    }
+}
+
+// Singleton inline in a view
+.t-message-inline .l-message,
+.t-message-inline.l-message {
+    border-radius: $controlCr;
+    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
+    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
+    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
+
+    .w-message-contents.l-message-body-only {
+        .message-body {
+            margin-top: $interiorMargin;
+        }
+    }
+}
+
+// In a list
+.c-overlay__messages {
+    //@include abs();
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding-right: $interiorMargin;
+
+    > div,
+    > span {
+        margin-bottom: $interiorMargin;
+    }
+
+    .w-messages {
+        flex: 1 1 100%;
+        overflow-y: auto;
+        padding-right: $interiorMargin;
+    }
+    // Each message
+    .c-message {
+        @include discreteItem();
+        flex: 0 0 auto;
+        margin-bottom: $interiorMarginSm;
+
+        .hint,
+        .bottom-bar {
+            text-align: left;
+        }
+    }
+
+}
+
+@include phonePortrait {
+    .t-message-single .l-message,
+    .t-message-single.l-message {
+        flex-direction: column;
+        &:before {
+            margin-right: 0;
+            margin-bottom: $interiorMarginLg;
+            text-align: center;
+            width: 100%;
+        }
+
+        .bottom-bar {
+            text-align: center;
+            .s-button {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+body.desktop .t-message-list {
+    .w-message-contents { padding-right: $interiorMargin; }
+}
+
+// Alert elements in views
+mixin sUnSynced() {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+}
+
+.s-unsynced {
+    @include sUnsynced();
+}
+
+.s-status-timeconductor-unsynced {
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        @include sUnsynced();
+    }
+
+    // Object headers
+    .object-header {
+        .t-object-alert {
+            display: inline;
+        }
+    }
+}
--- a/src/styles-new/_legacy-plots.scss
+++ b/src/styles-new/_legacy-plots.scss
@ -0,0 +1,550 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/********************************************************************* PLOTS */
+mct-plot {
+    display: contents;
+}
+
+/*********************** STACKED PLOT LAYOUT */
+.t-plot-stacked {
+    .l-view-section {
+        //  Make this a flex container
+        display: flex;
+        flex-flow: column nowrap;
+        .gl-plot.child-frame {
+            mct-plot {
+                display: flex;
+                flex: 1 1 auto;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
+            &:not(:first-child) {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
+
+    .s-status-timeconductor-unsynced .holder-plot {
+        .t-object-alert.t-alert-unsynced {
+            display: block;
+        }
+    }
+}
+
+.gl-plot {
+    color: $colorPlotFg;
+    display: flex;
+    //font-size: 0.7rem;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: $plotMinH;
+
+    /*********************** AXIS AND DISPLAY AREA */
+    .plot-wrapper-axis-and-display-area {
+        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
+        position: relative;
+        flex: 1 1 auto;
+        .t-object-alert {
+            position: absolute;
+            display: block;
+            font-size: 1.5em;
+            top: $interiorMarginSm;
+            left: $interiorMarginSm;
+            z-index: 2;
+        }
+    }
+
+    .gl-plot-wrapper-display-area-and-x-axis {
+        // Holds the plot area and the X-axis only
+        position: absolute;
+        top: nth($plotDisplayArea, 1);
+        right:0;
+        bottom: 0;
+        left: nth($plotDisplayArea, 4);
+
+        .gl-plot-display-area {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+        }
+
+        .gl-plot-axis-area.gl-plot-x {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: $plotXBarH;
+            width: auto;
+            overflow: hidden;
+        }
+    }
+
+    .gl-plot-axis-area {
+        position: absolute;
+        &.gl-plot-y {
+            top: nth($plotDisplayArea, 1);
+            right: auto;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+            width: $plotYBarW;
+        }
+    }
+
+    .gl-plot-coords {
+        box-sizing: border-box;
+        border-radius: $controlCr;
+        background: black;
+        color: lighten($colorBodyFg, 30%);
+        padding: 2px 5px;
+        position: absolute;
+        top: nth($plotDisplayArea,1) + $interiorMarginLg;
+        right: auto;
+        bottom: auto;
+        left: nth($plotDisplayArea,4) + $interiorMarginLg;
+        z-index: 10;
+        &:empty {
+            display: none;
+        }
+    }
+
+    .gl-plot-label,
+    .l-plot-label {
+        color: $colorPlotLabelFg;
+        position: absolute;
+        text-align: center;
+
+        &.gl-plot-x-label,
+        &.l-plot-x-label {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: auto;
+        }
+
+        &.gl-plot-y-label,
+        &.l-plot-y-label {
+            $x: -50%;
+            $r: -90deg;
+            transform-origin: 50% 0;
+            transform: translateX($x) rotate($r);
+            display: inline-block;
+            margin-left: $interiorMargin; // Kick off the left edge
+            left: 0;
+            top: 50%;
+            white-space: nowrap;
+        }
+    }
+
+    .gl-plot-x-options,
+    .gl-plot-y-options {
+        $h: 24px;
+        position: absolute;
+        height: $h;
+        min-height: $h;
+        z-index: 2;
+    }
+
+    .gl-plot-x-options {
+        transform: translateX(-50%);
+        bottom: 0;
+        left: 50%;
+    }
+
+    .gl-plot-y-options {
+        transform: translateY(-50%);
+        min-width: 150px; // Need this due to enclosure of .select
+        top: 50%;
+        left: $plotYLabelW + $interiorMargin * 2;
+    }
+
+    .t-plot-display-controls {
+        position: absolute;
+        top: $interiorMargin;
+        right: $interiorMargin;
+    }
+
+    .gl-plot-hash {
+        position: absolute;
+        opacity: $opacityPlotHash;
+        &.hash-v {
+            border-right: 1px $colorPlotHash $stylePlotHash;
+            height: 100%;
+        }
+        &.hash-h {
+            border-bottom: 1px $colorPlotHash $stylePlotHash;
+            width: 100%;
+        }
+    }
+
+    &__local-controls {
+        // Plot local controls
+        $m: $interiorMargin;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: $m;
+        right: $m;
+        z-index: 9;
+
+        &__reset {
+            transition: right 100ms;
+            top: $m;
+            right: $m;
+        }
+
+        &__zoom-and-guides {
+            top: $m;
+            right: $m;
+        }
+    }
+}
+
+.gl-plot-display-area,
+.plot-display-area {
+    @if $colorPlotBg != none {
+        background-color: $colorPlotBg;
+    }
+    cursor: crosshair;
+    border: 1px solid $colorPlotAreaBorder;
+}
+
+.tick {
+    position: absolute;
+    border: 0 $colorPlotHash solid;
+    &.tick-x {
+        border-right-width: 1px;
+        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
+    }
+}
+
+.gl-plot-tick,
+.tick-label {
+    @include reverseEllipsis();
+    font-size: 0.7rem;
+    position: absolute;
+    &.gl-plot-x-tick-label,
+    &.tick-label-x {
+        right: auto;
+        bottom: auto;
+        left: auto;
+        height: auto;
+        width: 20%;
+        margin-left: -10%;
+        text-align: center;
+    }
+    &.gl-plot-y-tick-label,
+    &.tick-label-y {
+        top: auto;
+        height: 1em;
+        width: auto;
+        margin-bottom: -0.5em;
+        text-align: right;
+    }
+}
+
+.gl-plot-tick {
+    &.gl-plot-x-tick-label {
+        top: $interiorMargin;
+    }
+    &.gl-plot-y-tick-label {
+        right: $interiorMargin;
+        left: $interiorMargin;
+    }
+}
+
+.tick-label {
+    &.tick-label-x {
+        top: 0;
+    }
+    &.tick-label-y {
+        right: 0;
+        left: 0;
+    }
+}
+
+.export-plot {
+    $bg: white;
+    $fg: black;
+    $gry: #999;
+
+    background: $bg !important;
+    z-index: -10;
+
+    .l-view-section {
+        $m: $interiorMargin;
+        top: $m !important;
+        right: $m;
+        bottom: $m;
+        left: $m;
+
+        .s-status-timeconductor-unsynced .holder-plot {
+            .t-object-alert.t-alert-unsynced {
+                display: none;
+            }
+        }
+    }
+
+    .gl-plot-display-area {
+        background: none !important;
+        border-color: $gry !important;
+
+        .gl-plot-local-controls,
+        .h-local-controls {
+            opacity: 0;
+        }
+    }
+
+    .gl-plot {
+        color: $fg;
+
+        .gl-plot-hash {
+            opacity: 0.1;
+            border-color: $fg;
+        }
+    }
+
+    table {
+        thead {
+            border-bottom: none;
+
+            th {
+                background: #eee;
+                border-left-color: $bg;
+                color: #666;
+            }
+
+            tr {
+                border: none;
+            }
+        }
+        tbody {
+            tr {
+                border-top: 1px solid #ccc;
+            }
+
+            td {
+                color: $fg;
+            }
+        }
+    }
+}
+
+/****************** _LEGEND.SCSS */
+.gl-plot-legend {
+    display: flex;
+    align-items: flex-start;
+
+    &__view-control {
+        padding-top: 2px;
+        margin-right: $interiorMarginSm;
+    }
+
+    table {
+        table-layout: fixed;
+        th,
+        td {
+            @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
+            padding: 1px 3px; // Tighter than standard tabular padding
+        }
+    }
+
+    &.hover-on-plot {
+        // User is hovering over the plot to get a value at a point
+        .hover-value-enabled {
+            background-color: $legendHoverValueBg;
+            border-radius: $smallCr;
+            padding: 0 $interiorMarginSm;
+
+            &.value-to-display-min:before {
+                content: 'MIN ';
+            }
+            &.value-to-display-max:before {
+                content: 'MAX ';
+            }
+        }
+    }
+}
+
+/***************** GENERAL STYLES, ALL STATES */
+.plot-legend-item {
+    // General styles for legend items, both expanded and collapsed legend states
+    .plot-series-color-swatch {
+        border-radius: $smallCr;
+        border: 1px solid $colorBodyBg;
+        display: inline-block;
+        height: $plotSwatchD;
+        width: $plotSwatchD;
+    }
+    .plot-series-name {
+        display: inline;
+    }
+
+    .plot-series-value {
+        @include ellipsize();
+    }
+}
+
+.plot-wrapper-expanded-legend {
+    flex: 1 1 auto;
+}
+
+.gl-plot {
+    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
+    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
+
+    /***************** GENERAL STYLES, COLLAPSED */
+    &.plot-legend-collapsed {
+        // .plot-legend-item is a span of spans.
+        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
+        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
+        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+
+        .plot-legend-item {
+            display: flex;
+            align-items: center;
+            justify-content: stretch;
+            &:not(:first-child) {
+                margin-left: $interiorMarginLg;
+            }
+            .plot-series-swatch-and-name,
+            .plot-series-value {
+                @include ellipsize();
+                flex: 1 1 auto;
+            }
+
+            .plot-series-swatch-and-name {
+                margin-right: $interiorMarginSm;
+            }
+
+            .plot-series-value {
+                text-align: left;
+            }
+        }
+    }
+
+    /***************** GENERAL STYLES, EXPANDED */
+    &.plot-legend-expanded {
+        .gl-plot-legend {
+            max-height: 70%;
+        }
+
+        .plot-wrapper-expanded-legend {
+            overflow-y: auto;
+        }
+    }
+
+    /***************** TOP OR BOTTOM */
+    &.plot-legend-top,
+    &.plot-legend-bottom {
+        // General styles when legend is on the top or bottom
+        flex-direction: column;
+
+        &.plot-legend-collapsed {
+            // COLLAPSED ON TOP OR BOTTOM
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex: 1 1 auto;
+                overflow: hidden;
+            }
+        }
+    }
+
+    /***************** EITHER SIDE */
+    &.plot-legend-left,
+    &.plot-legend-right {
+        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
+        &.plot-legend-expanded {
+            // EXPANDED, ON EITHER SIDE
+            flex-direction: column;
+        }
+
+        &.plot-legend-collapsed {
+            // COLLAPSED, ON EITHER SIDE
+            .gl-plot-legend {
+                max-height: inherit;
+                width: 25%;
+            }
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex-flow: column nowrap;
+                min-width: 0;
+                flex: 1 1 auto;
+                overflow-y: auto;
+            }
+            .plot-legend-item {
+                margin-bottom: 1px;
+                margin-left: 0;
+                flex-wrap: wrap;
+                .plot-series-swatch-and-name {
+                    flex: 0 1 auto;
+                    min-width: 20%;
+                }
+                .plot-series-value {
+                    flex: 0 1 auto;
+                    width: auto;
+                }
+            }
+        }
+    }
+
+    /***************** ON BOTTOM OR RIGHT */
+    &.plot-legend-right:not(.plot-legend-expanded),
+    &.plot-legend-bottom {
+        .gl-plot-legend {
+            order: 2;
+        }
+        .plot-wrapper-axis-and-display-area {
+            order: 1;
+        }
+    }
+}
+
+/***************** CURSOR GUIDES */
+[class*='c-cursor-guide'] {
+    box-shadow: $shdwCursorGuide;
+    background-color: $colorCursorGuide;
+    display: none; // Displayed when an element with has-cursor-guides gets a hover; see below
+    pointer-events: none;
+    position: absolute;
+}
+
+.has-cursor-guides:hover [class*='c-cursor-guide'] {
+    display: block;
+}
+
+.c-cursor-guide {
+    &--h {
+        height: 1px;
+        left: 0; right: 0;
+    }
+
+    &--v {
+        width: 1px;
+        top: 0; bottom: 0;
+    }
+}
--- a/src/styles-new/_legacy.scss
+++ b/src/styles-new/_legacy.scss
@ -19,491 +19,6 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-
-/********************************************************************* PLOTS */
-mct-plot {
-    display: contents;
-}
-
-/*********************** STACKED PLOT LAYOUT */
-.t-plot-stacked {
-    .l-view-section {
-        //  Make this a flex container
-        display: flex;
-        flex-flow: column nowrap;
-        .gl-plot.child-frame {
-            mct-plot {
-                display: flex;
-                flex: 1 1 auto;
-                height: 100%;
-                position: relative;
-            }
-            flex: 1 1 auto;
-            &:not(:first-child) {
-                margin-top: $interiorMargin;
-            }
-        }
-    }
-
-    .s-status-timeconductor-unsynced .holder-plot {
-        .t-object-alert.t-alert-unsynced {
-            display: block;
-        }
-    }
-}
-
-.gl-plot {
-    color: $colorPlotFg;
-    display: flex;
-    font-size: 0.7rem;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: $plotMinH;
-
-    /*********************** AXIS AND DISPLAY AREA */
-    .plot-wrapper-axis-and-display-area {
-        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
-        position: relative;
-        flex: 1 1 auto;
-        .t-object-alert {
-            position: absolute;
-            display: block;
-            font-size: 1.5em;
-            top: $interiorMarginSm;
-            left: $interiorMarginSm;
-            z-index: 2;
-        }
-    }
-
-    .gl-plot-wrapper-display-area-and-x-axis {
-        // Holds the plot area and the X-axis only
-        position: absolute;
-        top: nth($plotDisplayArea, 1);
-        right:0;
-        bottom: 0;
-        left: nth($plotDisplayArea, 4);
-
-        .gl-plot-display-area {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-        }
-
-        .gl-plot-axis-area.gl-plot-x {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: $plotXBarH;
-            width: auto;
-            overflow: hidden;
-        }
-    }
-
-    .gl-plot-axis-area {
-        position: absolute;
-        &.gl-plot-y {
-            top: nth($plotDisplayArea, 1);
-            right: auto;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-            width: $plotYBarW;
-        }
-    }
-
-    .gl-plot-coords {
-        box-sizing: border-box;
-        border-radius: $controlCr;
-        background: black;
-        color: lighten($colorBodyFg, 30%);
-        padding: 2px 5px;
-        position: absolute;
-        top: nth($plotDisplayArea,1) + $interiorMarginLg;
-        right: auto;
-        bottom: auto;
-        left: nth($plotDisplayArea,4) + $interiorMarginLg;
-        z-index: 10;
-        &:empty {
-            display: none;
-        }
-    }
-
-    .gl-plot-label,
-    .l-plot-label {
-        color: $colorPlotLabelFg;
-        position: absolute;
-        text-align: center;
-
-        &.gl-plot-x-label,
-        &.l-plot-x-label {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: auto;
-        }
-
-        &.gl-plot-y-label,
-        &.l-plot-y-label {
-            $x: -50%;
-            $r: -90deg;
-            transform-origin: 50% 0;
-            transform: translateX($x) rotate($r);
-            display: inline-block;
-            margin-left: $interiorMargin; // Kick off the left edge
-            left: 0;
-            top: 50%;
-            white-space: nowrap;
-        }
-    }
-
-    .gl-plot-x-options,
-    .gl-plot-y-options {
-        $h: 24px;
-        position: absolute;
-        height: $h;
-        min-height: $h;
-        z-index: 2;
-    }
-
-    .gl-plot-x-options {
-        transform: translateX(-50%);
-        bottom: 0;
-        left: 50%;
-    }
-
-    .gl-plot-y-options {
-        transform: translateY(-50%);
-        min-width: 150px; // Need this due to enclosure of .select
-        top: 50%;
-        left: $plotYLabelW + $interiorMargin * 2;
-    }
-
-    .t-plot-display-controls {
-        position: absolute;
-        top: $interiorMargin;
-        right: $interiorMargin;
-    }
-
-    .gl-plot-hash {
-        position: absolute;
-        opacity: $opacityPlotHash;
-        &.hash-v {
-            border-right: 1px $colorPlotHash $stylePlotHash;
-            height: 100%;
-        }
-        &.hash-h {
-            border-bottom: 1px $colorPlotHash $stylePlotHash;
-            width: 100%;
-        }
-    }
-}
-
-.gl-plot-display-area,
-.plot-display-area {
-    @if $colorPlotBg != none {
-        background-color: $colorPlotBg;
-    }
-    cursor: crosshair;
-    border: 1px solid $colorPlotAreaBorder;
-}
-
-.tick {
-    position: absolute;
-    border: 0 $colorPlotHash solid;
-    &.tick-x {
-        border-right-width: 1px;
-        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
-    }
-}
-
-.gl-plot-tick,
-.tick-label {
-    @include reverseEllipsis();
-    font-size: 0.7rem;
-    position: absolute;
-    &.gl-plot-x-tick-label,
-    &.tick-label-x {
-        right: auto;
-        bottom: auto;
-        left: auto;
-        height: auto;
-        width: 20%;
-        margin-left: -10%;
-        text-align: center;
-    }
-    &.gl-plot-y-tick-label,
-    &.tick-label-y {
-        top: auto;
-        height: 1em;
-        width: auto;
-        margin-bottom: -0.5em;
-        text-align: right;
-    }
-}
-
-.gl-plot-tick {
-    &.gl-plot-x-tick-label {
-        top: $interiorMargin;
-    }
-    &.gl-plot-y-tick-label {
-        right: $interiorMargin;
-        left: $interiorMargin;
-    }
-}
-
-.tick-label {
-    &.tick-label-x {
-        top: 0;
-    }
-    &.tick-label-y {
-        right: 0;
-        left: 0;
-    }
-}
-
-.export-plot {
-    $bg: white;
-    $fg: black;
-    $gry: #999;
-
-    background: $bg !important;
-    z-index: -10;
-
-    .l-view-section {
-        $m: $interiorMargin;
-        top: $m !important;
-        right: $m;
-        bottom: $m;
-        left: $m;
-
-        .s-status-timeconductor-unsynced .holder-plot {
-            .t-object-alert.t-alert-unsynced {
-                display: none;
-            }
-        }
-    }
-
-    .gl-plot-display-area {
-        background: none !important;
-        border-color: $gry !important;
-
-        .gl-plot-local-controls,
-        .h-local-controls {
-            opacity: 0;
-        }
-    }
-
-    .gl-plot {
-        color: $fg;
-
-        .gl-plot-hash {
-            opacity: 0.1;
-            border-color: $fg;
-        }
-    }
-
-    table {
-        thead {
-            border-bottom: none;
-
-            th {
-                background: #eee;
-                border-left-color: $bg;
-                color: #666;
-            }
-
-            tr {
-                border: none;
-            }
-        }
-        tbody {
-            tr {
-                border-top: 1px solid #ccc;
-            }
-
-            td {
-                color: $fg;
-            }
-        }
-    }
-}
-
-/****************** _LEGEND.SCSS */
-.gl-plot-legend {
-    display: flex;
-    align-items: flex-start;
-
-    &__view-control {
-        padding-top: 2px;
-        margin-right: $interiorMarginSm;
-    }
-
-    table {
-        table-layout: fixed;
-        th,
-        td {
-            @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
-            padding: 1px 3px; // Tighter than standard tabular padding
-            //width: 1%;
-        }
-    }
-
-    &.hover-on-plot {
-        // User is hovering over the plot to get a value at a point
-        .hover-value-enabled {
-            background-color: $legendHoverValueBg;
-            border-radius: $smallCr;
-            padding: 0 $interiorMarginSm;
-
-            &.value-to-display-min:before {
-                content: 'MIN ';
-            }
-            &.value-to-display-max:before {
-                content: 'MAX ';
-            }
-        }
-    }
-}
-
-/***************** GENERAL STYLES, ALL STATES */
-.plot-legend-item {
-    // General styles for legend items, both expanded and collapsed legend states
-    .plot-series-color-swatch {
-        border-radius: $smallCr;
-        border: 1px solid $colorBodyBg;
-        display: inline-block;
-        height: $plotSwatchD;
-        width: $plotSwatchD;
-    }
-    .plot-series-name {
-        display: inline;
-    }
-
-    .plot-series-value {
-        @include ellipsize();
-    }
-}
-
-.plot-wrapper-expanded-legend {
-    flex: 1 1 auto;
-}
-
-.gl-plot {
-    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
-    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
-
-    /***************** GENERAL STYLES, COLLAPSED */
-    &.plot-legend-collapsed {
-        // .plot-legend-item is a span of spans.
-        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
-        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
-
-        .plot-legend-item {
-            display: flex;
-            align-items: center;
-            justify-content: stretch;
-            &:not(:first-child) {
-                margin-left: $interiorMarginLg;
-            }
-            .plot-series-swatch-and-name,
-            .plot-series-value {
-                @include ellipsize();
-                flex: 1 1 auto;
-            }
-
-            .plot-series-swatch-and-name {
-                margin-right: $interiorMarginSm;
-            }
-
-            .plot-series-value {
-                text-align: left;
-            }
-        }
-    }
-
-    /***************** GENERAL STYLES, EXPANDED */
-    &.plot-legend-expanded {
-        .gl-plot-legend {
-            max-height: 70%;
-        }
-
-        .plot-wrapper-expanded-legend {
-            overflow-y: auto;
-        }
-    }
-
-    /***************** TOP OR BOTTOM */
-    &.plot-legend-top,
-    &.plot-legend-bottom {
-        // General styles when legend is on the top or bottom
-        flex-direction: column;
-
-        &.plot-legend-collapsed {
-            // COLLAPSED ON TOP OR BOTTOM
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex: 1 1 auto;
-                overflow: hidden;
-            }
-        }
-    }
-
-    /***************** EITHER SIDE */
-    &.plot-legend-left,
-    &.plot-legend-right {
-        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
-        &.plot-legend-expanded {
-            // EXPANDED, ON EITHER SIDE
-            flex-direction: column;
-        }
-
-        &.plot-legend-collapsed {
-            // COLLAPSED, ON EITHER SIDE
-            .gl-plot-legend {
-                max-height: inherit;
-                width: 25%;
-            }
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex-flow: column nowrap;
-                min-width: 0;
-                flex: 1 1 auto;
-                overflow-y: auto;
-            }
-            .plot-legend-item {
-                margin-bottom: 1px;
-                margin-left: 0;
-                flex-wrap: wrap;
-                .plot-series-swatch-and-name {
-                    flex: 0 1 auto;
-                    min-width: 20%;
-                }
-                .plot-series-value {
-                    flex: 0 1 auto;
-                    width: auto;
-                }
-            }
-        }
-    }
-
-    /***************** ON BOTTOM OR RIGHT */
-    &.plot-legend-right:not(.plot-legend-expanded),
-    &.plot-legend-bottom {
-        .gl-plot-legend {
-            order: 2;
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 1;
-        }
-    }
-}
-
 /******************************************************************* VIEWS */
 // From _views.scss
 // Legacy overlay and stacked plots depend on this for now
@ -582,7 +97,6 @@ mct-plot {
 }

 .l-image-main-controlbar {
-    font-size: 0.8em;
    line-height: inherit;
    .l-datetime-w, .l-controls-w {
        direction: rtl;
@ -624,7 +138,6 @@ mct-plot {
 }

 /*************************************** THUMBS */
-
 .l-image-thumbs-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
@ -639,7 +152,6 @@ mct-plot {
    direction: ltr;
    display: inline-block;
    float: left;
-    font-size: 0.8em;
    padding: 1px;
    margin-left: $interiorMarginSm;
    position: relative;
@ -679,9 +191,14 @@ mct-plot {
 }

 /*************************************** LOCAL CONTROLS */
-.t-imagery {
+.c-imagery {
    display: contents;
-    .h-local-controls.h-local-controls-overlay-content {
+    .h-local-controls--overlay-content {
+        position: absolute;
+        right: $interiorMargin; top: $interiorMargin;
+        z-index: 2;
+        background: $colorLocalControlOvrBg;
+        border-radius: $basicCr;
        max-width: 200px;
        min-width: 100px;
        width: 35%;
@ -699,8 +216,10 @@ mct-plot {
                margin-right: $interiorMarginSm;
            }
        }
+    }

-        .t-reset-btn-holder {
+    &__lc {
+        &__reset-btn {
            $bc: $scrollbarTrackColorBg;
            &:before,
            &:after {
@ -730,8 +249,8 @@ mct-plot {
    .l-image-main-wrapper {
        bottom: 0 !important;
        height: 100% !important;
-        .l-image-main-controlbar {
-            font-size: 0.7em;
+        .l-image-main-controlbar .c-button {
+            //font-size: 0.7em;
        }
    }
    .l-image-thumbs-wrapper,
@ -795,7 +314,7 @@ body.mobile.phone {
        transition: $transOut;
        width: 0;

-        .c-click-icon:before { font-size: 1em; }
+        .c-icon-button:before { font-size: 1em; }
    }

    &__direction {
@ -1278,6 +797,7 @@ mct-indicators mct-include {
    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;
@ -1287,7 +807,8 @@ mct-indicators mct-include {
        display: inline-block;
        a,
        button,
-        .s-button {
+        s-button,
+        .c-button {
            // Make <a> in label look like buttons
            transition: $transIn;
            background: transparent;
@ -1312,8 +833,6 @@ mct-indicators mct-include {
                margin-right: $interiorMarginSm;
            }
        }
-
-        button { text-transform: uppercase !important; }
    }

    &.no-collapse {
@ -1723,6 +1242,10 @@ body.desktop {
            display: none;
        }
    }
+
+    &.c-loading--overlay {
+        @include abs();
+    }
 }

 /******************************************************************* FLEX STYLES */
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@ -51,33 +51,15 @@

 /************************** EFFECTS */
@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @include keyframes($animName) {
+    @keyframes pulse {
        0%   { opacity: $opacity0; }
        100% { opacity: $opacity100; }
    }
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-direction(alternate);
-    @include animation-iteration-count($iteration);
-    @include animation-timing-function(ease-in-out);
-}
-
-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include keyframes($animName) {
-        from { #{propName}: $propValStart; }
-        to { #{$propName}: $propValEnd; }
-    }
-    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
-}
-
-@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-delay($delay);
-    @include animation-fill-mode(both);
-    @include animation-direction($dir);
-    @include animation-iteration-count($count);
-    @include animation-timing-function(ease-in-out);
+    animation-name: $animName;
+    animation-duration: $dur;
+    animation-direction: alternate;
+    animation-iteration-count: $iteration;
+    animation-timing-function: ease-in-out;
 }

 /************************** VISUALS */
@ -391,7 +373,8 @@
        color: $colorBtnFgHov;
    }

-    &[class*="--major"] {
+    &[class*="--major"],
+    &[class*='is-active']{
        background: $colorBtnMajorBg;
        color: $colorBtnMajorFg;

@ -411,24 +394,37 @@
    }
 }

+
@mixin cClickIcon() {
-    // A clickable element that just includes the icon, no background
+    @include cControl();
+    cursor: pointer;
+    padding: 4px; // Bigger hit area
+    opacity: 0.6;
+    transition: $transOut;
+    transform-origin: center;
+
+    @include hover() {
+        transform: scale(1.1);
+        transition: $transIn;
+        opacity: 1;
+    }
+}
+
+@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();
-    $pLR: 4px;
-    $pTB: 4px;
    background: none;
    box-shadow: none;
-    border-radius: $controlCr;
    cursor: pointer;
+    $pLR: 4px;
+    $pTB: 4px;
+    transition: $transOut;
+    border-radius: $controlCr;
    padding: $pTB $pLR;

-    @include hover() {
-        background: $colorClickIconBgHov;
-        color: $colorClickIconFgHov;
-    }
-
    &:before,
    *:before {
        // *:before handles any nested containers that may contain glyph elements
@ -436,6 +432,12 @@
        font-size: 1.25em;
    }

+    @include hover() {
+        transition: $transIn;
+        background: $colorClickIconButtonBgHov;
+        color: $colorClickIconButtonFgHov;
+    }
+
    &[class*="--major"] {
        color: $colorKey;
    }
--- a/src/styles-new/core.scss
+++ b/src/styles-new/core.scss
@ -24,6 +24,7 @@
@import "sass-base";

 /******************** RENDERS CSS */
+@import "about";
@import "glyphs";
@import "global";
@import "status";
@ -31,3 +32,4 @@
@import "forms";
@import "table";
@import "legacy";
+@import "legacy-plots";
--- a/src/styles-new/sass-base.scss
+++ b/src/styles-new/sass-base.scss
@ -24,6 +24,7 @@
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
@import "constants";
+@import "constants-mobile.scss";
@import "constants-espresso"; // TEMP
 //@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@ -113,6 +113,12 @@
                }
            }
        }
+
+        .c-click-icon,
+        .c-button {
+            // Shrink buttons a bit when they appear in a frame
+            font-size: 0.8em;
+        }
    }
 </style>

--- a/src/ui/inspector/Location.vue
+++ b/src/ui/inspector/Location.vue
@ -2,24 +2,37 @@
 <div class="c-properties c-properties--location">
    <div class="c-properties__header" title="The location of this linked object.">Location</div>
    <ul class="c-properties__section">
-        <li class="c-properties__row">
-            <div class="c-properties__label">This Link</div>
-            <div class="c-properties__value">TODO</div>
-        </li>
-        <li class="c-properties__row">
+        <li class="c-properties__row" v-if="originalPath.length">
            <div class="c-properties__label">Original</div>
-            <div class="c-properties__value">TODO</div>
+            <ul class="c-properties__value">
+                <li v-for="pathObject in orderedOriginalPath"
+                    :key="pathObject.key">
+                    <object-label
+                        :domainObject="pathObject.domainObject"
+                        :objectPath="pathObject.objectPath">
+                    </object-label>
+                    <span class="c-disclosure-triangle"></span>
+                </li>
+            </ul>
        </li>
    </ul>
 </div>
 </template>

 <script>
+
+import ObjectLabel from '../components/ObjectLabel.vue';
+
 export default {
    inject: ['openmct'],
+    components: {
+        ObjectLabel
+    },
    data() {
        return {
-            domainObject: {}
+            domainObject: {},
+            originalPath: [],
+            keyString: ''
        }
    },
    mounted() {
@ -30,12 +43,39 @@ export default {
        this.openmct.selection.off('change', this.updateSelection);
    },
    methods: {
+        setOriginalPath(path) {
+            this.originalPath = path.slice(1,-1).map((domainObject, index, pathArray) => {
+                let key = this.openmct.objects.makeKeyString(domainObject.identifier);
+                return {
+                    domainObject,
+                    key,
+                    objectPath: pathArray.slice(index)
+                }
+            });
+        },
        updateSelection(selection) {
            if (selection.length === 0) {
                this.domainObject = {};
+                this.originalLocation = [];
                return;
            }
+
            this.domainObject = selection[0].context.item;
+            
+            let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+            if (this.keyString !== keyString) {
+                this.keyString = keyString;
+                this.originalPath = [];
+
+                this.openmct.objects.getOriginalPath(this.keyString)
+                    .then(this.setOriginalPath);
+            }
+        }
+    },
+    computed: {
+        orderedOriginalPath() {
+            return this.originalPath.reverse();
        }
    }
 }
--- a/src/ui/inspector/Properties.vue
+++ b/src/ui/inspector/Properties.vue
@ -12,11 +12,11 @@
        </li>
        <li class="c-properties__row" v-if="item.created">
            <div class="c-properties__label">Created</div>
-            <div class="c-properties__value">{{ item.created }}</div>
+            <div class="c-properties__value c-ne__text">{{ formatTime(item.created) }}</div>
        </li>
        <li class="c-properties__row" v-if="item.modified">
            <div class="c-properties__label">Modified</div>
-            <div class="c-properties__value">{{ item.modified }}</div>
+            <div class="c-properties__value c-ne__text">{{ formatTime(item.modified) }}</div>
        </li>
        <li class="c-properties__row"
            v-for="prop in typeProperties"
@ -29,6 +29,8 @@
 </template>

 <script>
+import Moment from "moment";
+
 export default {
    inject: ['openmct'],
    data() {
@ -93,6 +95,9 @@ export default {
                return;
            }
            this.domainObject = selection[0].context.item;
+        },
+        formatTime(unixTime) {
+            return Moment.utc(unixTime).format('YYYY-MM-DD[\n]HH:mm:ss') + ' UTC';
        }
    }
 }
--- a/src/ui/layout/AboutDialog.vue
+++ b/src/ui/layout/AboutDialog.vue
@ -1,7 +1,7 @@
 <template>
 <div class="c-about c-about--splash">
    <div v-if="branding.aboutHtml" class="s-text l-content" v-html="branding.aboutHtml"></div>
-    <div v-else class="c-about__image"></div>
+    <div v-else class="c-about__image c-splash-image"></div>

    <div class="c-about__text s-text">
        <h1 class="l-title s-title">Open MCT</h1>
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@ -2,7 +2,7 @@
    <div class="l-browse-bar">
        <div class="l-browse-bar__start">
            <button v-if="hasParent"
-                class="l-browse-bar__nav-to-parent-button c-click-icon c-click-icon--major icon-pointer-left" 
+                class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-pointer-left"
                @click="goToParent"></button>
            <div class="l-browse-bar__object-name--w"
                 :class="type.cssClass">
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@ -5,11 +5,11 @@
        <div class="l-shell__head">
            <CreateButton class="l-shell__create-button"></CreateButton>
            <div class="l-shell__controls">
-                <button class="c-click-icon c-click-icon--major icon-new-window" title="Open in a new browser tab"
+                <button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
                    @click="openInNewTab"
                    target="_blank">
                </button>
-                <button v-bind:class="['c-click-icon c-click-icon--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
+                <button v-bind:class="['c-icon-button c-icon-button--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
                    v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
                    @click="fullScreenToggle">
                </button>
@ -74,7 +74,7 @@
            [class*="collapse-button"] {
                // For mobile, collapse button becomes menu icon
                body.mobile & {
-                    @include cClickIcon();
+                    @include cClickIconButton();
                    position: absolute;
                    right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
                    top: 0;
--- a/src/ui/layout/status-bar/NotificationBanner.vue
+++ b/src/ui/layout/status-bar/NotificationBanner.vue
@ -17,7 +17,7 @@
 at runtime from the About dialog for additional information.
 -->
 <template>
-<div class="c-message-banner s-message-banner"
+<div class="c-message-banner"
    :class="[
        activeModel.severity,
        {
@ -31,36 +31,68 @@
            class="c-message-banner__progress-bar"
            v-if="activeModel.progressPerc !== undefined" :model="activeModel">
    </progress-bar>
-    <button class="c-message-banner__close-btn c-click-icon icon-x"
-            @click="dismiss()"></button>
+    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle"
+            @click.stop="dismiss()"></button>
 </div>
 </template>

 <style lang="scss">
    @import "~styles/sass-base";

+    @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
+        $bgPb: 10%;
+        $bgPbD: 10%;
+        background-color: darken($bg, $bgPb);
+        color: $fg;
+        &:hover {
+            background-color: darken($bg, $bgPb - $bgPbD);
+        }
+        .s-action {
+            background-color: darken($bg, $bgPb + $bgPbD);
+            &:hover {
+                background-color: darken($bg, $bgPb);
+            }
+        }
+    }
+
    .c-message-banner {
        $closeBtnSize: 7px;
        $m: 1px;

+        border-radius: $controlCr;
+        @include statusBannerColors($colorStatusDefault, $colorStatusFg);
+        cursor: pointer;
+
        display: flex;
        align-items: center;
        left: 50%;
        max-width: 50%;
-        padding: $interiorMargin $interiorMarginLg;
+        padding: $interiorMargin $interiorMargin $interiorMargin $interiorMarginLg;
        position: absolute;
        transform: translateX(-50%);
        bottom: $m;
        z-index: 2;

-        // TODOs:
-        // - Styling for message types, add color values to theme scss files
-        // - Factor out s-message-banner
-
        > * + * {
            margin-left: $interiorMargin;
        }

+        &.ok {
+            @include statusBannerColors($colorOk, $colorOkFg);
+        }
+
+        &.info {
+            @include statusBannerColors($colorInfo, $colorInfoFg);
+        }
+        &.caution,
+        &.warning,
+        &.alert {
+            @include statusBannerColors($colorWarningLo,$colorWarningLoFg);
+        }
+        &.error {
+            @include statusBannerColors($colorWarningHi, $colorWarningHiFg);
+        }
+
        &__message {
            @include ellipsize();
            flex: 1 1 auto;
@ -78,29 +110,10 @@
            }
        }

-        &__close-btn {
-            font-size: $closeBtnSize;
+        &__close-button {
+            font-size: 1.25em;
        }
-
    }
-
-
-
-
-
-
-
-
-   /*
-
-    .l-message-banner {
-        display: flex;
-        left: 50%;
-        position: absolute;
-    }
-    .banner-elem {
-        display: inline;
-    }*/
 </style>

 <script>
@ -176,6 +189,7 @@
            },
            destroyActiveNotification() {
                this.clearModel();
+                activeNotification.off('destroy', this.destroyActiveNotification);
                activeNotification = undefined;
            },
            dismiss() {
@ -189,7 +203,6 @@
                this.activeModel.minimized = true;
                activeNotification.off('progress', this.updateProgress);
                activeNotification.off('minimized', this.minimized);
-                activeNotification.off('destroy', this.destroyActiveNotification);

                activeNotification.off('progress', updateMaxProgressBar);
                activeNotification.off('minimized', dismissMaximizedDialog);
--- a/src/ui/toolbar/components/toolbar-button.vue
+++ b/src/ui/toolbar/components/toolbar-button.vue
@ -1,13 +1,13 @@
 <template>
    <div class="c-ctrl-wrapper">
-        <div class="c-click-icon"
+        <div class="c-icon-button"
            :title="options.title"
            :class="{
                [options.icon]: true,
-                'c-click-icon--caution': options.modifier === 'caution'
+                'c-icon-button--caution': options.modifier === 'caution'
            }"
            @click="onClick">
-            <div class="c-click-icon__label"
+            <div class="c-icon-button__label"
                 v-if="options.label">
                {{ options.label }}
            </div>
--- a/src/ui/toolbar/components/toolbar-color-picker.vue
+++ b/src/ui/toolbar/components/toolbar-color-picker.vue
@ -1,6 +1,6 @@
 <template>
    <div class="c-ctrl-wrapper">
-        <div class="c-click-icon c-click-icon--swatched"
+        <div class="c-icon-button c-icon-button--swatched"
             :class="options.icon"
             :title="options.title"
             @click="toggle">
--- a/src/ui/toolbar/components/toolbar-menu.vue
+++ b/src/ui/toolbar/components/toolbar-menu.vue
@ -1,10 +1,10 @@
 <template>
    <div class="c-ctrl-wrapper">
-        <div class="c-click-icon c-click-icon--menu"
+        <div class="c-icon-button c-icon-button--menu"
             :class="options.icon"
             :title="options.title"
             @click="toggle">
-            <div class="c-click-icon__label"
+            <div class="c-icon-button__label"
                 v-if="options.label">
                {{ options.label }}
            </div>
--- a/src/ui/toolbar/components/toolbar-select-menu.vue
+++ b/src/ui/toolbar/components/toolbar-select-menu.vue
@ -1,6 +1,6 @@
 <template>
    <div class="c-ctrl-wrapper">
-        <div class="c-click-icon c-click-icon--menu"
+        <div class="c-icon-button c-icon-button--menu"
             :class="options.icon"
             :title="options.title"
             @click="toggle">
--- a/src/ui/toolbar/components/toolbar-toggle-button.vue
+++ b/src/ui/toolbar/components/toolbar-toggle-button.vue
@ -1,6 +1,6 @@
 <template>
    <div class="c-ctrl-wrapper">
-        <div class="c-click-icon"
+        <div class="c-icon-button"
             :title="nextValue.title"
             :class="nextValue.icon"
             @click="cycle">
Author	SHA1	Message	Date
Andrew Henry	ca88996d86	Persist table sort options	2019-03-22 17:44:29 -07:00
Charles Hacskaylo	4111c12895	Added background property to table __headers-w element (#2325 )	2019-03-21 15:37:09 -07:00
Deep Tailor	b6ec023920	format created and modified time to utc (#2324 )	2019-03-21 15:14:45 -07:00
Charles Hacskaylo	e8e7067993	Fix legacy messages (#2323 ) * Fix legacy message styling - Code cleanup; - Enable constants-mobile; - Add _legacy-messages.scss; - Add status color fg colors to theme constants; * CSS refactoring, significant migration for messages classes - Many messages classes migrated; - c-click-icon > c-icon-button; - c-click-icon rewritten; - __close-btn refined in dialogs; * About and splash screen styling - Fixed splash in About screen; * Update _mixins.scss * Convert c-overlay__close-button to button - <a> -> <button>; - Set color of button; - Normalized naming from close-btn to close-button; * Fixed brightness filter issue on elements in overlays in VISTA; * Fix dismiss button	2019-03-21 15:07:16 -07:00
Deep Tailor	0e9319e97b	Plot options 4.1 (#2303 ) * working crosshairs -- todo -- add toggle option * add ability to toggle crosshair * add zoom in by onscreen button to plot * add zoom out functionality * switch positions of zoom in and out buttons * working zoom with mousewheel * add better logic to storing plot history on mouse wheel zoom * Local controls styling in plots and imagery - WIP * Plot local controls, cursor guides - Local control classes much refined; - Cursor guides styled, theme constants added; * Fix local controls in imagery - LC styles refined; - New theme constant; * Better approach to loading - New .c-loading--overlay that doesn't block the cursor; - Applied to plot views (telem, overlay and stacked plots); * Plot styles, local controls refined - Moved plot classes into their own scss file; - More refinement on local control styles; - Plot local controls layout finalized; - Buttons smallified in layout frame context; * Convert export buttons from <a> tags * Stubbed in cursor guide buttons in templates - WIP! * add toggle-cursor-guide-button to stacked plots * move cursor guide button to top left in all plots for consistency * Plot local controls layout refined - Also: global styling for [disabled] Change c-button 'is-enabled' to 'is-active' * Added check for if crosshairs enabled before tracking	2019-03-21 13:57:41 -07:00
Deep Tailor	df53af7b4d	Inspector location (#2317 ) * working original location - todo link location * remove link location for now * remove legacy getPath and implement new getOriginalPath API call * simplify getOriginalPath, and use path to calculate parent paths in location.vue	2019-03-21 12:41:40 -07:00
Charles Hacskaylo	bcbf244fd2	Fix foreground color of option elements in selects (#2300 ) * Fix foreground color of option elements in selects - Windows users in Snow theme reporting white foreground color on system background color (light gray) when interacting with select elements. This fix hard-codes the option's `color` attribute to black. * Add background property to style select options for Windows	2019-03-21 12:39:29 -07:00
Andrew Henry	7ff5febae0	Tables - Maintain stable sort. Requery for historical data on time system change. Parse telemetry time values before comparing to bounds. (#2322 )	2019-03-21 11:00:48 -07:00
Andrew Henry	019d108bb2	Reorder api update (#2319 ) * Added 'reorder' function to composition API * Re-implemented reordering in Elements * Make LAD table editable * Remove test spec focus * Fixing bugs with event listeners * Clean up listeners properly in Elements pool * Fixed race condition on drag-and-drop to initiate edit * Implement reordering in LAD tables * Reorder events emit full reorder plan * Fixed failing specs	2019-03-21 10:59:08 -07:00