From 68e5e5ead833eb80ad7a7bd9f66dd8bbab53ab36 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 30 Jul 2020 15:22:23 +0200
Subject: [PATCH] Use umb-icon in listview layout selector (#8515)

---
 .../components/buttons/umb-button-group.html    | 12 ++++++------
 .../views/components/umb-confirm-action.html    | 12 ++++++------
 .../views/components/umb-groups-builder.html    |  8 +++++---
 .../views/components/umb-layout-selector.html   | 17 +++++++++--------
 .../components/umb-list-view-settings.html      | 12 ++++++++----
 5 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
index a3eadcfbc2..0f3390a244 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
@@ -1,9 +1,9 @@
 <div class="btn-group umb-button-group" ng-class="{ 'dropup': direction === 'up', '-with-button-group-toggle': subButtons.length > 0 }">
 
    <umb-button
+      type="button"
       ng-if="defaultButton"
       alias="{{defaultButton.alias ? defaultButton.alias : 'groupPrimary' }}"
-      type="button"
       action="defaultButton.handler()"
       button-style="{{buttonStyle}}"
       state="state"
@@ -16,9 +16,9 @@
       add-ellipsis={{defaultButton.addEllipsis}}>
    </umb-button>
 
-   <button data-element="button-group-toggle"
+   <button
       type="button"
-      prevent-default
+      data-element="button-group-toggle"
       class="btn btn-{{buttonStyle}} dropdown-toggle umb-button-group__toggle umb-button--{{size}}"
       ng-if="subButtons.length > 0"
       ng-click="toggleDropdown()"
@@ -39,11 +39,11 @@
          ng-class="{'-align-right': float === 'right'}">
       <umb-dropdown-item ng-repeat="subButton in subButtons">
          <button
+            type="button"
             data-element="{{subButton.alias ? 'button-' + subButton.alias : 'button-group-secondary-' + $index }}"
-            type="button" ng-click="executeMenuItem(subButton)"
+            ng-click="executeMenuItem(subButton)"
             hotkey="{{subButton.hotKey}}"
-            hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}"
-            prevent-default>
+            hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}">
                <localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
                <span ng-if="subButton.addEllipsis === 'true'">...</span>
          </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
index ddc237cc34..45781e9d6e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
@@ -1,6 +1,6 @@
 <div class="umb_confirm-action">
-    <button ng-if="onDelete" type="button" class="btn-reset" ng-click="clickButton($event)">
-        <i class="icon-trash" aria-hidden="true"></i>
+    <button ng-if="onDelete" type="button" class="btn-icon" ng-click="clickButton($event)" localize="title" title="@general_delete">
+        <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
         <span class="sr-only">Delete</span>
      </button>
 
@@ -12,15 +12,15 @@
         '-left': direction === 'left'}"
         on-outside-click="clickCancel()" ng-if="show">
 
-        <button type="button" class="umb_confirm-action__overlay-action -confirm btn-reset" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
-            <i class="icon-check" aria-hidden="true"></i>
+        <button type="button" class="btn-reset umb_confirm-action__overlay-action -confirm" ng-click="clickConfirm()" localize="title" title="@buttons_confirmActionConfirm">
+            <umb-icon icon="icon-check" class="icon-check"></umb-icon>
             <span class="sr-only">
                 <localize key="buttons_confirmActionConfirm">Confirm</localize>
             </span>
         </button>
 
-        <button type="button" class="umb_confirm-action__overlay-action -cancel btn-reset" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
-            <i class="icon-delete" aria-hidden="true"></i>
+        <button type="button" class="btn-reset umb_confirm-action__overlay-action -cancel" ng-click="clickCancel()" localize="title" title="@buttons_confirmActionCancel">
+            <umb-icon icon="icon-delete" class="icon-delete"></umb-icon>
             <span class="sr-only">
                 <localize key="buttons_confirmActionCancel">Cancel</localize>
             </span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index b1c15b1140..0067fa1327 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -228,13 +228,13 @@
                                 <div class="umb-group-builder__property-tags -right">
 
                                     <div class="umb-group-builder__property-tag" ng-if="property.inherited">
