Fix is-missing layout problem #3194 (#3195)

- Fixes related to `is-missing` including fixes for Display Layout
alphanumeric views and Tabs view tabs;

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

@@ -27,13 +27,14 @@
         border: 1px solid transparent;
     }
 
-    &.is-missing {
-        @include isMissing($absPos: true);
-        border: $borderMissing;
+    @include isMissing($absPos: true);
 
-        .is-missing__indicator {
-            top: 0;
-            left: 0;
-        }
+    .is-missing__indicator {
+        top: 0;
+        left: 0;
+    }
+
+    &.is-missing {
+        border: $borderMissing;
     }
 }

src/plugins/tabs/components/tabs.vue

@@ -22,21 +22,24 @@
         <button
             v-for="(tab,index) in tabsList"
             :key="index"
-            class="c-tabs-view__tab c-tab c-object-label"
+            class="c-tab c-tabs-view__tab"
             :class="{
-                'is-current': isCurrent(tab),
-                'is-missing': tab.domainObject.status === 'missing'
+                'is-current': isCurrent(tab)
             }"
             @click="showTab(tab, index)"
         >
-            <div class="c-object-label__type-icon"
-                 :class="tab.type.definition.cssClass"
+            <div class="c-object-label"
+                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
             >
-                <span class="is-missing__indicator"
-                      title="This item is missing"
-                ></span>
+                <div class="c-object-label__type-icon"
+                     :class="tab.type.definition.cssClass"
+                >
+                    <span class="is-missing__indicator"
+                          title="This item is missing"
+                    ></span>
+                </div>
+                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
             </div>
-            <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
         </button>
     </div>
     <div

src/styles/_mixins.scss

@@ -123,7 +123,7 @@
     //pointer-events: none; // Don't think we can do this, as disables title hover on icon element
 
     .is-missing__indicator {
-        display: block;
+        display: none ;
         text-shadow: $colorBodyBg 0 0 2px;
         color: $colorAlert;
         font-family: symbolsfont;
@@ -139,6 +139,9 @@
             z-index: 3;
         }
     }
+
+    &.is-missing .is-missing__indicator,
+    .is-missing .is-missing__indicator { display: block !important; }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {