aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-04-13 01:45:31 -0700
committerEric Guzman2012-04-13 01:45:31 -0700
commitdb9d44fea7856a8fba9e9e306dafa8777f1eb015 (patch)
treef05f18a6908c5becaa936c38bcc75e593f2ae7d7
parente39cc380ef2c0479f57b35dcadedccb0fb3fd22f (diff)
downloadninja-db9d44fea7856a8fba9e9e306dafa8777f1eb015.tar.gz
CSS Panel - Add drag and drop UI
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.css3
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.js55
-rw-r--r--js/panels/css-panel/style.reel/style.css40
-rw-r--r--js/panels/css-panel/style.reel/style.js41
4 files changed, 135 insertions, 4 deletions
diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css
index 77257fec..e37d89d2 100644
--- a/js/panels/css-panel/declaration.reel/declaration.css
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -9,4 +9,7 @@
9} 9}
10.treeRoot > .style-shorthand-branch > dl { 10.treeRoot > .style-shorthand-branch > dl {
11 margin-top: 4px; 11 margin-top: 4px;
12}
13.drag-over {
14 /*background-color: red;*/
12} \ No newline at end of file 15} \ No newline at end of file
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 34819df5..0cc98951 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -14,6 +14,14 @@ exports.Declaration = Montage.create(Component, {
14 console.log("declaration - template did load"); 14 console.log("declaration - template did load");
15 } 15 }
16 }, 16 },
17 prepareForDraw : {
18 value: function(e) {
19 console.log("Declaration :: prepare for draw");
20 this._element.addEventListener('drop', this, false);
21 this.element.addEventListener('dragenter', this, false);
22 this.element.addEventListener('dragleave', this, false);
23 }
24 },
17 _declaration: { 25 _declaration: {
18 value: null 26 value: null
19 }, 27 },
@@ -95,11 +103,58 @@ exports.Declaration = Montage.create(Component, {
95 }, 103 },
96 distinct: true 104 distinct: true
97 }, 105 },
106
107 /* drag/drop events */
108 handleDrop : {
109 value: function(e) {
110 console.log('dropped');
111 }
112 },
113 handleDragenter : {
114 value: function(e) {
115 console.log("dec - drag enter");
116 this.element.classList.add("drag-over");
117 }
118 },
119 handleDragleave : {
120 value: function(e) {
121 if(this.element === e._event.toElement || this._containsElement(e._event.toElement)) {
122 //// Dragged-over element is inside of component element
123 //// I.e. it's not really a "drag leave"
124 e.stopPropagation();
125 e.preventDefault();
126 return false;
127 }
128
129 console.log("DECLARATION - ELEMENT NOT IN DEC", e._event.toElement);
130
131 //console.log("dec - drag leave");
132 this.element.classList.remove("drag-over");
133 }
134 },
135
98 draw: { 136 draw: {
99 value: function() { 137 value: function() {
100 if(this._declaration) { 138 if(this._declaration) {
101 139
102 } 140 }
103 } 141 }
142 },
143
144 _containsElement : {
145 value: function(innerElement) {
146 var isInComponent = false,
147 parent = innerElement.parentNode;
148
149 while (parent !== document) {
150 if(parent === this.element) {
151 isInComponent = true;
152 break;
153 }
154 parent = parent.parentNode;
155 }
156
157 return isInComponent;
158 }
104 } 159 }
105}); \ No newline at end of file 160}); \ No newline at end of file
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 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7/* ------------------------
8 Style item container styles
9------------------------ */
7.style-item { 10.style-item {
8 11 border-bottom: 1px solid rgba(0,0,0,0);
9 cursor: url(/js/../images/tools/hand_down.png), default; 12 cursor: url(/js/../images/tools/hand_down.png), default;
10 display: block; 13 display: block;
11 overflow: hidden; 14 overflow: hidden;
@@ -13,10 +16,14 @@
13 text-overflow: ellipsis; 16 text-overflow: ellipsis;
14} 17}
15.style-item:hover { 18.style-item:hover {
16 background-color: #fafafa;
17 border-right: 3px double #999; 19 border-right: 3px double #999;
18 margin-right: 1px; 20 margin-right: 3px;
19} 21}
22
23/* ------------------------
24 Checkbox
25------------------------ */
26
20.style-item input { 27.style-item input {
21 height: 10px; 28 height: 10px;
22 width: 10px; 29 width: 10px;
@@ -29,6 +36,11 @@
29.style-item-disabled { 36.style-item-disabled {
30 opacity: .5; 37 opacity: .5;
31} 38}
39
40/* ------------------------
41 Property/value styles
42------------------------ */
43
32.css-property, .css-value { 44.css-property, .css-value {
33 border: 1px solid rgba(0,0,0,0); 45 border: 1px solid rgba(0,0,0,0);
34 border-radius: 2px; 46 border-radius: 2px;
@@ -57,6 +69,11 @@
57.css-value { 69.css-value {
58 display: inline; 70 display: inline;
59} 71}
72
73/* ------------------------
74 Editable Styles
75------------------------ */
76
60.style-item .editable { 77.style-item .editable {
61 background-color: transparent; 78 background-color: transparent;
62 border: 1px solid #999; 79 border: 1px solid #999;
@@ -73,4 +90,21 @@
73 position: relative; 90 position: relative;
74 margin-right: -7px; 91 margin-right: -7px;
75 right: -1px; 92 right: -1px;
93}
94
95/* ------------------------
96 Drag/Drop Styles
97------------------------ */
98
99.style-item.dragged {
100 background: none;
101 border-right-style: none;
102 opacity: .85;
103}
104.style-item.dragging {
105 background-color: #f2f2f2;
106 opacity: .55;
107}
108.style-item.drag-enter {
109 border-bottom: 1px solid #CCC;
76} \ No newline at end of file 110} \ 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, {
28 this.needsDraw = true; 28 this.needsDraw = true;
29 } 29 }
30 }, 30 },
31 handleEvent : {
32 value: function(e) {
33 console.log(e);
34 }
35 },
36
37 handleDragstart : {
38 value: function(e) {
39 e.dataTransfer.effectAllowed = 'move';
40 e.dataTransfer.setData('Text', 'my styles, baby!');
41 this.element.classList.add("dragged");
42 }
43 },
31 44
45 handleDragend : {
46 value: function(e) {
47 this.element.classList.remove("dragging");
48 this.element.classList.remove("dragged");
49 }
50 },
51 handleDrag : {
52 value: function(e) {
53 this.element.classList.add("dragging");
54 }
55 },
56 handleDrop : {
57 value: function(e) {
58 this.element.classList.remove("drag-enter");
59 }
60 },
32 handleSourceObjectSet: { 61 handleSourceObjectSet: {
33 value: function() { 62 value: function() {
34 //debugger; 63 //debugger;
@@ -41,7 +70,17 @@ exports.Style = Montage.create(TreeNode, {