diff options
3 files changed, 75 insertions, 8 deletions
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css index 0441c1cf..9306955c 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css | |||
@@ -2,4 +2,15 @@ | |||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | 2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> |
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> */ \ No newline at end of file | 5 | </copyright> */ |
6 | .css-style-rule-item { | ||
7 | position: relative; | ||
8 | } | ||
9 | .style-rule-heading { | ||
10 | /*background-color: #333;*/ | ||
11 | } | ||
12 | .style-sheet-name { | ||
13 | position: absolute; | ||
14 | right: 0; | ||
15 | |||
16 | } \ No newline at end of file | ||
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html index e8661bf9..2f5d69af 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html | |||
@@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
14 | "module" : "js/panels/css-panel/rule-components/css-style-rule.reel", | 14 | "module" : "js/panels/css-panel/rule-components/css-style-rule.reel", |
15 | "name" : "CssStyleRule", | 15 | "name" : "CssStyleRule", |
16 | "properties" : { | 16 | "properties" : { |
17 | "element" : {"#" : "rule-item"} | 17 | "element" : {"#" : "rule-item"}, |
18 | "declarationComponent": {"@": "declaration"} | ||
18 | } | 19 | } |
19 | }, | 20 | }, |
20 | "sheetName": { | 21 | "sheetName": { |
@@ -44,14 +45,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
44 | "oneway": true | 45 | "oneway": true |
45 | } | 46 | } |
46 | } | 47 | } |
48 | }, | ||
49 | "declaration": { | ||
50 | "module": "js/panels/css-panel/declaration.reel", | ||
51 | "name": "Declaration", | ||
52 | "properties": { | ||
53 | "element": {"#": "declaration-list"} | ||
54 | } | ||
55 | }, | ||
56 | "sheetLink": { | ||
57 | "module": "montage/ui/anchor.reel", | ||
58 | "name": "Anchor", | ||
59 | "properties": { | ||
60 | "element": {"#": "style-sheet-name"} | ||
61 | } | ||
47 | } | 62 | } |
48 | } | 63 | } |
49 | </script> | 64 | </script> |
50 | </head> | 65 | </head> |
51 | <body> | 66 | <body> |
52 | <div id="rule-item" class="css-style-rule-item"> | 67 | <div id="rule-item" class="css-style-rule-item"> |
53 | <a href="#" id="style-sheet-name"></a> | 68 | <div class="style-rule-heading"> |
54 | <span id="rule-selector" class="nj-css-selector"></span> | 69 | <a href="#" id="style-sheet-name" class="style-sheet-name"></a> |
70 | <span id="rule-selector" class="nj-css-selector"></span> | ||
71 | </div> | ||
72 | <dl id="declaration-list"></dl> | ||
55 | </div> | 73 | </div> |
56 | </body> | 74 | </body> |
57 | </html> \ No newline at end of file | 75 | </html> \ No newline at end of file |
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index f90104e1..a0ff4b4e 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js | |||
@@ -8,6 +8,9 @@ var Montage = require("montage/core/core").Montage, | |||
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | exports.CssStyleRule = Montage.create(Component, { | 10 | exports.CssStyleRule = Montage.create(Component, { |
11 | cssText: { | ||
12 | value: null | ||
13 | }, | ||
11 | hasTemplate: { | 14 | hasTemplate: { |
12 | value: true | 15 | value: true |
13 | }, | 16 | }, |
@@ -22,27 +25,62 @@ exports.CssStyleRule = Montage.create(Component, { | |||
22 | this.cssText = rule.cssText; | 25 | this.cssText = rule.cssText; |
23 | this.sheetName = rule.href || 'Style Tag'; | 26 | this.sheetName = rule.href || 'Style Tag'; |
24 | this.selector = rule.selectorText; | 27 | this.selector = rule.selectorText; |
25 | console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); | 28 | |
29 | this.declaration = rule.style; | ||
30 | |||
31 | console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); | ||
32 | |||
26 | this._rule = rule; | 33 | this._rule = rule; |
27 | } | 34 | } |
28 | }, | 35 | }, |
36 | declarationComponent: { | ||
37 | value: null | ||
38 | } , | ||
39 | // declarationNodeName: { | ||
40 | // value: "dl" | ||
41 | // }, | ||
42 | // declarationElement: { | ||
43 | // value: null | ||
44 | // }, | ||
45 | _declaration: { | ||
46 | value: null | ||
47 | }, | ||
48 | declaration: { | ||
49 | get: function() { | ||
50 | return this._declaration; | ||
51 | }, | ||
52 | set: function(dec) { | ||
53 | this._declaration = dec; | ||
54 | } | ||
55 | }, | ||
29 | condition: { | 56 | condition: { |
30 | value: false | 57 | value: false |
31 | }, | 58 | }, |
32 | templateDidLoad : { | 59 | templateDidLoad : { |
33 | value: function() { | 60 | value: function() { |
34 | console.log("css style rule : template did load"); | 61 | console.log("css style rule : template did load"); |
35 | //this.condition = true; | 62 | if(this._declaration) { |
63 | this.declarationComponent.declaration = this._declaration; | ||
64 | } | ||
36 | } | 65 | } |
37 | }, | 66 | }, |
38 | prepareForDraw : { | 67 | prepareForDraw : { |
39 | value: function() { | 68 | value: function() { |
40 | console.log("css panel : prepare for draw"); | 69 | console.log("css style rule : prepare for draw"); |
70 | |||
71 | if(!this.declarationElement) { | ||
72 | ///// Create element to contain declaration | ||
73 | this.declarationElement = document.createElement(this.declarationNodeName); | ||
74 | } | ||
75 | |||
76 | if(!this._declaration && this._rule) { | ||
77 | |||
78 | } | ||
41 | } | 79 | } |
42 | }, | 80 | }, |
43 | draw : { | 81 | draw : { |
44 | value: function() { | 82 | value: function() { |
45 | console.log("css panel : draw"); | 83 | console.log("css style rule : draw"); |
46 | } | 84 | } |
47 | } | 85 | } |
48 | }); | 86 | }); |