Convert menu actions to use umb-button-ellipsis component (#8503)

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

@@ -29,7 +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
+@param {string} mode Set the mode, which decides how to style the component. "small" and "tab" are currently supported
 **/
 
 (function () {

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

@@ -9,6 +9,14 @@
     opacity: 0.8;
     transition: opacity .3s ease-out;
 
+    &--absolute {
+        position: absolute;
+    }
+
+    &--small {
+        height: 15px;
+    }
+
     &.show-text {
         display: flex;
         flex-wrap: wrap;
@@ -41,7 +49,13 @@
         flex-basis: 100%;
 
         .umb-button-ellipsis--tab & {
-            margin: 0 0 7px
+            margin: 0 0 7px;
+         }
+
+        .umb-button-ellipsis--small & {
+            font-size: 8px;
+            position: relative;
+            top: -2px;
         }
     }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less

@@ -85,7 +85,7 @@
     .umb-contextmenu {
 
         border-top-left-radius: 0;
-        margin-top:1px;
+        margin-top:-2px;
 
     }
 

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

@@ -3,7 +3,7 @@
     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, 'umb-button-ellipsis--tab' : vm.mode === 'tab'}"
+    ng-class="{'umb-button-ellipsis--hidden': vm.state === 'hidden', 'show-text': vm.showText, 'umb-button-ellipsis--tab' : vm.mode === 'tab', 'umb-button-ellipsis--small' : vm.mode === 'small'}"
     ng-click="vm.clickButton($event)">
     <span class="umb-button-ellipsis__content">
         <span class="umb-button-ellipsis__icon" aria-hidden="true">&bull;&bull;&bull;</span>

src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html

@@ -1,11 +1,24 @@
 <div class="umb-property-actions" ng-if="vm.actions.length > 0">
-    <button type="button" class="btn-reset umb-outline umb-property-actions__toggle" ng-click="vm.toggle()" localize="title" title="propertyActions_tooltipForPropertyActionsMenu"><i></i><i></i><i></i></button>
+    <umb-button-ellipsis
+        css-class="umb-outline umb-property-actions__toggle"
+        action="vm.toggle()"
+        mode="small"
+        text="Open Property Actions"
+        label-key="propertyActions_tooltipForPropertyActionsMenu"
+        >
+    </umb-button-ellipsis>
 
     <div class="umb-property-actions__menu" role="menu" ng-if="vm.isOpen" on-outside-click="vm.close()" on-close="vm.close()" deep-blur="vm.close()">
-        <button
-            class="umb-property-actions__menu-open-toggle"
-            ng-click="vm.close()" tabindex="-1"><i></i><i></i><i></i>
-        </button>
+
+        <umb-button-ellipsis
+            css-class="umb-button-ellipsis--absolute umb-property-actions__menu-open-toggle"
+            action="vm.close()"
+            mode="small"
+            text="Close Property Actions"
+            label-key="propertyActions_tooltipForPropertyActionsMenuClose"
+            >
+        </umb-button-ellipsis>
+
         <ul class="umb-contextmenu">
             <li ng-repeat="action in vm.actions" role="menuitem" class="umb-contextmenu-item" ng-class="{'-opens-dialog': action.opensDialog}">
                 <button type="button" class="btn-reset umb-outline" ng-click="vm.executeAction(action)" ng-disabled="action.isDisabled === true">

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -2311,7 +2311,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="labelForRemoveAllEntries">Remove all items</key>
   </area>
   <area alias="propertyActions">
-    <key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>
+    <key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>
+    <key alias="tooltipForPropertyActionsMenuClose">Close Property Actions</key>
   </area>
   <area alias="nuCache">
     <key alias="wait">Wait</key>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -2336,6 +2336,7 @@ To manage your website, simply open the Umbraco back office and start adding con
   </area>
   <area alias="propertyActions">
     <key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>
+    <key alias="tooltipForPropertyActionsMenuClose">Close Property Actions</key>
   </area>
   <area alias="nuCache">
     <key alias="wait">Wait</key>