aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/rule-components
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/rule-components')
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css49
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html76
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js91
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>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No 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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.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 }