aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
authorEric Guzman2012-05-14 23:44:47 -0700
committerEric Guzman2012-05-14 23:44:47 -0700
commitd4ce8c2fe42fcbfc36cf4b20ef8de67c6471c241 (patch)
tree9698ed4cc633fc6ac84250ee2f342b5d3a6f8d97 /js/panels/css-panel
parentb3624fbd6ed9c03e1b5c889bf4757af2ff6ce96d (diff)
downloadninja-d4ce8c2fe42fcbfc36cf4b20ef8de67c6471c241.tar.gz
CSSPanel - Add mutli-selection and adding classes to groups of elements
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/css-panel.reel/css-panel.html15
-rw-r--r--js/panels/css-panel/rule-list-container.reel/rule-list-container.js6
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js34
-rw-r--r--js/panels/css-panel/styles-view-delegate.js2
4 files changed, 49 insertions, 8 deletions
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
index f0c538c8..5bc5c87d 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -32,7 +32,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
32 "name": "StylesViewContainer", 32 "name": "StylesViewContainer",
33 "properties": { 33 "properties": {
34 "element": {"#": "styles-view-container" }, 34 "element": {"#": "styles-view-container" },
35 "selectionNameLabel": {"#": "selection-name" } 35 "selectionName": {"@": "selectionName" }
36 }
37 },
38 "selectionName" : {
39 "prototype": "montage/ui/dynamic-text.reel",
40 "properties": {
41 "element": {"#":"selection-name"}
42 },
43 "bindings": {
44 "value" : {
45 "boundObject": {"@": "stylesViewContainer"},
46 "boundObjectPropertyPath": "selectionNameLabelText",
47 "oneway": true
48 }
36 } 49 }
37 } 50 }
38 } 51 }
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
index 511ff24c..50d69093 100644
--- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -98,7 +98,9 @@ exports.RuleListContainer = Montage.create(Component, {
98 value: function(selection) { 98 value: function(selection) {
99 var rules; 99 var rules;
100 100
101 if(selection.length === 1) { 101 if(selection.length > 1) {
102 rules = this.stylesController.getCommonRules(selection);
103 } else if(selection.length === 1) {
102 rules = this.stylesController.getMatchingRules(selection[0]); 104 rules = this.stylesController.getMatchingRules(selection[0]);
103 105
104 ///// Add inline style to rule list 106 ///// Add inline style to rule list
@@ -109,7 +111,7 @@ exports.RuleListContainer = Montage.create(Component, {
109 style : selection[0].style 111 style : selection[0].style
110 }); 112 });
111 113
112 } //// TODO: support more selection types 114 }
113 115
114 return rules; 116 return rules;
115 } 117 }
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 a47b0db1..1372de0c 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
@@ -14,6 +14,21 @@ exports.StylesViewContainer = Montage.create(Component, {
14 contentPanel : { 14 contentPanel : {
15 value: 'rules' 15 value: 'rules'
16 }, 16 },
17 _selectionNameLabelText : {
18 value: null
19 },
20 selectionNameLabelText : {
21 get: function() {
22 return this._selectionNameLabelText;
23 },
24 set: function(value) {
25 if(value === this._selectionNameLabelText) { return false; }
26
27 this._selectionNameLabelText = value;
28
29 this.needsDraw = true;
30 }
31 },
17 _lastSelection : { 32 _lastSelection : {
18 value: null 33 value: null
19 }, 34 },
@@ -62,7 +77,10 @@ exports.StylesViewContainer = Montage.create(Component, {
62 value: function() { 77 value: function() {
63 var elements = this.application.ninja.selectedElements; 78 var elements = this.application.ninja.selectedElements;
64 79
65 if(this._isSameArray(elements, this._lastSelection)) { console.log('new selection is identical');return false; } 80 if(this._isSameArray(elements, this._lastSelection) && this.contentPanel === "rules") {
81 console.log('new selection is identical');
82 return false;
83 }
66 84
67 this._lastSelection = elements; 85 this._lastSelection = elements;
68 86
@@ -72,14 +90,20 @@ exports.StylesViewContainer = Montage.create(Component, {
72 } else if(elements.length === 1) { 90 } else if(elements.length === 1) {
73 91
74 ///// update the selection status label with the label of the element 92 ///// update the selection status label with the label of the element
75 this.selectionNameLabel.innerHTML = this._getElementLabel(elements[0]); 93 this.selectionNameLabelText = this._getElementLabel(elements[0]);
76 94
77 if(this.contentPanel === "rules") { 95 if(this.contentPanel === "rules") {
78 this.ruleListContainer.displayListForSelection(elements); 96 this.ruleListContainer.displayListForSelection(elements);
79 } else { 97 } else {
80 this.computedStyleView.declaration = elements[0]; 98 this.computedStyleView.declaration = elements[0];
81 } 99 }
100 this.toolbar.showButton('computed');
82 } else { 101 } else {
102 this.toolbar.hideButton('computed');
103 this.contentPanel = "rules";
104 this.selectionNameLabelText = elements.length + " elements selected.";
105 ///// find common rules
106 this.ruleListContainer.displayListForSelection(elements);
83 107
84 } 108 }
85 109
@@ -130,10 +154,12 @@ exports.StylesViewContainer = Montage.create(Component, {
130 value: function() { 154 value: function() {
131 if(this.hasStyles) { 155 if(this.hasStyles) {
132 this.element.classList.remove('no-styles'); 156 this.element.classList.remove('no-styles');
133 this.selectionNameLabel.classList.remove('no-styles'); 157 //this.selectionNameLabel.classList.remove('no-styles');
158 this.selectionName.element.classList.remove('no-styles');
134 } else { 159 } else {
135 this.element.classList.add('no-styles'); 160 this.element.classList.add('no-styles');
136 this.selectionNameLabel.classList.add('no-styles'); 161 //this.selectionNameLabel.classList.add('no-styles');
162 this.selectionName.element.classList.add('no-styles');
137 } 163 }
138 } 164 }
139 }, 165 },
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index aba8c042..1b21f460 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -267,7 +267,7 @@ exports.StylesViewMediator = Montage.create(Component, {
267 } 267 }
268 268
269 container.contentPanel = panelToShow; 269 container.contentPanel = panelToShow;
270 this.ownerComponent.handleSelectionChange(); 270 container.handleSelectionChange();
271 } 271 }
272 }, 272 },
273 273