diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/css-panel/declaration.reel/declaration.css | 3 | ||||
-rw-r--r-- | js/panels/css-panel/declaration.reel/declaration.js | 55 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.css | 40 | ||||
-rw-r--r-- | js/panels/css-panel/style.reel/style.js | 41 |
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, { | |||
41 | console.log("style - template did load"); |