CSSPanel - Add mutli-selection and adding classes to groups of elements

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
                 "name": "StylesViewContainer",
                 "properties": {
                     "element": {"#": "styles-view-container" },
-                    "selectionNameLabel": {"#": "selection-name" }
+                    "selectionName": {"@": "selectionName" }
+                }
+            },
+            "selectionName" : {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#":"selection-name"}
+                },
+                "bindings": {
+                    "value" : {
+                        "boundObject": {"@": "stylesViewContainer"},
+                        "boundObjectPropertyPath": "selectionNameLabelText",
+                        "oneway": true
+                    }
                 }
             }
         }
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, {
         value: function(selection) {
             var rules;
 
-            if(selection.length === 1) {
+            if(selection.length > 1) {
+                rules = this.stylesController.getCommonRules(selection);
+            } else if(selection.length === 1) {
                 rules = this.stylesController.getMatchingRules(selection[0]);
 
                 ///// Add inline style to rule list
@@ -109,7 +111,7 @@ exports.RuleListContainer = Montage.create(Component, {
                     style            : selection[0].style
                 });
 
-            } //// TODO: support more selection types
+            }
 
             return rules;
         }
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, {
     contentPanel : {
         value: 'rules'
     },
+    _selectionNameLabelText : {
+        value: null
+    },
+    selectionNameLabelText : {
+        get: function() {
+            return this._selectionNameLabelText;
+        },
+        set: function(value) {
+            if(value === this._selectionNameLabelText) { return false; }
+
+            this._selectionNameLabelText = value;
+
+            this.needsDraw = true;
+        }
+    },
     _lastSelection : {
         value: null
     },
@@ -62,7 +77,10 @@ exports.StylesViewContainer = Montage.create(Component, {
         value: function() {
             var elements = this.application.ninja.selectedElements;
 
-            if(this._isSameArray(elements, this._lastSelection)) { console.log('new selection is identical');return false; }
+            if(this._isSameArray(elements, this._lastSelection) && this.contentPanel === "rules") {
+                console.log('new selection is identical');
+                return false;
+            }
 
             this._lastSelection = elements;
 
@@ -72,14 +90,20 @@ exports.StylesViewContainer = Montage.create(Component, {
             } else if(elements.length === 1) {
 
                 ///// update the selection status label with the label of the element
-                this.selectionNameLabel.innerHTML = this._getElementLabel(elements[0]);
+                this.selectionNameLabelText = this._getElementLabel(elements[0]);
 
                 if(this.contentPanel === "rules") {
                     this.ruleListContainer.displayListForSelection(elements);
                 } else {
                     this.computedStyleView.declaration = elements[0];
                 }
+                this.toolbar.showButton('computed');
             } else {
+                this.toolbar.hideButton('computed');
+                this.contentPanel = "rules";
+                this.selectionNameLabelText = elements.length + " elements selected.";
+                ///// find common rules
+                this.ruleListContainer.displayListForSelection(elements);
 
             }
 
@@ -130,10 +154,12 @@ exports.StylesViewContainer = Montage.create(Component, {
         value: function() {
             if(this.hasStyles) {
                 this.element.classList.remove('no-styles');
-                this.selectionNameLabel.classList.remove('no-styles');
+                //this.selectionNameLabel.classList.remove('no-styles');
+                this.selectionName.element.classList.remove('no-styles');
             } else {
                 this.element.classList.add('no-styles');
-                this.selectionNameLabel.classList.add('no-styles');
+                //this.selectionNameLabel.classList.add('no-styles');
+                this.selectionName.element.classList.add('no-styles');
             }
         }
     },
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, {
             }
 
             container.contentPanel = panelToShow;
-            this.ownerComponent.handleSelectionChange();
+            container.handleSelectionChange();
         }
     },