diff options
Diffstat (limited to 'js/components/layout')
| -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 |
3 files changed, 24 insertions, 21 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 | ||