From 560d9255ed1bba04f3dc3f4320307f7d5626bfab Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 3 May 2012 11:49:24 -0700 Subject: CSS Panel - Support showing computed styles --- .../styles-view-container.css | 7 ++++ .../styles-view-container.html | 9 ++++- .../styles-view-container.js | 46 ++++++++++++++++++++-- js/panels/css-panel/styles-view-delegate.js | 21 ++++++++++ 4 files changed, 79 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel') 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 @@ .styles-view-toolbar-container .toolbar-container { border-top: 1px solid #5c5c5c; } + +/* ----- Toolbar ----*/ + +.styles-view-container .toolbar-computed-button { + 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); + +} \ 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 "properties" : { "element" : {"#" : "container"}, "ruleListContainer": {"@": "ruleListContainer" }, - "substitution": {"@": "substitution" } + "computedStyleView": {"@": "computedStyleView" }, + "substitution": {"@": "substitution" }, + "toolbar": {"@": "toolbar"} } }, "substitution": { @@ -65,6 +67,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot { "title": "Add", "identifier": "add" + }, + { + "title": "Computed Styles", + "identifier": "computed", + "leftAlign": true } ] } 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, { templateDidLoad : { value: function() { this.eventManager.addEventListener('styleSheetsReady', this, false); + //this.eventManager.addEventListener('elementChanging', this, false); this.eventManager.addEventListener('elementChange', this, false); } }, @@ -44,17 +45,56 @@ exports.StylesViewContainer = Montage.create(Component, { if(elements.length === 0) { this.hasStyles = false; return false; + } else if(elements.length === 1) { + if(this.contentPanel === "rules") { + this.ruleListContainer.displayListForSelection(elements); + } else { + this.computedStyleView.declaration = elements[0]; + } + } else { + } - this.ruleListContainer.displayListForSelection(elements); this.hasStyles = true; } }, handleElementChange : { value: function(e) { - if(e._event.detail.type !== 'cssChange') { - this.ruleListContainer.displayedList.component.update(); + var elements = this.application.ninja.selectedElements; + + if(elements.length === 0) { + return false; + } else if(elements.length === 1) { + if(this.contentPanel === "rules") { + if(e._event.detail.type !== 'cssChange') { + this.ruleListContainer.displayedList.component.update(); + } + } else { + this.computedStyleView.declaration = elements[0]; + } + } else { + return false; + } + + } + }, + + handleElementChanging : { + value: function(e) { + var elements = this.application.ninja.selectedElements; + + if(elements.length === 1) { + if(this.contentPanel === "rules") { +// if(e._event.detail.type !== 'cssChange') { +// this.ruleListContainer.displayedList.component.update(); +// } + } else { + this.computedStyleView.declaration = elements[0]; + } } + + return false; + } }, 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, { } }, + /// Toolbar Button Actions + /// ----------------------- + ///// Add rule button action handleAddAction : { value: function(e) { @@ -82,6 +85,24 @@ exports.StylesViewMediator = Montage.create(Component, { } }, + handleComputedAction : { + value: function(e) { + var container = this.ownerComponent, + panelToShow = (container.contentPanel === "computed") ? "rules" : "computed"; + + ///// Handle showing and hiding of the add button + if(panelToShow === "computed") { + container.toolbar.hideButton('add'); + } else { + container.toolbar.showButton('add'); + } + + container.contentPanel = panelToShow; + this.ownerComponent.handleSelectionChange(); + } + }, + + _doesSelectorTargetElement : { value: function doesSelectorTargetElement(selector, element) { var doc = element.ownerDocument, -- cgit v1.2.3