CSS Panel - Fix style declaration interaction

4 files changed, 32 insertions, 27 deletions

diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index 61723284..3a07f8f1 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -15,8 +15,15 @@ exports.CssStyle = Montage.create(Component, {
     invalidStyleClass : { value: "style-item-invalid" },
     emptyStyleClass   : { value: "empty-css-style" },
 
-    propertyText : { value: "property" },
-    _valueText : { value: "value" },
+    propertyText : {
+        value: "property",
+        distinct: true
+    },
+
+    _valueText : {
+        value: "value",
+        distinct: true
+    },
     valueText : {
         get: function() {
             return this._valueText;
@@ -207,10 +214,8 @@ exports.CssStyle = Montage.create(Component, {
     },
     handleClick : {
         value: function(e) {
-            console.log("handle Add button click");
+            this.buttonClicked = true;
             this.propertyField.start();
-            //this.editingNewStyle = true;
-            this.editingNewStyle = this.editing = true;
         }
     },
 
@@ -282,6 +287,8 @@ exports.CssStyle = Montage.create(Component, {
                 value       = this.valueField.value,
                 rule        = this.getRule();
 
+            this.propertyText = property;
+
             this.delegate.handlePropertyChange(rule, property, value, oldProperty, this);
         }
     },
@@ -291,6 +298,8 @@ exports.CssStyle = Montage.create(Component, {
                 value       = this.valueField.value,
                 rule        = this.getRule();
 
+            this.valueText = value;
+
             this.delegate.handleValueChange(rule, property, value, this);
         }
     },
@@ -333,13 +342,6 @@ exports.CssStyle = Montage.create(Component, {
             this.propertyField.addEventListener('paste', this, false);
             this.valueField.addEventListener('paste', this, false);
 
-
-            if(this.empty) {
-                this.addStyleButton.addEventListener('click', this, false);
-            } else {
-                this.addStyleButton.removeEventListener('click', this, false);
-            }
-
         }
     },
 
@@ -364,6 +366,12 @@ exports.CssStyle = Montage.create(Component, {
                 this._element.removeAttribute('title');
             }
 
+            if(this.empty) {
+                this.addStyleButton.addEventListener('click', this, false);
+            } else {
+                this.addStyleButton.removeEventListener('click', this, false);
+            }
+
             this.setToolTips();
         }
     },
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
index fced7d7a..5724ffc3 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -25,7 +25,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "bindings": {
                     "content": {
                         "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "styles"
+                        "boundObjectPropertyPath": "styles",
+                        "oneway": true
                     }
                 }
             },
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 61a65099..c679783e 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -85,6 +85,13 @@ exports.StyleDeclaration = Montage.create(Component, {
 
             stylesArray = Array.prototype.slice.call(dec);
 
+            stylesArray.forEach(function(prop, index) {
+                this.styles.push({
+                    name: prop,
+                    value: dec.getPropertyValue(prop)
+                });
+            }, this);
+
             if(this.includeEmptyStyle) {
                 this.styles.push({
                     name    : "property",
@@ -93,13 +100,6 @@ exports.StyleDeclaration = Montage.create(Component, {
                 });
             }
 
-            stylesArray.forEach(function(prop, index) {
-                this.styles.push({
-                    name: prop,
-                    value: dec.getPropertyValue(prop)
-                });
-            }, this);
-
             this._declaration = dec;
             this.needsDraw = this.needsSort = true;
         }
@@ -218,7 +218,8 @@ exports.StyleDeclaration = Montage.create(Component, {
                 }
             }
 
-            this.arrayController.addObjects(styleDescriptor);
+            this.styles.push(styleDescriptor);
+            this.arrayController.organizeObjects();
         }
     },
 
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index e00d7fca..38b0fcc6 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -125,7 +125,7 @@ exports.StylesViewMediator = Montage.create(Component, {
                         nextFocus = style.getSiblingStyle('next');
                         if(nextFocus) {
                             nextFocus.propertyField.start();
-                        } else {
+                        } else if(style.dirty) {
                             style.parentComponent.parentComponent.addNewStyle();
                             style.editingNewStyle = false;
                             setTimeout(function() {
@@ -189,11 +189,6 @@ exports.StylesViewMediator = Montage.create(Component, {
             style.invalid = (browserValue === null);
 
             this._dispatchChange(property, browserValue);
-
-            if(style.editingNewStyle) {
-                style.parentComponent.parentComponent.addNewStyle();
-                style.editingNewStyle = false;
-            }
         }
     },