From 274d202f2ef5f446ea1ea5309dca432ed559f2d0 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 22 Mar 2021 19:24:59 +0100
Subject: [PATCH 1/6] Update icons to use <umb-icon> component

---
 .../listview/includeproperties.prevalues.html        |  4 ++--
 .../propertyeditors/listview/layouts.prevalues.html  | 12 +++++++-----
 .../src/views/propertyeditors/listview/listview.html |  1 -
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/includeproperties.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/includeproperties.prevalues.html
index 42597f0c8201..7d863f6730c9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/includeproperties.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/includeproperties.prevalues.html
@@ -27,7 +27,7 @@
             <tbody ui-sortable="sortableOptions" ng-model="model.value">
                 <tr ng-repeat="val in model.value">
                     <td>
-                        <i class="icon icon-navigation handle" aria-hidden="true" aria-label="Sort"></i>
+                        <umb-icon icon="icon-navigation" class="icon-navigation icon handle" aria-label="Sort"></umb-icon>
                     </td>
                     <td>
                        <div class="list-view-layout__name flex-column content-start">
@@ -54,7 +54,7 @@
                     </td>
                     <td>
                         <button type="button" class="btn-icon" ng-click="removeField(val)" aria-label="Remove">
-                            <i class="icon-trash" aria-hidden="true"></i>
+                            <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
                         </button>
                     </td>
                 </tr>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
index 4527458d163a..f6cfb54fcb9e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
@@ -6,18 +6,20 @@
 
            <div class="list-view-layout" ng-repeat="layout in model.value">
 
-               <i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>
+               <umb-icon icon="icon-navigation" class="icon-navigation list-view-layout__sort-handle" aria-label="Sort"></umb-icon>
 
                <div class="list-view-layout__icon-wrapper">
 
                    <button ng-if="layout.isSystem !== 1" type="button" class="btn-reset" ng-click="vm.openIconPicker(layout)" umb-auto-focus>
                        <span class="list-view-layout__icon">
-                           <i class="{{layout.icon}}" aria-hidden="true"></i>
+                           <umb-icon icon="{{layout.icon}}" class="{{layout.icon}}"></umb-icon>
                        </span>
                    </button>
 
-                   <div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
-                       <i class="{{layout.icon}}" aria-hidden="true"></i>
+                   <div ng-if="layout.isSystem === 1">
+                       <span class="list-view-layout__icon">
+                            <umb-icon icon="{{layout.icon}}" class="{{layout.icon}}"></umb-icon>
+                       </span>
                    </div>
 
                </div>
@@ -37,7 +39,7 @@
 
                    <div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
                        <button type="button" class="btn-icon" ng-click="vm.showPrompt(layout)" aria-label="Remove">
-                           <i class="icon-trash" aria-hidden="true"></i>
+                           <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
                        </button>
                        <umb-confirm-action ng-if="layout.deletePrompt"
                                            direction="left"
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index e72b81b0193e..1f66d324dfb8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -57,7 +57,6 @@
                                    {{::contentType.name}} <span ng-show="contentType.blueprints" style="text-transform: lowercase;">(<localize key="blueprints_blankBlueprint">blank</localize>)</span>
                                </button>
 
-
                                <button type="button" ng-repeat="blueprint in contentType.blueprints track by blueprint.id | orderBy:'name':false" ng-click="createFromBlueprint(entityType, contentType.alias, blueprint.id)">
                                    &nbsp;&nbsp;<i class="{{::contentType.icon}}" aria-hidden="true"></i>
                                    {{::blueprint.name}}

From 33461145c976854c696a41ed6901b2c79932c4ce Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 22 Mar 2021 19:34:35 +0100
Subject: [PATCH 2/6] Simplify markup and use disabled button

---
 src/Umbraco.Web.UI.Client/src/less/buttons.less | 17 ++++++++++++-----
 .../listview/layouts.prevalues.html             | 12 +++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less
