correct layout for cross dragging between archetype instances

app/controllers/controller.js

@@ -114,6 +114,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
 
         },
         start: function(ev, ui) {
+            archetypeService.getEditors().addClass('archetypeDragging');
             archetypeService.storeEditors(ui.item.parent());
             $scope.$apply(function() {
                 draggedParent = ui.item.parent();
@@ -175,7 +176,6 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
 
         },
         stop: function (ev, ui) {
-
             // Done sorting.
             draggedParent.scope().doingSort = false;
 
@@ -190,6 +190,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
             }
             archetypeService.restoreEditors(parent);
 
+            archetypeService.getEditors().removeClass('archetypeDragging');
         }
     };
 

app/less/archetype.less

@@ -321,14 +321,15 @@
         cursor: pointer;
 
         &:hover {
-            background: #35c786;
-            border-color: #35c786;
+            background: #00aea2;
+            border-color: #00aea2;
             color: white;
         }
     }
 
     .archetypeEmptyContent {
         text-align: center;
+        margin-bottom: 20px;
 
         span {
             display: inline-block;
@@ -341,6 +342,26 @@
         }
     }
 
+    .archetypeCrossDraggable + .archetypeEmptyContent {
+        margin-top: -42px;
+    }
+
+    &.archetypeDragging .archetypeCrossDraggable + .archetypeEmptyContent {
+        display: none;
+    }
+
+    // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets.
+    .archetypeSortable.archetypeEmpty.archetypeCrossDraggable {
+        min-height: 40px;
+        border: 1px dashed transparent;
+    }
+
+    &.archetypeDragging .archetypeSortable.archetypeEmpty.archetypeCrossDraggable {
+        min-height: 56px;
+        border-color: #dddddd;
+    }
+
+
     .archetypeCollapser .archetypeEmptyContent span {
         background: #f2f2f2;
     }
@@ -458,15 +479,6 @@
             }
         }
     }
-
-    // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets.
-    .archetypeSortable.archetypeEmpty {
-        &.archetypeCrossDraggable {
-            min-height: 42px;
-            border: 1px dashed #dddddd;
-            margin-top: 5px;
-        }
-    }
 }
 
 .archetypeEditor, .archetypeConfig {

app/services/archetypeService.js

@@ -2,6 +2,7 @@ angular.module('umbraco.services').factory('archetypeService', function () {
 
     // Variables.
     var draggedRteArchetype;
+    var archetypeEditors;
     var rteClass = ".archetypeEditor .umb-rte textarea";
     var editorSettings = {};
     var disabledSortables = [];
@@ -215,6 +216,13 @@ angular.module('umbraco.services').factory('archetypeService', function () {
                 sortable.enable();
             });
             disabledSortables = [];
+        },
+        // Get all active archetype editors on the current page
+        getEditors: function() {
+            if (archetypeEditors == null) {
+                archetypeEditors = $('.archetypeEditor');
+            }
+            return archetypeEditors;
         }
     }
 });

app/views/archetype.default.html

@@ -2,13 +2,6 @@
 <div class="archetypeEditor ng-class:model.config.customCssClass">
     <textarea class="archetypeDeveloperModel" ng-show="model.config.developerMode" ng-model="model.value"></textarea>
 
-    <!-- Empty content display. -->
-    <div class="archetypeEmptyContent" ng-show="showEmptyContentHint()">
-        <span>
-            <archetype-localize key="addFieldset">Add an item</archetype-localize>
-        </span>
-    </div>
-
     <!-- Mandatory validation. -->
     <input type="hidden" name="archetypeMandatory" ng-model="model.mandatoryValidation" ng-required="model.validation.mandatory" />
     <div><span class="help-inline" val-msg-for="archetypeMandatory" val-toggle-msg="required"><archetype-localize key="required">Required</archetype-localize></span></div>
@@ -108,6 +101,13 @@
         </li>
     </ul>
 
+    <!-- Empty content display. -->
+    <div class="archetypeEmptyContent" ng-show="showEmptyContentHint()">
+        <span>
+            <archetype-localize key="addFieldset">Add an item</archetype-localize>
+        </span>
+    </div>
+
     <!-- "Add" button. -->
     <div class="archetypeFooter" ng-show="showAddButton()">
         <a class="archetypeAddButton" ng-click="openFieldsetPicker(model.value.fieldsets.length, $event)" prevent-default>