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

Address review comments:

Browse Source 
Fixes telemetry view visibility and styling issue
Removes none option for border and background styles for drawing objects
This commit is contained in:
Joshi
2020-04-07 11:34:48 -07:00
parent cdc7c1af64
commit e05b0bb562
4 changed files with 136 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/plugins/condition/components/inspector/ConditionalStylesView.vue
View File

@@ -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.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();
}
this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
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

51
src/plugins/condition/components/inspector/StyleEditor.vue
View File

@@ -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;