aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-shorthand.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-shorthand.reel')
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.css42
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.html167
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.js59
3 files changed, 268 insertions, 0 deletions
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
new file mode 100644
index 00000000..e746146a
--- /dev/null
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
@@ -0,0 +1,42 @@
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.css-tree-branch {
8 /*padding-left: 10px;*/
9}
10.style-item {
11 padding-left: 10px;
12}
13.css-tree-branch .css-tree-branch {
14 padding-left: 20px;
15 margin-top: 0;
16 margin-bottom: 0;
17}
18.style-shorthand-branch > div {
19 background-color: #fafafa;
20 border-bottom: 1px solid #ededed;
21 position: relative;
22}
23.style-shorthand-branch > div:hover {
24 background-color: #f1f1f1;
25 border-bottom: 1px solid #e1e1e1;
26 position: relative;
27}
28.style-shorthand-branch > div:hover:after {
29 opacity: 1;
30}
31.style-shorthand-branch > div:after {
32 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAYAAAD%2BWDajAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODUxMDg2RjY1NkYxMUUxODMyRUQwQzAxMzUxMjUxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODUxMDg3MDY1NkYxMUUxODMyRUQwQzAxMzUxMjUxRiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4NTEwODZENjU2RjExRTE4MzJFRDBDMDEzNTEyNTFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4NTEwODZFNjU2RjExRTE4MzJFRDBDMDEzNTEyNTFGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BaoqKDgAAAGhJREFUeNpibG9vP8DAwGDPgAkuMAGJ6QzYwXSQ5Bogfoom8RGIFzNVVFT8xaJ7FlD8OxOUMxeIf0HZIMWzQAywJFDVC6jxILADyL8Dl4SCKWg0A8P%2F%2F%2F%2FhGOitFch8JjSHxCFzAAIMACCjLJNKELwVAAAAAElFTkSuQmCC);
33 background-repeat: no-repeat;
34 content: "\00a0";
35 height: 10px;
36 position: absolute;
37 right: 8px;
38 top: 4px;
39 width: 10px;
40 opacity: .3;
41}
42
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
new file mode 100644
index 00000000..63aa64f8
--- /dev/null
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
@@ -0,0 +1,167 @@
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="style-shorthand.css" rel="stylesheet" type="text/css" />
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/style-shorthand.reel",
15 "name" : "StyleShorthand",
16 "properties" : {
17 "element" : {"#" : "branch"},
18 "label" : { "@" : "textComponent" },
19 "branchList": {"#" : "branchList"},
20 "styleListDisclosure": {"#": "style-list-disclosure"},
21 "arrayController": {"@": "arrayController" },
22 "repetition": {"@": "repetition"},
23 "leafComponent": {"@": "leaf"},
24 "branchComponent": {"@": "branch"},
25 "branchCollapser": {"#": "collapser"}
26
27 }
28 },
29
30 "property": {
31 "module": "montage/ui/dynamic-text.reel",
32 "name": "DynamicText",
33 "properties": {
34 "element": {"#": "property"}
35 },
36 "bindings": {
37 "value" : {
38 "boundObject": {"@": "owner"},
39 "boundObjectPropertyPath": "propertyText",
40 "oneway": true
41 }
42 }
43 },
44 "value": {
45 "module": "montage/ui/dynamic-text.reel",
46 "name": "DynamicText",
47 "properties": {
48 "element": {"#": "value"}
49 },
50 "bindings": {
51 "value" : {
52 "boundObject": {"@": "owner"},
53 "boundObjectPropertyPath": "valueText",
54 "oneway": true
55 }
56 }
57 },
58
59 "arrayController": {
60 "module": "montage/ui/controller/array-controller",
61 "name": "ArrayController",
62 "bindings": {
63 "content": {
64 "boundObject": {"@": "owner"},
65 "boundObjectPropertyPath": "childNodes"
66 }
67 }
68 },
69
70 "style": {
71 "module": "js/panels/css-panel/style.reel",
72 "name": "Style",
73 "bindings": {
74 "sourceObject": {
75 "boundObject": {"@": "repetition" },
76 "boundObjectPropertyPath": "objectAtCurrentIteration",
77 "oneway": true
78 },
79 "labelKey" : {
80 "boundObject": {"@": "owner" },
81 "boundObjectPropertyPath": "labelKey",
82 "oneway": true
83 },
84 "branchKey" : {
85 "boundObject": {"@": "owner" },
86 "boundObjectPropertyPath": "branchKey",
87 "oneway": true
88 },
89 "treeView" : {
90 "boundObject": {"@": "owner" },
91 "boundObjectPropertyPath": "treeView",
92 "oneway": true
93 }
94 }
95 },
96
97 "shorthand": {
98 "module": "js/panels/css-panel/style-shorthand.reel",
99 "name": "StyleShorthand",
100 "bindings": {
101 "sourceObject": {
102 "boundObject": {"@": "repetition" },
103 "boundObjectPropertyPath": "objectAtCurrentIteration",
104 "oneway": true
105 },
106 "labelKey" : {
107 "boundObject": {"@": "owner" },
108 "boundObjectPropertyPath": "labelKey",
109 "oneway": true
110 },
111 "branchKey" : {
112 "boundObject": {"@": "owner" },
113 "boundObjectPropertyPath": "branchKey",
114 "oneway": true
115 },
116 "treeView" : {
117 "boundObject": {"@": "owner" },
118 "boundObjectPropertyPath": "treeView",
119 "oneway": true
120 }
121 }
122 },
123
124 "repetition": {
125 "module": "montage/ui/repetition.reel",
126 "name": "Repetition",
127 "properties": {
128 "element": { "#": "branchList" },
129 "contentController": {"@": "arrayController" },
130 "selectionEnabled": true
131 }
132 },
133
134 "substitution": {
135 "module": "montage/ui/substitution.reel",
136 "name": "Substitution",
137 "properties": {
138 "element": {"#": "treeItem"},
139 "switchComponents": {
140 "leaf": {"@": "style"},
141 "branch": {"@": "shorthand"}
142
143 }
144 },
145 "bindings": {
146 "switchValue": {
147 "boundObject": {"@": "repetition"},
148 "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
149 "oneway": true
150 }
151 }
152 }
153 }
154 </script>
155</head>
156<body>
157 <div id="branch" class="style-shorthand-branch">
158 <div class="style-item" id="collapser">
159 <dt id="property" class="css-property"></dt&g