update preview action to use new action registry

* Support category arrays for legacy actions * Fixed object path listener. Removed old context menus * Removed old fullscreen action and Screenfull dependency * Restore confirmation dialog on remove * Restored tests * Remove unused legacy policies * WIP re-implementation of Preview action * WIP for Charles to take a look at flex issues * Disable legacy preview action * Style and markup fixes for new Preview - LegacyViewProvider modded to wrap legacy elements in .u-contents div; - Added selector that automatically defines display: contents on `no-class` divs injected into __object-view; - Unit tested with legacy and new components (telem tables, plot view, Notebook, etc.) * Tweak z-indexes, fix open in new tab action, add 'done' button * Removed legacy action * reuse contextMenuDropDown component
2024-12-21 22:17:49 +00:00 · 2018-12-11 19:25:20 -08:00 · 2018-12-11 19:25:20 -08:00 · 0d8dad1559
commit 0d8dad1559
parent c1ef701eb2
20 changed files with 230 additions and 233 deletions
--- a/platform/commonUI/dialog/src/OverlayService.js
+++ b/platform/commonUI/dialog/src/OverlayService.js
@ -95,7 +95,10 @@ define(

            // Create the overlay element and add it to the document's body
            element = this.$compile(TEMPLATE)(scope);
-            this.findBody().prepend(element);
+            
+            // Append so that most recent dialog is last in DOM. This means the most recent dialog will be on top when
+            // multiple overlays with the same z-index are active.
+            this.findBody().append(element);

            return {
                dismiss: dismiss
--- a/platform/commonUI/general/bundle.js
+++ b/platform/commonUI/general/bundle.js
@ -48,8 +48,6 @@ define([
    "./src/directives/MCTSplitter",
    "./src/directives/MCTTree",
    "./src/directives/MCTIndicators",
-    "./src/directives/MCTPreview",
-    "./src/actions/MCTPreviewAction",
    "./src/filters/ReverseFilter",
    "./res/templates/bottombar.html",
    "./res/templates/controls/action-button.html",
@ -69,7 +67,6 @@ define([
    "./res/templates/controls/selector.html",
    "./res/templates/controls/datetime-picker.html",
    "./res/templates/controls/datetime-field.html",
-    "./res/templates/preview.html",
    'legacyRegistry'
 ], function (
    UrlService,
@ -99,8 +96,6 @@ define([
    MCTSplitter,
    MCTTree,
    MCTIndicators,
-    MCTPreview,
-    MCTPreviewAction,
    ReverseFilter,
    bottombarTemplate,
    actionButtonTemplate,
@ -120,7 +115,6 @@ define([
    selectorTemplate,
    datetimePickerTemplate,
    datetimeFieldTemplate,
-    previewTemplate,
    legacyRegistry
 ) {

@ -383,31 +377,6 @@ define([
                    "key": "mctIndicators",
                    "implementation": MCTIndicators,
                    "depends": ['openmct']
-                },
-                {
-                    "key": "mctPreview",
-                    "implementation": MCTPreview,
-                    "depends": [
-                        "$document"
-                    ]
-                }
-            ],
-            "actions": [
-                {
-                    "key": "mct-preview-action",
-                    "implementation": MCTPreviewAction,
-                    "name": "Preview",
-                    "cssClass": "hide-in-t-main-view icon-eye-open",
-                    "description": "Preview in large dialog",
-                    "category": [
-                        "contextual",
-                        "view-control"
-                    ],
-                    "depends": [
-                        "$compile",
-                        "$rootScope"
-                    ],
-                    "priority": "preferred"
                }
            ],
            "constants": [
@ -516,10 +485,6 @@ define([
                {
                    "key": "object-inspector",
                    "template": objectInspectorTemplate
-                },
-                {
-                    "key": "mct-preview",
-                    "template": previewTemplate
                }
            ],
            "controls": [
--- a/platform/commonUI/general/res/templates/preview.html
+++ b/platform/commonUI/general/res/templates/preview.html
@ -1,45 +0,0 @@
-<!--
- Open MCT, Copyright (c) 2014-2017, 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.
-->
-<div class="t-frame-inner abs t-object-type-{{ domainObject.getModel().type }}" mct-preview>
-    <div class="abs object-browse-bar l-flex-row">
-        <div class="left flex-elem l-flex-row grows">
-            <mct-representation
-                    key="'object-header-frame'"
-                    mct-object="domainObject"
-                    class="l-flex-row flex-elem object-header grows">
-            </mct-representation>
-        </div>
-        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-            <mct-representation
-                    key="'switcher'"
-                    ng-model="representation"
-                    mct-object="domainObject">
-            </mct-representation>
-        </div>
-    </div>
-    <div class="abs object-holder">
-        <mct-representation
-                key="representation.selected.key"
-                mct-object="representation.selected.key && domainObject">
-        </mct-representation>
-    </div>
-</div>
--- a/platform/commonUI/general/src/actions/MCTPreviewAction.js
+++ b/platform/commonUI/general/src/actions/MCTPreviewAction.js
@ -1,55 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(
-    [],
-    function () {
-
-        var PREVIEW_TEMPLATE = '<mct-representation key="\'mct-preview\'"' +
-                                    'class="t-rep-frame holder"' +
-                                    'mct-object="domainObject">' +
-                                '</mct-representation>';
-
-        function MCTPreviewAction($compile, $rootScope, context) {
-            context = context || {};
-            this.domainObject = context.selectedObject || context.domainObject;
-            this.$rootScope = $rootScope;
-            this.$compile = $compile;
-        }
-
-        MCTPreviewAction.prototype.perform = function () {
-            var newScope = this.$rootScope.$new();
-            newScope.domainObject = this.domainObject;
-
-            this.$compile(PREVIEW_TEMPLATE)(newScope);
-        };
-
-        MCTPreviewAction.appliesTo = function (context) {
-            var domainObject = (context || {}).domainObject,
-                status = domainObject.getCapability('status');
-
-            return !(status && status.get('editing'));
-        };
-
-        return MCTPreviewAction;
-    }
-);
--- a/platform/commonUI/general/src/directives/MCTPreview.js
+++ b/platform/commonUI/general/src/directives/MCTPreview.js
@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['zepto', '../services/Overlay'], function ($, Overlay) {
-    function MCTPreview($document) {
-
-        function link($scope, $element) {
-            var actions = $scope.domainObject.getCapability('action'),
-                notebookAction = actions.getActions({key: 'notebook-new-entry'})[0];
-
-            var notebookButton = notebookAction ?
-                [
-                    {
-                        class: 'icon-notebook new-notebook-entry',
-                        title: 'New Notebook Entry',
-                        clickHandler: function (event) {
-                            event.stopPropagation();
-                            notebookAction.perform();
-                        }
-                    }
-                ] : [];
-
-            var overlayService = new Overlay({
-                $document: $document,
-                $element: $element[0],
-                $scope: $scope,
-                browseBarButtons: notebookButton
-            });
-
-            overlayService.toggleOverlay();
-
-            $scope.$on('$destroy', function () {
-                $element.remove();
-            });
-        }
-
-        return {
-            restrict: 'A',
-            link: link
-        };
-    }
-
-    return MCTPreview;
-
-});
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@ -82,7 +82,7 @@ define(
            }
            var searchPath = "?" + arr.join('&'),
                newTabPath =
-                    "index.html#" + this.urlForLocation(mode, domainObject) +
+                    "#" + this.urlForLocation(mode, domainObject) +
                            searchPath;
            return newTabPath;
        };
--- a/src/MCT.js
+++ b/src/MCT.js
@ -230,6 +230,7 @@ define([
        this.install(this.plugins.Plot());
        this.install(this.plugins.TelemetryTable());
        this.install(this.plugins.DisplayLayout());
+        this.install(this.plugins.Preview());

        if (typeof BUILD_CONSTANTS !== 'undefined') {
            this.install(buildInfoPlugin(BUILD_CONSTANTS));
--- a/src/adapter/actions/LegacyContextMenuAction.js
+++ b/src/adapter/actions/LegacyContextMenuAction.js
@ -32,6 +32,23 @@ export default class LegacyContextMenuAction {
        this.LegacyAction = LegacyAction;
    }

+    invoke(objectPath) {
+        let context = {
+            category: 'contextual',
+            domainObject: this.openmct.legacyObject(objectPath)
+        }
+        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) {
        let legacyObject = this.openmct.legacyObject(objectPath);

@ -63,21 +80,4 @@ export default class LegacyContextMenuAction {
        }
        return false;
    }
-
-    invoke(objectPath) {
-        let context = {
-            category: 'contextual',
-            domainObject: this.openmct.legacyObject(objectPath)
-        }
-        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();
-    }
-}
+}
--- a/src/adapter/views/LegacyViewProvider.js
+++ b/src/adapter/views/LegacyViewProvider.js
@ -77,7 +77,7 @@ define([
                                openmct.$angular.element(container),
                                legacyView
                            );
-                            container.style.height = '100%';
+                            container.classList.add('u-contents');
                        }

                        if (promises.length) {
--- a/src/api/contextMenu/ContextMenuAPI.js
+++ b/src/api/contextMenu/ContextMenuAPI.js
@ -73,8 +73,12 @@ class ContextMenuAPI {
     * @private
     */
    _showContextMenuForObjectPath(objectPath, x, y) {
-        let applicableActions = this._allActions.filter(
-            (action) => action.appliesTo(objectPath));
+        let applicableActions = this._allActions.filter((action) => {
+            if (action.appliesTo === undefined) {
+                return true;
+            }
+            return action.appliesTo(objectPath);
+        });

        if (this._activeContextMenu) {
            this._hideActiveContextMenu();
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@ -40,7 +40,7 @@

    .c-overlay {
        @include abs();
-        z-index: 100;
+        z-index: 70;

        &__blocker {
            display: none; // Mobile-first
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@ -107,7 +107,7 @@

 <script>
    import ObjectView from '../../../ui/components/layout/ObjectView.vue'
-    import ContextMenuDropDown from './contextMenuDropDown.vue';
+    import ContextMenuDropDown from '../../../ui/components/controls/contextMenuDropDown.vue';
    import LayoutFrame from './LayoutFrame.vue'

    const MINIMUM_FRAME_SIZE = [320, 180],
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@ -39,7 +39,8 @@ define([
    './folderView/plugin',
    './flexibleLayout/plugin',
    './tabs/plugin',
-    '../../platform/features/fixed/plugin'
+    '../../platform/features/fixed/plugin',
+    './preview/plugin'
 ], function (
    _,
    UTCTimeSystem,
@ -59,7 +60,8 @@ define([
    FolderView,
    FlexibleLayout,
    Tabs,
-    FixedView
+    FixedView,
+    PreviewPlugin
 ) {
    var bundleMap = {
        LocalStorage: 'platform/persistence/local',
@ -174,6 +176,7 @@ define([
    plugins.Tabs = Tabs;
    plugins.FixedView = FixedView;
    plugins.FlexibleLayout = FlexibleLayout;
+    plugins.Preview = PreviewPlugin.default;

    return plugins;
 });
--- a/src/plugins/preview/Preview.vue
+++ b/src/plugins/preview/Preview.vue
@ -0,0 +1,93 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+ <template>
+ <div class="l-preview-window">
+    <div class="l-preview-window__object-name l-browse-bar__object-name--w" :class="type.cssClass">
+        <span class="l-browse-bar__object-name">
+            {{ domainObject.name }}
+        </span>
+        <context-menu-drop-down :object-path="objectPath"></context-menu-drop-down>
+    </div>
+    <div class="l-preview-window__object-view">
+        <div ref="objectView">
+    </div>
+    </div>
+</div>
+ </template>
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .l-preview-window {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 0; right: 0; bottom: 0; left: 0;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__object-name {
+            flex: 0 0 auto;
+        }
+
+        &__object-view {
+            flex: 1 1 auto;
+
+            > div:not([class]) {
+                // Target an immediate child div without a class and make it display: contents
+                display: contents;
+            }
+        }
+    }
+</style>
+
+ <script>
+    import ContextMenuDropDown from '../../ui/components/controls/contextMenuDropDown.vue';
+
+    export default {
+        components: {
+            ContextMenuDropDown
+        },
+        inject: [
+            'openmct',
+            'objectPath'
+        ],
+        data() {
+            let domainObject = this.objectPath[0]; 
+            let type = this.openmct.types.get(domainObject.type);
+
+            return {
+                domainObject: domainObject,
+                type: type
+            };
+        },
+        mounted() {
+            let viewProvider = this.openmct.objectViews.get(this.domainObject)[0];
+            this.view = viewProvider.view(this.domainObject);
+            this.view.show(this.$refs.objectView);
+        },
+        destroy() {
+            this.view.destroy();
+        }
+    }
+ </script>
--- a/src/plugins/preview/PreviewAction.js
+++ b/src/plugins/preview/PreviewAction.js
@ -0,0 +1,64 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import Preview from './Preview.vue';
+import Vue from 'vue';
+
+export default class PreviewAction {
+    constructor(openmct) {
+        /**
+         * Metadata
+         */
+        this.name = 'Preview';
+        this.description = 'Preview in large dialog';
+        this.cssClass = 'icon-eye-open';
+
+        /**
+         * Dependencies
+         */
+        this._openmct = openmct;
+    }
+    invoke(objectPath) {
+        let preview = new Vue({
+            components: {
+                Preview
+            },
+            provide: {
+                openmct: this._openmct,
+                objectPath: objectPath
+            },
+            template: '<Preview></Preview>'
+        });
+        preview.$mount();
+
+        let overlay = this._openmct.overlays.overlay({
+            element: preview.$el,
+            size: 'large',
+            buttons: [
+                {
+                    label: 'Done',
+                    callback: () => overlay.dismiss()
+                }
+            ],
+            onDestroy: () => preview.$destroy()
+        });
+    }
+}
--- a/src/plugins/preview/plugin.js
+++ b/src/plugins/preview/plugin.js
@ -0,0 +1,28 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import PreviewAction from './PreviewAction.js';
+
+export default function () {
+    return function (openmct) {
+        openmct.contextMenu.registerAction(new PreviewAction(openmct));
+    }
+}
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@ -231,7 +231,7 @@ input[type=number]::-webkit-outer-spin-button {
    box-shadow: $shdwMenu;
    display: block;
    position: absolute;
-    z-index: 70;
+    z-index: 100;
 }

@mixin menuInner() {
--- a/src/styles/overlay/_overlay.scss
+++ b/src/styles/overlay/_overlay.scss
@ -37,7 +37,7 @@
    }
    .blocker {
        background: $colorOvrBlocker;
-        z-index: 100;
+        z-index: 70;
    }
    .close {
        $d: $interiorMargin;
@ -53,7 +53,7 @@
    }

    > .abs.outer-holder {
-        z-index: 102;
+        z-index: 72;
        > .abs.inner-holder {
            $m: $overlayMargin;
            top: $m;
@ -196,7 +196,7 @@

            @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
            background: $colorBodyBg;
-            z-index: 101;
+            z-index: 71;

            .abs.inner-holder {
                opacity: 0;
--- a/src/plugins/displayLayout/components/contextMenuDropDown.vue
+++ b/src/plugins/displayLayout/components/contextMenuDropDown.vue
@ -4,7 +4,7 @@
 </template>

 <script>
-import contextMenu from '../../../ui/components/mixins/context-menu-gesture'
+import contextMenu from '../mixins/context-menu-gesture'

 export default {
    props: ['objectPath'],
--- a/src/ui/components/mixins/context-menu-gesture.js
+++ b/src/ui/components/mixins/context-menu-gesture.js
@ -20,9 +20,8 @@ export default {
            if (object) {
                this.$once('hook:destroy',
                    this.openmct.objects.observe(object, '*', updateObject.bind(this, object)))
-                }
            }
-        );
+        });
    },
    destroyed() {
        this.$el.removeEventListener('contextMenu', this.showContextMenu);
@ -30,6 +29,7 @@ export default {
    methods: {
        showContextMenu(event) {
            event.preventDefault();
+            event.stopPropagation();
            this.openmct.contextMenu._showContextMenuForObjectPath(this.objectPath, event.clientX, event.clientY);
        }
    }