Listview config icons (#10036)

* Update icons to use <umb-icon> component

* Simplify markup and use disabled button

* Use move cursor style on sortable handle

* Add class for action column

* Update setting auto focus

* Increase font size of umb-panel-header-icon

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

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;

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;

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>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html

@@ -6,20 +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>
+                   <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">
-                           <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>
-
                </div>
 
                <div class="list-view-layout__name">
@@ -32,12 +32,12 @@
                    <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">
                        <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"

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}}