ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 06:03:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update preview action to use new action registry

Browse Source 
* 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
This commit is contained in:
Andrew Henry 2018-12-11 19:25:20 -08:00 committed by Pete Richards
parent c1ef701eb2
commit 0d8dad1559
20 changed files with 230 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platform/commonUI/dialog/src/OverlayService.js
View File

@ -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

35
platform/commonUI/general/bundle.js
View File

@ -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": [

45
platform/commonUI/general/res/templates/preview.html
View File

@ -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>

55
platform/commonUI/general/src/actions/MCTPreviewAction.js
View File

@ -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;
}
);

64
platform/commonUI/general/src/directives/MCTPreview.js
View File

@ -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;
});

2
platform/commonUI/general/src/services/UrlService.js
View File

@ -82,7 +82,7 @@ define(
}
var searchPath = "?" + arr.join('&'),
newTabPath =
"index.html#" + this.urlForLocation(mode, domainObject) +
"#" + this.urlForLocation(mode, domainObject) +
searchPath;
return newTabPath;
};

1
src/MCT.js
View File

@ -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));

36
src/adapter/actions/LegacyContextMenuAction.js
View File

@ -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();
}
}
}

2
src/adapter/views/LegacyViewProvider.js
View File

@ -77,7 +77,7 @@ define([
openmct.$angular.element(container),
legacyView
);
container.style.height = '100%';
container.classList.add('u-contents');
}
if (promises.length) {

8
src/api/contextMenu/ContextMenuAPI.js
View File

@ -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();

2
src/api/overlays/components/OverlayComponent.vue
View File

@ -40,7 +40,7 @@
.c-overlay {
@include abs();
z-index: 100;
z-index: 70;
&__blocker {
display: none; // Mobile-first

2
src/plugins/displayLayout/components/SubobjectView.vue
View File

@ -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],

7
src/plugins/plugins.js
View File

@ -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;
});

93
src/plugins/preview/Preview.vue Normal file
View File

@ -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>

64
src/plugins/preview/PreviewAction.js Normal file
View File

@ -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()
});
}
}

28
src/plugins/preview/plugin.js Normal file
View File

@ -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));
}
}

2
src/styles-new/_controls.scss
View File

@ -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() {

6
src/styles/overlay/_overlay.scss
View File

@ -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;

2
src/plugins/displayLayout/components/contextMenuDropDown.vue → src/ui/components/controls/contextMenuDropDown.vue
View File

@ -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'],

4
src/ui/components/mixins/context-menu-gesture.js
View File

@ -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);
}
}