From 53ca5eec88694f5c062357717b428e429a91f11b Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 11 Feb 2020 20:36:42 +0100
Subject: [PATCH] Adjust child selector sorting (#7582)

* Only add move cursor to sortable child elements

* Don't sort add button

* Add missing docs for onSort

* Change add button to use button element

* Use button element for remove button and add aria-hidden to icons

* Reset styling of button element

* Ensure add button is full width

* Remove unnecessary cursor styles since these now inherit from button element
---
 .../components/umbchildselector.directive.js  | 17 ++++++++-----
 .../less/components/umb-child-selector.less   | 24 ++++++++++---------
 .../views/components/umb-child-selector.html  | 12 ++++++----
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
index a33fd4be53..96ce8735eb 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
@@ -99,13 +99,18 @@ Use this directive to render a ui component for selecting child items to a paren
 @param {string} parentName (<code>binding</code>): The parent name.
 @param {string} parentIcon (<code>binding</code>): The parent icon.
 @param {number} parentId (<code>binding</code>): The parent id.
-@param {callback} onRemove (<code>binding</code>): Callback when the remove button is clicked on an item.
+@param {callback} onRemove (<code>binding</code>): Callback when removing an item.
     <h3>The callback returns:</h3>
     <ul>
         <li><code>child</code>: The selected item.</li>
         <li><code>$index</code>: The selected item index.</li>
     </ul>
-@param {callback} onAdd (<code>binding</code>): Callback when the add button is clicked.
+@param {callback} onAdd (<code>binding</code>): Callback when adding an item.
+    <h3>The callback returns:</h3>
+    <ul>
+        <li><code>$event</code>: The select event.</li>
+    </ul>
+@param {callback} onSort (<code>binding</code>): Callback when sorting an item.
     <h3>The callback returns:</h3>
     <ul>
         <li><code>$event</code>: The select event.</li>
@@ -174,16 +179,15 @@ Use this directive to render a ui component for selecting child items to a paren
             eventBindings.push(scope.$watch('parentName', function(newValue, oldValue){
 
               if (newValue === oldValue) { return; }
-              if ( oldValue === undefined || newValue === undefined) { return; }
+              if (oldValue === undefined || newValue === undefined) { return; }
 
               syncParentName();
-
             }));
 
             eventBindings.push(scope.$watch('parentIcon', function(newValue, oldValue){
 
               if (newValue === oldValue) { return; }
-              if ( oldValue === undefined || newValue === undefined) { return; }
+              if (oldValue === undefined || newValue === undefined) { return; }
 
               syncParentIcon();
             }));
@@ -191,6 +195,7 @@ Use this directive to render a ui component for selecting child items to a paren
             // sortable options for allowed child content types
             scope.sortableOptions = {
                 axis: "y",
+                cancel: ".unsortable",
                 containment: "parent",
                 distance: 10,
                 opacity: 0.7,
@@ -199,7 +204,7 @@ Use this directive to render a ui component for selecting child items to a paren
                 zIndex: 6000,
                 update: function (e, ui) {
                     if(scope.onSort) {
-                        scope.onSort();
+                       scope.onSort();
                     }
                 }
             };
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
index da690663d0..937f746c56 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
@@ -16,23 +16,24 @@
 .umb-child-selector__child.-placeholder {
   border: 1px dashed @gray-8;
   background: none;
-  cursor: pointer;
   text-align: center;
   justify-content: center;
-  
-  color:@ui-action-type;
+  width: 100%;
+  color: @ui-action-type;
+
   &:hover {
-      color:@ui-action-type-hover;
-      border-color:@ui-action-type-hover;
-      text-decoration:none;
+      color: @ui-action-type-hover;
+      border-color: @ui-action-type-hover;
+      text-decoration: none;
   }
 }
 
 .umb-child-selector__children-container {
-  margin-left: 30px;
-  .umb-child-selector__child {
-      cursor: move;
-  }
+    margin-left: 30px;
+
+    .umb-child-selector__child.ui-sortable-handle {
+        cursor: move;
+    }
 }
 
 .umb-child-selector__child-description {
@@ -65,5 +66,6 @@
 }
 
 .umb-child-selector__child-remove {
-  cursor: pointer;
+  background: none;
+  border: none;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
index 0866e1bdf7..1d88c0eb96 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
@@ -19,18 +19,20 @@
         <div class="umb-child-selector__child" ng-repeat="selectedChild in selectedChildren">
             <div class="umb-child-selector__child-description">
                 <div class="umb-child-selector__child-icon-holder">
-                    <i class="umb-child-selector__child-icon {{ selectedChild.icon }}"></i>
+                    <i class="umb-child-selector__child-icon {{selectedChild.icon}}" aria-hidden="true"></i>
                 </div>
-                <span class="umb-child-selector__child-name"> {{ selectedChild.name }}</span>
+                <span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
             </div>
             <div class="umb-child-selector__child-actions">
-                <i class="umb-child-selector__child-remove icon-trash" ng-click="removeChild(selectedChild, $index)"></i>
+                <button type="button" class="umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
+                    <i class="icon-trash" aria-hidden="true"></i>
+                </button>
             </div>
         </div>
 
-        <a href="" class="umb-child-selector__child -placeholder" ng-click="addChild($event)" hotkey="alt+shift+c">
+        <button type="button" class="umb-child-selector__child -placeholder unsortable" ng-click="addChild($event)" hotkey="alt+shift+c">
             <div class="umb-child-selector__child-name -blue"><strong><localize key="shortcuts_addChild">Add Child</localize></strong></div>
-        </a>
+        </button>
 
     </div>