From 463c44679d703fc6c843d43af550b779fdaa85c0 Mon Sep 17 00:00:00 2001 From: David Tsay <3614296+davetsay@users.noreply.github.com> Date: Fri, 23 Oct 2020 09:32:35 -0700 Subject: [PATCH] [Display Layout] User should be able to toggle grid lines (#3331) * Display Layout grid toggle and dimensions - Added toggle grid button; - Added Layout 'size' properties; - Very WIP! * Display Layout grid toggle and dimensions - Cleanup toolbar; * new configuration layoutDimensions * extract display layout grid to own vue component * split toolbar structure into two structures * allow toggling grid when editing display layout * toggle grid icon show/hide state on click * grid be shown on starting edit mode * remove dimensions code for other display layout feature * toggle icon after method completes * change icon names * update spec to include new action and separator Co-authored-by: charlesh88 Co-authored-by: Deep Tailor --- .../displayLayout/DisplayLayoutToolbar.js | 38 ++++++++++++++++++- .../components/DisplayLayout.vue | 37 +++++++++--------- .../components/DisplayLayoutGrid.vue | 34 +++++++++++++++++ src/plugins/displayLayout/plugin.js | 3 +- src/plugins/displayLayout/pluginSpec.js | 3 +- src/styles/_controls.scss | 13 ++++++- src/ui/toolbar/Toolbar.vue | 36 ++++++++++++++---- 7 files changed, 133 insertions(+), 31 deletions(-) create mode 100644 src/plugins/displayLayout/components/DisplayLayoutGrid.vue diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js index 12770e919c..01a9f0d487 100644 --- a/src/plugins/displayLayout/DisplayLayoutToolbar.js +++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js @@ -623,6 +623,33 @@ define(['lodash'], function (_) { } } + function getToggleGridButton(selection, selectionPath) { + const ICON_GRID_SHOW = 'icon-grid-on'; + const ICON_GRID_HIDE = 'icon-grid-off'; + + let displayLayoutContext; + + if (selection.length === 1 && selectionPath === undefined) { + displayLayoutContext = selection[0][0].context; + } else { + displayLayoutContext = selectionPath[1].context; + } + + return { + control: "button", + domainObject: displayLayoutContext.item, + icon: ICON_GRID_SHOW, + method: function () { + displayLayoutContext.toggleGrid(); + + this.icon = this.icon === ICON_GRID_SHOW + ? ICON_GRID_HIDE + : ICON_GRID_SHOW; + }, + secondary: true + }; + } + function getSeparator() { return { control: "separator" @@ -637,7 +664,9 @@ define(['lodash'], function (_) { } if (isMainLayoutSelected(selectedObjects[0])) { - return [getAddButton(selectedObjects)]; + return [ + getToggleGridButton(selectedObjects), + getAddButton(selectedObjects)]; } let toolbar = { @@ -653,7 +682,8 @@ define(['lodash'], function (_) { 'position': [], 'duplicate': [], 'unit-toggle': [], - 'remove': [] + 'remove': [], + 'toggle-grid': [] }; selectedObjects.forEach(selectionPath => { @@ -800,6 +830,10 @@ define(['lodash'], function (_) { if (toolbar.duplicate.length === 0) { toolbar.duplicate = [getDuplicateButton(selectedParent, selectionPath, selectedObjects)]; } + + if (toolbar['toggle-grid'].length === 0) { + toolbar['toggle-grid'] = [getToggleGridButton(selectedObjects, selectionPath)]; + } }); let toolbarArray = Object.values(toolbar); diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue index f8432aa710..ee99a4eb10 100644 --- a/src/plugins/displayLayout/components/DisplayLayout.vue +++ b/src/plugins/displayLayout/components/DisplayLayout.vue @@ -31,22 +31,12 @@ @click.capture="bypassSelection" @drop="handleDrop" > - -
-
-
-
+ :grid-size="gridSize" + :show-grid="showGrid" + /> + 1 && !singleSelectedLine; } }, - inject: ['openmct', 'options', 'objectPath'], + watch: { + isEditing(value) { + if (value) { + this.showGrid = value; + } + } + }, mounted() { this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) { this.internalDomainObject = JSON.parse(JSON.stringify(obj)); @@ -798,6 +798,9 @@ export default { this.removeItem(selection); this.initSelectIndex = this.layoutItems.length - 1; //restore selection + }, + toggleGrid() { + this.showGrid = !this.showGrid; } } }; diff --git a/src/plugins/displayLayout/components/DisplayLayoutGrid.vue b/src/plugins/displayLayout/components/DisplayLayoutGrid.vue new file mode 100644 index 0000000000..e6127277cd --- /dev/null +++ b/src/plugins/displayLayout/components/DisplayLayoutGrid.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js index 2e4adfd7a1..c211a0864b 100644 --- a/src/plugins/displayLayout/plugin.js +++ b/src/plugins/displayLayout/plugin.js @@ -72,7 +72,8 @@ export default function DisplayLayoutPlugin(options) { duplicateItem: component && component.$refs.displayLayout.duplicateItem, switchViewType: component && component.$refs.displayLayout.switchViewType, mergeMultipleTelemetryViews: component && component.$refs.displayLayout.mergeMultipleTelemetryViews, - mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots + mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots, + toggleGrid: component && component.$refs.displayLayout.toggleGrid }; }, onEditModeChange: function (isEditing) { diff --git a/src/plugins/displayLayout/pluginSpec.js b/src/plugins/displayLayout/pluginSpec.js index 1cfd17ce42..a5429b8699 100644 --- a/src/plugins/displayLayout/pluginSpec.js +++ b/src/plugins/displayLayout/pluginSpec.js @@ -340,7 +340,8 @@ describe('the plugin', function () { it('provides controls including separators', () => { const displayLayoutToolbar = openmct.toolbars.get(selection); - expect(displayLayoutToolbar.length).toBe(9); + + expect(displayLayoutToolbar.length).toBe(11); }); }); }); diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index e70bb53ae0..01d3896711 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -739,8 +739,17 @@ select { } .c-toolbar { - > * + * { - margin-left: 2px; + display: flex; + align-items: center; + justify-content: space-between; + + > * { + // First level items + display: flex; + + > * + * { + margin-left: 2px; + } } &__separator { diff --git a/src/ui/toolbar/Toolbar.vue b/src/ui/toolbar/Toolbar.vue index 9c983e9060..dd7da8ee29 100644 --- a/src/ui/toolbar/Toolbar.vue +++ b/src/ui/toolbar/Toolbar.vue @@ -1,13 +1,25 @@ @@ -40,6 +52,14 @@ export default { structure: [] }; }, + computed: { + primaryStructure() { + return this.structure.filter(item => !item.secondary); + }, + secondaryStructure() { + return this.structure.filter(item => item.secondary); + } + }, mounted() { this.openmct.selection.on('change', this.handleSelection); this.handleSelection(this.openmct.selection.get());