c-object-label changes brought over from topic-conditionals (#2823)

- SCSS mods;
- Markup in select objects

src/plugins/tabs/components/tabs.vue

@@ -40,10 +40,10 @@
     >
         <div
             v-if="currentTab"
-            class="c-tabs-view__object-name l-browse-bar__object-name--w"
+            class="c-tabs-view__object-name c-object-label l-browse-bar__object-name--w"
             :class="currentTab.type.definition.cssClass"
         >
-            <div class="l-browse-bar__object-name">
+            <div class="l-browse-bar__object-name c-object-label__name">
                 {{ currentTab.domainObject.name }}
             </div>
         </div>

src/ui/components/ObjectFrame.vue

@@ -28,12 +28,12 @@
     }"
 >
     <div class="c-so-view__header">
-        <div
+        <div class="c-object-label"
-            class="c-so-view__header__icon"
+             :class="cssClass"
-            :class="cssClass"
+        >
-        ></div>
+            <div class="c-object-label__name">
-        <div class="c-so-view__header__name">
+                {{ domainObject && domainObject.name }}
-            {{ domainObject && domainObject.name }}
+            </div>
         </div>
         <context-menu-drop-down
             :object-path="objectPath"

src/ui/components/object-label.scss

@@ -1,28 +1,42 @@
 .c-object-label {
     // <a> tag and draggable element that holds type icon and name.
     // Used mostly in trees and lists
-    border-radius: $controlCr;
     display: flex;
     align-items: center;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     overflow: hidden;
-    padding: $interiorMarginSm 1px;
     white-space: nowrap;
 
     &__name {
         @include ellipsize();
         display: inline;
-        color: $colorItemTreeFg;
+    }
+
+    &__type-icon,
+    &:before {
+        // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+        display: block;
+        flex: 0 0 auto;
+        font-size: 1.1em;
+        opacity: 0.6;
+        margin-right: $interiorMargin;
+    }
+}
+
+.c-tree .c-object-label {
+    border-radius: $controlCr;
+    padding: $interiorMarginSm 1px;
+
+    &__name {
+        display: inline;
         width: 100%;
     }
 
     &__type-icon {
-        // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
-        display: block;
-        flex: 0 0 auto;
-        font-size: 1.3em;
-        margin-right: $interiorMarginSm;
         color: $colorItemTreeIcon;
+        font-size: 1.25em;
+        margin-right: $interiorMarginSm;
+        opacity: 1;
         width: $treeTypeIconW;
     }
 }

src/ui/layout/BrowseBar.vue

@@ -7,11 +7,11 @@
             @click="goToParent"
         ></button>
         <div
-            class="l-browse-bar__object-name--w"
+            class="l-browse-bar__object-name--w c-object-label"
             :class="type.cssClass"
         >
             <span
-                class="l-browse-bar__object-name c-input-inline"
+                class="l-browse-bar__object-name c-object-label__name c-input-inline"
                 contenteditable
                 @blur="updateName"
                 @keydown.enter.prevent