CSS Panel - Add drag and drop UI

2 files changed, 77 insertions, 4 deletions

diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index afcb7ca4..66c25fe0 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -4,8 +4,11 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+/* ------------------------
+  Style item container styles
+------------------------  */
 .style-item {
-
+    border-bottom: 1px solid rgba(0,0,0,0);
     cursor: url(/js/../images/tools/hand_down.png), default;
     display: block;
     overflow: hidden;
@@ -13,10 +16,14 @@
     text-overflow: ellipsis;
 }
 .style-item:hover {
-    background-color: #fafafa;
     border-right: 3px double #999;
-    margin-right: 1px;
+    margin-right: 3px;
 }
+
+/* ------------------------
+  Checkbox
+------------------------   */
+
 .style-item input {
     height: 10px;
     width: 10px;
@@ -29,6 +36,11 @@
 .style-item-disabled {
     opacity: .5;
 }
+
+/* ------------------------
+  Property/value styles
+------------------------   */
+
 .css-property, .css-value {
     border: 1px solid rgba(0,0,0,0);
     border-radius: 2px;
@@ -57,6 +69,11 @@
 .css-value {
     display: inline;
 }
+
+/* ------------------------
+  Editable Styles
+------------------------   */
+
 .style-item .editable {
     background-color: transparent;
     border: 1px solid #999;
@@ -73,4 +90,21 @@
     position: relative;
     margin-right: -7px;
     right: -1px;
+}
+
+/* ------------------------
+  Drag/Drop Styles
+------------------------   */
+
+.style-item.dragged {
+    background: none;
+    border-right-style: none;
+    opacity: .85;
+}
+.style-item.dragging {
+    background-color: #f2f2f2;
+    opacity: .55;
+}
+.style-item.drag-enter {
+    border-bottom: 1px solid #CCC;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index 6ff102b2..c3e9efdf 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -28,7 +28,36 @@ exports.Style = Montage.create(TreeNode, {
             this.needsDraw = true;
         }
     },
+    handleEvent : {
+        value: function(e) {
+            console.log(e);
+        }
+    },
+
+    handleDragstart : {
+        value: function(e) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('Text', 'my styles, baby!');
+            this.element.classList.add("dragged");
+        }
+    },
 
+    handleDragend : {
+        value: function(e) {
+            this.element.classList.remove("dragging");
+            this.element.classList.remove("dragged");
+        }
+    },
+    handleDrag : {
+        value: function(e) {
+            this.element.classList.add("dragging");
+        }
+    },
+    handleDrop : {
+        value: function(e) {
+            this.element.classList.remove("drag-enter");
+        }
+    },
     handleSourceObjectSet: {
         value: function() {
             //debugger;
@@ -41,7 +70,17 @@ exports.Style = Montage.create(TreeNode, {
             console.log("style - template did load");
         }
     },
-
+    prepareForDraw : {
+        value: function() {
+            console.log("style's prepare for draw");
+            this.element.addEventListener('dragstart', this, false);
+            this.element.addEventListener('drag', this, false);
+//            this.element.addEventListener('dragenter', this, false);
+//            this.element.addEventListener('dragleave', this, false);
+            this.element.addEventListener('dragend', this, false);
+            this.element.addEventListener('drop', this, false);
+        }
+    },
     draw : {
         value : function() {
             //debugger;