From 40e03e102c14a343efee1bdcf32d0d244e3f8344 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 13 Mar 2012 15:52:33 -0700
Subject: CSS Panel - Style updates for collapsing branches
---
.../css-panel/declaration.reel/declaration.css | 6 +++++
.../css-panel/declaration.reel/declaration.html | 1 +
.../css-style-rule.reel/css-style-rule.css | 12 ++++++---
js/panels/css-panel/rule-list.reel/rule-list.css | 2 +-
.../style-shorthand.reel/style-shorthand.css | 30 +++++++++++++++++++++-
.../style-shorthand.reel/style-shorthand.html | 6 ++---
.../style-shorthand.reel/style-shorthand.js | 5 +++-
js/panels/css-panel/style.reel/style.css | 6 +++++
js/panels/css-panel/style.reel/style.html | 2 +-
9 files changed, 60 insertions(+), 10 deletions(-)
(limited to 'js')
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 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
+.treeRoot > .style-shorthand-branch > div {
+ display: none;
+}
+.treeRoot > .style-shorthand-branch > dl {
+ margin-top: 4px;
+}
\ 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
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <link href="declaration.css" rel="stylesheet" type="text/css" />
<script type="text/montage-serialization">
{
"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 @@
position: relative;
}
.style-rule-heading {
- /*background-color: #333;*/
+ background-color: #f3f3f3;
+ border: 1px #e7e7e7;
+ border-style: solid none;
+ box-shadow: inset 0 0 1px #FFF;
+ padding: 4px;
}
.style-sheet-name {
+ color: #333;
position: absolute;
- right: 0;
-
+ right: 8px;
+ text-decoration: none;
+ font-family: "Droid Sans", sans-serif;
}
\ 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 @@
font-family: monospace;
padding: 0;
margin: 0;
- overflow-y: scroll;
+ overflow-y: auto;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
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 @@
</copyright> */
.css-tree-branch {
+ /*padding-left: 10px;*/
+}
+.style-item {
padding-left: 10px;
}
.css-tree-branch .css-tree-branch {
padding-left: 20px;
margin-top: 0;
margin-bottom: 0;
-}
\ No newline at end of file
+}
+.style-shorthand-branch > div {
+ background-color: #fafafa;
+ border-bottom: 1px solid #ededed;
+ position: relative;
+}
+.style-shorthand-branch > div:hover {
+ background-color: #f1f1f1;
+ border-bottom: 1px solid #e1e1e1;
+ position: relative;
+}
+.style-shorthand-branch > div:hover:after {
+ opacity: 1;
+}
+.style-shorthand-branch > div:after {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAYAAAD%2BWDajAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODUxMDg2RjY1NkYxMUUxODMyRUQwQzAxMzUxMjUxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODUxMDg3MDY1NkYxMUUxODMyRUQwQzAxMzUxMjUxRiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4NTEwODZENjU2RjExRTE4MzJFRDBDMDEzNTEyNTFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4NTEwODZFNjU2RjExRTE4MzJFRDBDMDEzNTEyNTFGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BaoqKDgAAAGhJREFUeNpibG9vP8DAwGDPgAkuMAGJ6QzYwXSQ5Bogfoom8RGIFzNVVFT8xaJ7FlD8OxOUMxeIf0HZIMWzQAywJFDVC6jxILADyL8Dl4SCKWg0A8P%2F%2F%2F%2FhGOitFch8JjSHxCFzAAIMACCjLJNKELwVAAAAAElFTkSuQmCC);
+ background-repeat: no-repeat;
+ content: "\00a0";
+ height: 10px;
+ position: absolute;
+ right: 8px;
+ top: 4px;
+ width: 10px;
+ opacity: .3;
+}
+
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
"arrayController": {"@": "arrayController" },
"repetition": {"@": "repetition"},
"leafComponent": {"@": "leaf"},
- "branchComponent": {"@": "branch"}
+ "branchComponent": {"@": "branch"},
+ "branchCollapser": {"#": "collapser"}
}
},
@@ -154,10 +155,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
</head>
<body>
<div id="branch" class="style-shorthand-branch">
- <div>
+ <div class="style-item" id="collapser">
<dt id="property" class="css-property"></dt>
<dd id="value" class="css-value"></dd>
- <a href="#" id="style-list-disclosure" class="list-disclorue">A</a>
</div>
<dl id="branchList" class="css-tree-branch">
<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, {
},
prepareForDraw : {
value: function() {
- this.styleListDisclosure.addEventListener('click', this, false);
+// this.styleListDisclosure.addEventListener('click', this, false);
this.treeView.contentController.addBranchController(this.arrayController);
}
},
templateDidLoad: {
value: function() {
this.arrayController.delegate = this.treeView.contentController;
+
+ this.branchCollapser.removeAttribute('id');
+ this.branchCollapser.addEventListener('click', this, false);
}
},
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 @@
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
+.style-item {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
.css-property, .css-value {
border: 1px solid rgba(0,0,0,0);
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
</script>
</head>
<body>
-<div id="container">
+<div id="container" class="style-item">
<dt id="property" class="css-property"></dt>
<dd id="value" class="css-value"></dd>
</div>
--
cgit v1.2.3