umb-ellispsis-component: Fix visuals when used in the content app section (#8500)

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttonellipsis.directive.js

@@ -29,6 +29,7 @@
 @param {boolean} showText Set to <code>true</code> to show the text. <code>false</code> by default
 @param {domElement} element Highlights a DOM-element (HTML-selector)
 @param {string} state Set the initial state of the component. To have it hidden use <code>hidden</code>
+@param {string} mode Set the mode, which decides how to style the component. Currently only "default" and "tab" are supported
 **/
 
 (function () {
@@ -82,7 +83,8 @@
             color: "@?",
             showText: "<?",
             element: "@?",
-            state: "@?"
+            state: "@?",
+            mode: "@?"
         }
     };
 

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-ellipsis.less

@@ -15,6 +15,7 @@
         justify-content: center;
     }
 
+    .umb-button-ellipsis--tab,
     .umb-tour-is-visible .umb-tree &,
     &:hover,
     &:focus{
@@ -30,9 +31,18 @@
         }
     }
 
+    &__content {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
     &__icon {
         color: inherit;
         flex-basis: 100%;
+
+        .umb-button-ellipsis--tab & {
+            margin: 0 0 7px
+        }
     }
 
     &__text {
@@ -40,5 +50,13 @@
         font-size: 12px;
         line-height: 1em;
         flex-basis: 100%;
+
+        .umb-button-ellipsis--tab & {
+            position: absolute;
+            right: 0;
+            left: 0;
+            bottom: 13px;
+            margin: 0 auto;
+        }
     }
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less

@@ -40,7 +40,7 @@
         }
 
         &.is-active {
-            color: @ui-light-active-type;
+            color: @ui-light-active-type !important;
 
             &::before {
                 opacity: 1;

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-ellipsis.html

@@ -3,8 +3,10 @@
     data-element="{{vm.element}}"
     class="btn-reset umb-button-ellipsis {{vm.cssClass}}"
     style="color:{{vm.color}};"
-    ng-class="{'umb-button-ellipsis--hidden': vm.state === 'hidden', 'show-text': vm.showText}"
+    ng-class="{'umb-button-ellipsis--hidden': vm.state === 'hidden', 'show-text': vm.showText, 'umb-button-ellipsis--tab' : vm.mode === 'tab'}"
     ng-click="vm.clickButton($event)">
-    <span class="umb-button-ellipsis__icon" aria-hidden="true">&bull;&bull;&bull;</span>
-    <span class="umb-button-ellipsis__text" ng-class="{'sr-only': vm.showText !== true}">{{vm.text}}</span>
+    <span class="umb-button-ellipsis__content">
+        <span class="umb-button-ellipsis__icon" aria-hidden="true">&bull;&bull;&bull;</span>
+        <span class="umb-button-ellipsis__text" ng-class="{'sr-only': vm.showText !== true}">{{vm.text}}</span>
+    </span>
 </button>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html

@@ -22,6 +22,8 @@
                 color="#1b264f"
                 text="{{moreButton.name}}"
                 show-text="true"
+                mode="tab"
+                css-class="umb-sub-views-nav-item__action umb-outline umb-outline--thin {{moreButton.active ? 'is-active' : ''}}"
                 >
             </umb-button-ellipsis>