CSS Panel - Added code hinting and tooltips

3 files changed, 19 insertions, 1 deletions

diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index ff410951..c6bb070c 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -110,6 +110,9 @@
     margin-right: -7px;
     right: -1px;
 }
+.style-item .hintable-hint {
+    color: #CCC;
+}
 
 /* ------------------------
   Empty Style (Add Style)
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index 469c7268..acc169be 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -17,9 +17,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element" : {"#" : "container"},
                     "addStyleButton": {"#": "add-style-button"},
                     "propertyField": {"@": "property"},
-                    "valueField": {"@": "value"}
+                    "valueField": {"@": "value"},
+                    "propertyNames" : {"@": "propertyNames"}
                 }
             },
+            "propertyNames": {
+                "object": "js/panels/CSSPanel/css-property-name-list"
+            },
             "checkbox": {
                 "module": "montage/ui/checkbox.reel",
                 "name": "Checkbox",
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index a8939bc6..b079bc73 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -272,6 +272,8 @@ exports.Style = Montage.create(TreeNode, {
     templateDidLoad : {
         value: function() {
             this.delegate = this.treeView.contentController.delegate;
+
+            this.propertyField.hints = this.propertyNames;
         }
     },
 
@@ -312,6 +314,13 @@ exports.Style = Montage.create(TreeNode, {
         }
     },
 
+    setToolTips : {
+        value: function() {
+            this.propertyField.element.title = this.propertyField.value;
+            this.valueField.element.title = this.valueField.value;
+        }
+    },
+
     willDraw : {
         value: function() {
             if(this.invalid) {
@@ -319,6 +328,8 @@ exports.Style = Montage.create(TreeNode, {
             } else {
                 this._element.removeAttribute('title');
             }
+
+            this.setToolTips();
         }
     },