From 3a5d7f0442881bf58d96c53c147346405f3f0d3e Mon Sep 17 00:00:00 2001
From: Rune Strand <rune@umbraco.com>
Date: Wed, 25 Nov 2015 21:15:09 +0100
Subject: [PATCH] Fixes U4-7438 Grid - Sorting of controls/editors

---
 .../propertyeditors/grid/grid.controller.js   | 14 ++-
 .../src/views/propertyeditors/grid/grid.html  | 85 ++++++++++---------
 2 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 0b01718833..55e8a12c94 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -17,7 +17,7 @@ angular.module("umbraco")
 
         var draggedRteSettings;
 
-        $scope.sortableOptions = {
+        $scope.sortableOptionsRow = {
             distance: 10,
             cursor: "move",
             placeholder: "ui-sortable-placeholder",
@@ -46,8 +46,8 @@ angular.module("umbraco")
             start: function (e, ui) {
 
                 // Fade out row when sorting
-                ui.item.context.style.opacity = "0.5";
                 ui.item.context.style.display = "block";
+                ui.item.context.style.opacity = "0.5";
 
                 draggedRteSettings = {};
                 ui.item.find(".mceNoEditor").each(function () {
@@ -81,6 +81,7 @@ angular.module("umbraco")
             cursor: "move",
             placeholder: "ui-sortable-placeholder",
             handle: ".umb-control-bar",
+            helper: "clone",
             connectWith: ".umb-cell-content",
             forcePlaceholderSize: true,
             tolerance: "pointer",
@@ -140,6 +141,11 @@ angular.module("umbraco")
             },
 
             start: function (e, ui) {
+
+                // fade out control when sorting
+                ui.item.context.style.display = "block";
+                ui.item.context.style.opacity = "0.5";
+
                 // reset dragged RTE settings in case a RTE isn't dragged
                 draggedRteSettings = undefined;
                 ui.item.context.style.display = "block";
@@ -155,6 +161,10 @@ angular.module("umbraco")
             },
 
             stop: function (e, ui) {
+
+                // Fade in control when sorting stops
+                ui.item.context.style.opacity = "1";
+
                 ui.item.parents(".umb-cell-content").find(".mceNoEditor").each(function () {
                     if ($.inArray($(this).attr("id"), notIncludedRte) < 0) {
                         // add all dragged's neighbouring RTEs in the new cell
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index ac892c2fb2..2633c41158 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -35,6 +35,7 @@
 
         </div> <!-- .templates-preview -->
         <!-- template picker end -->
+
         <!-- Grids -->
         <div class="umb-grid-width">
             <div class="tb">
@@ -45,7 +46,7 @@
                      ng-init="initSection(section)"
                      ng-style="{width: section.$percentage + '%'}">
 
-                    <div ui-sortable="sortableOptions" ng-model="section.rows">
+                    <div ui-sortable="sortableOptionsRow" ng-model="section.rows">
 
                         <!-- for each row in template section -->
                         <!-- ng-mouseenter="setCurrentRow(row)" -->
@@ -59,8 +60,6 @@
                                      '-active-child': hasActiveChild(row, 'row')}"
                              on-outside-click="clickOutsideRow($index, section.rows)">
 
-
-
                             <div class="umb-row-title-bar">
 
                                 <div class=".umb-grid-right">
@@ -108,7 +107,7 @@
                                                     '-has-config' :hasConfig(area),
                                                     '-active': area.active,
                                                     '-active-child': hasActiveChild(area, 'cell')}"
-                                                ng-model="area.controls"
+                                                 ng-model="area.controls"
                                                  ng-click="clickCell($index, row.areas)"
                                                  on-outside-click="clickOutsideCell($index, row.areas)">
 
@@ -120,8 +119,7 @@
                                                  <!-- Cell with editors -->
                                                  <div class="umb-cell-content -has-editors"
                                                       ng-if="area.controls.length > 0"
-                                                      ng-class="{'-active': area.active}"
-                                                      ui-sortable="sortableOptionsCell">
+                                                      ng-class="{'-active': area.active}">
 
                                                       <div class="umb-grid-has-config" ng-if="hasConfig(area)">
                                                          Styles is applied
@@ -133,54 +131,57 @@
                                                          </div>
                                                       </div>
 
-                                                      <!-- Controls in areas -->
-                                                      <div
-                                                          class="umb-control"
-                                                          ng-repeat="control in area.controls"
-                                                          ng-click="clickControl($index, area.controls)"
-                                                          ng-class="{'-active': control.active}"
-                                                          on-outside-click="clickOutsideControl($index, area.controls)">
+                                                      <div ui-sortable="sortableOptionsCell" ng-model="area.controls">
 
-                                                          <div class="umb-control-click-overlay" ng-show="!control.active"></div>
+                                                          <!-- for each control in areas -->
+                                                          <div class="umb-control"
+                                                              ng-repeat="control in area.controls"
+                                                              ng-click="clickControl($index, area.controls)"
+                                                              ng-class="{'-active': control.active}"
+                                                              on-outside-click="clickOutsideControl($index, area.controls)">
 
-                                                          <div class="umb-control-inner">
+                                                              <div class="umb-control-click-overlay" ng-show="!control.active"></div>
 
-                                                               <div class="umb-control-bar">
+                                                              <div class="umb-control-inner">
 
-                                                                  <div class="umb-control-title" ng-if="control.active">
-                                                                     {{control.editor.name}}
-                                                                  </div>
+                                                                   <div class="umb-control-bar">
 
-                                                                  <div class="umb-tools" ng-if="control.active">
+                                                                      <div class="umb-control-title" ng-if="control.active">
+                                                                         {{control.editor.name}}
+                                                                      </div>
 
-                                                                    <div class="umb-control-tool">
-                                                                        <i class="umb-control-tool-icon icon-trash"  ng-click="togglePrompt(control)"></i>
-                                                                        <umb-confirm-action
-                                                                            ng-if="control.deletePrompt"
-                                                                            direction="left"
-                                                                            on-confirm="removeControl(area, $index)"
-                                                                            on-cancel="hidePrompt(control)">
-                                                                        </umb-confirm-action>
-                                                                    </div>
+                                                                      <div class="umb-tools" ng-if="control.active">
 
-                                                                  </div>
+                                                                        <div class="umb-control-tool">
+                                                                            <i class="umb-control-tool-icon icon-trash"  ng-click="togglePrompt(control)"></i>
+                                                                            <umb-confirm-action
+                                                                                ng-if="control.deletePrompt"
+                                                                                direction="left"
+                                                                                on-confirm="removeControl(area, $index)"
+                                                                                on-cancel="hidePrompt(control)">
+                                                                            </umb-confirm-action>
+                                                                        </div>
 
-                                                               </div>
+                                                                      </div>
 
-                                                             <!-- Redering the editor for specific control -->
-                                                             <div ng-if="control && control.$editorPath"
-                                                                   ng-include="control.$editorPath"
-                                                                   class="umb-cell-{{control.editor.view}}">
-                                                             </div>
+                                                                   </div>
 
+                                                                 <!-- Redering the editor for specific control -->
+                                                                 <div ng-if="control && control.$editorPath"
+                                                                       ng-include="control.$editorPath"
+                                                                       class="umb-cell-{{control.editor.view}}">
+                                                                 </div>
+
+                                                              </div>
                                                           </div>
-                                                      </div>
-                                                   <!-- Controls repeat end -->
-                                                   <!-- if area is empty tools -->
 
-                                                <div class="umb-grid-add-more-content">
-                                                    <div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">+ Add content</div>
-                                                </div>
+                                                      </div>
+                                                      <!-- Controls repeat end -->
+
+                                                      <!-- if area is empty tools -->
+                                                      <div class="umb-grid-add-more-content">
+                                                          <div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">+ Add content</div>
+                                                      </div>
 
                                                  </div>