mirror of
https://github.com/nasa/openmct.git
synced 2025-06-17 06:38:17 +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
@ -29,7 +29,7 @@
|
||||
@endMove="() => $emit('endMove')"
|
||||
>
|
||||
<div
|
||||
class="c-box-view"
|
||||
class="c-box-view u-style-receiver js-style-receiver"
|
||||
:class="[styleClass]"
|
||||
:style="style"
|
||||
></div>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="l-layout"
|
||||
class="l-layout u-style-receiver js-style-receiver"
|
||||
:class="{
|
||||
'is-multi-selected': selectedLayoutItems.length > 1,
|
||||
'allow-editing': isEditing
|
||||
|
||||
@ -81,6 +81,7 @@ export default {
|
||||
style() {
|
||||
let backgroundImage = 'url(' + this.item.url + ')';
|
||||
let border = '1px solid ' + this.item.stroke;
|
||||
|
||||
if (this.itemStyle) {
|
||||
if (this.itemStyle.imageUrl !== undefined) {
|
||||
backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';
|
||||
|
||||
@ -35,6 +35,8 @@
|
||||
:object-path="currentObjectPath"
|
||||
:has-frame="item.hasFrame"
|
||||
:show-edit-view="false"
|
||||
:layout-font-size="item.fontSize"
|
||||
:layout-font="item.font"
|
||||
/>
|
||||
</layout-frame>
|
||||
</template>
|
||||
@ -73,6 +75,8 @@ export default {
|
||||
y: position[1],
|
||||
identifier: domainObject.identifier,
|
||||
hasFrame: hasFrameByDefault(domainObject.type),
|
||||
fontSize: 'default',
|
||||
font: 'default',
|
||||
viewKey
|
||||
};
|
||||
},
|
||||
|
||||
@ -30,12 +30,14 @@
|
||||
>
|
||||
<div
|
||||
v-if="domainObject"
|
||||
class="c-telemetry-view"
|
||||
class="u-style-receiver c-telemetry-view"
|
||||
:class="{
|
||||
styleClass,
|
||||
'is-missing': domainObject.status === 'missing'
|
||||
}"
|
||||
:style="styleObject"
|
||||
:data-font-size="item.fontSize"
|
||||
:data-font="item.font"
|
||||
@contextmenu.prevent="showContextMenu"
|
||||
>
|
||||
<div class="is-missing__indicator"
|
||||
@ -95,7 +97,8 @@ export default {
|
||||
stroke: "",
|
||||
fill: "",
|
||||
color: "",
|
||||
size: "13px"
|
||||
fontSize: 'default',
|
||||
font: 'default'
|
||||
};
|
||||
},
|
||||
inject: ['openmct', 'objectPath'],
|
||||
@ -150,10 +153,15 @@ export default {
|
||||
return unit;
|
||||
},
|
||||
styleObject() {
|
||||
return Object.assign({}, {
|
||||
fontSize: this.item.size
|
||||
}, this.itemStyle);
|
||||
let size;
|
||||
//for legacy size support
|
||||
if (!this.item.fontSize) {
|
||||
size = this.item.size;
|
||||
}
|
||||
|
||||
return Object.assign({}, {
|
||||
size
|
||||
}, this.itemStyle);
|
||||
},
|
||||
fieldName() {
|
||||
return this.valueMetadata && this.valueMetadata.name;
|
||||
|
||||
@ -29,7 +29,9 @@
|
||||
@endMove="() => $emit('endMove')"
|
||||
>
|
||||
<div
|
||||
class="c-text-view"
|
||||
class="c-text-view u-style-receiver js-style-receiver"
|
||||
:data-font-size="item.fontSize"
|
||||
:data-font="item.font"
|
||||
:class="[styleClass]"
|
||||
:style="style"
|
||||
>
|
||||
@ -47,13 +49,14 @@ export default {
|
||||
return {
|
||||
fill: '',
|
||||
stroke: '',
|
||||
size: '13px',
|
||||
color: '',
|
||||
x: 1,
|
||||
y: 1,
|
||||
width: 10,
|
||||
height: 5,
|
||||
text: element.text
|
||||
text: element.text,
|
||||
fontSize: 'default',
|
||||
font: 'default'
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
@ -84,8 +87,14 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
let size;
|
||||
//legacy size support
|
||||
if (!this.item.fontSize) {
|
||||
size = this.item.size;
|
||||
}
|
||||
|
||||
return Object.assign({
|
||||
fontSize: this.item.size
|
||||
size
|
||||
}, this.itemStyle);
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user