-                                        <i class="icon icon-merge"></i>
+                                        <umb-icon icon="icon-merge" class="icon-merge"></umb-icon>
                                         <span style="margin-right: 3px"><localize key="contentTypeEditor_inheritedFrom"></localize></span>
                                         {{property.contentTypeName}}
                                     </div>
 
                                     <div class="umb-group-builder__property-tag" ng-if="property.locked">
-                                        <i class="icon icon-lock"></i>
+                                        <umb-icon icon="icon-lock" class="icon-lock"></umb-icon>
                                         <localize key="general_locked"></localize>
                                     </div>
 
@@ -259,7 +259,9 @@
 
                                     <!-- settings for property -->
                                     <div class="umb-group-builder__property-action">
-                                        <button aria-label="Open settings"  class="icon icon-settings" ng-click="editPropertyTypeSettings(property, tab)"></button>
+                                        <button aria-label="Open settings" class="btn-icon" ng-click="editPropertyTypeSettings(property, tab)" localize="title" title="@general_edit">
+                                            <umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
+                                        </button>
                                     </div>
 
                                     <!-- delete property -->
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
index c9bf3b3083..90a33041a8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
@@ -1,7 +1,7 @@
 <div class="umb-layout-selector" ng-show="vm.showLayoutSelector">
 
-   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout umb-outline" ng-click="vm.toggleLayoutDropdown()" prevent-default>
-      <i class="{{ vm.activeLayout.icon }}" aria-hidden="true"></i>
+   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout umb-outline" ng-click="vm.toggleLayoutDropdown()">
+      <umb-icon icon="{{vm.activeLayout.icon}}" class="{{vm.activeLayout.icon}}"></umb-icon>
       <span class="sr-only">
           <localize key="visuallyHiddenTexts_activeListLayout">Active layout:</localize>&nbsp;
           {{vm.activeLayout.name}}
@@ -13,13 +13,14 @@
         on-outside-click="vm.closeLayoutDropdown()"
         deep-blur="vm.leaveLayoutDropdown()">
 
-       <button type="button" prevent-default ng-repeat="layout in vm.layouts | filter:{selected:true} track by $id(layout)"
-            class="umb-layout-selector__dropdown-item"
-            ng-click="vm.pickLayout(layout)"
-            ng-class="{'-active': layout.active }"
-            ng-attr-title="{{layout.name}}">
+       <button type="button"
+               ng-repeat="layout in vm.layouts | filter: { selected: true } track by $id(layout)"
+               class="umb-layout-selector__dropdown-item"
+               ng-click="vm.pickLayout(layout)"
+               ng-class="{'-active': layout.active }"
+               ng-attr-title="{{layout.name}}">
 
-           <i class="{{ layout.icon }} umb-layout-selector__dropdown-item-icon" aria-hidden="true"></i>
+           <umb-icon icon="{{layout.icon}}" class="{{layout.icon}} umb-layout-selector__dropdown-item-icon"></umb-icon>
            <span class="sr-only">{{layout.name}}</span>
        </button>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-list-view-settings.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-list-view-settings.html
index 4e2edbe2a9..0ac68ecbcc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-list-view-settings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-list-view-settings.html
@@ -38,10 +38,14 @@
     </div>    
     <div class="umb-group-builder__property-actions">
         <div class="umb-group-builder__property-action">
-            <button                 
-                class="btn-icon icon-settings"                 
-                ng-click="showSettingsOverlay()"                     
-                aria-label="Edit"></button>
+            <button type="button"
+                    class="btn-reset"
+                    ng-click="showSettingsOverlay()"
+                    aria-label="Edit"
+                    localize="title"
+                    title="@general_edit">
+                <umb-icon icon="icon-settings" class="icon-settings"></umb-icon>
+            </button>
         </div>
     </div>
   </div>