7 files changed, 52 insertions, 15 deletions

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index e0ffb1a8..54181bf3 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -88,6 +88,14 @@ exports.CssStyleRule = Montage.create(Component, {
             }
         }
     },
+    handleStop : {
+        value: function(e) {
+            if(this.focusDelegate) {
+                e._event.detail.preventDefault();
+                this.focusDelegate.handleSelectorStop(this.rule, this.selectorField.value, this);
+            }
+        }
+    },
     handleMouseover: {
         value: function(e) {
             if(this.focusDelegate) {
@@ -125,6 +133,7 @@ exports.CssStyleRule = Montage.create(Component, {
                 this.declarationComponent.type = 'inline';
             } else {
                 this.selectorField.addEventListener('change', this, false);
+                this.selectorField.addEventListener('stop', this, false);
                 this.selectorField.element.addEventListener('mouseover', this, false);
                 this.selectorField.element.addEventListener('mouseout', this, false);
             }
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 e2e269ba..c7766d08 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
@@ -45,7 +45,7 @@ exports.RuleListContainer = Montage.create(Component, {
             for(i = 0; i<this.ruleLists.length; i++) {
                 list = this.ruleLists[i];
 
-                if(selection.length > 1) {
+                if(selection.length === list.selection.length) {
                     matchesAll = selection.every(function(element, index, array) {
                         return list.selection.indexOf(element) !== -1;
                     });
@@ -53,12 +53,6 @@ exports.RuleListContainer = Montage.create(Component, {
                     if(matchesAll) {
                         break;
                     }
-                } else {
-                    ///// Selection (single element or stylesheet) is the same,
-                    ///// Use the existing rule list
-                    if(list.selection[0] === selection[0]) {
-                        break;
-                    }
                 }
 
                 list = null;
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
index 6be8d33c..d4755b04 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.css
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -10,4 +10,7 @@
 }
 .drag-over {
     /*background-color: red;*/
+}
+.css-animation-prevent * {
+    -webkit-transition-duration: 0 !important;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
index 57cbdb63..6187989b 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -216,7 +216,15 @@ exports.StyleDeclaration = Montage.create(Component, {
     },
 
     addNewStyle : {
-        value: function() {
+        value: function(preventAnimation) {
+            if(preventAnimation) {
+                this.element.classList.add('css-animation-prevent');
+
+                setTimeout(function() {
+                    this.element.classList.remove('css-animation-prevent');
+                }.bind(this), 1000);
+            }
+
             this.addStyle('property', 'value', {
                 isEmpty : true
             });
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 454008fa..078bd521 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -75,6 +75,13 @@ exports.StylesViewDelegate = Montage.create(Component, {
             this._dispatchChange();
         }
     },
+
+    handleSelectorStop : {
+        value: function(rule, newSelector, ruleComponent) {
+            ruleComponent.declarationComponent.repetition.childComponents[0].propertyField.start()
+        }
+    },
+
     _getClassNameFromSelector : {
         value: function(selectorText) {
             var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText);
@@ -145,7 +152,7 @@ exports.StylesViewDelegate = Montage.create(Component, {
                         if(nextFocus) {
                             nextFocus.propertyField.start();
                         } else if(style.dirty) {
-                            style.parentComponent.parentComponent.addNewStyle();
+                            style.parentComponent.parentComponent.addNewStyle(true);
                             style.editingNewStyle = false;
                             setTimeout(function() {
                                 style.getSiblingStyle('next').propertyField.start();
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index d05fb058..934a3851 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -28,15 +28,17 @@ exports.Properties = Montage.create(Component, {
 
             this._currentDocument = value;
 
-            if(!value) {
+//            if(!value) {
                 this.clear();
-            } else if(this._currentDocument.currentView === "design") {
-                // Save a reference of the pi inside the document view to be able to clear
-                this._currentDocument.model.views.design.propertiesPanel = this;
+//            }
 
+            /*
+            else if(this._currentDocument.currentView === "design") {
                 // Display the default document root PI
-                this.displayElementProperties(this._currentDocument.model.documentRoot);
+                //this.displayElementProperties(this._currentDocument.model.documentRoot);
+//                this.displaySelection(this._currentDocument.model.selection);
             }
+            */
         }
     },
 
@@ -181,6 +183,20 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
+    displaySelection: {
+        value: function(selection) {
+            if(selection.length === 0) {
+                this.displayElementProperties(this._currentDocument.model.documentRoot);
+            } else {
+                if(selection.length === 1) {
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]);
+                } else {
+                    this.displayGroupProperties(this.application.ninja.selectedElements);
+                }
+            }
+        }
+    },
+
     clear: {
         value: function() {
             this.elementName.value = "";
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
index 49907c9d..104d474d 100755
--- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
+++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js
@@ -213,7 +213,7 @@ exports.ThreeD = Montage.create(Component, {
 
             this._currentDocument = value;
 
-            if(this._currentDocument.currentView === "design") {
+            if(this._currentDocument && this._currentDocument.currentView === "design") {
                 // Save a reference of the pi inside the document view to be able to clear
                 Object.defineBinding(this, "item", {
                     boundObject: this,