Style Declaration - Improved updating of styles using binding.

4 files changed, 139 insertions, 170 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 b021dc0f..face668e 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -13,6 +13,7 @@ exports.CssStyle = Montage.create(Component, {
     editingStyleClass : { value: 'edit-style-item' },
     editNewEmptyClass : { value: 'edit-empty-style' },
     invalidStyleClass : { value: "style-item-invalid" },
+    emptyStyleClass   : { value: "empty-css-style" },
 
     propertyText : { value: "property" },
     _valueText : { value: "value" },
@@ -240,7 +241,7 @@ exports.CssStyle = Montage.create(Component, {
 
             this.editing = false;
 
-            if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
+            if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
                 ///// Show add button
                 this.editingNewStyle = false;
             }
@@ -265,7 +266,7 @@ exports.CssStyle = Montage.create(Component, {
 
             this.editing = false;
 
-            if(this.sourceObject.isEmpty && !this.dirty && !fieldsClicked.bind(this)()) {
+            if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
                 ///// Show add button
                 this.editingNewStyle = false;
             }
@@ -306,39 +307,9 @@ exports.CssStyle = Montage.create(Component, {
         }
     },
 
-//    handleSourceObjectSet: {
-//        value: function() {
-//            this.propertyText = this.sourceObject.name;
-//            this.valueText = this.sourceObject.value;
-//
-//            if(this.sourceObject.isEmpty) {
-//                this.empty = true;
-//            }
-//        }
-//    },
-
-    _sourceObject : { value: null },
-    sourceObject: {
-        get: function() {
-            return this._sourceObject;
-        },
-        set: function(sourceObject) {
-            this._sourceObject = sourceObject;
-
-            this.propertyText = sourceObject.name;
-            this.valueText = sourceObject.value;
-
-            if(sourceObject.isEmpty) {
-                this.empty = true;
-            }
-        }
-    },
-
     templateDidLoad : {
         value: function() {
-            //this.delegate = this.treeView.contentController.delegate;
-//debugger;
-            //this.propertyField.hints = this.propertyNames;
+            this.propertyField.hints = this.propertyNames;
         }
     },
 
@@ -402,17 +373,15 @@ exports.CssStyle = Montage.create(Component, {
         value : function() {
             if(this.empty) {
                 this.element.draggable = false;
-                this.element.classList.add('empty-css-style');
+                this.element.classList.add(this.emptyStyleClass);
                 if(!this.addStyleButton.parentNode) {
-                    console.log("Adding style for ", this.propertyText);
                     this.element.appendChild(this.addStyleButton);
                     this.addStyleButton.addEventListener('click', this, false);
                 }
             } else {
                 this.element.draggable = true;
-                this.element.classList.remove('empty-css-style');
+                this.element.classList.remove(this.emptyStyleClass);
                 if(this.addStyleButton.parentNode) {
-                    console.log("Removing style for ", this.propertyText);
                     this.element.removeChild(this.addStyleButton);
                 }
             }
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 e37d89d2..6be8d33c 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.css
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -4,10 +4,8 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-.treeRoot > .style-shorthand-branch > div {
-    display: none;
-}
-.treeRoot > .style-shorthand-branch > dl {
+
+.declaration-list {
     margin-top: 4px;
 }
 .drag-over {
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 9123e2a0..2fdb11d5 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.html
@@ -22,6 +22,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             },
             "arrayController": {
                 "prototype": "montage/ui/controller/array-controller",
+                "properties": {
+                    "automaticallyOrganizeObjects": true
+                },
                 "bindings": {
                     "content": {
                         "boundObject": {"@": "owner"},
@@ -44,9 +47,17 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "declaration": {"@": "owner"}
                 },
                 "bindings": {
-                    "sourceObject" : {
+                    "propertyText" : {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.name"
+                    },
+                    "valueText" : {
+                        "boundObject": {"@": "repetition"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.value"
+                    },
+                    "empty" : {
                         "boundObject": {"@": "repetition"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration"
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty"
                     },
                     "delegate": {
                         "boundObject": {"@": "owner"},
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 80d8ff7b..33e77297 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -9,38 +9,61 @@ var Montage = require("montage/core/core").Montage,
     ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
 
 exports.StyleDeclaration = Montage.create(Component, {
-    cssText : {
-        value: null
-    },
-    focusDelegate : {
-        value: null
-    },
+    cssText : { value: null },
+    focusDelegate : { value: null },
+
     includeEmptyStyle : {
-        value: true
+        value: true,
+        distinct: true
     },
     styles : {
         value: [],
         distinct: true
     },
 
-    templateDidLoad : {
-        value: function() {
-            console.log("Style declaration - template did load");
+    _styleSortFunction : {
+        value: function(styleA, styleB) {
+            ///// If the style is an empty style (with Add button)
+            ///// push to end of declaration
+            if(styleA.isEmpty) {
+                return 1;
+            } else if (styleB.isEmpty) {
+                return -1;
+            }
 
-            if(this.focusDelegate) {
-                //this.treeController.delegate = this.focusDelegate;
-                this.styleComponent.delegate = this.focusDelegate;
+            ///// Alphabetic sort based on property name
+            if (styleA.name < styleB.name) {
+                return -1;
+            } else if (styleA.name > styleB.name) {
+                return 1;