CSS Style - Add disabled UI state. Added Hintable and editable UI state.

5 files changed, 80 insertions, 14 deletions

diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index 9c8946c4..ef4096fd 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -122,7 +122,7 @@ exports.Editable = Montage.create(Component, {
                 if(this.stopOnBlur) {
                     console.log('adding mousedown event listener');
                     ///// Simulate blur on editable node by listening to the doc
-                    document.addEventListener('mouseup', this, false);
+                    document.addEventListener('mousedown', this, false);
                 }
                 
                 this._sendEvent('start');
@@ -179,7 +179,7 @@ exports.Editable = Montage.create(Component, {
                 this.accept();
             }
             this.stop();
-            document.removeEventListener('mouseup', this, false);
+            document.removeEventListener('mousedown', this, false);
             this._sendEvent('blur');
         }
     },
@@ -202,7 +202,7 @@ exports.Editable = Montage.create(Component, {
             this._sendEvent('input');
         }
     },
-    handleMouseup : {
+    handleMousedown : {
         value : function(e) {
             console.log('handle mouse down');
             ///// Listen for simulated blur event
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
index 52f5a3c1..b77994a4 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.css
@@ -7,9 +7,7 @@
 .css-tree-branch {
     /*padding-left: 10px;*/
 }
-.style-item {
-    padding-left: 20px;
-}
+
 .css-tree-branch .css-tree-branch {
     padding-left: 20px;
     margin-top: 0;
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index 4673ab69..9a877b5d 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -5,11 +5,23 @@
  </copyright> */
 
 .style-item {
+    display: block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-
+.style-item input {
+    height: 10px;
+    width: 10px;
+    margin: 0 6px;
+    visibility: hidden;
+}
+.style-item:hover input, .style-item-disabled input {
+    visibility: visible;
+}
+.style-item-disabled {
+    opacity: .5;
+}
 .css-property, .css-value {
     border: 1px solid rgba(0,0,0,0);
     border-radius: 2px;
@@ -17,6 +29,9 @@
     outline: none;
     padding: 0 2px;
 }
+.css-property:hover, .css-value:hover {
+    background-color: #FFDECC;
+}
 .css-property:after {
     color: #333;
     content: ":";
@@ -33,4 +48,19 @@
 }
 .css-value {
     display: inline;
+}
+.style-item .editable {
+    border: 1px solid #999;
+    box-shadow: 1px 1px 1px #CCC;
+    color: #333;
+    display: inline-block;
+    margin-right: 7px;
+    max-width: none;
+    overflow: visible;
+    -webkit-user-select: text;
+}
+.style-item .editable:after {
+    position: relative;
+    margin-right: -7px;
+    right: -1px;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index f636ef6b..6cecf43e 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -17,10 +17,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element" : {"#" : "container"}
                 }
             },
+            "checkbox": {
+                "module": "montage/ui/checkbox.reel",
+                "name": "Checkbox",
+                "properties": {
+                    "element": {"#": "disable-checkbox"},
+                    "checked": true
+                },
+                "bindings": {
+                    "checked" : {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "enabled",
+                        "oneway": false
+                    }
+                }
+            },
             "property": {
-                "module": "montage/ui/dynamic-text.reel",
-                "name": "DynamicText",
+                "module": "js/components/hintable.reel",
+                "name": "Hintable",
                 "properties": {
+                    "startOnEvent": "click",
                     "element": {"#": "property"}
                 },
                 "bindings": {
@@ -32,9 +48,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 }
             },
             "value": {
-                "module": "montage/ui/dynamic-text.reel",
-                "name": "DynamicText",
+                "module": "js/components/hintable.reel",
+                "name": "Hintable",
                 "properties": {
+                    "startOnEvent": "click",
                     "element": {"#": "value"}
                 },
                 "bindings": {
@@ -49,9 +66,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     </script>
 </head>
 <body>
-<div id="container" class="style-item">
-    <dt id="property" class="css-property"></dt>
-    <dd id="value" class="css-value"></dd>
+<div id="container" class="style-item"  spellcheck="false">
+    <input type="checkbox" data-montage-id="disable-checkbox"><dt data-montage-id="property" class="css-property"></dt><dd data-montage-id="value" class="css-value"></dd>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index 6860a97f..6ff102b2 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -8,12 +8,27 @@ var Montage = require("montage/core/core").Montage,
     TreeNode = require("js/components/treeview/tree-node").TreeNode;
 
 exports.Style = Montage.create(TreeNode, {
+    disabledClass : {
+        value: 'style-item-disabled'
+    },
     propertyText : {
         value: "property"
     },
     valueText : {
         value: "value"
     },
+
+    _enabled : { value: true, distinct: true },
+    enabled : {
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            this._enabled = value;
+            this.needsDraw = true;
+        }
+    },
+
     handleSourceObjectSet: {
         value: function() {
             //debugger;
@@ -26,6 +41,7 @@ exports.Style = Montage.create(TreeNode, {
             console.log("style - template did load");
         }
     },
+