From 0d8dad15594c410da1589b07c7dbfcb5133cb8e0 Mon Sep 17 00:00:00 2001 From: Andrew Henry Date: Tue, 11 Dec 2018 19:25:20 -0800 Subject: [PATCH] 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 --- .../commonUI/dialog/src/OverlayService.js | 5 +- platform/commonUI/general/bundle.js | 35 ------- .../general/res/templates/preview.html | 45 --------- .../general/src/actions/MCTPreviewAction.js | 55 ----------- .../general/src/directives/MCTPreview.js | 64 ------------- .../general/src/services/UrlService.js | 2 +- src/MCT.js | 1 + .../actions/LegacyContextMenuAction.js | 36 +++---- src/adapter/views/LegacyViewProvider.js | 2 +- src/api/contextMenu/ContextMenuAPI.js | 8 +- .../overlays/components/OverlayComponent.vue | 2 +- .../components/SubobjectView.vue | 2 +- src/plugins/plugins.js | 7 +- src/plugins/preview/Preview.vue | 93 +++++++++++++++++++ src/plugins/preview/PreviewAction.js | 64 +++++++++++++ src/plugins/preview/plugin.js | 28 ++++++ src/styles-new/_controls.scss | 2 +- src/styles/overlay/_overlay.scss | 6 +- .../controls}/contextMenuDropDown.vue | 2 +- .../components/mixins/context-menu-gesture.js | 4 +- 20 files changed, 230 insertions(+), 233 deletions(-) delete mode 100644 platform/commonUI/general/res/templates/preview.html delete mode 100644 platform/commonUI/general/src/actions/MCTPreviewAction.js delete mode 100644 platform/commonUI/general/src/directives/MCTPreview.js create mode 100644 src/plugins/preview/Preview.vue create mode 100644 src/plugins/preview/PreviewAction.js create mode 100644 src/plugins/preview/plugin.js rename src/{plugins/displayLayout/components => ui/components/controls}/contextMenuDropDown.vue (74%) diff --git a/platform/commonUI/dialog/src/OverlayService.js b/platform/commonUI/dialog/src/OverlayService.js index f213aa86df..75b952734e 100644 --- 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 diff --git a/platform/commonUI/general/bundle.js b/platform/commonUI/general/bundle.js index fed06df5a3..cb50e1976e 100644 --- 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": [ diff --git a/platform/commonUI/general/res/templates/preview.html b/platform/commonUI/general/res/templates/preview.html deleted file mode 100644 index 3b760be626..0000000000 --- a/platform/commonUI/general/res/templates/preview.html +++ /dev/null @@ -1,45 +0,0 @@ - -
-
-
- - -
-
- - -
-
-
- - -
-
\ No newline at end of file diff --git a/platform/commonUI/general/src/actions/MCTPreviewAction.js b/platform/commonUI/general/src/actions/MCTPreviewAction.js deleted file mode 100644 index 17a058d931..0000000000 --- a/platform/commonUI/general/src/actions/MCTPreviewAction.js +++ /dev/null @@ -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 = '' + - ''; - - 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; - } -); diff --git a/platform/commonUI/general/src/directives/MCTPreview.js b/platform/commonUI/general/src/directives/MCTPreview.js deleted file mode 100644 index 291615b986..0000000000 --- a/platform/commonUI/general/src/directives/MCTPreview.js +++ /dev/null @@ -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; - -}); diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js index 5e2f6ca1bc..a41fe260a3 100644 --- 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; }; diff --git a/src/MCT.js b/src/MCT.js index 85180a440f..9c9ade424b 100644 --- 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)); diff --git a/src/adapter/actions/LegacyContextMenuAction.js b/src/adapter/actions/LegacyContextMenuAction.js index ef3c1d1daf..658dffd961 100644 --- 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(); - } -} \ No newline at end of file +} diff --git a/src/adapter/views/LegacyViewProvider.js b/src/adapter/views/LegacyViewProvider.js index cd264eee78..686175f820 100644 --- 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) { diff --git a/src/api/contextMenu/ContextMenuAPI.js b/src/api/contextMenu/ContextMenuAPI.js index 5a4104269d..be61e6e1db 100644 --- 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(); diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue index 04d6f2f140..5f0980fa03 100644 --- 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 diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue index 6d573e45d7..fdfcf59dd6 100644 --- a/src/plugins/displayLayout/components/SubobjectView.vue +++ b/src/plugins/displayLayout/components/SubobjectView.vue @@ -107,7 +107,7 @@ diff --git a/src/plugins/preview/PreviewAction.js b/src/plugins/preview/PreviewAction.js new file mode 100644 index 0000000000..2129d830ab --- /dev/null +++ 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.$mount(); + + let overlay = this._openmct.overlays.overlay({ + element: preview.$el, + size: 'large', + buttons: [ + { + label: 'Done', + callback: () => overlay.dismiss() + } + ], + onDestroy: () => preview.$destroy() + }); + } +} diff --git a/src/plugins/preview/plugin.js b/src/plugins/preview/plugin.js new file mode 100644 index 0000000000..8a124918af --- /dev/null +++ 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)); + } +} diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss index 7b0ef505b7..3df051b1f7 100644 --- 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() { diff --git a/src/styles/overlay/_overlay.scss b/src/styles/overlay/_overlay.scss index 5b58e71ed4..82c934e9bb 100644 --- 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; diff --git a/src/plugins/displayLayout/components/contextMenuDropDown.vue b/src/ui/components/controls/contextMenuDropDown.vue similarity index 74% rename from src/plugins/displayLayout/components/contextMenuDropDown.vue rename to src/ui/components/controls/contextMenuDropDown.vue index 04c2b79459..f56825e25e 100644 --- a/src/plugins/displayLayout/components/contextMenuDropDown.vue +++ b/src/ui/components/controls/contextMenuDropDown.vue @@ -4,7 +4,7 @@