alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Condition set output label (#4233)

Browse Source 
* Show condition set label for condition widgets
* CSS changes
* Ensure condition set output as labels also works when condition widget is part of a display layout
* Adds tests for conditionWidget
* Tests for condition label output. Fix breaking tests.
* Don't remove event listeners when conditionset changes

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com>
This commit is contained in:
Shefali Joshi
2022-01-05 13:54:11 -08:00
committed by GitHub
parent 88a94c80be
commit 3620760991
11 changed files with 371 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/plugins/condition/components/inspector/StylesView.vue
View File

@@ -63,7 +63,7 @@
<div class="c-inspect-styles__header">
Conditional Object Styles
</div>
<div class="c-inspect-styles__content c-inspect-styles__condition-set">
<div class="c-inspect-styles__content c-inspect-styles__condition-set c-inspect-styles__elem">
<a v-if="conditionSetDomainObject"
class="c-object-label"
@click="navigateOrPreview"
@@ -87,6 +87,27 @@
</template>
</div>
<div v-if="isConditionWidget && allowEditing"
class="c-inspect-styles__elem c-inspect-styles__output-label-toggle"
>
<label class="c-toggle-switch">
<input
type="checkbox"
:checked="useConditionSetOutputAsLabel"
@change="updateConditionSetOutputLabel"
>
<span class="c-toggle-switch__slider"></span>
<span class="c-toggle-switch__label">Use Condition Set output as label</span>
</label>
</div>
<div v-if="isConditionWidget && !allowEditing"
class="c-inspect-styles__elem"
>
<span class="c-toggle-switch__label">Condition Set output as label:
<span v-if="useConditionSetOutputAsLabel"> Yes</span><span v-else> No</span>
</span>
</div>
<FontStyleEditor
v-if="canStyleFont"
:font-style="consolidatedFontStyle"
@@ -172,7 +193,8 @@ export default {
selectedConditionId: '',
items: [],
domainObject: undefined,
consolidatedFontStyle: {}
consolidatedFontStyle: {},
useConditionSetOutputAsLabel: false
};
},
computed: {
@@ -187,6 +209,11 @@ export default {
allowEditing() {
return this.isEditing && !this.locked;
},
isConditionWidget() {
const hasConditionWidgetObjects = this.domainObjectsById && Object.values(this.domainObjectsById).some((object) => object.type === 'conditionWidget');
return (hasConditionWidgetObjects || (this.domainObject && this.domainObject.type === 'conditionWidget'));
},
styleableFontItems() {
return this.selection.filter(selectionPath => {
const item = selectionPath[0].context.item;
@@ -205,28 +232,6 @@ export default {
return true;
});
},
computedconsolidatedFontStyle() {
let consolidatedFontStyle;
const styles = [];
this.styleableFontItems.forEach(styleable => {
const fontStyle = this.getFontStyle(styleable[0]);
styles.push(fontStyle);
});
if (styles.length) {
const hasConsolidatedFontSize = styles.length && styles.every((fontStyle, i, arr) => fontStyle.fontSize === arr[0].fontSize);
const hasConsolidatedFont = styles.length && styles.every((fontStyle, i, arr) => fontStyle.font === arr[0].font);
consolidatedFontStyle = {
fontSize: hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC,
font: hasConsolidatedFont ? styles[0].font : NON_SPECIFIC
};
}
return consolidatedFontStyle;
},
nonSpecificFontProperties() {
if (!this.consolidatedFontStyle) {
return [];
@@ -247,6 +252,8 @@ export default {
this.previewAction = new PreviewAction(this.openmct);
this.isMultipleSelection = this.selection.length > 1;
this.getObjectsAndItemsFromSelection();
this.useConditionSetOutputAsLabel = this.getConfigurationForLabel();
if (!this.isMultipleSelection) {
let objectStyles = this.getObjectStyles();
this.initializeStaticStyle(objectStyles);
@@ -264,6 +271,12 @@ export default {
this.stylesManager.on('styleSelected', this.applyStyleToSelection);
},
methods: {
getConfigurationForLabel() {
const childObjectUsesLabels = Object.values(this.domainObjectsById || {}).some((object) => object.configuration && object.configuration.useConditionSetOutputAsLabel);
const domainObjectUsesLabels = this.domainObject && this.domainObject.configuration && this.domainObject.configuration.useConditionSetOutputAsLabel;
return childObjectUsesLabels || domainObjectUsesLabels;
},
getObjectStyles() {
let objectStyles;
if (this.domainObjectsById) {
@@ -487,13 +500,14 @@ export default {
this.conditions[conditionConfiguration.id] = conditionConfiguration;
let foundStyle = this.findStyleByConditionId(conditionConfiguration.id);
let output = { output: conditionConfiguration.configuration.output };
if (foundStyle) {
foundStyle.style = Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles, foundStyle.style);
foundStyle.style = Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles, foundStyle.style, output);
conditionalStyles.push(foundStyle);
} else {
conditionalStyles.splice(index, 0, {
conditionId: conditionConfiguration.id,
style: Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles)
style: Object.assign((this.canHide ? { isStyleInvisible: '' } : {}), this.initialStyles, output)
});
}
});
@@ -715,6 +729,12 @@ export default {
} else {
objectStyle.styles.forEach((conditionalStyle, index) => {
let style = {};
if (domainObject.configuration.useConditionSetOutputAsLabel) {
style.output = conditionalStyle.style.output;
} else {
style.output = '';
}
Object.keys(item.applicableStyles).concat(['isStyleInvisible']).forEach(key => {
style[key] = conditionalStyle.style[key];
});
@@ -731,10 +751,21 @@ export default {
}
});
} else {
domainObjectStyles = {
...domainObjectStyles,
...objectStyle
};
if (domainObject.configuration.useConditionSetOutputAsLabel !== true) {
let objectConditionStyle = JSON.parse(JSON.stringify(objectStyle));
objectConditionStyle.styles.forEach((conditionalStyle) => {
conditionalStyle.style.output = '';
});
domainObjectStyles = {
...domainObjectStyles,
...objectConditionStyle
};
} else {
domainObjectStyles = {
...domainObjectStyles,
...objectStyle
};
}
}
return domainObjectStyles;
@@ -743,6 +774,17 @@ export default {
this.selectedConditionId = conditionId;
this.getAndPersistStyles();
},
persistLabelConfiguration() {
if (this.domainObjectsById) {
Object.values(this.domainObjectsById).forEach((object) => {
this.openmct.objects.mutate(object, 'configuration.useConditionSetOutputAsLabel', this.useConditionSetOutputAsLabel);
});
} else {
this.openmct.objects.mutate(this.domainObject, 'configuration.useConditionSetOutputAsLabel', this.useConditionSetOutputAsLabel);
}
this.getAndPersistStyles();
},
persist(domainObject, style) {
this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
},
@@ -863,6 +905,10 @@ export default {
const layoutItemType = selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type;
return layoutItemType && layoutItemType !== 'subobject-view';
},
updateConditionSetOutputLabel(event) {
this.useConditionSetOutputAsLabel = event.target.checked === true;
this.persistLabelConfiguration();
}
}
};