Update umb-property-actions toggle button (#8565)

umbraco · Aug 31, 2020 · 6f5806c · 6f5806c
1 parent a630952
commit 6f5806c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 59 deletions.
diff --git a/...y-actions/umbpropertyactions.component.js → .../property/umbpropertyactions.component.js b/...y-actions/umbpropertyactions.component.js → .../property/umbpropertyactions.component.js
@@ -5,50 +5,77 @@
      * A component to render the property action toggle
      */
 
-    function umbPropertyActionsController(keyboardService) {
+    function umbPropertyActionsController(keyboardService, localizationService) {
 
         var vm = this;
 
         vm.isOpen = false;
+        vm.labels = {
+            openText: "Open Property Actions",
+            closeText: "Close Property Actions"
+        };
+
+        vm.open = open;
+        vm.close = close;
+        vm.toggle = toggle;
+        vm.executeAction = executeAction;
+
+        vm.$onDestroy = onDestroy;
+        vm.$onInit = onInit;
 
         function initDropDown() {
             keyboardService.bind("esc", vm.close);
         }
+
         function destroyDropDown() {
             keyboardService.unbind("esc");
         }
 
-        vm.toggle = function() {
+        function toggle() {
             if (vm.isOpen === true) {
                 vm.close();
             } else {
                 vm.open();
             }
         }
-        vm.open = function() {
+
+        function open() {
             vm.isOpen = true;
             initDropDown();
         }
-        vm.close = function() {
+
+        function close() {
             vm.isOpen = false;
             destroyDropDown();
         }
 
-        vm.executeAction = function(action) {
+        function executeAction(action) {
             action.method();
             vm.close();
         }
 
-        vm.$onDestroy = function () {
+        function onDestroy() {
             if (vm.isOpen === true) {
                 destroyDropDown();
             }
         }
-
+
+        function onInit() {
+
+            var labelKeys = [
+                "propertyActions_tooltipForPropertyActionsMenu",
+                "propertyActions_tooltipForPropertyActionsMenuClose"
+            ]
+
+            localizationService.localizeMany(labelKeys).then(values => {
+                vm.labels.openText = values[0];
+                vm.labels.closeText = values[1];
+            });
+        }
     }
 
     var umbPropertyActionsComponent = {
-        templateUrl: 'views/components/property/property-actions/umb-property-actions.html',
+        templateUrl: 'views/components/property/umb-property-actions.html',
         bindings: {
             actions: "<"
         },

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-actions.less
@@ -1,17 +1,11 @@
-.umb-property-actions {
-    display: inline;
-}
-
-.umb-property-actions__toggle,
-.umb-property-actions__menu-open-toggle {
+.umb-property-actions__toggle {
     position: relative;
     display: flex;
     flex: 0 0 auto;
     padding: 6px 6px;
     text-align: center;
     cursor: pointer;
     border-radius: 3px;
-
     background-color: @ui-action-hover;
 
     i {
@@ -32,27 +26,20 @@
         }
     }
 }
-.umb-property-actions__menu-open-toggle {
-    position: absolute;
-    z-index:1;
-    outline: none;// this is not acceccible by keyboard, since we use the .umb-property-actions__toggle for that.
-
-    top: -15px;
-    border-radius: 3px 3px 0 0;
 
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-
-    border: 1px solid @dropdownBorder;
-
-    border-bottom: 1px solid @gray-9;
-
-    .box-shadow(0 5px 20px rgba(0,0,0,.3));
-
-    background-color: @white;
+.umb-property-actions {
+    display: inline;
 
+    &.-open {
+        .umb-property-actions__toggle {
+            background-color: @white;
+            border-radius: 3px 3px 0 0;
+            border: 1px solid @dropdownBorder;
+            border-bottom: 1px solid @gray-9;
+            .box-shadow(0 5px 20px rgba(0,0,0,.3));
+        }
+    }
 }
-
 .umb-property .umb-property-actions {
     float: left;
 }
@@ -66,32 +53,22 @@
 .umb-property .umb-property-actions__toggle:focus {
     opacity: 1;
 }
+
 // Revert-style-hack that ensures that we only show property-actions on properties that are directly begin hovered.
 .umb-property:hover .umb-property:not(:hover) .umb-property-actions__toggle {
     opacity: 0;
 }
 
 .umb-property-actions__menu {
-
     position: absolute;
     z-index: 1000;
-
     display: block;
-
     float: left;
     min-width: 160px;
     list-style: none;
 
     .umb-contextmenu {
-
         border-top-left-radius: 0;
-        margin-top:-2px;
-
-    }
-
-    .umb-contextmenu-item > button {
-
-        z-index:2;// need to stay on top of menu-toggle-open shadow.
-
+        margin-top: 0;
     }
 }
diff --git a/...roperty-actions/umb-property-actions.html → ...onents/property/umb-property-actions.html b/...roperty-actions/umb-property-actions.html → ...onents/property/umb-property-actions.html
@@ -1,24 +1,13 @@
-<div class="umb-property-actions" ng-if="vm.actions.length > 0">
+<div class="umb-property-actions" ng-class="{ '-open': vm.isOpen }" ng-if="vm.actions.length > 0">
+
     <umb-button-ellipsis
         css-class="umb-outline umb-property-actions__toggle"
         action="vm.toggle()"
         mode="small"
-        text="Open Property Actions"
-        label-key="propertyActions_tooltipForPropertyActionsMenu"
-        >
+        text="{{vm.isOpen ? vm.labels.closeText : vm.labels.openText}}">
     </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()">
-
-        <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">