From 39da781dacd4ac09549eb0363c536003f0cdb154 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 14 Jul 2020 14:48:29 +0200
Subject: [PATCH] Sort on y-axis in listview config layouts (#8422)

---
 .../views/components/forms/umb-checkbox.html  | 30 ++++----
 .../components/forms/umb-radiobutton.html     |  8 +--
 .../listview/includeproperties.prevalues.html |  6 +-
 .../listview/layouts.prevalues.controller.js  |  3 +-
 .../listview/layouts.prevalues.html           | 70 ++++++++++---------
 5 files changed, 63 insertions(+), 54 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index 5f83d9ae53..3f3ee59c1a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,5 +1,5 @@
 <label class="checkbox umb-form-check umb-form-check--checkbox {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
-    <div class="umb-form-check__symbol">
+    <span class="umb-form-check__symbol">
         <input ng-if="vm.disableDirtyCheck"
             type="checkbox"
             id="{{vm.inputId}}"
@@ -13,29 +13,29 @@
             ng-change="vm.change()"
             no-dirty-check />
 
-            <input ng-if="!vm.disableDirtyCheck"
-                type="checkbox"
-                id="{{vm.inputId}}"
-                name="{{vm.name}}"
-                value="{{vm.value}}"
-                class="umb-form-check__input"
-                val-server-field="{{vm.serverValidationField}}"
-                ng-model="vm.model"
-                ng-disabled="vm.disabled"
-                ng-required="vm.required"
-                ng-change="vm.change()"/>
+        <input ng-if="!vm.disableDirtyCheck"
+            type="checkbox"
+            id="{{vm.inputId}}"
+            name="{{vm.name}}"
+            value="{{vm.value}}"
+            class="umb-form-check__input"
+            val-server-field="{{vm.serverValidationField}}"
+            ng-model="vm.model"
+            ng-disabled="vm.disabled"
+            ng-required="vm.required"
+            ng-change="vm.change()"/>
 
         <span class="umb-form-check__state" aria-hidden="true">
             <span class="umb-form-check__check">
                 <i class="umb-form-check__icon icon-check"></i>
             </span>
         </span>
-    </div>
-    <div class="umb-form-check__info" ng-transclude>
+    </span>
+    <span class="umb-form-check__info" ng-transclude>
 
         <i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
 
         <span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
 
-    </div>
+    </span>
 </label>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
index a34d548ea6..356d99dbe2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
@@ -1,5 +1,5 @@
 <label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
-    <div class="umb-form-check__symbol">
+    <span class="umb-form-check__symbol">
         <input type="radio"
             id="{{vm.inputId}}"
             name="{{vm.name}}"
@@ -13,8 +13,8 @@
         <span class="umb-form-check__state" aria-hidden="true">
             <span class="umb-form-check__check"></span>
         </span>
-    </div>
-    <div class="umb-form-check__info" ng-transclude>
+    </span>
+    <span class="umb-form-check__info" ng-transclude>
         <span class="umb-form-check__text">{{vm.text}}</span>
-    </div>
+    </span>
 </label>
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 c8f2a8050c..42597f0c82 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"></i>
+                        <i class="icon icon-navigation handle" aria-hidden="true" aria-label="Sort"></i>
                     </td>
                     <td>
                        <div class="list-view-layout__name flex-column content-start">
@@ -53,7 +53,9 @@
                         </ng-form>
                     </td>
                     <td>
-                        <button type="button" class="btn-icon icon-trash" ng-click="removeField(val)" aria-label="Remove"></button>
+                        <button type="button" class="btn-icon" ng-click="removeField(val)" aria-label="Remove">
+                            <i class="icon-trash" aria-hidden="true"></i>
+                        </button>
                     </td>
                 </tr>
             </tbody>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js
index a02215f452..acfb114307 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.controller.js
@@ -15,6 +15,8 @@
       vm.focusLayoutName = false;
 
       vm.layoutsSortableOptions = {
+         axis: "y",
+         containment: "parent",
          distance: 10,
          tolerance: "pointer",
          opacity: 0.7,
@@ -41,7 +43,6 @@
          };
 
          $scope.model.value.push(layout);
-
       }
 
       function showPrompt(layout) {
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 15b66d856d..d0348bb708 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
@@ -1,47 +1,53 @@
 <div ng-controller="Umbraco.PrevalueEditors.ListViewLayoutsPreValsController as vm">
 
-   <div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
+   <div class="list-view-layouts-container">
 
-      <div class="list-view-layout" ng-repeat="layout in model.value">
+       <div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
 
-         <i class="icon-navigation list-view-layout__sort-handle" aria-label="Sort"></i>
+           <div class="list-view-layout" ng-repeat="layout in model.value">
 
-         <div>
+               <i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>
 
-            <button ng-if="layout.isSystem !== 1" type="button" ng-click="vm.openIconPicker(layout)" class="list-view-layout__icon" umb-auto-focus>
-               <i class="{{ layout.icon }}"></i>
-            </button>
+               <div>
 
-            <div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
-               <i class="{{ layout.icon }}"></i>
-            </div>
+                   <button ng-if="layout.isSystem !== 1" type="button" ng-click="vm.openIconPicker(layout)" class="list-view-layout__icon" umb-auto-focus>
+                       <i class="{{ layout.icon }}" aria-hidden="true"></i>
+                   </button>
 
-         </div>
+                   <div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
+                       <i class="{{ layout.icon }}" aria-hidden="true"></i>
+                   </div>
 
-         <div class="list-view-layout__name">
-            <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
-            <span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
-            <span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
-         </div>
+               </div>
 
-         <div class="list-view-layout__path">
-            <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
-         </div>
+               <div class="list-view-layout__name">
+                   <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
+                   <span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
+                   <span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
+               </div>
 
-         <div>
-           <umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected" /> 
-            <div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
-                <i class="icon-trash" ng-click="vm.showPrompt(layout)"></i>
-                <umb-confirm-action
-                    ng-if="layout.deletePrompt"
-                    direction="left"
-                    on-confirm="vm.removeLayout($index, layout)"
-                    on-cancel="vm.hidePrompt(layout)">
-                </umb-confirm-action>
-            </div>
-         </div>
+               <div class="list-view-layout__path">
+                   <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
+               </div>
 
-      </div>
+               <div>
+                   <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>
+                       </button>
+                       <umb-confirm-action ng-if="layout.deletePrompt"
+                                           direction="left"
+                                           on-confirm="vm.removeLayout($index, layout)"
+                                           on-cancel="vm.hidePrompt(layout)">
+                       </umb-confirm-action>
+                   </div>
+               </div>
+
+           </div>
+
+       </div>
 
       <button type="button" class="list-view-add-layout" ng-click="vm.addLayout()">Add layout</button>