Handles static and mixed styles for multiple items in a layout (#2907)

* Show non specific styles when updating multiple item styles
* Save sub object styles to it's domain object
* Layout UI tweak
* Fixes flexible layout bug.
* Fixes font size bug in telemetry view
* Fixes issues with newly places TVOs including transparent properties.
* Fixes #2908
* Say NO to 'transparent' === '__no_value'
- Fixes #2895;
* Ensure styles are correctly applied to domain objects and drawing objects when selected individually
* Ensure none treatment is correctly applied to objects when multple selecting
* Fix intial box border
* Tweaks to c-text-view layout
- Vertically center text;
- Normalize padding;
- Overflow: hidden;

* Tweaks to Clock and Timer layout
- Fixes #2893;
- Vertically center text;
- Normalize padding;
- Overflow: hidden;
- `position: absolute` when in Layout;

Co-authored-by: charlesh88 <charlesh88@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/plugins/displayLayout/components/BoxView.vue

@@ -43,7 +43,7 @@ export default {
     makeDefinition() {
         return {
             fill: '#717171',
-            stroke: 'transparent',
+            stroke: '',
             x: 1,
             y: 1,
             width: 10,
@@ -74,13 +74,14 @@ export default {
     },
     computed: {
         style() {
-            return Object.assign({
-                backgroundColor: this.item.fill,
-                border: '1px solid ' + this.item.stroke
-            }, this.itemStyle);
-        },
-        styleClass() {
-            return this.itemStyle && this.itemStyle.isStyleInvisible;
+            if (this.itemStyle) {
+                return this.itemStyle;
+            } else {
+                return {
+                    backgroundColor: this.item.fill,
+                    border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
+                };
+            }
         }
     },
     watch: {

src/plugins/displayLayout/components/ImageView.vue

@@ -74,13 +74,18 @@ export default {
     },
     computed: {
         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 + ')';
+                }
+                border = this.itemStyle.border;
+            }
             return {
-                backgroundImage: this.itemStyle ? ('url(' + this.itemStyle.imageUrl + ')') : 'url(' + this.item.url + ')',
-                border: (this.itemStyle && this.itemStyle.border) ? this.itemStyle.border : ('1px solid ' + this.item.stroke)
+                backgroundImage,
+                border
             };
-        },
-        styleClass() {
-            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/LineView.vue

@@ -127,8 +127,11 @@ export default {
             return {x, y, x2, y2};
         },
         stroke() {
-            if (this.itemStyle && this.itemStyle.border) {
-                return this.itemStyle.border.replace('1px solid ', '');
+            if (this.itemStyle) {
+                if (this.itemStyle.border) {
+                    return this.itemStyle.border.replace('1px solid ', '');
+                }
+                return '';
             } else {
                 return this.item.stroke;
             }
@@ -146,9 +149,6 @@ export default {
                 height: `${height}px`
             };
         },
-        styleClass() {
-            return this.itemStyle && this.itemStyle.isStyleInvisible;
-        },
         startHandleClass() {
             return START_HANDLE_QUADRANTS[this.vectorQuadrant];
         },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -31,7 +31,7 @@
         v-if="domainObject"
         class="c-telemetry-view"
         :class="styleClass"
-        :style="telemetryObjectStyle || styleObject"
+        :style="styleObject"
         @contextmenu.prevent="showContextMenu"
     >
         <div
@@ -79,8 +79,8 @@ export default {
             height: DEFAULT_TELEMETRY_DIMENSIONS[1],
             displayMode: 'all',
             value: metadata.getDefaultDisplayValue(),
-            stroke: "transparent",
-            fill: "transparent",
+            stroke: "",
+            fill: "",
             color: "",
             size: "13px"
         };
@@ -125,27 +125,10 @@ export default {
             return displayMode === 'all' || displayMode === 'value';
         },
         styleObject() {
-            return {
-                backgroundColor: this.item.fill,
-                borderColor: this.item.stroke,
-                color: this.item.color,
+            return Object.assign({}, {
                 fontSize: this.item.size
-            }
-        },
-        styleClass() {
-            return this.telemetryObjectStyle && this.telemetryObjectStyle.isStyleInvisible;
-        },
-        telemetryObjectStyle() {
-            let styleObj = Object.assign({}, this.itemStyle);
-            let keys = Object.keys(styleObj);
-            keys.forEach(key => {
-                if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
-                    if (styleObj[key]) {
-                        styleObj[key] = '';
-                    }
-                }
-            });
-            return styleObj;
+            }, this.itemStyle);
+
         },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;

src/plugins/displayLayout/components/TextView.vue

@@ -32,7 +32,7 @@
         :class="[styleClass]"
         :style="style"
     >
-        {{ item.text }}
+        <div class="c-text-view__text">{{ item.text }}</div>
     </div>
 </layout-frame>
 </template>
@@ -44,8 +44,8 @@ import conditionalStylesMixin from "../mixins/objectStyles-mixin";
 export default {
     makeDefinition(openmct, gridSize, element) {
         return {
-            fill: 'transparent',
-            stroke: 'transparent',
+            fill: '',
+            stroke: '',
             size: '13px',
             color: '',
             x: 1,
@@ -80,14 +80,8 @@ export default {
     computed: {
         style() {
             return Object.assign({
-                backgroundColor: this.item.fill,
-                border: '1px solid ' + this.item.stroke,
-                color: this.item.color,
                 fontSize: this.item.size
             }, this.itemStyle);
-        },
-        styleClass() {
-            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/layout-frame.scss

@@ -16,6 +16,8 @@
 .is-editing {
     /******************* STYLES FOR C-FRAME WHILE EDITING */
     .c-frame {
+        border: 1px solid rgba($editFrameColorHov, 0.3);
+
         &:not([s-selected]) {
             &:hover {
                 border: $editFrameBorderHov;

src/plugins/displayLayout/components/text-view.scss

@@ -1,6 +1,8 @@
 .c-text-view {
     display: flex;
-    align-items: stretch;
+    align-items: center; // Vertically center text
+    overflow: hidden;
+    padding: $interiorMargin;
 
     .c-frame & {
         @include abs();