aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-03-13 15:52:33 -0700
committerEric Guzman2012-03-13 15:52:33 -0700
commit40e03e102c14a343efee1bdcf32d0d244e3f8344 (patch)
tree30061979dd9a766c61777d6f1d98f9c79d047886
parent4979ee361a11225f19b991810ca8d8c429a22620 (diff)
downloadninja-40e03e102c14a343efee1bdcf32d0d244e3f8344.tar.gz
CSS Panel - Style updates for collapsing branches
Diffstat
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.css6
-rw-r--r--js/panels/css-panel/declaration.reel/declaration.html1
-rw-r--r--js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.css12
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.css2
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.css30
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.html6
-rw-r--r--js/panels/css-panel/style-shorthand.reel/style-shorthand.js5
-rw-r--r--js/panels/css-panel/style.reel/style.css6
-rw-r--r--js/panels/css-panel/style.reel/style.html2
9 files changed, 60 insertions, 10 deletions
diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css
index 7f1b0f7f..77257fec 100644
--- a/js/panels/css-panel/declaration.reel/declaration.css
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -4,3 +4,9 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7.treeRoot > .style-shorthand-branch > div {
8 display: none;
9}
10.treeRoot > .style-shorthand-branch > dl {
11 margin-top: 4px;
12} \ No newline at end of file
diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html
index 1f680997..79865fed 100644
--- a/js/panels/css-panel/declaration.reel/declaration.html
+++ b/js/panels/css-panel/declaration.reel/declaration.html
@@ -7,6 +7,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
7<html lang="en"> 7<html lang="en">
8<head> 8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link href="declaration.css" rel="stylesheet" type="text/css" />
10 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
11 { 12 {
12 "owner": { 13 "owner": {
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 9306955c..deb71d31 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
@@ -7,10 +7,16 @@
7 position: relative; 7 position: relative;
8} 8}
9.style-rule-heading { 9.style-rule-heading {
10 /*background-color: #333;*/ 10 background-color: #f3f3f3;
11 border: 1px #e7e7e7;
12 border-style: solid none;
13 box-shadow: inset 0 0 1px #FFF;
14 padding: 4px;
11} 15}
12.style-sheet-name { 16.style-sheet-name {
17 color: #333;
13 position: absolute; 18 position: absolute;
14 right: 0; 19 right: 8px;
15 20 text-decoration: none;
21 font-family: "Droid Sans", sans-serif;
16} \ No newline at end of file 22} \ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
index 8bb90331..e4a10657 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.css
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -16,7 +16,7 @@
16 font-family: monospace; 16 font-family: monospace;
17 padding: 0; 17 padding: 0;
18 margin: 0; 18 margin: 0;
19 overflow-y: scroll; 19 overflow-y: auto;
20 -webkit-box-orient: vertical; 20 -webkit-box-orient: vertical;
21 -webkit-box-flex: 1; 21 -webkit-box-flex: 1;
22} 22}
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
index b29a8fd6..e746146a 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
@@ -5,10 +5,38 @@
5 </copyright> */ 5 </copyright> */
6 6
7.css-tree-branch { 7.css-tree-branch {
8 /*padding-left: 10px;*/
9}
10.style-item {
8 padding-left: 10px; 11 padding-left: 10px;
9} 12}
10.css-tree-branch .css-tree-branch { 13.css-tree-branch .css-tree-branch {
11 padding-left: 20px; 14 padding-left: 20px;
12 margin-top: 0; 15 margin-top: 0;
13 margin-bottom: 0; 16 margin-bottom: 0;
14} \ No newline at end of file 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
index 391aa846..63aa64f8 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
@@ -21,7 +21,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
21 "arrayController": {"@": "arrayController" }, 21 "arrayController": {"@": "arrayController" },
22 "repetition": {"@": "repetition"}, 22 "repetition": {"@": "repetition"},
23 "leafComponent": {"@": "leaf"}, 23 "leafComponent": {"@": "leaf"},
24 "branchComponent": {"@": "branch"} 24 "branchComponent": {"@": "branch"},
25 "branchCollapser": {"#": "collapser"}
25 26
26 } 27 }
27 }, 28 },
@@ -154,10 +155,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
154</head> 155</head>
155<body> 156<body>
156 <div id="branch" class="style-shorthand-branch"> 157 <div id="branch" class="style-shorthand-branch">
157 <div> 158 <div class="style-item" id="collapser">
158 <dt id="property" class="css-property"></dt> 159 <dt id="property" class="css-property"></dt>
159 <dd id="value" class="css-value"></dd> 160 <dd id="value" class="css-value"></dd>
160 <a href="#" id="style-list-disclosure" class="list-disclorue">A</a>
161 </div> 161 </div>
162 <dl id="branchList" class="css-tree-branch"> 162 <dl id="branchList" class="css-tree-branch">
163 <div id="treeItem"></div> 163 <div id="treeItem"></div>
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
index 00749faa..e64d64c7 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.js
@@ -20,13 +20,16 @@ var styleShorthand = exports.StyleShorthand= Montage.create(TreeNode, {
20 }, 20 },
21 prepareForDraw : { 21 prepareForDraw : {
22 value: function() { 22 value: function() {
23 this.styleListDisclosure.addEventListener('click', this, false); 23// this.styleListDisclosure.addEventListener('click', this, false);
24 this.treeView.contentController.addBranchController(this.arrayController); 24 this.treeView.contentController.addBranchController(this.arrayController);
25 } 25 }
26 }, 26 },
27 templateDidLoad: { 27 templateDidLoad: {
28 value: function() { 28 value: function() {
29 this.arrayController.delegate = this.treeView.contentController; 29 this.arrayController.delegate = this.treeView.contentController;
30
31 this.branchCollapser.removeAttribute('id');
32 this.branchCollapser.addEventListener('click', this, false);
30 } 33 }
31 }, 34 },
32 willDraw : { 35 willDraw : {
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index 7aa67e55..ebeefb91 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -4,6 +4,12 @@
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ 5 </copyright> */
6 6
7.style-item {
8 overflow: hidden;
9 white-space: nowrap;
10 text-overflow: ellipsis;
11}
12
7.css-property, .css-value { 13.css-property, .css-value {
8 border: 1px solid rgba(0,0,0,0); 14 border: 1px solid rgba(0,0,0,0);
9 border-radius: 2px; 15 border-radius: 2px;
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index bd911f34..f636ef6b 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -49,7 +49,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
49 </script> 49 </script>
50</head> 50</head>
51<body> 51<body>
52<div id="container"> 52<div id="container" class="style-item">
53 <dt id="property" class="css-property"></dt> 53 <dt id="property" class="css-property"></dt>
54 <dd id="value" class="css-value"></dd> 54 <dd id="value" class="css-value"></dd>
55</div> 55</div>