show composition icon on inherited tabs

src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js

@@ -5,10 +5,12 @@
    * A component to render the content type tab
    */
 
-  function umbContentTypeTabController() {
+  function umbContentTypeTabController($timeout) {
 
     const vm = this;
 
+    vm.compositionLabelIsVisible = false;
+
     vm.click = click;
     vm.removeTab = removeTab;
     vm.whenFocusName = whenFocusName;
@@ -16,6 +18,10 @@
     vm.changeSortOrderValue = changeSortOrderValue;
     vm.changeName = changeName;
     vm.clickComposition = clickComposition;
+    vm.mouseenter = mouseenter;
+    vm.mouseleave = mouseleave;
+    
+    let timeout = null;
 
     function click () {
       if (vm.onClick) {
@@ -52,12 +58,28 @@
         vm.onChangeName({ key: vm.tab.key, name: vm.tab.name });
       }
     }
+
     function clickComposition (documentTypeId) {
       if (vm.onClickComposition) {
         vm.onClickComposition({documentTypeId: documentTypeId});
       }
     }
 
+    function mouseenter () {
+      if (vm.tab.inherited) {
+        vm.compositionLabelIsVisible = true;
+        $timeout.cancel(timeout);
+      }
+    }
+
+    function mouseleave () {
+      if (vm.tab.inherited) {
+        timeout = $timeout(() => {
+          vm.compositionLabelIsVisible = false;
+        }, 300);
+      }
+    }
+
   }
 
   const umbContentTypeTabComponent = {

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -133,10 +133,6 @@
     .umb-group-builder__tab-remove {
       display: block;
     }
-
-    .umb-group-builder__tab-inherited-label{
-        visibility: visible;
-    }
   }
 
   .ui-droppable-hover & {
@@ -198,6 +194,8 @@
   }
 
   &.is-inherited {
+    padding-right: 22px;
+
     .umb-group-builder__group-title-input {
       padding: 0;
     }
@@ -276,24 +274,38 @@
 }
 
 .umb-group-builder__tab-inherited-label {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1;
+  display: block;
+  white-space: nowrap;
+  padding: 0 4px;
+  color: @black;
+  font-size: 12px;
+  background-color: @gray-8;
+  border-radius: @baseBorderRadius;
+  margin-top: 5px;
+
+  &:after {
+    bottom: 100%;
+    left: 10px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
     position: absolute;
-    z-index: 1;
-    display: block;
-    top: 2px;
-    left: 0;
-    white-space: nowrap;
-    margin-left: 4px;
-    padding: 0 4px;
-    visibility: hidden;
-    
-    color: black;
-    font-size: 12px;
-    background-color: #d8d7d9;
-    border-radius: 3px;
+    pointer-events: none;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: @gray-8;
+    border-width: 4px;
+    margin-left: -4px;
+  }
 
   button {
     font-size: 12px;
-    color: @gray-6;
+    color: @black;
+    text-decoration: underline;
   }
 }
 

src/Umbraco.Web.UI.Client/src/views/components/contenttype/umb-content-type-tab.html

@@ -7,9 +7,11 @@
         'is-deletable': vm.allowRemove,
         'umb-group-builder__tab-handle -sortable': vm.sorting && !vm.tab.inherited,
         'has-error': vm.tab.hasError }"
-    val-tab="vm.tab">
+    val-tab="vm.tab"
+    ng-mouseenter="vm.mouseenter()"
+    ng-mouseleave="vm.mouseleave()">
   <div>
-      <div class="umb-group-builder__tab-inherited-label" ng-if="vm.tab.inherited">
+      <div class="umb-group-builder__tab-inherited-label" ng-if="vm.compositionLabelIsVisible">
           <localize key="contentTypeEditor_inheritedFrom"></localize>: {{ vm.tab.inheritedFromName }}
           <span ng-repeat="contentTypeName in vm.tab.parentTabContentTypeNames">
               <button type="button" class="btn-link btn-small p0" ng-click="vm.clickComposition(vm.tab.parentTabContentTypes[$index])">{{ contentTypeName }}</button>
@@ -17,7 +19,8 @@
           </span>
       </div>
       <div class="umb-group-builder__tab-title-wrapper">
-          <i class="umb-group-builder__tab-title-icon icon-navigation" ng-if="vm.sorting && !vm.tab.inherited"></i>
+            <i class="umb-group-builder__tab-title-icon icon-navigation" ng-if="vm.sorting && !vm.tab.inherited"></i>
+            <i class="umb-group-builder__tab-title-icon icon-merge" ng-if="vm.tab.inherited"></i>
             <ng-form name="tabNameForm" data-element="tab-name">
                 <div class="umb-group-builder__tab-name" ng-if="vm.tab.inherited" title="{{vm.tab.alias}}">{{ vm.tab.name }}</div>
                 <input
@@ -40,8 +43,8 @@
                     required />
 
                 <div class="umb-group-builder__tab-val-message" ng-messages="tabNameForm.tabName.$error" show-validation-on-submit>
-                    <div class="umb-validation-label -arrow-top" ng-message="valServerField">{{tabNameForm.tabName.errorMsg}}</div>
-                    <div class="umb-validation-label -arrow-top" ng-message="required"><localize key="required"></localize></div>
+                    <div class="umb-validation-label" ng-message="valServerField">{{tabNameForm.tabName.errorMsg}}</div>
+                    <div class="umb-validation-label" ng-message="required"><localize key="required"></localize></div>
                 </div>
             </ng-form>