mirror of
https://github.com/nasa/openmct.git
synced 2025-06-18 23:28:14 +00:00
[Inspector] Allow styles (including font and font size) to be saved and reused (#3432)
* working proto for font size * wip * Font styling - Base classes for font-size and font; - WIP! * working data attribute for fontsize * Font styling - Add `js-style-receiver` to markup, refine style targeting JS for better application of styles; - Refinements to font and size CSS; - WIP! * Font styling - Redo CSS to use `data-*` attributes; - New `u-style-receiver` class for use as font-size and font-family CSS selector target; - New `js-style-receiver` class for use as JS target by ObjectView.vue; - New classes added to markup in all Open MCT views; - Changed font-size values from 'is-font-size--*' to just the number; - Some refinement to individual views to account for font-sizing capability; - Removed automatic font-size 13px being set by SubobjectView.vue; - WIP! * working mixed styles * Font styling - Added `u-style-receiver` to TelemetryView.vue; - Added `icon-font-size` to Font Size dropdown button; - TODO: better font-size icon; * working font-family * Font styling - Art for `icon-font-size` glyph updated; - Redefined glyph usage in some Layout toolbar buttons; - Updated font-size and font dropdown menus options text; * Font styling - Refined font-size and font dropdown values; - Fixed toolbar-select-menu.vue to remove 'px' from non-specific option return; * dont allow font styling on layouts that contain other layouts * fix lint warning * add sizing row * fix bug with column width sizing * fix bug with header style * add saved styles inspector view * WIP * add vue component for selector * WIP styles manager to communicate between vue components * WIP saving and persisting styles * no duplicate styles prevention * fix props syntax * WIP can apply conditional styles * static styles do not work yet * display border color in saved styles swatch * allow deleting styles except default style * WIP apply static style works but also to layout... * prevent additional StylesView from being created * delete style message * change save order * move applystyle to selector component * rename for consistency * naming refactor * add style description * update style properties only if they exist and do not erase properties * refactor singleton usage refactor save method * show save and delete only on hover * do not show delete icon if not in edit mode * normalize styles before saving prevent apply style if conditional and static styles are simultaneously selected * remove default style tweak selector display * allow conditional and static styles to have saved style applied limit saved styles to 20 * refactor styles manager remove openmct dependency use provide/inject * resolve merge conflicts * lint fix * reorganize styles * add font style editor to styles view * save and display border correctly in saved styles view * WIP add font styling controls to inspector styles view * add font constants * WIP refactor to provide reactive props fix locked for edit * WIP display consolidated font styles for selection in editor * WIP font styles saved to layout * WIP persisting font styles from inspector works * fix styleable check * move logic up to stylesview because save is two part * apply font style to thumb * there can be only one * show font style for native views * linting fix * push stylesManager work to StylesView * move method to computed * move constant definition outside of function call * Styling for saved styles functionality WIP - Simplified and removed unnecessary markup; - Standardized style applied to saved style element and toolbar control; - Removed saved style expand arrow and description, replaced with item title / tooltip approach; - Standardized width of `c-style-thumb` element; - Moved font size and style controls to the designed location; * Styling for saved styles functionality WIP - Layout and CSS normalization between style editor control and saved style preview element; - Control alignment refined; - Moved font size and style controls to the designed location; * Styling for saved styles functionality WIP - Update font size icon art to normalize size; - Sanding, tweaking, alignin and layout in style controls area of Inspector; * Styling for saved styles functionality WIP - Hide the font size and style menu buttons unless the user is editing; * remove font controls from toolbar * turn styles tab into multipane element * lint fix * no font style should not be viewed as non-specific * delete saved style by index not style * cleanup * view and inspector view updates on initial font change * revert computed back to method * set initial height * fix test after removing 2 buttons from toolbar * fix hidden lint error * fix lint Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov> Co-authored-by: charlesh88 <charlesh88@gmail.com>
This commit is contained in:
David Tsay
GitHub
@ -21,21 +21,22 @@
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<div class="c-style">
|
||||
<span :class="[
|
||||
{ 'is-style-invisible': styleItem.style.isStyleInvisible },
|
||||
{ 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
|
||||
]"
|
||||
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
|
||||
class="c-style-thumb"
|
||||
>
|
||||
<span class="c-style-thumb__text"
|
||||
:class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
|
||||
<div class="c-style has-local-controls c-toolbar">
|
||||
<div class="c-style__controls">
|
||||
<div :class="[
|
||||
{ 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible },
|
||||
{ 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
|
||||
]"
|
||||
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
|
||||
class="c-style-thumb"
|
||||
>
|
||||
ABC
|
||||
</span>
|
||||
</span>
|
||||
<span class="c-toolbar">
|
||||
<span class="c-style-thumb__text"
|
||||
:class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
|
||||
>
|
||||
ABC
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
|
||||
class="c-style__toolbar-button--border-color u-menu-to--center"
|
||||
:options="borderColorOption"
|
||||
@ -61,7 +62,14 @@
|
||||
:options="isStyleInvisibleOption"
|
||||
@change="updateStyleValue"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Save Styles -->
|
||||
<toolbar-button v-if="canSaveStyle"
|
||||
class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"
|
||||
:options="saveOptions"
|
||||
@click="saveItemStyle()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -80,12 +88,11 @@ export default {
|
||||
ToolbarColorPicker,
|
||||
ToolbarToggleButton
|
||||
},
|
||||
inject: [
|
||||
'openmct'
|
||||
],
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
isEditing: {
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
mixedStyles: {
|
||||
type: Array,
|
||||
@ -93,6 +100,10 @@ export default {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
nonSpecificFontProperties: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
styleItem: {
|
||||
type: Object,
|
||||
required: true
|
||||
@ -182,7 +193,16 @@ export default {
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
},
|
||||
saveOptions() {
|
||||
return {
|
||||
icon: 'icon-save',
|
||||
title: 'Save style',
|
||||
isEditing: this.isEditing
|
||||
};
|
||||
},
|
||||
canSaveStyle() {
|
||||
return this.isEditing && !this.mixedStyles.length && !this.nonSpecificFontProperties.length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -216,6 +236,9 @@ export default {
|
||||
}
|
||||
|
||||
this.$emit('persist', this.styleItem, item.property);
|
||||
},
|
||||
saveItemStyle() {
|
||||
this.$emit('save-style', this.itemStyle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -31,6 +31,11 @@
|
||||
<div class="c-inspect-styles__header">
|
||||
Object Style
|
||||
</div>
|
||||
<FontStyleEditor
|
||||
v-if="canStyleFont"
|
||||
:font-style="consolidatedFontStyle"
|
||||
@set-font-property="setFontProperty"
|
||||
/>
|
||||
<div class="c-inspect-styles__content">
|
||||
<div v-if="staticStyle"
|
||||
class="c-inspect-styles__style"
|
||||
@ -39,7 +44,9 @@
|
||||
:style-item="staticStyle"
|
||||
:is-editing="allowEditing"
|
||||
:mixed-styles="mixedStyles"
|
||||
:non-specific-font-properties="nonSpecificFontProperties"
|
||||
@persist="updateStaticStyle"
|
||||
@save-style="saveStyle"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
@ -58,10 +65,11 @@
|
||||
</div>
|
||||
<div class="c-inspect-styles__content c-inspect-styles__condition-set">
|
||||
<a v-if="conditionSetDomainObject"
|
||||
class="c-object-label icon-conditional"
|
||||
class="c-object-label"
|
||||
:href="navigateToPath"
|
||||
@click="navigateOrPreview"
|
||||
>
|
||||
<span class="c-object-label__type-icon icon-conditional"></span>
|
||||
<span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
|
||||
</a>
|
||||
<template v-if="allowEditing">
|
||||
@ -80,6 +88,12 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<FontStyleEditor
|
||||
v-if="canStyleFont"
|
||||
:font-style="consolidatedFontStyle"
|
||||
@set-font-property="setFontProperty"
|
||||
/>
|
||||
|
||||
<div v-if="conditionsLoaded"
|
||||
class="c-inspect-styles__conditions"
|
||||
>
|
||||
@ -97,8 +111,10 @@
|
||||
/>
|
||||
<style-editor class="c-inspect-styles__editor"
|
||||
:style-item="conditionStyle"
|
||||
:non-specific-font-properties="nonSpecificFontProperties"
|
||||
:is-editing="allowEditing"
|
||||
@persist="updateConditionalStyle"
|
||||
@save-style="saveStyle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -108,6 +124,7 @@
|
||||
|
||||
<script>
|
||||
|
||||
import FontStyleEditor from '@/ui/inspector/styles/FontStyleEditor.vue';
|
||||
import StyleEditor from "./StyleEditor.vue";
|
||||
import PreviewAction from "@/ui/preview/PreviewAction.js";
|
||||
import { getApplicableStylesForItem, getConsolidatedStyleValues, getConditionSetIdentifierForItem } from "@/plugins/condition/utils/styleUtils";
|
||||
@ -116,16 +133,30 @@ import ConditionError from "@/plugins/condition/components/ConditionError.vue";
|
||||
import ConditionDescription from "@/plugins/condition/components/ConditionDescription.vue";
|
||||
import Vue from 'vue';
|
||||
|
||||
const NON_SPECIFIC = '??';
|
||||
const NON_STYLEABLE_CONTAINER_TYPES = [
|
||||
'layout',
|
||||
'flexible-layout',
|
||||
'tabs'
|
||||
];
|
||||
const NON_STYLEABLE_LAYOUT_ITEM_TYPES = [
|
||||
'line-view',
|
||||
'box-view',
|
||||
'image-view'
|
||||
];
|
||||
|
||||
export default {
|
||||
name: 'StylesView',
|
||||
components: {
|
||||
FontStyleEditor,
|
||||
StyleEditor,
|
||||
ConditionError,
|
||||
ConditionDescription
|
||||
},
|
||||
inject: [
|
||||
'openmct',
|
||||
'selection'
|
||||
'selection',
|
||||
'stylesManager'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
@ -139,19 +170,80 @@ export default {
|
||||
conditionsLoaded: false,
|
||||
navigateToPath: '',
|
||||
selectedConditionId: '',
|
||||
locked: false
|
||||
items: [],
|
||||
domainObject: undefined,
|
||||
consolidatedFontStyle: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
locked() {
|
||||
return this.selection.some(selectionPath => {
|
||||
const self = selectionPath[0].context.item;
|
||||
const parent = selectionPath.length > 1 ? selectionPath[1].context.item : undefined;
|
||||
|
||||
return (self && self.locked) || (parent && parent.locked);
|
||||
});
|
||||
},
|
||||
allowEditing() {
|
||||
return this.isEditing && !this.locked;
|
||||
},
|
||||
styleableFontItems() {
|
||||
return this.selection.filter(selectionPath => {
|
||||
const item = selectionPath[0].context.item;
|
||||
const itemType = item && item.type;
|
||||
const layoutItem = selectionPath[0].context.layoutItem;
|
||||
const layoutItemType = layoutItem && layoutItem.type;
|
||||
|
||||
if (itemType && NON_STYLEABLE_CONTAINER_TYPES.includes(itemType)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (layoutItemType && NON_STYLEABLE_LAYOUT_ITEM_TYPES.includes(layoutItemType)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
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 [];
|
||||
}
|
||||
|
||||
return Object.keys(this.consolidatedFontStyle).filter(property => this.consolidatedFontStyle[property] === NON_SPECIFIC);
|
||||
},
|
||||
canStyleFont() {
|
||||
return this.styleableFontItems.length && this.allowEditing;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.removeListeners();
|
||||
this.openmct.editor.off('isEditing', this.setEditState);
|
||||
this.stylesManager.off('styleSelected', this.applyStyleToSelection);
|
||||
},
|
||||
mounted() {
|
||||
this.items = [];
|
||||
this.previewAction = new PreviewAction(this.openmct);
|
||||
this.isMultipleSelection = this.selection.length > 1;
|
||||
this.getObjectsAndItemsFromSelection();
|
||||
@ -166,7 +258,10 @@ export default {
|
||||
this.initializeStaticStyle();
|
||||
}
|
||||
|
||||
this.setConsolidatedFontStyle();
|
||||
|
||||
this.openmct.editor.on('isEditing', this.setEditState);
|
||||
this.stylesManager.on('styleSelected', this.applyStyleToSelection);
|
||||
},
|
||||
methods: {
|
||||
getObjectStyles() {
|
||||
@ -178,10 +273,10 @@ export default {
|
||||
}
|
||||
} else if (this.items.length) {
|
||||
const itemId = this.items[0].id;
|
||||
if (this.domainObject.configuration && this.domainObject.configuration.objectStyles && this.domainObject.configuration.objectStyles[itemId]) {
|
||||
if (this.domainObject && this.domainObject.configuration && this.domainObject.configuration.objectStyles && this.domainObject.configuration.objectStyles[itemId]) {
|
||||
objectStyles = this.domainObject.configuration.objectStyles[itemId];
|
||||
}
|
||||
} else if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
|
||||
} else if (this.domainObject && this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
|
||||
objectStyles = this.domainObject.configuration.objectStyles;
|
||||
}
|
||||
|
||||
@ -247,13 +342,8 @@ export default {
|
||||
this.selection.forEach((selectionItem) => {
|
||||
const item = selectionItem[0].context.item;
|
||||
const layoutItem = selectionItem[0].context.layoutItem;
|
||||
const layoutDomainObject = selectionItem[0].context.item;
|
||||
const isChildItem = selectionItem.length > 1;
|
||||
|
||||
if (layoutDomainObject && layoutDomainObject.locked) {
|
||||
this.locked = true;
|
||||
}
|
||||
|
||||
if (!isChildItem) {
|
||||
domainObject = item;
|
||||
itemStyle = getApplicableStylesForItem(item);
|
||||
@ -287,7 +377,7 @@ export default {
|
||||
const {styles, mixedStyles} = getConsolidatedStyleValues(itemInitialStyles);
|
||||
this.initialStyles = styles;
|
||||
this.mixedStyles = mixedStyles;
|
||||
|
||||
// main layout
|
||||
this.domainObject = domainObject;
|
||||
this.removeListeners();
|
||||
if (this.domainObject) {
|
||||
@ -310,6 +400,7 @@ export default {
|
||||
isKeyItemId(key) {
|
||||
return (key !== 'styles')
|
||||
&& (key !== 'staticStyle')
|
||||
&& (key !== 'fontStyle')
|
||||
&& (key !== 'defaultConditionId')
|
||||
&& (key !== 'selectedConditionId')
|
||||
&& (key !== 'conditionSetIdentifier');
|
||||
@ -649,6 +740,124 @@ export default {
|
||||
},
|
||||
persist(domainObject, style) {
|
||||
this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
|
||||
},
|
||||
applyStyleToSelection(style) {
|
||||
if (!this.allowEditing) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateSelectionFontStyle(style);
|
||||
this.updateSelectionStyle(style);
|
||||
},
|
||||
updateSelectionFontStyle(style) {
|
||||
const fontSizeProperty = {
|
||||
fontSize: style.fontSize
|
||||
};
|
||||
const fontProperty = {
|
||||
font: style.font
|
||||
};
|
||||
|
||||
this.setFontProperty(fontSizeProperty);
|
||||
this.setFontProperty(fontProperty);
|
||||
},
|
||||
updateSelectionStyle(style) {
|
||||
const foundStyle = this.findStyleByConditionId(this.selectedConditionId);
|
||||
|
||||
if (foundStyle && !this.isStaticAndConditionalStyles) {
|
||||
Object.entries(style).forEach(([property, value]) => {
|
||||
if (foundStyle.style[property] !== undefined && foundStyle.style[property] !== value) {
|
||||
foundStyle.style[property] = value;
|
||||
}
|
||||
});
|
||||
this.getAndPersistStyles();
|
||||
} else {
|
||||
this.removeConditionSet();
|
||||
Object.entries(style).forEach(([property, value]) => {
|
||||
if (this.staticStyle.style[property] !== undefined && this.staticStyle.style[property] !== value) {
|
||||
this.staticStyle.style[property] = value;
|
||||
this.getAndPersistStyles(property);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
saveStyle(style) {
|
||||
const styleToSave = {
|
||||
...style,
|
||||
...this.consolidatedFontStyle
|
||||
};
|
||||
|
||||
this.stylesManager.save(styleToSave);
|
||||
},
|
||||
setConsolidatedFontStyle() {
|
||||
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);
|
||||
|
||||
const fontSize = hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC;
|
||||
const font = hasConsolidatedFont ? styles[0].font : NON_SPECIFIC;
|
||||
|
||||
this.$set(this.consolidatedFontStyle, 'fontSize', fontSize);
|
||||
this.$set(this.consolidatedFontStyle, 'font', font);
|
||||
}
|
||||
},
|
||||
getFontStyle(selectionPath) {
|
||||
const item = selectionPath.context.item;
|
||||
const layoutItem = selectionPath.context.layoutItem;
|
||||
let fontStyle = item && item.configuration && item.configuration.fontStyle;
|
||||
|
||||
// support for legacy where font styling in layouts only
|
||||
if (!fontStyle) {
|
||||
fontStyle = {
|
||||
fontSize: layoutItem && layoutItem.fontSize || 'default',
|
||||
font: layoutItem && layoutItem.font || 'default'
|
||||
};
|
||||
}
|
||||
|
||||
return fontStyle;
|
||||
},
|
||||
setFontProperty(fontStyleObject) {
|
||||
let layoutDomainObject;
|
||||
const [property, value] = Object.entries(fontStyleObject)[0];
|
||||
|
||||
this.styleableFontItems.forEach(styleable => {
|
||||
if (!this.isLayoutObject(styleable)) {
|
||||
const fontStyle = this.getFontStyle(styleable[0]);
|
||||
fontStyle[property] = value;
|
||||
|
||||
this.openmct.objects.mutate(styleable[0].context.item, 'configuration.fontStyle', fontStyle);
|
||||
} else {
|
||||
// all layoutItems in this context will share same parent layout
|
||||
if (!layoutDomainObject) {
|
||||
layoutDomainObject = styleable[1].context.item;
|
||||
}
|
||||
|
||||
// save layout item font style to parent layout configuration
|
||||
const layoutItemIndex = styleable[0].context.index;
|
||||
const layoutItemConfiguration = layoutDomainObject.configuration.items[layoutItemIndex];
|
||||
|
||||
layoutItemConfiguration[property] = value;
|
||||
}
|
||||
});
|
||||
|
||||
if (layoutDomainObject) {
|
||||
this.openmct.objects.mutate(layoutDomainObject, 'configuration.items', layoutDomainObject.configuration.items);
|
||||
}
|
||||
|
||||
// sync vue component on font update
|
||||
this.$set(this.consolidatedFontStyle, property, value);
|
||||
},
|
||||
isLayoutObject(selectionPath) {
|
||||
const layoutItemType = selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type;
|
||||
|
||||
return layoutItemType && layoutItemType !== 'subobject-view';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -40,9 +40,11 @@
|
||||
}
|
||||
|
||||
&__condition-set {
|
||||
align-items: baseline;
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-bottom: $interiorMargin;
|
||||
|
||||
.c-object-label {
|
||||
flex: 1 1 auto;
|
||||
@ -53,7 +55,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__style,
|
||||
&__style {
|
||||
padding-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
&__condition {
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user