aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorEric Guzman2012-05-03 11:49:24 -0700
committerEric Guzman2012-05-03 11:49:24 -0700
commit560d9255ed1bba04f3dc3f4320307f7d5626bfab (patch)
treefc8e5387b31173c081caca996380d33677a30eac /js
parentfc104084e964023263332dbf2d916bf00d525e8b (diff)
downloadninja-560d9255ed1bba04f3dc3f4320307f7d5626bfab.tar.gz
CSS Panel - Support showing computed styles
Diffstat (limited to 'js')
-rwxr-xr-xjs/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html4
-rwxr-xr-xjs/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css11
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.css7
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.html9
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js46
-rw-r--r--js/panels/css-panel/styles-view-delegate.js21
6 files changed, 87 insertions, 11 deletions
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
index 53c243a8..b994c5c2 100755
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
@@ -25,8 +25,8 @@
25 </script> 25 </script>
26 26
27</head> 27</head>
28<body id="computestylesubpanel" onload=""> 28<body>
29 <div id="nj-css-panel-computed" class="nj-css-panel-hide"> 29 <div data-montage-id="nj-css-panel-computed" class="nj-css-panel-computed">
30 <div id="nj-css-filter-panel"> 30 <div id="nj-css-filter-panel">
31 <input id="nj-css-filter" class="nj-skinned" type="search"> 31 <input id="nj-css-filter" class="nj-skinned" type="search">
32 <select id="nj-css-group-select" class="nj-skinned"> 32 <select id="nj-css-group-select" class="nj-skinned">
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
index e9af9b88..9f0043f4 100755
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
@@ -12,12 +12,13 @@
12 padding: 8px 0; 12 padding: 8px 0;
13 position: relative; 13 position: relative;
14} 14}
15#nj-computed-sub-panel { 15.nj-css-panel-computed {
16 display:-webkit-box; 16 display:-webkit-box;
17 -webkit-box-flex: 1; 17 -webkit-box-flex: 1;
18 -webkit-box-orient: vertical; 18 -webkit-box-orient: vertical;
19} 19}
20#nj-computed-sub-panel .nj-sub-panel { 20/*#nj-computed-sub-panel .nj-sub-panel {*/
21.sub-panel-slot .nj-sub-panel {
21 -webkit-box-flex: 1; 22 -webkit-box-flex: 1;
22 background-color: #474747; 23 background-color: #474747;
23 color: #FFF; 24 color: #FFF;
@@ -53,10 +54,10 @@
53#nj-css-computed-list { 54#nj-css-computed-list {
54 margin-top: 7px; 55 margin-top: 7px;
55} 56}
57#nj-css-computed-list dt, #nj-css-computed-list dd {
58 cursor: default;
59}
56#nj-css-computed-list dt { 60#nj-css-computed-list dt {
57 color: #FFF; 61 color: #FFF;
58 width: 55%; 62 width: 55%;
59} 63}
60#nj-computed-sub-panel.nj-css-panel-hide {
61 display: none;
62} \ No newline at end of file
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
index 5bc34d57..bec2f449 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
@@ -24,3 +24,10 @@
24.styles-view-toolbar-container .toolbar-container { 24.styles-view-toolbar-container .toolbar-container {
25 border-top: 1px solid #5c5c5c; 25 border-top: 1px solid #5c5c5c;
26} 26}
27
28/* ----- Toolbar ----*/
29
30.styles-view-container .toolbar-computed-button {
31 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMTYyOTg1RURFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMTYyOTg1RkRFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxNjI5ODVDREU1MjExRTBCRDJGRTA0OTVBQ0JENDY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxNjI5ODVEREU1MjExRTBCRDJGRTA0OTVBQ0JENDY2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BQa86dAAAAgdJREFUeNpiZmBgEABiFSAWAuIfQPwPKsYPZf9mIAAM9u%2Ff%2F3%2Fp0qV3oQbxFBQU5M6dO%2FcQkG0BxFz4NDNBbWP48eMHN5CSBGLhFy9eyCkpKdlOmDBhNpCvh88QkAF%2FQQw2NjZuX1%2FfxNDQ0AIREREbkJi%2Bvr7OxIkTZwGZaiAl2AxgBGLtVatW7RMVFRXDZcvBgwcnNDQ01AKZX9DlmIH417Vr186ws7NzPn78%2BNW9e%2Feevnz5kkFGRgYUiAyXLl26XFFR0QBkvoC5FpsrOIFYHIjlQX4OCgqaAgrYvr6%2B60C%2BHRBzQ73LAqVRwuA%2FEH8H4pdA%2FBCI7wO98%2FjRo0dPgE4%2FYmJi8hcalXxxcXG2QFoKOTyYsTnpPxCIiYkZRkREBL5%2B%2FfruuXPnzgKFJSorK5cpKCioHDt27BqQ%2FwnkJSYs%2Bn8DNTyFuozh7du3skBKEZRGvn37xuft7Z2Ym5sLChMlkEtYsDkAFLDMzMx%2FQBwzMzMvHR0d3d%2B%2Ff3Pw8vKCUisDMIzCgfK%2FgemkghFHzAkkJSXlxsbGNuGK2p9A4OHhoc%2BCQ%2F7LvHnz5j98%2BPCepKSk1r9%2F%2F5g%2Ff%2F4sBkxkYbKystzAVPt7ypQpIMPfEUrmHKDQhyZ3mwULFjzZsWPHTy8vrxogXxpXJOACSsAMdxro%2FwJkzYwkGMANdc0PWBSCBAECDAAwy7PLmtswugAAAABJRU5ErkJggg%3D%3D);
32
33} \ No newline at end of file
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
index 658a8bac..9868f486 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
@@ -16,7 +16,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "container"}, 17 "element" : {"#" : "container"},
18 "ruleListContainer": {"@": "ruleListContainer" }, 18 "ruleListContainer": {"@": "ruleListContainer" },
19 "substitution": {"@": "substitution" } 19 "computedStyleView": {"@": "computedStyleView" },
20 "substitution": {"@": "substitution" },
21 "toolbar": {"@": "toolbar"}
20 } 22 }
21 }, 23 },
22 "substitution": { 24 "substitution": {
@@ -65,6 +67,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
65 { 67 {
66 "title": "Add", 68 "title": "Add",
67 "identifier": "add" 69 "identifier": "add"
70 },
71 {
72 "title": "Computed Styles",
73 "identifier": "computed",
74 "leftAlign": true
68 } 75 }
69 ] 76 ]
70 } 77 }
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
index 1d6d6075..32b2c3ee 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -29,6 +29,7 @@ exports.StylesViewContainer = Montage.create(Component, {
29 templateDidLoad : { 29 templateDidLoad : {
30 value: function() { 30 value: function() {
31 this.eventManager.addEventListener('styleSheetsReady', this, false); 31 this.eventManager.addEventListener('styleSheetsReady', this, false);
32 //this.eventManager.addEventListener('elementChanging', this, false);
32 this.eventManager.addEventListener('elementChange', this, false); 33 this.eventManager.addEventListener('elementChange', this, false);
33 } 34 }
34 }, 35 },
@@ -44,17 +45,56 @@ exports.StylesViewContainer = Montage.create(Component, {
44 if(elements.length === 0) { 45 if(elements.length === 0) {
45 this.hasStyles = false; 46 this.hasStyles = false;
46 return false; 47 return false;
48 } else if(elements.length === 1) {
49 if(this.contentPanel === "rules") {
50 this.ruleListContainer.displayListForSelection(elements);
51 } else {
52 this.computedStyleView.declaration = elements[0];
53 }
54 } else {
55
47 } 56 }
48 57
49 this.ruleListContainer.displayListForSelection(elements);
50 this.hasStyles = true; 58 this.hasStyles = true;
51 } 59 }
52 }, 60 },
53 handleElementChange : { 61 handleElementChange : {
54 value: function(e) { 62 value: function(e) {
55 if(e._event.detail.type !== 'cssChange') { 63 var elements = this.application.ninja.selectedElements;
56 this.ruleListContainer.displayedList.component.update(); 64
65 if(elements.length === 0) {
66 return false;
67 } else if(elements.length === 1) {
68 if(this.contentPanel === "rules") {
69 if(e._event.detail.type !== 'cssChange') {
70 this.ruleListContainer.displayedList.component.update();
71 }
72 } else {
73 this.computedStyleView.declaration = elements[0];
74 }
75 } else {
76 return false;
77 }
78
79 }
80 },
81
82 handleElementChanging : {
83 value: function(e) {
84 var elements = this.application.ninja.selectedElements;
85
86 if(elements.length === 1) {
87 if(this.contentPanel === "rules") {
88// if(e._event.detail.type !== 'cssChange') {
89// this.ruleListContainer.displayedList.component.update();
90// }
91 } else {
92 this.computedStyleView.declaration = elements[0];
93 }
57 } 94 }
95
96 return false;
97
58 } 98 }
59 }, 99 },
60 100
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index ec0026a1..ccbfecad 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -49,6 +49,9 @@ exports.StylesViewMediator = Montage.create(Component, {
49 } 49 }