From 97230bb21fac5cb08fae4fd265a976ab26fb3a37 Mon Sep 17 00:00:00 2001 From: Deep Tailor Date: Fri, 26 Jul 2019 16:09:59 -0700 Subject: [PATCH] Context-Menu for Tables (#2424) * add context menu capability to table rows, add view switcher to preview * add an option to limit context menu actions to the ones requested, and modify preview action to also include a view historical data action * extend preview action into view historical data action * add context menu to LAD Table * add keys to context menu actions, allow tables to conditionally attach context menu handler * working switch y axis label * New vertical select element for Y axis configuration in plots - CSS for vertically rotated selects for Y axis label selection; - New theme constants; - Removed themedSelect theme mixins; - New SASS svgColorFromHex function; * use keys in lad table context menu options * show historical view context menu on alpha-numerics * make reviewer requested changes * pass contextual object path from object view down etc * made reviewer requested changes: removed options object, pass in object path instead * remove redundant function from LADRow.vue --- .../actions/LegacyContextMenuAction.js | 1 + src/api/contextMenu/ContextMenuAPI.js | 20 +++++-- .../LADTable/LADTableSetViewProvider.js | 5 +- src/plugins/LADTable/LADTableViewProvider.js | 5 +- src/plugins/LADTable/components/LADRow.vue | 21 ++++++- src/plugins/LADTable/components/LADTable.vue | 2 +- .../AlphanumericFormatViewProvider.js | 5 +- .../components/DisplayLayout.vue | 2 +- .../components/SubobjectView.vue | 8 +-- .../components/TelemetryView.vue | 18 ++++-- src/plugins/displayLayout/plugin.js | 7 ++- .../goToOriginalAction/goToOriginalAction.js | 1 + src/plugins/plot/res/templates/mct-plot.html | 16 +++++- .../plot/src/plot/MCTPlotController.js | 30 +++++++++- src/plugins/remove/RemoveAction.js | 1 + .../telemetryTable/TelemetryTableRow.js | 10 +++- .../TelemetryTableViewProvider.js | 5 +- .../telemetryTable/components/table-row.vue | 26 ++++++++- .../telemetryTable/components/table.vue | 2 +- src/styles-new/_constants-espresso.scss | 8 +-- src/styles-new/_constants-maelstrom.scss | 8 +-- src/styles-new/_constants-snow.scss | 8 +-- src/styles-new/_controls.scss | 5 +- src/styles-new/_legacy-plots.scss | 9 ++- src/styles-new/_mixins.scss | 5 ++ src/ui/components/ObjectFrame.vue | 3 +- src/ui/components/ObjectView.vue | 18 ++++-- src/ui/layout/BrowseBar.vue | 34 +++--------- src/ui/layout/ViewSwitcher.vue | 55 +++++++++++++++++++ src/ui/preview/Preview.vue | 47 ++++++++++++++-- src/ui/preview/PreviewAction.js | 1 + src/ui/preview/ViewHistoricalDataAction.js | 35 ++++++++++++ src/ui/preview/plugin.js | 4 +- src/ui/registries/ViewRegistry.js | 10 ++-- src/ui/router/Browse.js | 5 +- 35 files changed, 346 insertions(+), 94 deletions(-) create mode 100644 src/ui/layout/ViewSwitcher.vue create mode 100644 src/ui/preview/ViewHistoricalDataAction.js diff --git a/src/adapter/actions/LegacyContextMenuAction.js b/src/adapter/actions/LegacyContextMenuAction.js index 6ba543296d..1e89c25c54 100644 --- a/src/adapter/actions/LegacyContextMenuAction.js +++ b/src/adapter/actions/LegacyContextMenuAction.js @@ -26,6 +26,7 @@ const OUTSIDE_EDIT_PATH_BLACKLIST = ["copy", "follow", "properties", "move", "li export default class LegacyContextMenuAction { constructor(openmct, LegacyAction) { this.openmct = openmct; + this.key = LegacyAction.definition.key; this.name = LegacyAction.definition.name; this.description = LegacyAction.definition.description; this.cssClass = LegacyAction.definition.cssClass; diff --git a/src/api/contextMenu/ContextMenuAPI.js b/src/api/contextMenu/ContextMenuAPI.js index be61e6e1db..d53eb9446f 100644 --- a/src/api/contextMenu/ContextMenuAPI.js +++ b/src/api/contextMenu/ContextMenuAPI.js @@ -49,6 +49,9 @@ class ContextMenuAPI { * a single sentence or short paragraph) of this kind of view * @property {string} cssClass the CSS class to apply to labels for this * view (to add icons, for instance) + * @property {string} key unique key to identify the context menu action + * (used in custom context menu eg table rows, to identify which actions to include) + * @property {boolean} hideInDefaultMenu optional flag to hide action from showing in the default context menu (tree item) */ /** * @method appliesTo @@ -72,12 +75,21 @@ class ContextMenuAPI { /** * @private */ - _showContextMenuForObjectPath(objectPath, x, y) { + _showContextMenuForObjectPath(objectPath, x, y, actionsToBeIncluded) { + let applicableActions = this._allActions.filter((action) => { - if (action.appliesTo === undefined) { - return true; + + if (actionsToBeIncluded) { + if (action.appliesTo === undefined && actionsToBeIncluded.includes(action.key)) { + return true; + } + return action.appliesTo(objectPath, actionsToBeIncluded) && actionsToBeIncluded.includes(action.key); + } else { + if (action.appliesTo === undefined) { + return true; + } + return action.appliesTo(objectPath) && !action.hideInDefaultMenu; } - return action.appliesTo(objectPath); }); if (this._activeContextMenu) { diff --git a/src/plugins/LADTable/LADTableSetViewProvider.js b/src/plugins/LADTable/LADTableSetViewProvider.js index f11caa64b6..9b0210e3c5 100644 --- a/src/plugins/LADTable/LADTableSetViewProvider.js +++ b/src/plugins/LADTable/LADTableSetViewProvider.js @@ -38,7 +38,7 @@ define([ canEdit: function (domainObject) { return domainObject.type === 'LadTableSet'; }, - view: function (domainObject) { + view: function (domainObject, isEditing, objectPath) { let component; return { @@ -49,7 +49,8 @@ define([ }, provide: { openmct, - domainObject + domainObject, + objectPath }, el: element, template: '' diff --git a/src/plugins/LADTable/LADTableViewProvider.js b/src/plugins/LADTable/LADTableViewProvider.js index 77045fdbe6..7fe5fc4dee 100644 --- a/src/plugins/LADTable/LADTableViewProvider.js +++ b/src/plugins/LADTable/LADTableViewProvider.js @@ -38,7 +38,7 @@ define([ canEdit: function (domainObject) { return domainObject.type === 'LadTable'; }, - view: function (domainObject) { + view: function (domainObject, isEditing, objectPath) { let component; return { @@ -49,7 +49,8 @@ define([ }, provide: { openmct, - domainObject + domainObject, + objectPath }, el: element, template: '' diff --git a/src/plugins/LADTable/components/LADRow.vue b/src/plugins/LADTable/components/LADRow.vue index db9fc662c6..e32ffed3ab 100644 --- a/src/plugins/LADTable/components/LADRow.vue +++ b/src/plugins/LADTable/components/LADRow.vue @@ -1,3 +1,4 @@ + /***************************************************************************** * Open MCT, Copyright (c) 2014-2018, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -21,7 +22,7 @@ *****************************************************************************/ diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue index 3ef8bce506..afbbd56c5c 100644 --- a/src/ui/components/ObjectView.vue +++ b/src/ui/components/ObjectView.vue @@ -9,7 +9,8 @@ export default { props: { view: String, object: Object, - showEditView: Boolean + showEditView: Boolean, + objectPath: Array }, destroyed() { this.clear(); @@ -91,17 +92,19 @@ export default { return; } + let objectPath = this.currentObjectPath || this.objectPath; + if (provider.edit && this.showEditView) { if (this.openmct.editor.isEditing()) { - this.currentView = provider.edit(this.currentObject); + this.currentView = provider.edit(this.currentObject, true, objectPath); } else { - this.currentView = provider.view(this.currentObject, false); + this.currentView = provider.view(this.currentObject, false, objectPath); } this.openmct.editor.on('isEditing', this.toggleEditView); this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.toggleEditView); } else { - this.currentView = provider.view(this.currentObject, this.openmct.editor.isEditing()); + this.currentView = provider.view(this.currentObject, this.openmct.editor.isEditing(), objectPath); if (this.currentView.onEditModeChange) { this.openmct.editor.on('isEditing', this.invokeEditModeHandler); @@ -117,7 +120,7 @@ export default { this.openmct.objectViews.on('clearData', this.clearData); }, - show(object, viewKey, immediatelySelect) { + show(object, viewKey, immediatelySelect, currentObjectPath) { if (this.unlisten) { this.unlisten(); } @@ -132,6 +135,11 @@ export default { } this.currentObject = object; + + if (currentObjectPath) { + this.currentObjectPath = currentObjectPath; + } + this.unlisten = this.openmct.objects.observe(this.currentObject, '*', (mutatedObject) => { this.currentObject = mutatedObject; }); diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue index 7e894f8f7e..7a352b2466 100644 --- a/src/ui/layout/BrowseBar.vue +++ b/src/ui/layout/BrowseBar.vue @@ -19,28 +19,11 @@
-
- -
-
    -
  • - {{ view.name }} -
    • -
-
-
+ +
+ +