aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorEric Guzman2012-04-23 11:46:54 -0700
committerEric Guzman2012-04-23 11:46:54 -0700
commit4cefebd99813f05713deb2f72bba0a035dfcb508 (patch)
tree75f9f3b694da42b829a636f2bc07341bc047f178 /js
parent0e1f95945434475adbf33b2073b6f8d7240aca91 (diff)
downloadninja-4cefebd99813f05713deb2f72bba0a035dfcb508.tar.gz
Toolbar - Add buttons to toolbar component
Diffstat (limited to 'js')
-rw-r--r--js/components/toolbar.reel/toolbar.css39
-rw-r--r--js/components/toolbar.reel/toolbar.html43
-rw-r--r--js/components/toolbar.reel/toolbar.js40
3 files changed, 115 insertions, 7 deletions
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
index 1ffae912..e63b043e 100644
--- a/js/components/toolbar.reel/toolbar.css
+++ b/js/components/toolbar.reel/toolbar.css
@@ -3,12 +3,51 @@
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> 3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
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
7/*---------------------
8 Toolbar Container
9-----------------------*/
10
6.toolbar-container { 11.toolbar-container {
7 background-color: #474747; 12 background-color: #474747;
8 border-bottom: 1px solid #333; 13 border-bottom: 1px solid #333;
9 border-top: 1px solid #505050; 14 border-top: 1px solid #505050;
10 box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75); 15 box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75);
11 height: 22px; 16 height: 22px;
17 overflow: hidden;
12 width: 100%; 18 width: 100%;
13 -webkit-box-flex: 0; 19 -webkit-box-flex: 0;
20}
21.toolbar-container ul, .toolbar-container li {
22 margin: 0;
23 padding: 0;
24}
25
26/*---------------------
27 Button Types
28-----------------------*/
29
30.toolbar-add-button {
31 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADPSURBVHjadNC7TQNREIXh75oNCIlWG0JC7BJoAmrAIVAAIkRCog9ThFtwCYTrtS2vBBKbDcG%2BbLD%2F5GpGc885M8nAItZga5YcYx4tD6Fw3ncn40Aa36mLIwM94YRC%2FFHqqkVshCRwCz6QhGRjloZo%2F1nFYygmTlC1ptNsbOTgy7czsJYosq2nLuK1e%2Fx4o0u1Qza7cuMS5s%2BVXC68v4xWmUbZFzkqiUatAWWmtmzPkrpoqC27b82BQoU1NEqfvcXeJV%2FB7mDdvYG7Ie4%2BvwMA%2BFNeHV16KUYAAAAASUVORK5CYII%3D);
32}
33
34/*---------------------
35 Generic button styles
36-----------------------*/
37
38.toolbar-container .toolbar-button {
39 background-color: transparent;
40 background-repeat: no-repeat;
41 border-style: none;
42 border-radius: 4px;
43 height: 16px;
44 margin: 3px 5px 0 0;
45 padding: 0 2px;
46 opacity: .85;
47 text-indent: -9999999px;
48 width: 16px;
49 float: right;
50}
51.left-button {
52 float: left;
14} \ No newline at end of file 53} \ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
index 69eba194..53c6627a 100644
--- a/js/components/toolbar.reel/toolbar.html
+++ b/js/components/toolbar.reel/toolbar.html
@@ -14,14 +14,50 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
14 "module" : "js/panels/css-panel/style-sheet.reel", 14 "module" : "js/panels/css-panel/style-sheet.reel",
15 "name" : "StyleSheet", 15 "name" : "StyleSheet",
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "toolbar-container"} 17 "element" : {"#" : "toolbar-container"},
18 "repetition": {"@": "buttonList" }
18 } 19 }
19 }, 20 },
21
22 "buttonList": {
23 "module": "montage/ui/repetition.reel",
24 "name": "Repetition",
25 "properties": {
26 "element": {"#": "repetition"}
27 },
28 "bindings": {
29 "objects" : {
30 "boundObject": {"@": "owner"},
31 "boundObjectPropertyPath": "buttons",
32 "oneway": true
33 }
34
35 }
36 },
37
20 "button": { 38 "button": {
21 "module": "montage/ui/button.reel", 39 "module": "montage/ui/button.reel",
22 "name": "Button", 40 "name": "Button",
23 "properties": { 41 "properties": {
24 42 "element": {"#": "button" },
43 "label": " "
44 },
45 "bindings": {
46 "label" : {
47 "boundObject": {"@": "buttonList"},
48 "boundObjectPropertyPath": "objectAtCurrentIteration.title",
49 "oneway": true
50 },
51 "identifier": {
52 "boundObject": {"@": "buttonList"},
53 "boundObjectPropertyPath": "objectAtCurrentIteration.identifier",
54 "oneway": true
55 },
56 "sourceObject": {
57 "boundObject": {"@": "buttonList"},
58 "boundObjectPropertyPath": "objectAtCurrentIteration",
59 "oneway": true
60 }
25 } 61 }
26 } 62 }
27 } 63 }
@@ -29,6 +65,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
29</head> 65</head>
30<body> 66<body>
31<div id="toolbar-container" class="toolbar-container"> 67<div id="toolbar-container" class="toolbar-container">
68 <ul data-montage-id="repetition">
69 <li><button data-montage-id="button" class="toolbar-button"></button></li>
70 </ul>
32</div> 71</div>
33</body> 72</body>
34</html> \ No newline at end of file 73</html> \ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js
index 79e7ff1f..03edf477 100644
--- a/js/components/toolbar.reel/toolbar.js
+++ b/js/components/toolbar.reel/toolbar.js
@@ -8,20 +8,50 @@ var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component; 8 Component = require("montage/ui/component").Component;
9 9
10exports.Toolbar = Montage.create(Component, { 10exports.Toolbar = Montage.create(Component, {
11 11 _needsButtonProperties : {
12 deserializedFromTemplate : { 12 value: null
13 value: function() { 13 },
14 console.log("toolbar - deserialized"); 14 _buttons : { value: null },
15 buttons : {
16 get: function() {
17 return this._buttons;
18 },
19 set: function(btns) {
20 this._buttons = btns;
21 this._needsButtonProperties = true;
22 console.log("buttons set");
15 } 23 }
16 }, 24 },
17 prepareForDraw : { 25 prepareForDraw : {
18 value: function() { 26 value: function() {
19 console.log("toolbar - prepare for draw"); 27 console.log("toolbar - prepare for draw");
28 if(this._needsButtonProperties) {
29 this.repetition.childComponents.forEach(function(button) {
30 button.identifier = button.sourceObject.identifier;
31 button.addEventListener('action', this.delegate, false);
32 }, this);
33 }
20 } 34 }
21 }, 35 },
22 draw : { 36 draw : {
23 value: function() { 37 value: function() {
24 console.log("toolbar - draw"); 38 console.log("toolbar - draw - repetition ", this.repetition);
39 if(this._needsClass) {
40
41 this.repetition.childComponents.forEach(function(button) {
42 button.element.classList.add('toolbar-' + button.sourceObject.identifier + '-button');
43 }, this);
44 }
45
46 if(this._needsButtonProperties) {
47 this._needsClass = this.needsDraw = true;
48 this._needsButtonProperties = false;
49 }
50
51
25 } 52 }
53 },
54 _needsClass : {
55 value: null
26 } 56 }
27}); \ No newline at end of file 57}); \ No newline at end of file