diff options
3 files changed, 34 insertions, 98 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 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 @@ | |||
22 | } | 22 | } |
23 | .styles-view-toolbar-container .toolbar-container { | 23 | .styles-view-toolbar-container .toolbar-container { |
24 | border-top: 1px solid #5c5c5c; | 24 | border-top: 1px solid #5c5c5c; |
25 | } | ||
26 | |||
27 | |||
28 | .styles-view-container .rule-list li { | ||
29 | border-top: 1px solid #CCC; | ||
30 | padding: 6px; | ||
31 | } | ||
32 | .styles-view-container .rule-list li:first-child { | ||
33 | padding-top: 0; | ||
34 | border-style: none; | ||
35 | } | ||
36 | |||
37 | .styles-view-container .rule-list li:after { | ||
38 | content: "}"; | ||
25 | } \ No newline at end of file | 39 | } \ 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 | |||
15 | "name" : "StylesViewContainer", | 15 | "name" : "StylesViewContainer", |
16 | "properties" : { | 16 | "properties" : { |
17 | "element" : {"#" : "container"}, | 17 | "element" : {"#" : "container"}, |
18 | "ruleList": {"@": "ruleList" } | 18 | "ruleListContainer": {"@": "ruleListContainer" }, |
19 | "substitution": {"@": "substitution" } | ||
19 | } | 20 | } |
20 | }, | 21 | }, |
21 | "substitution": { | 22 | "substitution": { |
@@ -24,7 +25,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
24 | "properties": { | 25 | "properties": { |
25 | "element": {"#": "sub-panel-slot"}, | 26 | "element": {"#": "sub-panel-slot"}, |
26 | "switchComponents": { | 27 | "switchComponents": { |
27 | "rules": {"@": "ruleList"}, | 28 | "rules": {"@": "ruleListContainer"}, |
28 | "computed": {"@": "computedStyleView"} | 29 | "computed": {"@": "computedStyleView"} |
29 | } | 30 | } |
30 | }, | 31 | }, |
@@ -36,35 +37,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
36 | } | 37 | } |
37 | } | 38 | } |
38 | }, | 39 | }, |
39 | "ruleList": { | 40 | "ruleListContainer": { |
40 | "module" : "js/panels/css-panel/rule-list.reel", | 41 | "module": "js/panels/css-panel/rule-list-container.reel", |
41 | "name": "RuleList", | 42 | "name": "RuleListContainer" |
42 | "properties": { | ||
43 | "supportedRules" : { | ||
44 | "1" : {"@": "css-style-rule"}, | ||
45 | "3" : {"@": "css-import-rule"}, | ||
46 | "4" : {"@": "css-media-rule"}, | ||
47 | "5" : {"@": "css-font-face-rule"}, | ||
48 | "6" : {"@": "css-page-rule"}, | ||
49 | "10" : {"@": "namespace-rule"} | ||
50 | } | ||
51 | }, | ||
52 | "bindings": { | ||
53 | "contentController" : { | ||
54 | "boundObject": {"@": "owner"}, | ||
55 | "boundObjectPropertyPath": "contentController", | ||
56 | "oneway": true | ||
57 | } | ||
58 | } | ||
59 | }, | ||
60 | "css-style-rule": { | ||
61 | "module": "js/panels/css-panel/rule-components/css-style-rule.reel", | ||
62 | "name": "CssStyleRule" | ||
63 | }, | 43 | }, |
64 | "computedStyleView": { | 44 | "computedStyleView": { |
65 | "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", | 45 | "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel", |
66 | "name": "ComputedStyleSubPanel", | 46 | "name": "ComputedStyleSubPanel" |
67 | "properties": { } | ||
68 | }, | 47 | }, |
69 | "toolbar": { | 48 | "toolbar": { |
70 | "module": "js/components/toolbar.reel", | 49 | "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, | |||
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | exports.StylesViewContainer = Montage.create(Component, { | 10 | exports.StylesViewContainer = Montage.create(Component, { |
11 | noStylesCondition : { | ||
12 | value: true | ||
13 | }, | ||
14 | contentController : { | 11 | contentController : { |
15 | value: null | 12 | value: null |
16 | }, | 13 | }, |
@@ -47,41 +44,31 @@ exports.StylesViewContainer = Montage.create(Component, { | |||
47 | 44 | ||
48 | if(elements.length === 0) { | 45 | if(elements.length === 0) { |
49 | return false; | 46 | return false; |
50 | } else if(elements.length >= 1) { | 47 | } else if(elements.length > 1) { |
51 | type = 'ELEMENTS'; | 48 | type = 'ELEMENTS'; |
52 | selection = elements; | 49 | selection = elements.map(function(obj) { |
50 | return obj._element; | ||
51 | }); | ||
53 | } else { | 52 | } else { |
54 | type = 'ELEMENTS'; | 53 | type = 'ELEMENT'; |
55 | selection = elements[0] | 54 | selection = elements[0]._element; |
56 | } | 55 | } |
57 | 56 | ||
58 | ruleList = this._getRuleList({ | 57 | ruleList = this.ruleListContainer._getRuleList({ |
59 | selectionType : type, | 58 | selectionType : type, |
60 | selection : selection | 59 | selection : selection |
61 | }); | 60 | }); |
62 | 61 | ||
63 | if(ruleList) { | 62 | if(ruleList) { |
64 | this.displayedList = ruleList; | 63 | this.ruleListContainer.displayedList = ruleList; |
64 | } else { | ||
65 | this.ruleListContainer.add(type, selection); | ||
65 | } | 66 | } |
67 | |||
68 | this.hasStyles = true; | ||
66 | } | 69 | } |
67 | }, | 70 | }, |
68 | _lastDisplayedList : { | 71 | |
69 | value: null | ||
70 | }, | ||
71 | _displayedList : { | ||
72 | value: null | ||
73 | }, | ||
74 | displayedList : { | ||
75 | get: function() { | ||
76 | return this._displayedList; | ||
77 | }, | ||
78 | set: function(list) { | ||
79 | this._hasStyles = true; | ||
80 | this._lastDisplayedList = this._displayedList; | ||
81 | this._displayedList = list; | ||
82 | this.needsDraw = true; | ||
83 | } | ||
84 | }, | ||
85 | _ruleList : { | 72 | _ruleList : { |
86 | value: [] | 73 | value: [] |
87 | }, | 74 | }, |
@@ -101,60 +88,16 @@ exports.StylesViewContainer = Montage.create(Component, { | |||
101 | }, | 88 | }, |
102 | prepareForDraw : { | 89 | prepareForDraw : { |
103 | value: function() { | 90 | value: function() { |
104 | debugger; | ||
105 | console.log("styles view container - prepare for draw"); | 91 | console.log("styles view container - prepare for draw"); |
106 | } | 92 | } |
107 | }, | 93 | }, |
108 | draw : { | 94 | draw : { |
109 | value: function() { | 95 | value: function() { |
110 | console.log("styles view container - draw"); | ||
111 | console.log("has style = " + this._hasStyles); | ||
112 | if(this.hasStyles) { | 96 | if(this.hasStyles) { |
113 | this.element.classList.remove('no-styles'); | 97 | this.element.classList.remove('no-styles'); |
114 | } else { | 98 | } else { |
115 | this.element.classList.add('no-styles'); | 99 | this.element.classList.add('no-styles'); |
116 | } | 100 | } |
117 | |||
118 | if(this._lastDisplayedList) { | ||
119 | //this._lastDisplayedList.style.display = 'none'; | ||
120 | } | ||
121 | |||
122 | //this._displayedList.style.display = ''; | ||
123 | } | ||
124 | }, | ||
125 | _getRuleList : { | ||