CSS Panel - add handlers for css panel actions

3 files changed, 159 insertions, 11 deletions

diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index f8750eea..ff410951 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -11,7 +11,7 @@
     border-bottom: 1px solid rgba(0,0,0,0);
     cursor: url(/js/../images/tools/hand_down.png), default;
     display: block;
-    /*overflow: hidden;*/
+    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
@@ -21,6 +21,21 @@
 }
 
 /* ------------------------
+  Invalid Style
+------------------------  */
+.style-item-invalid {
+    background-repeat: no-repeat;
+    background-position: 6px 2px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC);
+    opacity: 0.5;
+}
+.style-item.style-item-invalid:hover input {
+    visibility: hidden;
+}
+.style-item-invalid.edit-style-item {
+    opacity: 1;
+}
+/* ------------------------
   Checkbox
 ------------------------   */
 
@@ -52,6 +67,10 @@
 .css-property:hover, .css-value:hover {
     background-color: #FFDECC;
 }
+.css-property:focus, .css-value:focus {
+    border: 1px solid rgba(0,0,0,0);
+    box-shadow: none;
+}
 .css-property:after {
     color: #333;
     content: ":";
@@ -102,6 +121,7 @@
     cursor: default;
     -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99);
     -webkit-transform: translate3d(-120px, 0, 0);
+    overflow: visible;
 }
 .empty-css-style:hover {
     border-right-style: none;
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index 0d438ead..469c7268 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -40,7 +40,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name": "Hintable",
                 "properties": {
                     "startOnEvent": "click",
-                    "element": {"#": "property"}
+                    "element": {"#": "property"},
+                    "identifier": "property"
                 },
                 "bindings": {
                     "value" : {
@@ -48,14 +49,21 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                         "boundObjectPropertyPath": "propertyText",
                         "oneway": true
                     }
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "value": {
                 "module": "js/components/hintable.reel",
                 "name": "Hintable",
                 "properties": {
                     "startOnEvent": "click",
-                    "element": {"#": "value"}
+                    "element": {"#": "value"},
+                    "identifier": "value"
                 },
                 "bindings": {
                     "value" : {
@@ -63,7 +71,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                         "boundObjectPropertyPath": "valueText",
                         "oneway": true
                     }
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             }
         }
     </script>
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index adf17a84..517d1012 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -8,18 +8,47 @@ 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 : {
+    _valueText : {
         value: "value"
     },
+    valueText : {
+        get: function() {
+            return this._valueText;
+        },
+        set: function(text) {
+            this._valueText = text;
+            this.units = this.getUnits(text);
+        }
+    },
+
+    getUnits : {
+        value: function(val) {
+            if(val.split(/\s/).length > 1) {
+                return false;
+            } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
+                return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
+            }
+            return null;
+        }
+    },
 
     _enabled : { value: true, distinct: true },
     enabled : {
@@ -42,6 +71,28 @@ exports.Style = Montage.create(TreeNode, {
         }
     },
 
+    _invalid: { value: null },
+    invalid : {
+        get: function() {
+            return this._invalid;
+        },
+        set: function(value) {
+            this._invalid = value;
+            this.needsDraw = true;
+        }
+    },
+
+    _editing : { value : null },
+    editing : {
+        get: function() {
+            return this._editing;
+        },
+        set: function(value) {
+            this._editing = value;
+            this.needsDraw = true;
+        }
+    },
+
     _editingNewStyle : {
         value: null
     },
@@ -100,7 +151,13 @@ exports.Style = Montage.create(TreeNode, {
     handleClick : {
         value: function(e) {
             console.log("handleAction");
-            this.editingNewStyle = true;
+            this.editingNewStyle = this.editing = true;
+        }
+    },
+