Misc Fixes 2

- Hide nav-to-parent button when editing

platform/commonUI/general/src/directives/MCTSelectable.js

@@ -54,6 +54,7 @@ define(
                     if (isDestroyed) {
                         return;
                     }
+
                     var removeSelectable = openmct.selection.selectable(
                         element[0],
                         scope.$eval(attrs.mctSelectable),

src/adapter/actions/LegacyContextMenuAction.js

@@ -33,20 +33,25 @@ export default class LegacyContextMenuAction {
     }
 
     invoke(objectPath) {
-        let context = {
-            category: 'contextual',
-            domainObject: this.openmct.legacyObject(objectPath)
-        }
-        let legacyAction = new this.LegacyAction(context);
+        this.openmct.objects.getRoot().then((root) => {
+            let pathWithRoot = objectPath.slice();
+            pathWithRoot.push(root);
 
-        if (!legacyAction.getMetadata) {
-            let metadata = Object.create(this.LegacyAction.definition);
-            metadata.context = context;
-            legacyAction.getMetadata = function () {
-                return metadata;
-            }.bind(legacyAction);
-        }
-        legacyAction.perform();
+            let context = {
+                category: 'contextual',
+                domainObject: this.openmct.legacyObject(pathWithRoot)
+            }
+            let legacyAction = new this.LegacyAction(context);
+
+            if (!legacyAction.getMetadata) {
+                let metadata = Object.create(this.LegacyAction.definition);
+                metadata.context = context;
+                legacyAction.getMetadata = function () {
+                    return metadata;
+                }.bind(legacyAction);
+            }
+            legacyAction.perform();
+        });
     }
 
     appliesTo(objectPath) {

src/adapter/views/LegacyViewProvider.js

@@ -48,12 +48,22 @@ define([
                 let scope = $rootScope.$new();
                 let legacyObject = convertToLegacyObject(domainObject);
                 let isDestroyed = false;
+                let unlistenToStatus;
                 scope.domainObject = legacyObject;
                 scope.model = legacyObject.getModel();
 
 
                 return {
                     show: function (container) {
+                        let statusCapability = legacyObject.getCapability('status');
+                        unlistenToStatus = statusCapability.listen((newStatus) => {
+                            container.classList.remove('s-status-timeconductor-unsynced');
+
+                            if (newStatus.includes('timeconductor-unsynced')) {
+                                container.classList.add('s-status-timeconductor-unsynced');
+                            }
+                        });
+
                         // TODO: implement "gestures" support ?
                         let uses = legacyView.uses || [];
                         let promises = [];
@@ -94,6 +104,7 @@ define([
                     },
                     destroy: function () {
                         scope.$destroy();
+                        unlistenToStatus();
                     }
                 }
             },

src/api/Editor.js

@@ -28,11 +28,6 @@ export default class Editor extends EventEmitter {
         super();
         this.editing = false;
         this.openmct = openmct;
-        document.addEventListener('drop', (event) => {
-            if (!this.isEditing()) {
-                this.edit();
-            }
-        }, {capture: true});
     }
 
     /**

src/plugins/displayLayout/components/SubobjectView.vue

@@ -22,6 +22,7 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
+                  :title="domainObject && domainObject.name"
                   @move="(gridDelta) => $emit('move', gridDelta)"
                   @endMove="() => $emit('endMove')">
         <object-frame v-if="domainObject"

src/plugins/displayLayout/components/TelemetryView.vue

@@ -176,7 +176,8 @@
                 let options = {
                     start: bounds.start,
                     end: bounds.end,
-                    size: 1
+                    size: 1,
+                    strategy: 'latest'
                 };
                 this.openmct.telemetry.request(this.domainObject, options)
                     .then(data => {

src/plugins/filters/components/FilterField.vue

@@ -42,7 +42,10 @@
 
                 <!-- Checkbox list, NOT editing -->
                 <template v-if="filter.possibleValues && !isEditing">
-                    <span>{{persistedFilters[filter.comparator].join(', ')}}</span>
+                    <span 
+                        v-if="persistedFilters[filter.comparator]">
+                        {{persistedFilters[filter.comparator].join(', ')}}
+                    </span>
                 </template>
             </div>
         </li>

src/plugins/filters/components/FilterObject.vue

@@ -69,16 +69,17 @@ export default {
                 }
             } else {
                 if (!this.updatedFilters[key]) {
-                    this.updatedFilters[key] = {};
+                    this.$set(this.updatedFilters, key, {});
                 }
-                this.updatedFilters[key][comparator] = [value ? valueName : undefined];
+                this.$set(this.updatedFilters[key], comparator, [value ? valueName : undefined]);
             }
 
             this.$emit('updateFilters', this.keyString, this.updatedFilters);
         },
         updateTextFilter(key, comparator, value) {
             if (!this.updatedFilters[key]) {
-                this.updatedFilters[key] = {};
+                this.$set(this.updatedFilters, key, {});
+                this.$set(this.updatedFilters[key], comparator, '');
             }
             this.updatedFilters[key][comparator] = value;
             this.$emit('updateFilters', this.keyString, this.updatedFilters);

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -113,7 +113,8 @@
 
         &__container-holder {
             display: flex;
-            flex: 1 1 100%; // Must needs to be 100% to work
+            flex: 1 1 100%; // Must be 100% to work
+            overflow: auto;
 
             // Columns by default
             flex-direction: row;

src/plugins/plot/res/templates/stacked-plot.html

@@ -43,12 +43,16 @@
     <div class="l-view-section">
         <div class="c-loading--overlay loading"
              ng-show="!!currentRequest.pending"></div>
-        <div class="gl-plot child-frame"
+        <div class="gl-plot child-frame u-inspectable"
             ng-repeat="telemetryObject in telemetryObjects"
             ng-class="{
                 's-status-timeconductor-unsynced': telemetryObject
                     .getCapability('status')
                     .get('timeconductor-unsynced')
+            }"
+            mct-selectable="{
+                item: telemetryObject.useCapability('adapter'),
+                oldItem: telemetryObject
             }">
             <mct-overlay-plot domain-object="telemetryObject"></mct-overlay-plot>
         </div>

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -79,6 +79,15 @@ define([
                     $scope.$broadcast('plot:tickWidth', _.max(tickWidthMap));
                 }
             }
+
+            function compositionReorder(reorderPlan) {
+                let oldComposition = telemetryObjects.slice();
+
+                reorderPlan.forEach((reorder) => {
+                    telemetryObjects[reorder.newIndex] = oldComposition[reorder.oldIndex];
+                });
+            }
+
             thisRequest.pending += 1;
             openmct.objects.get(domainObject.getId())
                 .then(function (obj) {
@@ -89,10 +98,12 @@ define([
                     composition = openmct.composition.get(obj);
                     composition.on('add', addChild);
                     composition.on('remove', removeChild);
+                    composition.on('reorder', compositionReorder);
                     composition.load();
                     unlisten = function () {
                         composition.off('add', addChild);
                         composition.off('remove', removeChild);
+                        composition.off('reorder', compositionReorder);
                     };
                 });
         }

src/plugins/tabs/components/tabs.vue

@@ -7,7 +7,8 @@
             }">
             <div class="c-drop-hint"
                  @drop="onDrop"
-                 ref="dropHint">
+                 @dragenter="dragenter"
+                 @dragleave="dragleave">
             </div>
             <div class="c-tabs-view__empty-message"
                  v-if="!tabsList.length > 0">Drag objects here to add them to this view.</div>
@@ -197,13 +198,6 @@ export default {
 
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
-
-        let dropHint = this.$refs.dropHint;
-
-        if (dropHint) {
-            dropHint.addEventListener('dragenter', this.dragenter);
-            dropHint.addEventListener('dragleave', this.dragleave);
-        }
     },
     destroyed() {
         this.composition.off('add', this.addItem);
@@ -212,12 +206,6 @@ export default {
 
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
-    },
-    beforeDestroy() {
-        let dropHint = this.$refs.dropHint;
-
-        dropHint.removeEventListener('dragenter', this.dragenter);
-        dropHint.removeEventListener('dragleave', this.dragleave);
     }
 }
 </script>

src/styles-new/_legacy-plots.scss

@@ -51,6 +51,22 @@ mct-plot {
     }
 }
 
+.is-editing {
+    .gl-plot.child-frame {
+        &:hover {
+            background: rgba($editUIColorBg, 0.1);
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+        }
+
+        &[s-selected] {
+            border: 1px solid $editUIColorFg !important;
+            color: $editUIColorFg !important;
+            box-shadow: $editFrameSelectedShdw;
+            z-index: 2;
+        }
+    }
+}
+
 .gl-plot {
     color: $colorPlotFg;
     display: flex;
@@ -548,3 +564,10 @@ mct-plot {
         top: 0; bottom: 0;
     }
 }
+
+.s-status-timeconductor-unsynced {
+    .t-object-alert.t-alert-unsynced {
+        @extend .icon-alert-triangle;
+        color: $colorPausedBg;
+    }
+}

src/styles-new/_mixins.scss

@@ -425,12 +425,13 @@
     // Background is displayed on hover
     // Padding is included to facilitate a bigger hit area
     // Make the icon bigger relative to its container
+    $pLR: 4px;
+    $pTB: 4px;
+
     @include cControl();
     background: none;
     box-shadow: none;
     cursor: pointer;
-    $pLR: 4px;
-    $pTB: 4px;
     transition: $transOut;
     border-radius: $controlCr;
     padding: $pTB $pLR;

src/ui/components/ObjectFrame.vue

@@ -26,8 +26,8 @@
             'has-complex-content': complexContent
         }">
         <div class="c-so-view__header">
-            <div class="c-so-view__header__name"
-                 :class="cssClass">
+            <div class="c-so-view__header__icon" :class="cssClass"></div>
+            <div class="c-so-view__header__name">
                 {{ domainObject && domainObject.name }}
             </div>
             <context-menu-drop-down
@@ -63,12 +63,16 @@
             align-items: center;
             margin-bottom: $interiorMargin;
 
+            &__icon {
+                flex: 0 0 auto;
+                margin-right: $interiorMarginSm;
+                opacity: 0.5;
+            }
+
             &__name {
                 @include headerFont(1em);
-                display: flex;
-                &:before {
-                    margin-right: $interiorMarginSm;
-                }
+                @include ellipsize();
+                flex: 0 1 auto;
             }
         }
 
@@ -88,19 +92,6 @@
             }
         }
 
-        &__name {
-            @include ellipsize();
-            @include headerFont(1.2em);
-            flex: 0 1 auto;
-
-            &:before {
-                // Object type icon
-                flex: 0 0 auto;
-                margin-right: $interiorMarginSm;
-                opacity: 0.5;
-            }
-        }
-
         &__local-controls {
             position: absolute;
             top: $interiorMargin; right: $interiorMargin;

src/ui/components/ObjectView.vue

@@ -34,7 +34,10 @@ export default {
         this.currentObject = this.object;
         this.updateView();
         this.$el.addEventListener('dragover', this.onDragOver);
-        this.$el.addEventListener('drop', this.onDrop);
+        this.$el.addEventListener('drop', this.addObjectToParent);
+        this.$el.addEventListener('drop', this.editIfEditable, {
+            capture: true
+        });
     },
     methods: {
         clear() {
@@ -70,22 +73,18 @@ export default {
             this.viewContainer = document.createElement('div');
             this.viewContainer.classList.add('c-object-view','u-contents');
             this.$el.append(this.viewContainer);
-            let provider = this.openmct.objectViews.getByProviderKey(this.viewKey);
-
+            let provider = this.getViewProvider();
             if (!provider) {
-                provider = this.openmct.objectViews.get(this.currentObject)[0];
-                if (!provider) {
-                    return;
-                }
+                return;
             }
 
-
             if (provider.edit && this.showEditView) {
                 if (this.openmct.editor.isEditing()) {
                     this.currentView = provider.edit(this.currentObject);
                 } else {
                     this.currentView = provider.view(this.currentObject, false);    
                 }
+
                 this.openmct.editor.on('isEditing', this.toggleEditView);
                 this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.toggleEditView);
             } else {
@@ -133,7 +132,7 @@ export default {
                 event.preventDefault();
             }
         },
-        onDrop(event) {
+        addObjectToParent(event) {
             if (this.hasComposableDomainObject(event)) {
                 let composableDomainObject = this.getComposableDomainObject(event);
                 this.currentObject.composition.push(composableDomainObject.identifier);
@@ -142,6 +141,25 @@ export default {
                 event.stopPropagation();
             }
         },
+        getViewProvider() {
+            let provider = this.openmct.objectViews.getByProviderKey(this.viewKey);
+
+            if (!provider) {
+                provider = this.openmct.objectViews.get(this.currentObject)[0];
+                if (!provider) {
+                    return;
+                }
+            }
+            return provider;
+        },
+        editIfEditable(event) {
+            let provider = this.getViewProvider();
+            if (provider && 
+                provider.canEdit(this.currentObject) &&
+                !this.openmct.editor.isEditing()) {
+                    this.openmct.editor.edit();
+            }
+        },
         hasComposableDomainObject(event) {
             return event.dataTransfer.types.includes('openmct/composable-domain-object')
         },

src/ui/inspector/Elements.vue

@@ -67,6 +67,7 @@
     }
 </style>
 <script>
+import _ from 'lodash';
 import Search from '../components/search.vue';
 import ObjectLabel from '../components/ObjectLabel.vue';
 
@@ -82,7 +83,8 @@ export default {
             isEditing: this.openmct.editor.isEditing(),
             parentObject: undefined,
             currentSearch: '',
-            isDragging: false
+            isDragging: false,
+            selection: []
         }
     },
     mounted() {
@@ -99,6 +101,10 @@ export default {
             this.showSelection(this.openmct.selection.get());
         },
         showSelection(selection) {
+            if (_.isEqual(this.selection, selection)) {
+                return;
+            }
+            this.selection = selection;
             this.elements = [];
             this.elementsCache = {};
             this.listeners = [];

src/ui/layout/AboutDialog.vue

@@ -1,9 +1,9 @@
 <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 c-splash-image"></div>
+    <div v-if="!branding.aboutHtml" class="c-about__image c-splash-image"></div>
 
     <div class="c-about__text s-text">
+        <div v-if="branding.aboutHtml" class="s-text l-content" v-html="branding.aboutHtml"></div>
         <h1 class="l-title s-title">Open MCT</h1>
         <div class="l-description s-description">
 	        <p>Open MCT, Copyright &copy; 2014-2019, United States Government as represented by the Administrator of the National Aeronautics and Space Administration. All rights reserved.</p>

src/ui/layout/BrowseBar.vue

@@ -289,10 +289,14 @@ const PLACEHOLDER_OBJECT = {};
 
         &__nav-to-parent-button {
             // This is an icon-button
-            $p: $interiorMarginLg;
+            $p: $interiorMargin;
             margin-right: $interiorMargin;
             padding-left: $p;
             padding-right: $p;
+
+            .is-editing & {
+                display: none;
+            }
         }
 
         &__object-name--w {

src/ui/layout/Layout.vue

@@ -64,7 +64,6 @@
         &__status {
             background: $colorStatusBarBg;
             color: $colorStatusBarFg;
-            height: 24px;
             padding: $interiorMarginSm;
         }
 
@@ -75,6 +74,7 @@
                 // For mobile, collapse button becomes menu icon
                 body.mobile & {
                     @include cClickIconButton();
+                    color: $colorKey !important;
                     position: absolute;
                     right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
                     top: 0;
@@ -186,6 +186,7 @@
         &__main-container {
             // Wrapper for main views
             flex: 1 1 auto !important;
+            height: 0; // Chrome 73 overflow bug fix
             overflow: auto;
         }
 

src/ui/layout/mct-tree.vue

@@ -52,13 +52,12 @@
 
         &__tree {
             flex: 1 1 auto;
-            height: 100%;
+            height: 0; // Chrome 73 overflow bug fix
         }
     }
 
     .c-tree {
         @include userSelectNone();
-        height: 100%; // Chrome 73 overflow bug fix
         overflow-x: hidden;
         overflow-y: auto;
         padding-right: $interiorMargin;
@@ -223,18 +222,23 @@
                         
                         let context = child.object.getCapability('context'),
                             object = child.object.useCapability('adapter'),
-                            objectPath = [];
+                            objectPath = [],
+                            navigateToParent;
 
                         if (context) {
                             objectPath = context.getPath().slice(1)
                                 .map(oldObject => oldObject.useCapability('adapter'))
-                                .reverse();  
+                                .reverse();
+                            navigateToParent = '/browse/' + objectPath.slice(1)
+                                .map((parent) => this.openmct.objects.makeKeyString(parent.identifier))
+                                .join('/');
                         }
 
                         return {
                             id: this.openmct.objects.makeKeyString(object.identifier),
                             object,
-                            objectPath
+                            objectPath,
+                            navigateToParent
                         }
                     });
                 });

src/ui/layout/pane.vue

@@ -194,8 +194,8 @@
                 /********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
                 $d: nth($splitterBtnD, 1);
                 flex-basis: $d;
-                min-width: $d !important;
-                min-height: $d !important;
+                min-width: $d;
+                min-height: $d;
 
                 > .l-pane__handle {
                     display: none;

src/ui/preview/Preview.vue

@@ -33,7 +33,8 @@
             </div>
             <div class="l-browse-bar__end">
                 <div class="l-browse-bar__actions">
-                    <button class="l-browse-bar__actions__edit c-button icon-notebook" 
+                    <button v-if="notebookEnabled"
+                        class="l-browse-bar__actions__edit c-button icon-notebook" 
                         title="New Notebook entry" 
                         @click="snapshot">
                     </button>
@@ -101,14 +102,19 @@
 
             return {
                 domainObject: domainObject,
-                type: type
+                type: type,
+                notebookEnabled: false
             };
         },
         mounted() {
             let viewProvider = this.openmct.objectViews.get(this.domainObject)[0];
             this.view = viewProvider.view(this.domainObject);
             this.view.show(this.$refs.objectView, false);
-            this.notebookSnapshot = new NotebookSnapshot(this.openmct);
+
+            if (this.openmct.types.get('notebook')) {
+                this.notebookSnapshot = new NotebookSnapshot(this.openmct);
+                this.notebookEnabled = true;
+            }
         },
         destroy() {
             this.view.destroy();