mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 06:03:08 +00:00
Address review comments:
Fixes telemetry view visibility and styling issue Removes none option for border and background styles for drawing objects
This commit is contained in:
Joshi
parent
cdc7c1af64
commit
e05b0bb562
@ -33,6 +33,7 @@
|
||||
<style-editor class="c-inspect-styles__editor"
|
||||
:style-item="staticStyle"
|
||||
:is-editing="isEditing"
|
||||
:prevent-none="preventNone"
|
||||
@persist="updateStaticStyle"
|
||||
/>
|
||||
</div>
|
||||
@ -105,7 +106,7 @@ import ConditionDescription from "@/plugins/condition/components/ConditionDescri
|
||||
import ConditionError from "@/plugins/condition/components/ConditionError.vue";
|
||||
import Vue from 'vue';
|
||||
import PreviewAction from "@/ui/preview/PreviewAction.js";
|
||||
import { getStyleProp } from "@/plugins/condition/utils/styleUtils";
|
||||
import {getInitialStyleForItem} from "@/plugins/condition/utils/styleUtils";
|
||||
|
||||
export default {
|
||||
name: 'ConditionalStylesView',
|
||||
@ -126,15 +127,8 @@ export default {
|
||||
isEditing: this.openmct.editor.isEditing(),
|
||||
conditions: undefined,
|
||||
conditionsLoaded: false,
|
||||
navigateToPath: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
domainObject: {
|
||||
handler(newDomainObject) {
|
||||
this.domainObject = newDomainObject;
|
||||
},
|
||||
deep: true
|
||||
navigateToPath: '',
|
||||
preventNone: false
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
@ -143,13 +137,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.canHide = false;
|
||||
this.itemId = '';
|
||||
this.initialStyles = this.getStyleProperties({
|
||||
fill: 'transparent',
|
||||
stroke: 'transparent',
|
||||
color: 'transparent'
|
||||
});
|
||||
this.getDomainObjectFromSelection();
|
||||
this.previewAction = new PreviewAction(this.openmct);
|
||||
if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
|
||||
@ -165,44 +153,40 @@ export default {
|
||||
this.openmct.editor.on('isEditing', this.setEditState);
|
||||
},
|
||||
methods: {
|
||||
getStyleProperties(item) {
|
||||
let styleProps = {};
|
||||
Object.keys(item).forEach((key) => {
|
||||
Object.assign(styleProps, getStyleProp(key, item[key]));
|
||||
});
|
||||
return styleProps;
|
||||
isItemType(type, item) {
|
||||
return item && (item.type === type);
|
||||
},
|
||||
isDrawingItem(item) {
|
||||
return !this.isItemType('subobject-view', item) && !this.isItemType('telemetry-view', item);
|
||||
},
|
||||
getDomainObjectFromSelection() {
|
||||
let layoutItem;
|
||||
let domainObject;
|
||||
|
||||
if (this.selection[0].length > 1) {
|
||||
//If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
|
||||
//The second item in the this.selection[0] list is the container object (usually a layout)
|
||||
let layoutItem = this.selection[0][0].context.layoutItem;
|
||||
layoutItem = this.selection[0][0].context.layoutItem;
|
||||
const item = this.selection[0][0].context.item;
|
||||
this.canHide = true;
|
||||
if (layoutItem && (layoutItem.type === 'subobject-view')) {
|
||||
if (item && this.isItemType('subobject-view', layoutItem)) {
|
||||
domainObject = item;
|
||||
} else {
|
||||
domainObject = this.selection[0][1].context.item;
|
||||
if (!item) {
|
||||
//if this isn't a sub-object
|
||||
this.initialStyles = {};
|
||||
this.initialStyles = this.getStyleProperties(layoutItem);
|
||||
this.itemId = layoutItem.id;
|
||||
} else {
|
||||
layoutItem = Object.assign({}, { id: this.selection[0][0].context.layoutItem.id }, item);
|
||||
this.itemId = layoutItem.id;
|
||||
}
|
||||
this.preventNone = this.isDrawingItem(layoutItem);
|
||||
}
|
||||
} else {
|
||||
domainObject = this.selection[0][0].context.item;
|
||||
}
|
||||
this.domainObject = domainObject;
|
||||
this.initialStyles = getInitialStyleForItem(domainObject, layoutItem);
|
||||
if (this.stopObserving) {
|
||||
this.stopObserving();
|
||||
}
|
||||
if (this.domainObject) {
|
||||
this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
|
||||
}
|
||||
},
|
||||
initialize(conditionSetDomainObject) {
|
||||
//If there are new conditions in the conditionSet we need to set those styles to default
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<div class="c-style">
|
||||
<span class="c-style-thumb"
|
||||
:class="{ 'is-style-invisible': styleItem.style.isStyleInvisible }"
|
||||
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : styleItem.style ]"
|
||||
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
|
||||
>
|
||||
<span class="c-style-thumb__text"
|
||||
:class="{ 'hide-nice': !styleItem.style.color }"
|
||||
@ -33,27 +33,27 @@
|
||||
</span>
|
||||
</span>
|
||||
<span class="c-toolbar">
|
||||
<toolbar-color-picker v-if="styleItem.style.border"
|
||||
<toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
|
||||
class="c-style__toolbar-button--border-color u-menu-to--center"
|
||||
:options="borderColorOption"
|
||||
@change="updateStyleValue"
|
||||
/>
|
||||
<toolbar-color-picker v-if="styleItem.style.backgroundColor"
|
||||
<toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)"
|
||||
class="c-style__toolbar-button--background-color u-menu-to--center"
|
||||
:options="backgroundColorOption"
|
||||
@change="updateStyleValue"
|
||||
/>
|
||||
<toolbar-color-picker v-if="styleItem.style.color"
|
||||
<toolbar-color-picker v-if="hasProperty(styleItem.style.color)"
|
||||
class="c-style__toolbar-button--color u-menu-to--center"
|
||||
:options="colorOption"
|
||||
@change="updateStyleValue"
|
||||
/>
|
||||
<toolbar-button v-if="styleItem.style.imageUrl !== undefined"
|
||||
<toolbar-button v-if="hasProperty(styleItem.style.imageUrl)"
|
||||
class="c-style__toolbar-button--image-url"
|
||||
:options="imageUrlOption"
|
||||
@change="updateStyleValue"
|
||||
/>
|
||||
<toolbar-toggle-button v-if="styleItem.style.isStyleInvisible !== undefined"
|
||||
<toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)"
|
||||
class="c-style__toolbar-button--toggle-visible"
|
||||
:options="isStyleInvisibleOption"
|
||||
@change="updateStyleValue"
|
||||
@ -83,35 +83,51 @@ export default {
|
||||
isEditing: {
|
||||
type: Boolean
|
||||
},
|
||||
preventNone: {
|
||||
type: Boolean
|
||||
},
|
||||
styleItem: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemStyle() {
|
||||
let style = {};
|
||||
const keys = Object.keys(this.styleItem.style);
|
||||
keys.forEach(key => {
|
||||
style[key] = this.normalizeValue(this.styleItem.style[key]);
|
||||
});
|
||||
return style;
|
||||
},
|
||||
borderColorOption() {
|
||||
let value = this.styleItem.style.border.replace('1px solid ', '');
|
||||
return {
|
||||
icon: 'icon-line-horz',
|
||||
title: STYLE_CONSTANTS.borderColorTitle,
|
||||
value: this.styleItem.style.border.replace('1px solid ', ''),
|
||||
value: this.normalizeValue(value),
|
||||
property: 'border',
|
||||
isEditing: this.isEditing
|
||||
isEditing: this.isEditing,
|
||||
preventNone: this.preventNone
|
||||
}
|
||||
},
|
||||
backgroundColorOption() {
|
||||
let value = this.styleItem.style.backgroundColor;
|
||||
return {
|
||||
icon: 'icon-paint-bucket',
|
||||
title: STYLE_CONSTANTS.backgroundColorTitle,
|
||||
value: this.styleItem.style.backgroundColor,
|
||||
value: this.normalizeValue(value),
|
||||
property: 'backgroundColor',
|
||||
isEditing: this.isEditing
|
||||
isEditing: this.isEditing,
|
||||
preventNone: this.preventNone
|
||||
}
|
||||
},
|
||||
colorOption() {
|
||||
let value = this.styleItem.style.color;
|
||||
return {
|
||||
icon: 'icon-font',
|
||||
title: STYLE_CONSTANTS.textColorTitle,
|
||||
value: this.styleItem.style.color,
|
||||
value: this.normalizeValue(value),
|
||||
property: 'color',
|
||||
isEditing: this.isEditing
|
||||
}
|
||||
@ -138,7 +154,8 @@ export default {
|
||||
property: 'imageUrl',
|
||||
formKeys: ['url'],
|
||||
value: {url: this.styleItem.style.imageUrl},
|
||||
isEditing: this.isEditing
|
||||
isEditing: this.isEditing,
|
||||
preventNone: this.preventNone
|
||||
}
|
||||
},
|
||||
isStyleInvisibleOption() {
|
||||
@ -146,6 +163,7 @@ export default {
|
||||
value: this.styleItem.style.isStyleInvisible,
|
||||
property: 'isStyleInvisible',
|
||||
isEditing: this.isEditing,
|
||||
preventNone: this.preventNone,
|
||||
options: [
|
||||
{
|
||||
value: '',
|
||||
@ -163,6 +181,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasProperty(property) {
|
||||
return property !== undefined;
|
||||
},
|
||||
normalizeValue(value) {
|
||||
if (!value) {
|
||||
return 'transparent';
|
||||
}
|
||||
return value;
|
||||
},
|
||||
updateStyleValue(value, item) {
|
||||
if (item.property === 'border') {
|
||||
value = '1px solid ' + value;
|
||||
|
||||
@ -19,27 +19,81 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
const NONE_VALUE = 'transparent';
|
||||
|
||||
export const getStyleProp = (key, defaultValue) => {
|
||||
let styleProp = undefined;
|
||||
switch(key) {
|
||||
case 'fill': styleProp = {
|
||||
backgroundColor: defaultValue || 'transparent'
|
||||
};
|
||||
break;
|
||||
case 'stroke': styleProp = {
|
||||
border: '1px solid ' + (defaultValue || 'transparent')
|
||||
};
|
||||
break;
|
||||
case 'color': styleProp = {
|
||||
color: defaultValue || 'transparent'
|
||||
};
|
||||
break;
|
||||
case 'url': styleProp = {
|
||||
imageUrl: defaultValue || 'transparent'
|
||||
};
|
||||
break;
|
||||
const styleProps = {
|
||||
backgroundColor: {
|
||||
svgProperty: 'fill',
|
||||
noneValue: NONE_VALUE,
|
||||
applicableForType: type => {
|
||||
return !type ? true : (type === 'text-view' ||
|
||||
type === 'telemetry-view' ||
|
||||
type === 'box-view' ||
|
||||
type === 'subobject-view');
|
||||
}
|
||||
},
|
||||
border: {
|
||||
svgProperty: 'stroke',
|
||||
noneValue: NONE_VALUE,
|
||||
applicableForType: type => {
|
||||
return !type ? true : (type === 'text-view' ||
|
||||
type === 'telemetry-view' ||
|
||||
type === 'box-view' ||
|
||||
type === 'image-view' ||
|
||||
type === 'line-view'||
|
||||
type === 'subobject-view');
|
||||
}
|
||||
},
|
||||
color: {
|
||||
svgProperty: 'color',
|
||||
noneValue: 'NONE_VALUE',
|
||||
applicableForType: type => {
|
||||
return !type ? true : (type === 'text-view' ||
|
||||
type === 'telemetry-view'||
|
||||
type === 'subobject-view');
|
||||
}
|
||||
},
|
||||
imageUrl: {
|
||||
svgProperty: 'url',
|
||||
noneValue: '',
|
||||
applicableForType: type => {
|
||||
return !type ? false : type === 'image-view';
|
||||
}
|
||||
}
|
||||
|
||||
return styleProp;
|
||||
};
|
||||
|
||||
const getStaticStyleForItem = (domainObject, id) => {
|
||||
let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
|
||||
if (domainObjectStyles) {
|
||||
if (id && domainObjectStyles[id] && domainObjectStyles[id].staticStyle) {
|
||||
return domainObjectStyles[id].staticStyle.style;
|
||||
} else if (domainObjectStyles.staticStyle) {
|
||||
return domainObjectStyles.staticStyle.style;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//Returns either existing static styles or uses SVG defaults if available
|
||||
export const getInitialStyleForItem = (domainObject, item) => {
|
||||
const type = item && item.type;
|
||||
const id = item && item.id;
|
||||
let style = {};
|
||||
|
||||
let staticStyle = getStaticStyleForItem(domainObject, id);
|
||||
|
||||
const properties = Object.keys(styleProps);
|
||||
properties.forEach(property => {
|
||||
const styleProp = styleProps[property];
|
||||
if (styleProp.applicableForType(type)) {
|
||||
let defaultValue;
|
||||
if (staticStyle) {
|
||||
defaultValue = staticStyle[property];
|
||||
} else if (item) {
|
||||
defaultValue = item[styleProp.svgProperty];
|
||||
}
|
||||
style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue;
|
||||
}
|
||||
});
|
||||
|
||||
return style;
|
||||
};
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
<div
|
||||
v-if="domainObject"
|
||||
class="c-telemetry-view"
|
||||
:style="styleObject"
|
||||
:class="styleClass"
|
||||
:style="telemetryObjectStyle || styleObject"
|
||||
@contextmenu.prevent="showContextMenu"
|
||||
>
|
||||
<div
|
||||
@ -48,8 +49,7 @@
|
||||
v-if="showValue"
|
||||
:title="fieldName"
|
||||
class="c-telemetry-view__value"
|
||||
:class="[telemetryClass, !telemetryClass && styleClass]"
|
||||
:style="!telemetryClass && telemetryObjectStyle"
|
||||
:class="[telemetryClass]"
|
||||
>
|
||||
<div class="c-telemetry-view__value-text">
|
||||
{{ telemetryValue }}
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
}
|
||||
},
|
||||
styleClass() {
|
||||
return this.telemetryObjectStyle && !!this.telemetryObjectStyle.isStyleInvisible;
|
||||
return this.telemetryObjectStyle && this.telemetryObjectStyle.isStyleInvisible;
|
||||
},
|
||||
telemetryObjectStyle() {
|
||||
let styleObj = Object.assign({}, this.itemStyle);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user