diff options
Diffstat (limited to 'js/panels')
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 | } |
50 | }, | 50 | }, |
51 | 51 | ||
52 | /// Toolbar Button Actions | ||
53 | /// ----------------------- | ||
54 |