ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-17 15:59:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Display Layout toolbar refinements for units (#5197)

Browse Source 
* Fixes #3197
- Moved position of hide/show units toggle button.
- Added labels to many toolbar buttons, including hide/show units, hide/show frame, edit text, more.
- Added label to toolbar-toggle-button.vue.
- Added separator between stackOrder button and position inputs.

* Fixes #3197
- Removed unwanted margin in alphanumerics when label is hidden.

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
This commit is contained in:
Charles Hacskaylo 2022-06-03 09:53:21 -07:00 committed by GitHub
parent 40a7451064
commit 1c525f50c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -211,13 +211,15 @@ define(['lodash'], function (_) {
options: [
{
value: false,
icon: 'icon-frame-show',
title: "Frame visible"
icon: 'icon-frame-hide',
title: "Frame visible",
label: 'Hide frame'
},
{
value: true,
icon: 'icon-frame-hide',
title: "Frame hidden"
icon: 'icon-frame-show',
title: "Frame hidden",
label: 'Show frame'
}
]
};
@ -401,6 +403,7 @@ define(['lodash'], function (_) {
},
icon: "icon-pencil",
title: "Edit text properties",
label: "Edit text",
dialog: DIALOG_FORM.text
};
}
@ -514,12 +517,14 @@ define(['lodash'], function (_) {
{
value: true,
icon: 'icon-eye-open',
title: "Show units"
title: "Show units",
label: "Show units"
},
{
value: false,
icon: 'icon-eye-disabled',
title: "Hide units"
title: "Hide units",
label: "Hide units"
}
]
};
@ -562,6 +567,7 @@ define(['lodash'], function (_) {
domainObject: selectedParent,
icon: "icon-object",
title: "Switch the way this telemetry is displayed",
label: "View type",
options: viewOptions,
method: function (option) {
displayLayoutContext.switchViewType(selectedItemContext, option.value, selection);
@ -662,9 +668,9 @@ define(['lodash'], function (_) {
'display-mode': [],
'telemetry-value': [],
'style': [],
'unit-toggle': [],
'position': [],
'duplicate': [],
'unit-toggle': [],
'remove': [],
'toggle-grid': []
};
@ -689,6 +695,7 @@ define(['lodash'], function (_) {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
@ -712,9 +719,17 @@ define(['lodash'], function (_) {
toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
}
if (toolbar['unit-toggle'].length === 0) {
let toggleUnitsButton = getToggleUnitsButton(selectedParent, selectedObjects);
if (toggleUnitsButton) {
toolbar['unit-toggle'] = [toggleUnitsButton];
}
}
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
@ -729,17 +744,11 @@ define(['lodash'], function (_) {
if (toolbar.viewSwitcher.length === 0) {
toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
}
if (toolbar['unit-toggle'].length === 0) {
let toggleUnitsButton = getToggleUnitsButton(selectedParent, selectedObjects);
if (toggleUnitsButton) {
toolbar['unit-toggle'] = [toggleUnitsButton];
}
}
} else if (layoutItem.type === 'text-view') {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
@ -758,6 +767,7 @@ define(['lodash'], function (_) {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
@ -772,6 +782,7 @@ define(['lodash'], function (_) {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
@ -786,6 +797,7 @@ define(['lodash'], function (_) {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getX2Input(selectedParent, selectedObjects),

8
src/plugins/displayLayout/components/telemetry-view.scss
View File

@ -17,14 +17,14 @@
}
}
> * + * {
margin-left: $interiorMargin;
}
&__value {
@include isLimit();
}
&__label {
margin-right: $interiorMargin;
}
.c-frame & {
@include abs();
border: 1px solid transparent;

2
src/plugins/displayLayout/pluginSpec.js
View File

@ -351,7 +351,7 @@ describe('the plugin', function () {
it('provides controls including separators', () => {
const displayLayoutToolbar = openmct.toolbars.get(selection);
expect(displayLayoutToolbar.length).toBe(7);
expect(displayLayoutToolbar.length).toBe(8);
});
});
});

12
src/ui/toolbar/components/toolbar-toggle-button.vue
View File

@ -5,9 +5,15 @@
:title="nextValue.title"
:class="[nextValue.icon, {'c-icon-button--mixed': nonSpecific}]"
@click="cycle"
></div>
</div>
</template>
>
<div
v-if="nextValue.label"
class="c-icon-button__label"
>
{{ nextValue.label }}
</div>
</div>
</div></template>
<script>
export default {