diff options
author | Armen Kesablyan | 2012-02-15 14:23:19 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-15 14:23:19 -0800 |
commit | bb4da39a73cbd6fbe83f3b7c9ed5ae60fe58dd6b (patch) | |
tree | cae6abe170b5ac861747dcd6db5a7c19ab34858c /js | |
parent | ace16ef22b3ff32663504df7720af481d76987d6 (diff) | |
download | ninja-bb4da39a73cbd6fbe83f3b7c9ed5ae60fe58dd6b.tar.gz |
Tool Icons : New layout
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js')
-rw-r--r-- | js/components/layout/tool-button.reel/tool-button.html | 7 | ||||
-rw-r--r-- | js/components/layout/tool-button.reel/tool-button.js | 21 | ||||
-rw-r--r-- | js/components/layout/tools-list.reel/tools-list.html | 17 | ||||
-rw-r--r-- | js/data/tools-data.js | 66 |
4 files changed, 57 insertions, 54 deletions
diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html index 81a9b927..476b66f3 100644 --- a/js/components/layout/tool-button.reel/tool-button.html +++ b/js/components/layout/tool-button.reel/tool-button.html | |||
@@ -16,8 +16,7 @@ | |||
16 | "module": "js/components/layout/tool-button.reel", | 16 | "module": "js/components/layout/tool-button.reel", |
17 | "name": "ToolButton", | 17 | "name": "ToolButton", |
18 | "properties": { | 18 | "properties": { |
19 | "element": {"#": "buttonBackground"}, | 19 | "element": {"#": "toolBarButton"} |
20 | "button": {"#": "toolBarButton"} | ||
21 | } | 20 | } |
22 | } | 21 | } |
23 | } | 22 | } |
@@ -27,9 +26,7 @@ | |||
27 | </head> | 26 | </head> |
28 | 27 | ||
29 | <body> | 28 | <body> |
30 | <div id="buttonBackground" class="buttonBackground"> | 29 | <div id="toolBarButton"></div> |
31 | <div id="toolBarButton" class="toolBarButton"></div> | ||
32 | </div> | ||
33 | </body> | 30 | </body> |
34 | 31 | ||
35 | </html> | 32 | </html> |
diff --git a/js/components/layout/tool-button.reel/tool-button.js b/js/components/layout/tool-button.reel/tool-button.js index 509512d0..5cb0e7fc 100644 --- a/js/components/layout/tool-button.reel/tool-button.js +++ b/js/components/layout/tool-button.reel/tool-button.js | |||
@@ -11,8 +11,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve | |||
11 | 11 | ||
12 | exports.ToolButton = Montage.create(Component, { | 12 | exports.ToolButton = Montage.create(Component, { |
13 | 13 | ||
14 | button: { value: null }, | ||
15 | |||
16 | data: { value: null }, | 14 | data: { value: null }, |
17 | 15 | ||
18 | _selected: { value: null }, | 16 | _selected: { value: null }, |
@@ -64,32 +62,25 @@ exports.ToolButton = Montage.create(Component, { | |||
64 | oneway: true | 62 | oneway: true |
65 | }); | 63 | }); |
66 | } | 64 | } |
65 | |||
66 | this.element.classList.add(this.data.id) | ||
67 | } | 67 | } |
68 | }, | 68 | }, |
69 | 69 | ||
70 | draw: { | 70 | draw: { |
71 | enumerable: false, | 71 | enumerable: false, |
72 | value: function() { | 72 | value: function() { |
73 | var buttonid; | ||
74 | |||
75 | if(this.data.container) { | 73 | if(this.data.container) { |
76 | buttonid = this.data.subtools[this._subselected].id; | ||
77 | this.element.title = this.data.subtools[this._subselected].toolTip; | 74 | this.element.title = this.data.subtools[this._subselected].toolTip; |
78 | this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Unpressed" ); | 75 | this.element.classList.remove(this.data.subtools[this._currentSubSelected].id); |
79 | this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Pressed" ); | 76 | this.element.classList.add(this.data.subtools[this._subselected].id); |
80 | this._currentSubSelected = this._subselected; | 77 | this._currentSubSelected = this._subselected; |
81 | } else { | ||
82 | buttonid = this.data.id; | ||
83 | } | 78 | } |
84 | 79 | ||
85 | if(this._selected) { | 80 | if(this._selected) { |
86 | this.element.classList.add( "buttonSelected" ); | 81 | this.element.classList.add("active"); |
87 | this.button.classList.remove( buttonid + "Unpressed" ); | ||
88 | this.button.classList.add( buttonid + "Pressed" ); | ||
89 | } else { | 82 | } else { |
90 | this.element.classList.remove( "buttonSelected" ); | 83 | this.element.classList.remove("active"); |
91 | this.button.classList.remove( buttonid + "Pressed" ); | ||
92 | this.button.classList.add( buttonid + "Unpressed" ); | ||
93 | } | 84 | } |
94 | } | 85 | } |
95 | }, | 86 | }, |
diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html index e12fd59b..c47359bf 100644 --- a/js/components/layout/tools-list.reel/tools-list.html +++ b/js/components/layout/tools-list.reel/tools-list.html | |||
@@ -25,6 +25,21 @@ | |||
25 | } | 25 | } |
26 | }, | 26 | }, |
27 | 27 | ||
28 | "groupLine": { | ||
29 | "module": "js/components/layout/tool-button.reel", | ||
30 | "name": "ToolButton", | ||
31 | "properties": { | ||
32 | "element": {"#": "groupLine"} | ||
33 | }, | ||
34 | "bindings": { | ||
35 | "data": { | ||
36 | "boundObject": {"@": "repetition1"}, | ||
37 | "boundObjectPropertyPath": "objectAtCurrentIteration", | ||
38 | "oneway": true | ||
39 | } | ||
40 | } | ||
41 | }, | ||
42 | |||
28 | "repetition1": { | 43 | "repetition1": { |
29 | "module": "montage/ui/repetition.reel", | 44 | "module": "montage/ui/repetition.reel", |
30 | "name": "Repetition", | 45 | "name": "Repetition", |
@@ -163,9 +178,9 @@ | |||
163 | <div id="toolsList" class="toolsList"> | 178 | <div id="toolsList" class="toolsList"> |
164 | <div id="toolscontainer" class="toolscontainer"> | 179 | <div id="toolscontainer" class="toolscontainer"> |
165 | <div id="toolbutton" class="toolbutton"></div> | 180 | <div id="toolbutton" class="toolbutton"></div> |
181 | <hr id="groupLine" /> | ||
166 | </div> | 182 | </div> |
167 | <!-- TODO: Remove and add as a component --> | 183 | <!-- TODO: Remove and add as a component --> |
168 | <hr class="toolbar_hr" /> | ||
169 | <div id="colortoolbar"></div> | 184 | <div id="colortoolbar"></div> |
170 | </div> | 185 | </div> |
171 | 186 | ||
diff --git a/js/data/tools-data.js b/js/data/tools-data.js index de965dbc..8356c422 100644 --- a/js/data/tools-data.js +++ b/js/data/tools-data.js | |||
@@ -157,39 +157,39 @@ exports.ToolsData = Montage.create(Montage, { | |||
157 | "container": false, | 157 | "container": false, |
158 | "selected": false | 158 | "selected": false |
159 | }, | 159 | }, |
160 | { | 160 | // { |
161 | "id": "InkBottleTool", | 161 | // "id": "InkBottleTool", |
162 | "properties": "inkbottleProperties", | 162 | // "properties": "inkbottleProperties", |
163 | "spriteSheet": true, | 163 | // "spriteSheet": true, |
164 | "action": "InkBottleTool", | 164 | // "action": "InkBottleTool", |
165 | "toolTip": "Ink Bottle Tool", | 165 | // "toolTip": "Ink Bottle Tool", |
166 | "cursor": "url('images/tools/inkbottle_down.png'), default", | 166 | // "cursor": "url('images/tools/inkbottle_down.png'), default", |
167 | "lastInGroup": false, | 167 | // "lastInGroup": false, |
168 | "container": false, | 168 | // "container": false, |
169 | "selected": false | 169 | // "selected": false |
170 | }, | 170 | // }, |
171 | { | 171 | // { |
172 | "id": "EyedropperTool", | 172 | // "id": "EyedropperTool", |
173 | "properties": "eyedropperProperties", | 173 | // "properties": "eyedropperProperties", |
174 | "spriteSheet": true, | 174 | // "spriteSheet": true, |
175 | "action": "EyedropperTool", | 175 | // "action": "EyedropperTool", |
176 | "toolTip": "Eyedropper Tool", | 176 | // "toolTip": "Eyedropper Tool", |
177 | "cursor": "url('images/tools/eyedropper_down.png'), default", | 177 | // "cursor": "url('images/tools/eyedropper_down.png'), default", |
178 | "lastInGroup": false, | 178 | // "lastInGroup": false, |
179 | "container": false, | 179 | // "container": false, |
180 | "selected": false | 180 | // "selected": false |
181 | }, | 181 | // }, |
182 | { | 182 | // { |
183 | "id": "EraserTool", | 183 | // "id": "EraserTool", |
184 | "properties": "eraserProperties", | 184 | // "properties": "eraserProperties", |
185 | "spriteSheet": true, | 185 | // "spriteSheet": true, |
186 | "action": "EraserTool", | 186 | // "action": "EraserTool", |
187 | "toolTip": "Eraser Tool", | 187 | // "toolTip": "Eraser Tool", |
188 | "cursor": "auto", | 188 | // "cursor": "auto", |
189 | "lastInGroup": false, | 189 | // "lastInGroup": false, |
190 | "container": false, | 190 | // "container": false, |
191 | "selected": false | 191 | // "selected": false |
192 | }, | 192 | // }, |
193 | { | 193 | { |
194 | "id": "RotateStageTool3D", | 194 | "id": "RotateStageTool3D", |
195 | "properties": "rotateStageProperties", | 195 | "properties": "rotateStageProperties", |