diff options
author | Eric Guzman | 2012-03-12 15:24:29 -0700 |
---|---|---|
committer | Eric Guzman | 2012-03-12 15:24:29 -0700 |
commit | 42d9f27afea3066cbccf22c76753f407fd340c30 (patch) | |
tree | 004ffab43a012142bbf78137d70a8f78267544db /js/panels/css-panel | |
parent | 10e4712ea5cf44041668dce9e767cb875ed53784 (diff) | |
download | ninja-42d9f27afea3066cbccf22c76753f407fd340c30.tar.gz |
CSS Panel Update - Rule List component update
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r-- | js/panels/css-panel/rule-list.reel/rule-list.css | 6 | ||||
-rw-r--r-- | js/panels/css-panel/rule-list.reel/rule-list.html | 7 | ||||
-rw-r--r-- | js/panels/css-panel/rule-list.reel/rule-list.js | 33 |
3 files changed, 15 insertions, 31 deletions
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css index 5f9092f3..8bb90331 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.css +++ b/js/panels/css-panel/rule-list.reel/rule-list.css | |||
@@ -12,10 +12,11 @@ | |||
12 | background-color: #FFF; | 12 | background-color: #FFF; |
13 | background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); | 13 | background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px); |
14 | color: #333; | 14 | color: #333; |
15 | display: -webkit-box; | ||
15 | font-family: monospace; | 16 | font-family: monospace; |
16 | padding: 0; | 17 | padding: 0; |
17 | margin: 0; | 18 | margin: 0; |
18 | display: -webkit-box; | 19 | overflow-y: scroll; |
19 | -webkit-box-orient: vertical; | 20 | -webkit-box-orient: vertical; |
20 | -webkit-box-flex: 1; | 21 | -webkit-box-flex: 1; |
21 | } | 22 | } |
@@ -23,7 +24,4 @@ | |||
23 | list-style-type: none; | 24 | list-style-type: none; |
24 | margin: 3px 6px; | 25 | margin: 3px 6px; |
25 | position: relative; | 26 | position: relative; |
26 | } | ||
27 | .rule-list li { | ||
28 | |||
29 | } \ No newline at end of file | 27 | } \ No newline at end of file |
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html index 69154d8d..efede847 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.html +++ b/js/panels/css-panel/rule-list.reel/rule-list.html | |||
@@ -14,8 +14,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
14 | "module" : "js/panels/css-panel/rule-list.reel", | 14 | "module" : "js/panels/css-panel/rule-list.reel", |
15 | "name" : "RuleList", | 15 | "name" : "RuleList", |
16 | "properties" : { | 16 | "properties" : { |
17 | "element" : {"#" : "container"}, | 17 | "element" : {"#" : "rule-list"} |
18 | "listElement": {"#": "rules-list"} | ||
19 | } | 18 | } |
20 | } | 19 | } |
21 | } | 20 | } |
@@ -78,8 +77,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
78 | </script> | 77 | </script> |
79 | </head> | 78 | </head> |
80 | <body> | 79 | <body> |
81 | <div id="container" class="rule-list-container"> | 80 | <ul id="rule-list" class="rule-list"></ul> |
82 | <ul id="rules-list" class="rule-list"></ul> | ||
83 | </div> | ||
84 | </body> | 81 | </body> |
85 | </html> \ No newline at end of file | 82 | </html> \ No newline at end of file |
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js index 11cda89c..44d6d864 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js | |||
@@ -11,6 +11,9 @@ exports.RuleList = Montage.create(Component, { | |||
11 | hasTemplate: { | 11 | hasTemplate: { |
12 | value: true | 12 | value: true |
13 | }, | 13 | }, |
14 | listElement : { | ||
15 | value: null | ||
16 | }, | ||
14 | _rules: { | 17 | _rules: { |
15 | value: null | 18 | value: null |
16 | }, | 19 | }, |
@@ -22,34 +25,19 @@ exports.RuleList = Montage.create(Component, { | |||
22 | if(!list) { | 25 | if(!list) { |
23 | return null; | 26 | return null; |
24 | } | 27 | } |
28 | //debugger; | ||
25 | console.log('list: ', list); | 29 | console.log('list: ', list); |
26 | this._rules = list; | 30 | this._rules = list; |
27 | this.needsDraw = this._needsAppend = true; | 31 | this.needsDraw = true; |
28 | } | 32 | this._needsAppend = true; |
29 | }, | ||
30 | _contentController: { | ||
31 | value: null | ||
32 | }, | ||
33 | contentController: { | ||
34 | get: function() { | ||
35 | return this._contentController; | ||
36 | }, | ||
37 | set: function(controller) { | ||
38 | |||
39 | Object.defineBinding(this, 'rules', { | ||
40 | "boundObject": controller, | ||
41 | "boundObjectPropertyPath": "ruleList", | ||
42 | "oneway": true | ||
43 | |||
44 | }); | ||
45 | |||
46 | this._contentController = controller; | ||
47 | } | 33 | } |
48 | }, | 34 | }, |
49 | templateDidLoad : { | 35 | templateDidLoad : { |
50 | value: function() { | 36 | value: function() { |
51 | console.log("Rule List : template did load"); | 37 | console.log("Rule List : template did load"); |
52 | //this.condition = true; | 38 | //this.condition = true; |
39 | this.needsDraw = true; | ||
40 | //debugger; | ||
53 | } | 41 | } |
54 | }, | 42 | }, |
55 | prepareForDraw : { | 43 | prepareForDraw : { |
@@ -59,6 +47,7 @@ exports.RuleList = Montage.create(Component, { | |||
59 | }, | 47 | }, |
60 | draw : { | 48 | draw : { |
61 | value: function() { | 49 | value: function() { |
50 | console.log("Rule List - Draw"); | ||
62 | if(this._needsAppend) { | 51 | if(this._needsAppend) { |
63 | this._rules.forEach(function(rule) { | 52 | this._rules.forEach(function(rule) { |
64 | var componentBase = this.supportedRules[rule.type], | 53 | var componentBase = this.supportedRules[rule.type], |
@@ -66,10 +55,10 @@ exports.RuleList = Montage.create(Component, { | |||
66 | 55 | ||
67 | if(componentBase) { | 56 | if(componentBase) { |
68 | el = document.createElement(this.ruleNodeName); | 57 | el = document.createElement(this.ruleNodeName); |
69 | instance = componentBase.create(); | 58 | instance = Montage.create(componentBase); |
70 | instance.element = el; | 59 | instance.element = el; |
71 | instance.rule = rule; | 60 | instance.rule = rule; |
72 | this.listElement.appendChild(el); | 61 | this.element.appendChild(instance.element); |
73 | instance.needsDraw = true; | 62 | instance.needsDraw = true; |
74 | } | 63 | } |
75 | 64 | ||