From 10e4712ea5cf44041668dce9e767cb875ed53784 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 12 Mar 2012 15:23:51 -0700 Subject: CSS Panel Update - Styles View container update --- .../styles-view-container.css | 14 ++++ .../styles-view-container.html | 35 ++------- .../styles-view-container.js | 83 ++++------------------ 3 files changed, 34 insertions(+), 98 deletions(-) (limited to 'js/panels') 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 326254ed..ff0b0b25 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 @@ -22,4 +22,18 @@ } .styles-view-toolbar-container .toolbar-container { border-top: 1px solid #5c5c5c; +} + + +.styles-view-container .rule-list li { + border-top: 1px solid #CCC; + padding: 6px; +} +.styles-view-container .rule-list li:first-child { + padding-top: 0; + border-style: none; +} + +.styles-view-container .rule-list li:after { + content: "}"; } \ 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 97c7c889..e8ddb139 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 @@ -15,7 +15,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name" : "StylesViewContainer", "properties" : { "element" : {"#" : "container"}, - "ruleList": {"@": "ruleList" } + "ruleListContainer": {"@": "ruleListContainer" }, + "substitution": {"@": "substitution" } } }, "substitution": { @@ -24,7 +25,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "properties": { "element": {"#": "sub-panel-slot"}, "switchComponents": { - "rules": {"@": "ruleList"}, + "rules": {"@": "ruleListContainer"}, "computed": {"@": "computedStyleView"} } }, @@ -36,35 +37,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } } }, - "ruleList": { - "module" : "js/panels/css-panel/rule-list.reel", - "name": "RuleList", - "properties": { - "supportedRules" : { - "1" : {"@": "css-style-rule"}, - "3" : {"@": "css-import-rule"}, - "4" : {"@": "css-media-rule"}, - "5" : {"@": "css-font-face-rule"}, - "6" : {"@": "css-page-rule"}, - "10" : {"@": "namespace-rule"} - } - }, - "bindings": { - "contentController" : { - "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "contentController", - "oneway": true - } - } - }, - "css-style-rule": { - "module": "js/panels/css-panel/rule-components/css-style-rule.reel", - "name": "CssStyleRule" + "ruleListContainer": { + "module": "js/panels/css-panel/rule-list-container.reel", + "name": "RuleListContainer" }, "computedStyleView": { "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", - "name": "ComputedStyleSubPanel", - "properties": { } + "name": "ComputedStyleSubPanel" }, "toolbar": { "module": "js/components/toolbar.reel", 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 6164a14c..5967345a 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 @@ -8,9 +8,6 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.StylesViewContainer = Montage.create(Component, { - noStylesCondition : { - value: true - }, contentController : { value: null }, @@ -47,41 +44,31 @@ exports.StylesViewContainer = Montage.create(Component, { if(elements.length === 0) { return false; - } else if(elements.length >= 1) { + } else if(elements.length > 1) { type = 'ELEMENTS'; - selection = elements; + selection = elements.map(function(obj) { + return obj._element; + }); } else { - type = 'ELEMENTS'; - selection = elements[0] + type = 'ELEMENT'; + selection = elements[0]._element; } - ruleList = this._getRuleList({ + ruleList = this.ruleListContainer._getRuleList({ selectionType : type, selection : selection }); if(ruleList) { - this.displayedList = ruleList; + this.ruleListContainer.displayedList = ruleList; + } else { + this.ruleListContainer.add(type, selection); } + + this.hasStyles = true; } }, - _lastDisplayedList : { - value: null - }, - _displayedList : { - value: null - }, - displayedList : { - get: function() { - return this._displayedList; - }, - set: function(list) { - this._hasStyles = true; - this._lastDisplayedList = this._displayedList; - this._displayedList = list; - this.needsDraw = true; - } - }, + _ruleList : { value: [] }, @@ -101,60 +88,16 @@ exports.StylesViewContainer = Montage.create(Component, { }, prepareForDraw : { value: function() { - debugger; console.log("styles view container - prepare for draw"); } }, draw : { value: function() { - console.log("styles view container - draw"); -console.log("has style = " + this._hasStyles); if(this.hasStyles) { this.element.classList.remove('no-styles'); } else { this.element.classList.add('no-styles'); } - - if(this._lastDisplayedList) { - //this._lastDisplayedList.style.display = 'none'; - } - - //this._displayedList.style.display = ''; - } - }, - _getRuleList : { - value: function(s) { - var ruleListsOfType, i, list, matchesAll; - - ruleListsOfType = this.ruleLists.filter(function(list) { - return list.selectionType = s.selectionType; - }); - - for(i = 0; i