mirror of
https://github.com/nasa/openmct.git
synced 2025-06-16 14:18:16 +00:00
[Display Layout] support ordering items (#2266)
* Add a toolbar menu for changing the display order of items. * - Wire up orderItem - Modify the toolbar API to support function as alternative for property path.
This commit is contained in:
Pegah Sarram
committed by
Pete Richards
Pete Richards
parent
8ef53d85c4
commit
9e811e722f
@ -73,10 +73,13 @@ define([], function () {
|
||||
return openmct.$injector.get('dialogService').getUserInput(form, {});
|
||||
}
|
||||
|
||||
function getPath() {
|
||||
return `configuration.items[${selection[0].context.index}]`;
|
||||
}
|
||||
|
||||
let selectedParent = selection[1] && selection[1].context.item,
|
||||
selectedObject = selection[0].context.item,
|
||||
layoutItem = selection[0].context.layoutItem,
|
||||
layoutItemIndex = selection[0].context.index,
|
||||
toolbar = [];
|
||||
|
||||
if (selectedObject && selectedObject.type === 'layout') {
|
||||
@ -121,7 +124,6 @@ define([], function () {
|
||||
return toolbar;
|
||||
}
|
||||
|
||||
let path = `configuration.items[${layoutItemIndex}]`;
|
||||
let separator = {
|
||||
control: "separator"
|
||||
};
|
||||
@ -140,7 +142,7 @@ define([], function () {
|
||||
label: 'Ok',
|
||||
emphasis: 'true',
|
||||
callback: function () {
|
||||
removeItem(layoutItem, layoutItemIndex);
|
||||
removeItem(layoutItem, selection[0].context.index);
|
||||
prompt.dismiss();
|
||||
}
|
||||
},
|
||||
@ -154,10 +156,43 @@ define([], function () {
|
||||
});
|
||||
}
|
||||
};
|
||||
let stackOrder = {
|
||||
control: "menu",
|
||||
domainObject: selectedParent,
|
||||
icon: "icon-layers",
|
||||
title: "Move the selected object above or below other objects",
|
||||
options: [
|
||||
{
|
||||
name: "Move to Top",
|
||||
value: "top",
|
||||
class: "icon-arrow-double-up"
|
||||
},
|
||||
{
|
||||
name: "Move Up",
|
||||
value: "up",
|
||||
class: "icon-arrow-up"
|
||||
},
|
||||
{
|
||||
name: "Move Down",
|
||||
value: "down",
|
||||
class: "icon-arrow-down"
|
||||
},
|
||||
{
|
||||
name: "Move to Bottom",
|
||||
value: "bottom",
|
||||
class: "icon-arrow-double-down"
|
||||
}
|
||||
],
|
||||
method: function (option) {
|
||||
selection[1].context.orderItem(option.value, selection[0].context.index);
|
||||
}
|
||||
};
|
||||
let useGrid = {
|
||||
control: "toggle-button",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".useGrid",
|
||||
property: function () {
|
||||
return getPath() + ".useGrid";
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: false,
|
||||
@ -177,10 +212,14 @@ define([], function () {
|
||||
toolbar.push(separator);
|
||||
}
|
||||
|
||||
toolbar.push(stackOrder);
|
||||
toolbar.push(separator);
|
||||
toolbar.push({
|
||||
control: "toggle-button",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".hasFrame",
|
||||
property: function () {
|
||||
return getPath() + ".hasFrame";
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: false,
|
||||
@ -194,6 +233,7 @@ define([], function () {
|
||||
}
|
||||
]
|
||||
});
|
||||
toolbar.push(separator);
|
||||
toolbar.push(useGrid);
|
||||
toolbar.push(separator);
|
||||
toolbar.push(remove);
|
||||
@ -202,21 +242,27 @@ define([], function () {
|
||||
let fill = {
|
||||
control: "color-picker",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".fill",
|
||||
property: function () {
|
||||
return getPath() + ".fill";
|
||||
},
|
||||
icon: "icon-paint-bucket",
|
||||
title: "Set fill color"
|
||||
},
|
||||
stroke = {
|
||||
control: "color-picker",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".stroke",
|
||||
property: function () {
|
||||
return getPath() + ".stroke";
|
||||
},
|
||||
icon: "icon-line-horz",
|
||||
title: "Set border color"
|
||||
},
|
||||
color = {
|
||||
control: "color-picker",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".color",
|
||||
property: function () {
|
||||
return getPath() + ".color";
|
||||
},
|
||||
icon: "icon-font",
|
||||
mandatory: true,
|
||||
title: "Set text color",
|
||||
@ -225,7 +271,9 @@ define([], function () {
|
||||
size = {
|
||||
control: "select-menu",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".size",
|
||||
property: function () {
|
||||
return getPath() + ".size";
|
||||
},
|
||||
title: "Set text size",
|
||||
options: TEXT_SIZE.map(size => {
|
||||
return {
|
||||
@ -237,7 +285,9 @@ define([], function () {
|
||||
control: "input",
|
||||
type: "number",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".x",
|
||||
property: function () {
|
||||
return getPath() + ".x";
|
||||
},
|
||||
label: "X:",
|
||||
title: "X position"
|
||||
},
|
||||
@ -245,7 +295,9 @@ define([], function () {
|
||||
control: "input",
|
||||
type: "number",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".y",
|
||||
property: function () {
|
||||
return getPath() + ".y";
|
||||
},
|
||||
label: "Y:",
|
||||
title: "Y position",
|
||||
},
|
||||
@ -253,7 +305,9 @@ define([], function () {
|
||||
control: 'input',
|
||||
type: 'number',
|
||||
domainObject: selectedParent,
|
||||
property: path + ".width",
|
||||
property: function () {
|
||||
return getPath() + ".width";
|
||||
},
|
||||
label: 'W:',
|
||||
title: 'Resize object width'
|
||||
},
|
||||
@ -261,7 +315,9 @@ define([], function () {
|
||||
control: 'input',
|
||||
type: 'number',
|
||||
domainObject: selectedParent,
|
||||
property: path + ".height",
|
||||
property: function () {
|
||||
return getPath() + ".height";
|
||||
},
|
||||
label: 'H:',
|
||||
title: 'Resize object height'
|
||||
};
|
||||
@ -270,7 +326,9 @@ define([], function () {
|
||||
let displayMode = {
|
||||
control: "select-menu",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".displayMode",
|
||||
property: function () {
|
||||
return getPath() + ".displayMode";
|
||||
},
|
||||
title: "Set display mode",
|
||||
options: [
|
||||
{
|
||||
@ -290,7 +348,9 @@ define([], function () {
|
||||
value = {
|
||||
control: "select-menu",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".value",
|
||||
property: function () {
|
||||
return getPath() + ".value";
|
||||
},
|
||||
title: "Set value",
|
||||
options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
|
||||
return {
|
||||
@ -304,6 +364,7 @@ define([], function () {
|
||||
separator,
|
||||
value,
|
||||
separator,
|
||||
stackOrder,
|
||||
fill,
|
||||
stroke,
|
||||
color,
|
||||
@ -314,7 +375,6 @@ define([], function () {
|
||||
y,
|
||||
height,
|
||||
width,
|
||||
separator,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
@ -323,30 +383,34 @@ define([], function () {
|
||||
let text = {
|
||||
control: "button",
|
||||
domainObject: selectedParent,
|
||||
property: path,
|
||||
property: function () {
|
||||
return getPath();
|
||||
},
|
||||
icon: "icon-gear",
|
||||
title: "Edit text properties",
|
||||
dialog: DIALOG_FORM['text']
|
||||
};
|
||||
toolbar = [
|
||||
stackOrder,
|
||||
fill,
|
||||
stroke,
|
||||
color,
|
||||
separator,
|
||||
color,
|
||||
size,
|
||||
separator,
|
||||
x,
|
||||
y,
|
||||
height,
|
||||
width,
|
||||
useGrid,
|
||||
separator,
|
||||
text,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
} else if (layoutItem.type === 'box-view') {
|
||||
toolbar = [
|
||||
stackOrder,
|
||||
fill,
|
||||
stroke,
|
||||
separator,
|
||||
@ -354,7 +418,6 @@ define([], function () {
|
||||
y,
|
||||
height,
|
||||
width,
|
||||
separator,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
@ -363,21 +426,24 @@ define([], function () {
|
||||
let url = {
|
||||
control: "button",
|
||||
domainObject: selectedParent,
|
||||
property: path,
|
||||
property: function () {
|
||||
return getPath();
|
||||
},
|
||||
icon: "icon-image",
|
||||
title: "Edit image properties",
|
||||
dialog: DIALOG_FORM['image']
|
||||
};
|
||||
toolbar = [
|
||||
stackOrder,
|
||||
stroke,
|
||||
separator,
|
||||
x,
|
||||
y,
|
||||
height,
|
||||
width,
|
||||
useGrid,
|
||||
separator,
|
||||
url,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
@ -386,7 +452,9 @@ define([], function () {
|
||||
control: "input",
|
||||
type: "number",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".x2",
|
||||
property: function () {
|
||||
return getPath() + ".x2";
|
||||
},
|
||||
label: "X2:",
|
||||
title: "X2 position"
|
||||
},
|
||||
@ -394,18 +462,20 @@ define([], function () {
|
||||
control: "input",
|
||||
type: "number",
|
||||
domainObject: selectedParent,
|
||||
property: path + ".y2",
|
||||
property: function () {
|
||||
return getPath() + ".y2";
|
||||
},
|
||||
label: "Y2:",
|
||||
title: "Y2 position",
|
||||
};
|
||||
toolbar = [
|
||||
stackOrder,
|
||||
stroke,
|
||||
separator,
|
||||
x,
|
||||
y,
|
||||
x2,
|
||||
y2,
|
||||
separator,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
|
||||
Reference in New Issue
Block a user