From b5d12aca5e3d9d4baee3398ddb5a82f75aad3679 Mon Sep 17 00:00:00 2001
From: Rune Strand <rune@umbraco.com>
Date: Wed, 2 Dec 2015 15:19:09 +0100
Subject: [PATCH] Sort into empty cells

---
 .../src/less/components/umb-grid.less         | 23 +++++++++----------
 .../propertyeditors/grid/grid.controller.js   | 14 +++++++++--
 .../src/views/propertyeditors/grid/grid.html  | 20 ++++++++--------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 244dca3261..cbf37cffb0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -141,16 +141,15 @@
     position: relative;
 }
 
-
 .umb-grid .umb-cell-content {
     position: relative;
     display: block;
     box-sizing: border-box;
-    padding-top: 38px;
     margin: 10px;
+    border: 1px solid transparent;
 }
 
-.umb-grid .umb-row .umb-cell-content.-placeholder {
+.umb-grid .umb-row .umb-cell-placeholder {
     min-height: 130px;
     background-color: @grayLighter;
     border-width: 2px;
@@ -164,12 +163,12 @@
     }
 }
 
-.umb-grid .umb-cell-content {
-    border: 1px solid transparent;
-}
-
 .umb-grid .umb-cell-content.-has-editors {
+    padding-top: 38px;
     background-color: #ffffff;
+    border-width: 1px;
+    border-style: solid;
+    border-color: @grayLight;
 
     &:hover {
         cursor: auto;
@@ -438,23 +437,23 @@
 
 
 // Cell states
-.umb-grid .umb-row .umb-cell .umb-cell-content:not(.-placeholder) {
-    border-color: @grayLight;
-}
 
 .umb-grid .umb-row .umb-cell.-active {
-    .umb-cell-content {
+    border-color: @grayLight;
+
+    .umb-cell-content.-has-editors {
         box-shadow: 3px 3px 6px rgba(0, 0, 0, .07);
         border-color: @blue;
     }
 }
 
 .umb-grid .umb-row .umb-cell.-active-child {
+
     .cell-tool {
         color: fade(@black, 23);
     }
 
-    .umb-cell-content {
+    .umb-cell-content.-has-editors {
             border-color: rgba(113, 136, 160, .44);
     }
 }
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 1e2688e4d1..f19fdfe223 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
@@ -106,7 +106,6 @@ angular.module("umbraco")
             },
 
             over: function (event, ui) {
-
                 var allowedEditors = $(event.target).scope().area.allowed;
 
                 if ($.inArray(ui.item.scope().control.editor.alias, allowedEditors) < 0 && allowedEditors) {
@@ -149,7 +148,6 @@ angular.module("umbraco")
                         }
                     });
                 }
-
             },
 
             start: function (e, ui) {
@@ -172,6 +170,11 @@ angular.module("umbraco")
                 });
             },
 
+            beforeStop: function (e, ui) {
+                var cell = $(e.toElement).scope().area;
+                cell.hasActiveChild = true;
+            },
+
             stop: function (e, ui) {
 
                 // Fade in control when sorting stops
@@ -198,6 +201,13 @@ angular.module("umbraco")
                         }
                     });
                 }, 500, false);
+
+                $scope.$apply(function () {
+
+                    var cell = $(e.target).scope().area;
+                    cell.hasActiveChild = hasActiveChild(cell, cell.controls);
+                    cell.active = false;
+                });
             }
 
         };
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 29d18a099e..03d1050d11 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
@@ -113,15 +113,10 @@
                                                  on-outside-click="clickOutsideCell($index, row.areas, row)"
                                                  bind-click-on="{{area.active}}">
 
-                                                 <!-- Cell placeholder -->
-                                                 <div class="umb-cell-content -placeholder" ng-if="area.controls.length === 0">
-                                                      <div href="" class="cell-tools-add -center" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">Add content</div>
-                                                 </div>
-
-                                                 <!-- Cell with editors -->
-                                                 <div class="umb-cell-content -has-editors"
-                                                      ng-if="area.controls.length > 0"
-                                                      ng-class="{'-active': area.active}">
+                                                 <!-- Cell -->
+                                                 <div class="umb-cell-content"
+                                                      ng-class="{'-active': area.active,
+                                                                  '-has-editors': area.controls.length > 0}">
 
                                                       <!-- disable drop overlay -->
                                                       <div class="disable-drop" ng-if="area.dropNotAllowed">
@@ -140,6 +135,11 @@
                                                       </div>
 
                                                       <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" ng-model="area.controls">
+                                                        
+                                                          <!-- Control placeholder -->
+                                                          <div class="umb-cell-placeholder" ng-if="area.controls.length === 0">
+                                                               <div href="" class="cell-tools-add -center" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">Add content</div>
+                                                          </div>
 
                                                           <!-- for each control in areas -->
                                                           <div class="umb-control"
@@ -188,7 +188,7 @@
                                                       <!-- Controls repeat end -->
 
                                                       <!-- if area is empty tools -->
-                                                      <div class="umb-grid-add-more-content">
+                                                      <div class="umb-grid-add-more-content" ng-if="area.controls.length > 0">
                                                           <div class="cell-tools-add -bar newbtn" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">+ Add content</div>
                                                       </div>