index c446a0242400..d1a426f81837 100644
--- a/src/Umbraco.Web.UI.Client/src/less/buttons.less
+++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less
@@ -65,15 +65,22 @@
 // --------------------------------------------------
 
 .btn-reset {
-	padding: 0;
-	margin: 0;
-	border: none;
+    padding: 0;
+    margin: 0;
+    border: none;
     background: none;
-	color: currentColor;
+    color: currentColor;
     font-family: @baseFontFamily;
     font-size: @baseFontSize;
     line-height: @baseLineHeight;
-	cursor: pointer;
+    cursor: pointer;
+
+    // Disabled state
+    &.disabled,
+    &[disabled],
+    &:disabled:hover {
+        cursor: default;
+    }
 }
     
 // Button Sizes
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
index f6cfb54fcb9e..f905c4accc60 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
@@ -10,18 +10,16 @@
 
                <div class="list-view-layout__icon-wrapper">
 
-                   <button ng-if="layout.isSystem !== 1" type="button" class="btn-reset" ng-click="vm.openIconPicker(layout)" umb-auto-focus>
+                   <button type="button"
+                           class="btn-reset"
+                           ng-disabled="layout.isSystem === 1"
+                           ng-click="vm.openIconPicker(layout)"
+                           umb-auto-focus="layout.isSystem !== 1">
                        <span class="list-view-layout__icon">
                            <umb-icon icon="{{layout.icon}}" class="{{layout.icon}}"></umb-icon>
                        </span>
                    </button>
 
-                   <div ng-if="layout.isSystem === 1">
-                       <span class="list-view-layout__icon">
-                            <umb-icon icon="{{layout.icon}}" class="{{layout.icon}}"></umb-icon>
-                       </span>
-                   </div>
-
                </div>
 
                <div class="list-view-layout__name">

From af7fd8076f956655d0f4230ab09211e15ab32052 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 22 Mar 2021 19:40:24 +0100
Subject: [PATCH 3/6] Use move cursor style on sortable handle

---
 src/Umbraco.Web.UI.Client/src/less/main.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 31bb8484c4a4..66afbfd73f2e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -402,6 +402,10 @@ table thead button:focus{
 
 /* UI interactions */
 
+.ui-sortable-handle {
+    cursor: move;
+}
+
 .umb-table tbody.ui-sortable tr
 {
     cursor:pointer;

From 02e35945a7680e6bfb3d3ac0121f6e334fb1d5a8 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 22 Mar 2021 19:50:49 +0100
Subject: [PATCH 4/6] Add class for action column

---
 .../src/views/propertyeditors/listview/layouts.prevalues.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
index f905c4accc60..5a20e2e4ac35 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
@@ -32,7 +32,7 @@
                    <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
                </div>
 
-               <div>
+               <div class="list-view-layout__action">
                    <umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
 
                    <div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">

From 9b34a1e90c0551e12de4ad163b9e6f167034b873 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 22 Mar 2021 19:57:04 +0100
Subject: [PATCH 5/6] Update setting auto focus

---
 .../src/views/propertyeditors/listview/layouts.prevalues.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
index 5a20e2e4ac35..295345a8278b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
@@ -14,7 +14,7 @@
                            class="btn-reset"
                            ng-disabled="layout.isSystem === 1"
                            ng-click="vm.openIconPicker(layout)"
-                           umb-auto-focus="layout.isSystem !== 1">
+                           umb-auto-focus="{{layout.isSystem !== 1}}">
                        <span class="list-view-layout__icon">
                            <umb-icon icon="{{layout.icon}}" class="{{layout.icon}}"></umb-icon>
                        </span>

From 88440ba5a4b1e297d6c7321fc0dcb1e230b2fe38 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 22 Mar 2021 20:24:03 +0100
Subject: [PATCH 6/6] Increase font size of umb-panel-header-icon

---
 src/Umbraco.Web.UI.Client/src/less/panel.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less
index a036267c8587..cc87a0edf54e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/panel.less
+++ b/src/Umbraco.Web.UI.Client/src/less/panel.less
@@ -349,6 +349,7 @@
 
 .umb-panel-header-icon {
   cursor: pointer;
+  font-size: 2rem;
   margin-right: 5px;
   margin-top: -6px;
   height: 50px;