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.css50
-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.js99
3 files changed, 225 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..7cde3fd8
--- /dev/null
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css
@@ -0,0 +1,50 @@
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 font-family: "Droid Sans", sans-serif;
25 padding-top: 1px;
26 position: absolute;
27 right: 8px;
28 text-decoration: none;
29}
30.css-style-rule-item .nj-css-selector {
31 position: relative;
32 border: 1px solid rgba(0,0,0,0);
33}
34.css-style-rule-item .nj-css-selector.editable {
35 border: 1px solid #999;
36 border-radius: 3px;
37 box-shadow: 1px 1px 1px #CCC;
38 color: #333;
39 display: inline-block;
40 margin-right: 7px;
41 max-width: none;
42 overflow: visible;
43 -webkit-user-select: text;
44}
45.css-style-rule-item .nj-css-selector:after {
46 position: absolute;
47
48 right: -10px;
49
50} \ 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..d85b5797
--- /dev/null
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -0,0 +1,99 @@
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 focusDelegate : {
18 value: null
19 },
20
21 _rule : {
22 value : null
23 },
24 rule : {
25 get: function() {
26 return this._rule;
27 },
28 set: function(rule) {
29 this.cssText = rule.cssText;
30
31 if(rule.type === 'inline') {
32 this.sheetName = 'Inline Style';
33 } else {
34 this.sheetName = rule.href || 'Style Tag';
35 }
36
37 this.selector = rule.selectorText;
38 this.declaration = rule.style;
39
40 console.log('Rule with selector "' +rule.selectorText+ '" is set on componenet.');
41
42 this._rule = rule;
43 }
44 },
45 declarationComponent: {
46 value: null
47 } ,
48// declarationNodeName: {
49// value: "dl"
50// },
51// declarationElement: {
52// value: null
53// },
54 _declaration: {
55 value: null
56 },
57 declaration: {
58 get: function() {
59 return this._declaration;
60 },
61 set: function(dec) {
62 this._declaration = dec;
63 }
64 },
65 condition: {
66 value: false
67 },
68 templateDidLoad : {
69 value: function() {
70 console.log("css st