From 1880cf38b3c24274f081a6934625b43e758e33c6 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 3 Aug 2020 14:29:19 +0200
Subject: [PATCH 1/6] Move umbPropertyActions controller and remove subfolder
 for view

---
 .../property}/umbpropertyactions.component.js | 22 +++++++++++--------
 .../umb-property-actions.html                 |  7 +++---
 2 files changed, 16 insertions(+), 13 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/{views/components/property/property-actions => common/directives/components/property}/umbpropertyactions.component.js (81%)
 rename src/Umbraco.Web.UI.Client/src/views/components/property/{property-actions => }/umb-property-actions.html (97%)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
similarity index 81%
rename from src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umbpropertyactions.component.js
rename to src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
index b0dc15d6cdab..ecbd527614cf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umbpropertyactions.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
@@ -9,46 +9,50 @@
 
         var vm = this;
 
+        vm.labels = {};
         vm.isOpen = false;
 
+
+
         function initDropDown() {
             keyboardService.bind("esc", vm.close);
         }
+
         function destroyDropDown() {
             keyboardService.unbind("esc");
         }
 
-        vm.toggle = function() {
+        vm.toggle = function () {
             if (vm.isOpen === true) {
                 vm.close();
             } else {
                 vm.open();
             }
-        }
+        };
+
         vm.open = function() {
             vm.isOpen = true;
             initDropDown();
         }
-        vm.close = function() {
+        vm.close = function () {
             vm.isOpen = false;
             destroyDropDown();
-        }
+        };
 
-        vm.executeAction = function(action) {
+        vm.executeAction = function (action) {
             action.method();
             vm.close();
-        }
+        };
 
         vm.$onDestroy = function () {
             if (vm.isOpen === true) {
                 destroyDropDown();
             }
-        }
-        
+        };
     }
 
     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/views/components/property/property-actions/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
similarity index 97%
rename from src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html
rename to src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
index 5d98517a6141..022ab66d2b7b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/property-actions/umb-property-actions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
@@ -1,11 +1,11 @@
 <div class="umb-property-actions" 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"
-        >
+        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()">
@@ -15,8 +15,7 @@
             action="vm.close()"
             mode="small"
             text="Close Property Actions"
-            label-key="propertyActions_tooltipForPropertyActionsMenuClose"
-            >
+            label-key="propertyActions_tooltipForPropertyActionsMenuClose">
         </umb-button-ellipsis>
 
         <ul class="umb-contextmenu">

From a37b400b0d74450e58c269365cc6cb9feae90c40 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 3 Aug 2020 14:42:18 +0200
Subject: [PATCH 2/6] Remove additional close button and toggle open/close text
 on toggle button

---
 .../property/umbpropertyactions.component.js  | 40 +++++++++++++++----
 .../property/umb-property-actions.html        | 12 +-----
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
index ecbd527614cf..3696a526a81d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
@@ -5,14 +5,22 @@
      * A component to render the property action toggle
      */
     
-    function umbPropertyActionsController(keyboardService) {
+    function umbPropertyActionsController(keyboardService, localizationService) {
 
         var vm = this;
 
-        vm.labels = {};
         vm.isOpen = false;
+        vm.labels = {
+            openText: "Open Property Actions",
+            closeText: "Close Property Actions"
+        };
 
+        vm.open = open;
+        vm.close = close;
+        vm.executeAction = executeAction;
 
+        vm.$onDestroy = onDestroy;
+        vm.$onInit = onInit;
 
         function initDropDown() {
             keyboardService.bind("esc", vm.close);
@@ -30,25 +38,41 @@
             }
         };
 
-        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];
+
+                console.log("vm.labels", vm.labels);
+            });
+        }
     }
 
     var umbPropertyActionsComponent = {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
index 022ab66d2b7b..d6c642819f02 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
@@ -4,20 +4,10 @@
         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.openText ? vm.labels.closeText}}">
     </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">

From d9c708832ce6e349245a67a9f763f55fe899bc82 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 3 Aug 2020 14:48:39 +0200
Subject: [PATCH 3/6] Update toggle function

---
 .../components/property/umbpropertyactions.component.js    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
index 3696a526a81d..b4131f53258d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
@@ -17,6 +17,7 @@
 
         vm.open = open;
         vm.close = close;
+        vm.toggle = toggle;
         vm.executeAction = executeAction;
 
         vm.$onDestroy = onDestroy;
@@ -30,13 +31,13 @@
             keyboardService.unbind("esc");
         }
 
-        vm.toggle = function () {
+        function toggle() {
             if (vm.isOpen === true) {
                 vm.close();
             } else {
                 vm.open();
             }
-        };
+        }
 
         function open() {
             vm.isOpen = true;
@@ -46,7 +47,7 @@
         function close() {
             vm.isOpen = false;
             destroyDropDown();
-        };
+        }
 
         function executeAction(action) {
             action.method();

From 5178a2313fba7abd27a2f9c19c90e4c000dda5db Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 3 Aug 2020 14:57:08 +0200
Subject: [PATCH 4/6] Fix open/close text

---
 .../src/views/components/property/umb-property-actions.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
index d6c642819f02..686640c72436 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
@@ -4,7 +4,7 @@
         css-class="umb-outline umb-property-actions__toggle"
         action="vm.toggle()"
         mode="small"
-        text="{{vm.isOpen ? vm.labels.openText ? vm.labels.closeText}}">
+        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()">

From a04ba802e79eac3d523c343dc48d33321542594b Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 3 Aug 2020 14:57:27 +0200
Subject: [PATCH 5/6] Code cleanup

---
 .../components/property/umbpropertyactions.component.js         | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
index b4131f53258d..41dbd9f54741 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js
@@ -70,8 +70,6 @@
             localizationService.localizeMany(labelKeys).then(values => {
                 vm.labels.openText = values[0];
                 vm.labels.closeText = values[1];
-
-                console.log("vm.labels", vm.labels);
             });
         }
     }

From a1ea42665169319b27a120d23ee408d1b18857af Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 30 Aug 2020 16:44:56 +0200
Subject: [PATCH 6/6] Adjust styling of toggle button when context menu is open

---
 .../less/components/umb-property-actions.less | 51 +++++--------------
 .../property/umb-property-actions.html        |  2 +-
 2 files changed, 15 insertions(+), 38 deletions(-)

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
index f86b27af17b4..6b7d22d0b761 100644
--- 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,9 +1,4 @@
-.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;
@@ -11,7 +6,6 @@
     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/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
index 686640c72436..9593c5809fe4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html
@@ -1,4 +1,4 @@
-<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"