From 14b4b6a24e24236d055e13ec8a590cb8d3c56d94 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Thu, 22 Aug 2013 22:38:59 -0400
Subject: [PATCH] Adds in minimally revised drag and drop styling.

Add CSS classes and fix drop destination bug.
---
 .../coffee/spec/views/overview_spec.coffee    |  5 +-
 cms/static/js/views/overview.js               | 28 ++++++----
 cms/static/sass/views/_outline.scss           | 51 ++++++++++---------
 3 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/cms/static/coffee/spec/views/overview_spec.coffee b/cms/static/coffee/spec/views/overview_spec.coffee
index ee7a41c709..d2ccc0deb0 100644
--- a/cms/static/coffee/spec/views/overview_spec.coffee
+++ b/cms/static/coffee/spec/views/overview_spec.coffee
@@ -167,10 +167,11 @@ describe "Course Overview", ->
           null
         )
         expect(CMS.Views.Draggabilly.dragState).toEqual(
-          offset: $('#unit-1').offset()
           dropDestination: null,
           expandTimer: null,
-          toExpand: null
+          toExpand: null,
+          attachMethod: '',
+          parentList: null
         )
 
     describe "onDragMove", ->
diff --git a/cms/static/js/views/overview.js b/cms/static/js/views/overview.js
index 3c54da9ea3..d111e2672d 100644
--- a/cms/static/js/views/overview.js
+++ b/cms/static/js/views/overview.js
@@ -77,14 +77,16 @@ CMS.Views.Draggabilly = {
     onDragStart: function(draggie, event, pointer) {
         var ele = $(draggie.element);
         this.dragState = {
-            // Where we started, in case of a failed drag
-            offset: ele.offset(),
             // Which element will be dropped into/onto on success
             dropDestination: null,
             // Timer if we're hovering over a collapsed section
             expandTimer: null,
             // The list which will be expanded on hover
-            toExpand: null
+            toExpand: null,
+            // How we attach to the destination: 'before', 'after', 'prepend'
+            attachMethod: '',
+            // If dragging to an empty section, the parent section
+            parentList: null
         };
     },
 
@@ -92,7 +94,7 @@ CMS.Views.Draggabilly = {
         var ele = $(draggie.element);
         var destinationInfo = this.findDestination(ele);
         var destinationEle = destinationInfo.ele;
-        var parentList = destinationInfo.parentList;
+        var parentList = this.dragState.parentList = destinationInfo.parentList;
         // Clear the timer if we're not hovering over any element
         if(!parentList) {
             clearTimeout(this.dragState.expandTimer);
@@ -113,27 +115,33 @@ CMS.Views.Draggabilly = {
         }
         // Mark the new destination
         if(destinationEle) {
+            ele.addClass('valid-drop');
             destinationEle.addClass('drop-target drop-target-' + destinationInfo.attachMethod);
+            this.dragState.attachMethod = destinationInfo.attachMethod;
             this.dragState.dropDestination = destinationEle;
         }
     },
 
     onDragEnd: function(draggie, event, pointer) {
         var ele = $(draggie.element);
-
-        var destinationInfo = this.findDestination(ele);
-        var destination = destinationInfo.ele;
+        var destination = this.dragState.dropDestination;
 
         // If the drag succeeded, rearrange the DOM and send the result.
         if(destination && pointer.x >= ele.offset().left
            && pointer.x < ele.offset().left + ele.width()) {
             // Make sure we don't drop into a collapsed element
-            if(destinationInfo.parentList) {
-                destinationInfo.parentList.removeClass('collapsed');
+            if(this.dragState.parentList) {
+                this.dragState.parentList.removeClass('collapsed');
             }
-            var method = destinationInfo.attachMethod;
+            var method = this.dragState.attachMethod;
             destination[method](ele);
             this.handleReorder(ele);
+            ele.removeClass('valid-drop');
+        }
+        // If the drag failed, send it back
+        else {
+            $('.was-dragging').removeClass('was-dragging');
+            ele.addClass('was-dragging');
         }
 
         // Everything in its right place
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 5ee9c5ab16..0f2625b497 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -675,35 +675,36 @@
       color: $darkGrey;
   }
 
-  // sort/drag and drop
-  .ui-droppable {
-      @include transition (padding 0.5s ease-in-out 0s);
-      min-height: 20px;
-      padding: 0;
+  // ====================
 
-      &.dropover {
-          padding: 15px 0;
-      }
+  // UI: drag handles
+  .section-drag-handle, .draggable {
+
+    &:hover, &:focus {
+      cursor: move;
+    }
   }
 
-  .ui-draggable-dragging {
-      box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
-      border: 1px solid $darkGrey;
-      opacity : 0.2;
-      &:hover {
-          opacity : 1.0;
-          .section-item {
-              background: $yellow !important;
-          }
-      }
-
-      // hiding unit button - temporary fix until this semantically corrected
-      .new-unit-item {
-        display: none;
-      }
+  // UI: drag states
+  .is-dragging {
+    @extend .ui-depth4;
+    box-shadow: 0 1px 2px 0 $blue-t2;
+    cursor: move;
+    opacity: 0.80;
+    border-color: $blue;
   }
 
-  ol.ui-droppable .branch:first-child .section-item {
-      border-top: none;
+  // UI: drag target
+  .drop-target {
+    background: $blue-t0 !important;
+
+
+    &.drop-target-before {
+      border-top: ($baseline/5) solid $blue;
+    }
+
+    &.drop-target-after {
+      border-bottom: ($baseline/5) solid $blue;
+    }
   }
 }