aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css13
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html24
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js46
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
10exports.CssStyleRule = Montage.create(Component, { 10exports.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;
25console.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});