aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel')
-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
4 files changed, 79 insertions, 4 deletions
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
52 ///// Add rule button action 55 ///// Add rule button action
53 handleAddAction : { 56 handleAddAction : {
54 value: function(e) { 57 value: function(e) {
@@ -82,6 +85,24 @@ exports.StylesViewMediator = Montage.create(Component, {
82 } 85 }
83 }, 86 },
84 87
88 handleComputedAction : {
89 value: function(e) {
90 var container = this.ownerComponent,
91 panelToShow = (container.contentPanel === "computed") ? "rules" : "computed";
92
93 ///// Handle showing and hiding of the add button
94 if(panelToShow === "computed") {
95 container.toolbar.hideButton('add');
96 } else {
97 container.toolbar.showButton('add');
98 }
99
100 container.contentPanel = panelToShow;
101 this.ownerComponent.handleSelectionChange();
102 }
103 },
104
105
85 _doesSelectorTargetElement : { 106 _doesSelectorTargetElement : {
86 value: function doesSelectorTargetElement(selector, element) { 107 value: function doesSelectorTargetElement(selector, element) {
87 var doc = element.ownerDocument, 108 var doc = element.ownerDocument,