From 27ffa68ddf27389ad8b5ecc08f20686dca8ce7c7 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 27 Jul 2020 17:48:35 +0200
Subject: [PATCH] Hide action button in tree (#8481)

---
 .../buttons/umb-button-ellipsis.less          |  4 ++--
 .../src/less/components/tree/umb-tree.less    | 20 ++++++++++---------
 .../views/components/tree/umb-tree-item.html  |  4 ++--
 .../components/tree/umb-tree-search-box.html  |  4 ++--
 .../src/views/components/tree/umb-tree.html   |  8 ++++----
 .../views/components/umb-mini-list-view.html  |  4 ++--
 6 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-ellipsis.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-ellipsis.less
index c8a8554430..748f6fd94f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-ellipsis.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-ellipsis.less
@@ -1,7 +1,7 @@
 .umb-button-ellipsis{
     padding: 0 5px;
     text-align: center;
-    margin: 0 10px 0 auto;
+    margin: 0 auto;
     cursor: pointer;
     border-radius: @baseBorderRadius;
     color: black;
@@ -9,7 +9,7 @@
     opacity: 0.8;
     transition: opacity .3s ease-out;
 
-    &.show-text{
+    &.show-text {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index cab8ef339e..9740cb59f3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -75,8 +75,8 @@ body.touch .umb-tree {
     
     &:hover {
         background: @ui-option-hover;
-        
         color: @ui-option-type-hover;
+
         a {
             color: @ui-option-type-hover;
         }
@@ -85,8 +85,8 @@ body.touch .umb-tree {
             position: relative;
             width: auto;
             height: auto;
-            margin: 0 10px 0 auto;
-            padding: 9px 5px;
+            margin: 0 5px 0 auto;
+            padding: 7px 5px;
             overflow: visible;
             clip: auto;
         }
@@ -175,9 +175,9 @@ body.touch .umb-tree {
     display: flex;
     flex: 0 0 auto;
     justify-content: flex-end;
-    padding: 9px 5px;
+    padding: 7px 5px;
     text-align: center;
-    margin: 0 10px 0 auto;
+    margin: 0 5px 0 auto;
     cursor: pointer;
     border-radius: @baseBorderRadius;
 
@@ -188,18 +188,20 @@ body.touch .umb-tree {
         display: inline-block;
         margin: 0 2px 0 0;
         background: @ui-active-type;
-        
+
         &:last-child {
             margin: 0;
         }
     }
+
     &:hover {
         background: rgba(255, 255, 255, .5);
+
         i {
             background: @ui-active-type-hover;
         }
     }
-    
+
     // NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css
     &.sr-only--hoverable:hover,
     &.sr-only--focusable:focus {
@@ -207,9 +209,9 @@ body.touch .umb-tree {
         display: flex;
         flex: 0 0 auto;
         justify-content: flex-end;
-        padding: 9px 5px;
+        padding: 7px 5px;
         text-align: center;
-        margin: 0 10px 0 auto;
+        margin: 0 auto;
         cursor: pointer;
         border-radius: 3px;
     }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
index 5697b4f96a..ad9d1a8807 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
@@ -13,14 +13,14 @@
         <span class="umb-tree-item__annotation"></span>
         <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
 
-        <!-- NOTE: These are the 'option' elipses -->
+        <!-- NOTE: These are the 'option' ellipsis -->
         <umb-button-ellipsis
             ng-if="::node.menuUrl"
             element="tree-item-options"
             action="options(node, $event)"
             text="{{optionsText}} {{node.name}}"
             state="hidden"
-            >
+            class="umb-options">
         </umb-button-ellipsis>
 
         <umb-loader ng-show="node.loading" position="bottom" class="umb-tree-item__loader"></umb-loader>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html
index 217489f14c..2c5605c973 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-box.html
@@ -1,6 +1,6 @@
 <div class="form-search">
-    <i class="icon icon-search" ng-if="showSearch == 'false'"></i>
-    <a class="icon icon-arrow-left" ng-if="showSearch == 'true'" title="Back" ng-click="hideSearch()"></a>
+    <i class="icon icon-search" ng-if="showSearch == 'false'" aria-hidden="true"></i>
+    <button type="button" class="btn-reset icon icon-arrow-left" ng-if="showSearch == 'true'" localize="title" title="@general_back" ng-click="hideSearch()"></button>
     <input type="text"
            ng-model="term"
            class="umb-search-field search-query -full-width-input"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
index 32c304fcbc..1f1e8efa58 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
@@ -14,9 +14,9 @@
                 action="options(tree.root, $event)"
                 text="Open context node for {{tree.name}}"
                 state="hidden"
+                class="umb-options"
                 ng-hide="tree.root.isContainer || !tree.root.menuUrl"
-                ng-swipe-right="options(tree.root, $event)"
-                >
+                ng-swipe-right="options(tree.root, $event)">
             </umb-button-ellipsis>
 
         </div>
@@ -48,9 +48,9 @@
                 action="options(group, $event)"
                 text="Open context node for {{group.name}}"
                 state="hidden"
+                class="umb-options"
                 ng-hide="group.isContainer || !group.menuUrl"
-                ng-swipe-right="options(group, $event)"
-                >
+                ng-swipe-right="options(group, $event)">
             </umb-button-ellipsis>
         </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
index d66e7f7f90..d9d8511b47 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
@@ -11,10 +11,10 @@
 
         <div class="umb-mini-list-view__breadcrumb">
 
-            <a ng-if="showBackButton()" href="" class="umb-mini-list-view__back" ng-click="exitMiniListView()">
+            <button type="button" ng-if="showBackButton()" class="btn-reset umb-mini-list-view__back" ng-click="exitMiniListView()">
                 <i class="icon-arrow-left umb-mini-list-view__back-icon" aria-hidden="true"></i>
                 <span class="umb-mini-list-view__back-text"><localize key="general_back">Back</localize></span> /
-            </a>
+            </button>
 
             <umb-breadcrumbs
                 ng-if="breadcrumb && breadcrumb.length > 0"