CSS Style Declaration - Improved style item interaction

2 files changed, 20 insertions, 12 deletions

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 b1381bc6..9fc45640 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"},
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 8e364d0d..711879ce 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -32,14 +32,15 @@ exports.StyleDeclaration = Montage.create(Component, {
                 return -1;
             }
 
+            return 0;
             ///// Alphabetic sort based on property name
-            if (styleA.name < styleB.name) {
-                return -1;
-            } else if (styleA.name > styleB.name) {
-                return 1;
-            } else {
-                return 0;
-            }
+//            if (styleA.name < styleB.name) {
+//                return -1;
+//            } else if (styleA.name > styleB.name) {
+//                return 1;
+//            } else {
+//                return 0;
+//            }
         }
     },
     _styleFilterFunction: {
@@ -173,6 +174,7 @@ exports.StyleDeclaration = Montage.create(Component, {
                                     //// if shorthand exists in list of rendered styles
                                     //// update it
                                     this.styles[shorthandIndex].value = this.declaration.getPropertyValue(shorthand);
+                                    usedIndices.push(shorthandIndex);
                                     shorthandUpdated = true;
                                 }
                             }, this);
@@ -225,13 +227,16 @@ exports.StyleDeclaration = Montage.create(Component, {
                 isEmpty: false
             }, prop;
 
+            console.log('adding "'+ property+'" with value "' + value + '"');
+
             for(prop in data) {
                 if(data.hasOwnProperty(prop)) {
                     styleDescriptor[prop] = data[prop];
                 }
             }
 
-            this.styles.push(styleDescriptor);
+            //this.styles.push(styleDescriptor);
+            this.arrayController.addObjects(styleDescriptor);
 
             this.needsSort = this.needsDraw = true;
         }
@@ -239,9 +244,9 @@ exports.StyleDeclaration = Montage.create(Component, {
     removeStyle : {
         value: function(styleDescriptor) {
             var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
-
-            this.styles.splice(styleDescriptorIndex, 1);
-            //this.arrayController.removeObjects(styleDescriptor);
+console.log("removing style", styleDescriptor);
+            //this.styles.splice(styleDescriptorIndex, 1);
+            this.arrayController.removeObjects(styleDescriptor);
 
             //this.needsDraw = true;
         }
@@ -281,7 +286,7 @@ exports.StyleDeclaration = Montage.create(Component, {
             if(this.focusDelegate) {
                 this.styleComponent.delegate = this.focusDelegate;
             }
-            //this.arrayController.sortFunction = this._styleSortFunction;
+            this.arrayController.sortFunction = this._styleSortFunction;
         }
     },