diff options
Diffstat (limited to 'js/panels/css-panel/rule-components/css-style-rule.reel')
3 files changed, 216 insertions, 0 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 new file mode 100644 index 00000000..6918e695 --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css | |||
@@ -0,0 +1,49 @@ | |||
1 | /* <copyright> | ||
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/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | .css-style-rule-item { | ||
7 | position: relative; | ||
8 | } | ||
9 | .css-style-rule-item:after { | ||
10 | content: "}"; | ||
11 | padding: 0 0 0 4px; | ||
12 | position: relative; | ||
13 | top: -10px; | ||
14 | } | ||
15 | .style-rule-heading { | ||
16 | background-color: #f3f3f3; | ||
17 | border: 1px #e7e7e7; | ||
18 | border-style: solid none; | ||
19 | box-shadow: inset 0 0 1px #FFF; | ||
20 | padding: 4px; | ||
21 | } | ||
22 | .style-sheet-name { | ||
23 | color: #333; | ||
24 | position: absolute; | ||
25 | right: 8px; | ||
26 | text-decoration: none; | ||
27 | font-family: "Droid Sans", sans-serif; | ||
28 | } | ||
29 | .css-style-rule-item .nj-css-selector { | ||
30 | position: relative; | ||
31 | border: 1px solid rgba(0,0,0,0); | ||
32 | } | ||
33 | .css-style-rule-item .nj-css-selector.editable { | ||
34 | border: 1px solid #999; | ||
35 | border-radius: 3px; | ||
36 | box-shadow: 1px 1px 1px #CCC; | ||
37 | color: #333; | ||
38 | display: inline-block; | ||
39 | margin-right: 7px; | ||
40 | max-width: none; | ||
41 | overflow: visible; | ||
42 | -webkit-user-select: text; | ||
43 | } | ||
44 | .css-style-rule-item .nj-css-selector:after { | ||
45 | position: absolute; | ||
46 | |||
47 | right: -10px; | ||
48 | |||
49 | } \ 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 new file mode 100644 index 00000000..1042d29e --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html | |||
@@ -0,0 +1,76 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html lang="en"> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link href="css-style-rule.css" rel="stylesheet" type="text/css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "module" : "js/panels/css-panel/rule-components/css-style-rule.reel", | ||
15 | "name" : "CssStyleRule", | ||
16 | "properties" : { | ||
17 | "element" : {"#" : "rule-item"}, | ||
18 | "declarationComponent": {"@": "declaration"} | ||
19 | } | ||
20 | }, | ||
21 | "sheetName": { | ||
22 | "module": "montage/ui/dynamic-text.reel", | ||
23 | "name" : "DynamicText", | ||
24 | "properties": { | ||
25 | "element": {"#": "style-sheet-name"} | ||
26 | }, | ||
27 | "bindings": { | ||
28 | "value" : { | ||
29 | "boundObject": {"@": "owner"}, | ||
30 | "boundObjectPropertyPath": "sheetName", | ||
31 | "oneway": true | ||
32 | } | ||
33 | } | ||
34 | }, | ||
35 | "selector": { | ||
36 | "module": "js/components/hintable.reel", | ||
37 | "name" : "Hintable", | ||
38 | "properties": { | ||
39 | "startOnEvent": "click", | ||
40 | "element": {"#": "rule-selector"} | ||
41 | }, | ||
42 | "bindings": { | ||
43 | "value" : { | ||
44 | "boundObject": {"@": "owner"}, | ||
45 | "boundObjectPropertyPath": "selector", | ||
46 | "oneway": true | ||
47 | } | ||
48 | } | ||
49 | }, | ||
50 | "declaration": { | ||
51 | "module": "js/panels/css-panel/declaration.reel", | ||
52 | "name": "Declaration", | ||
53 | "properties": { | ||
54 | "element": {"#": "declaration-list"} | ||
55 | } | ||
56 | }, | ||
57 | "sheetLink": { | ||
58 | "module": "montage/ui/anchor.reel", | ||
59 | "name": "Anchor", | ||
60 | "properties": { | ||
61 | "element": {"#": "style-sheet-name"} | ||
62 | } | ||
63 | } | ||
64 | } | ||
65 | </script> | ||
66 | </head> | ||
67 | <body> | ||
68 | <li data-montage-id="rule-item" class="css-style-rule-item"> | ||
69 | <div class="style-rule-heading"> | ||
70 | <a href="#" id="style-sheet-name" class="style-sheet-name"></a> | ||
71 | <span id="rule-selector" class="nj-css-selector"></span> | ||
72 | </div> | ||
73 | <dl id="declaration-list"></dl> | ||
74 | </li> | ||
75 | </body> | ||
76 | </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 new file mode 100644 index 00000000..dd51565a --- /dev/null +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js | |||
@@ -0,0 +1,91 @@ | |||
1 | /* <copyright> | ||
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/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.CssStyleRule = Montage.create(Component, { | ||
11 | cssText: { | ||
12 | value: null | ||
13 | }, | ||
14 | hasTemplate: { | ||
15 | value: true | ||
16 | }, | ||
17 | _rule : { | ||
18 | value : null | ||
19 | }, | ||
20 | rule : { | ||
21 | get: function() { | ||
22 | return this._rule; | ||
23 | }, | ||
24 | set: function(rule) { | ||
25 | this.cssText = rule.cssText; | ||
26 | |||
27 | if(rule.type === 'inline') { | ||
28 | this.sheetName = 'Inline Style'; | ||
29 | } else { | ||
30 | this.sheetName = rule.href || 'Style Tag'; | ||
31 | } | ||
32 | |||
33 | this.selector = rule.selectorText; | ||
34 | this.declaration = rule.style; | ||
35 | |||
36 | console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.'); | ||
37 | |||
38 | this._rule = rule; | ||
39 | } | ||
40 | }, | ||
41 | declarationComponent: { | ||
42 | value: null | ||
43 | } , | ||
44 | // declarationNodeName: { | ||
45 | // value: "dl" | ||
46 | // }, | ||
47 | // declarationElement: { | ||
48 | // value: null | ||
49 | // }, | ||
50 | _declaration: { | ||
51 | value: null | ||
52 | }, | ||
53 | declaration: { | ||
54 | get: function() { | ||
55 | return this._declaration; | ||
56 | }, | ||
57 | set: function(dec) { | ||
58 | this._declaration = dec; | ||
59 | } | ||
60 | }, | ||
61 | condition: { | ||
62 | value: false | ||
63 | }, | ||
64 | templateDidLoad : { | ||
65 | value: function() { | ||
66 | console.log("css style rule : template did load"); | ||
67 | if(this._declaration) { | ||
68 | this.declarationComponent.declaration = this._declaration; | ||
69 | } | ||
70 | } | ||