ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-16 14:18:16 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Display Layout] User should be able to toggle grid lines (#3331)

Browse Source 
* 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 <charlesh88@gmail.com>
Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
This commit is contained in:
David Tsay
2020-10-23 09:32:35 -07:00
committed by GitHub
parent c1f3ea4e61
commit 463c44679d
7 changed files with 133 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/plugins/displayLayout/DisplayLayoutToolbar.js
View File

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