CSS Panel - Add focus management to styles view delegate

7 files changed, 147 insertions, 33 deletions

diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 873d2ce4..8ab19ad6 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -9,6 +9,9 @@ var Montage = require("montage/core/core").Montage,
     ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
 
 exports.Declaration = Montage.create(Component, {
+    cssText : {
+        value: null
+    },
     focusDelegate : {
         value: null
     },
@@ -42,6 +45,8 @@ exports.Declaration = Montage.create(Component, {
         set: function(dec) {
             this._declaration = dec;
 
+            this.cssText = dec.cssText;
+
             ///// creates data structure to use with tree component
             this.buildStyleTree();
 
@@ -52,11 +57,34 @@ exports.Declaration = Montage.create(Component, {
                     "isEmpty": true
                 });
             }
-//debugger;
+
             this.needsDraw = true;
         }
     },
 
+    update : {
+        value: function() {
+            if(this.declaration.cssText !== this.cssText) {
+                ///// Needs update
+                this.treeController.branchControllers[0].content.forEach(function(obj) {
+                    this.treeController.branchControllers[0].removeObjects(obj);
+                }, this );
+
+                this.buildStyleTree();
+
+                if(this.includeEmptyStyle) {
+                    this.styleTree.properties.push({
+                        "name": "property",
+                        "value" : "value",
+                        "isEmpty": true
+                    });
+                }
+//debugger;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     buildStyleTree : {
         value: function() {
             var styles = Array.prototype.slice.call(this._declaration).sort();
@@ -124,8 +152,6 @@ exports.Declaration = Montage.create(Component, {
 
     addNewStyleAfter : {
         value: function(style) {
-            //this.treeController.branchControllers[0].addObjects({
-            foo1 = style.parentComponent.parentComponent;
             style.parentComponent.parentComponent.contentController.addObjects({
                 name: 'property',
                 value: 'value',
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 7b5a736f..cfa3e605 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
@@ -90,7 +90,7 @@ exports.CssStyleRule = Montage.create(Component, {
         value: function() {
             if(this.cssText !== this.rule.cssText) {
                 // TODO: add update for selector and stylesheet name
-                this.declarationComponent.update();
+                //this.declarationComponent.update();
             }
         }
     },
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index c6bb070c..6864e245 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -111,7 +111,7 @@
     right: -1px;
 }
 .style-item .hintable-hint {
-    color: #CCC;
+    color: #bdbdbd;
 }
 
 /* ------------------------
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index acc169be..9830a21e 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -58,6 +58,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     {
                         "type": "change",
                         "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "stop",
+                        "listener": {"@": "owner"}
                     }
                 ]
             },
@@ -80,6 +84,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     {
                         "type": "change",
                         "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "stop",
+                        "listener": {"@": "owner"}
                     }
                 ]
             }
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index c73da6e5..1d5a11a5 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -8,27 +8,14 @@ var Montage = require("montage/core/core").Montage,
     TreeNode = require("js/components/treeview/tree-node").TreeNode;
 
 exports.Style = Montage.create(TreeNode, {
-    delegate : {
-        value: null
-    },
-    disabledClass : {
-        value: 'style-item-disabled'
-    },
-    editingStyleClass : {
-        value: 'edit-style-item'
-    },
-    editNewEmptyClass : {
-        value: 'edit-empty-style'
-    },
-    invalidStyleClass : {
-        value: "style-item-invalid"
-    },
-    propertyText : {
-        value: "property"
-    },
-    _valueText : {
-        value: "value"
-    },
+    delegate          : { value: null },
+    disabledClass     : { value: 'style-item-disabled' },
+    editingStyleClass : { value: 'edit-style-item' },
+    editNewEmptyClass : { value: 'edit-empty-style' },
+    invalidStyleClass : { value: "style-item-invalid" },
+
+    propertyText : { value: "property" },
+    _valueText : { value: "value" },
     valueText : {
         get: function() {
             return this._valueText;
@@ -158,6 +145,27 @@ exports.Style = Montage.create(TreeNode, {
         }
     },
 
+    getSiblingStyle : {
+        value: function(which) {
+            var styles = this.parentComponent.parentComponent.childComponents.map(function(sub){
+                    return sub.childComponents[0];
+                }),
+                index = styles.indexOf(this);
+
+            switch (which) {
+                case "first":
+                    return styles[0];
+                case "last":
+                    return styles[styles.length-1];
+                case "next":
+                    return (index+1 < styles.length) ? styles[index+1] : null;
+                case "prev":
+                    return (index-1 >= 0) ? styles[index-1] : null;
+            }
+        }
+    },
+
+
     handleEvent : {
         value: function(e) {
             console.log(e);
@@ -206,11 +214,40 @@ exports.Style = Montage.create(TreeNode, {
     handleStart : {
         value: function(e) {
             this.editing = true;
+
+            if(this.empty) {
+                this.editingNewStyle = true;
+            }