CSS Panel - Allow ":" to be used in selector field

4 files changed, 31 insertions, 46 deletions

diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index a6350359..eab73993 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -195,6 +195,7 @@ exports.Editable = Montage.create(Component, {
     handleKeydown : {
         value : function(e) {
             var k = e.keyCode;
+            console.log("editable - keycode", k);
         }
     },
     
@@ -269,10 +270,11 @@ exports.Editable = Montage.create(Component, {
     },
     keyActions : { 
         value : {
-            stop   : [27,9,13,186],
+            stop   : [27,9,13],
             revert : [27],
             backsp : [8]
-        }
+        },
+        distinct: true
     }
     
 });
\ No newline at end of file
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 6e3b2aaf..803770db 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -327,48 +327,8 @@ exports.Hintable = Montage.create(Editable, {
                 revert : [27],
                 backsp : [8]
             }
-        }
+        },
+        distinct: true
     }
     
-});
-
-// suggest : {
-//     value : function(hint) {
-//         ///// if no hint argument passed, clear suggestions
-//         if(!hint) {
-//             this.clearHint();
-//             return false;            
-//         }
-//         
-//         this._hint = hint;            
-// 
-//         ///// append span with suggested hint
-//         if(this.hintElement) {
-//             this.clearHint();
-//             
-//             ///// Set the hint element's text
-//             this._getFirstTextNode(this.hintElement).textContent = hint;
-// 
-//             ///// if hintElement was removed from the DOM, the object still
-//             ///// exists, so it needs to be re-appended
-//             if(this.hintElement.parentNode === null) {
-//                 this._element.appendChild(this.hintElement);
-//             }
-//         } else {
-//             /// Remove the phantom "<BR>" element that is generated when 
-//             /// content editable element is empty
-//             this._children(this._element, function(item) { 
-//                 return item.nodeName === 'BR';
-//             }).forEach(function(item) {
-//                 this._element.removeChild(item);
-//             }, this);
-// 
-//             this.hintElement = document.createElement('span');
-//             this.hintElement.classList.add(this.suggestClass);
-//             this.hintElement.appendChild(document.createTextNode(hint));
-//             this._element.appendChild(this.hintElement);
-//         }
-// 
-//         this._hint = hint;
-//     }
-// },
\ No newline at end of file
+});
\ No newline at end of file
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 ac714bfa..71fe8470 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
@@ -115,6 +115,8 @@ exports.CssStyleRule = Montage.create(Component, {
     },
     prepareForDraw : {
         value: function() {
+            this.selectorField.keyActions = this.keyActions;
+
             if(this.rule.type === 'inline') {
                 this.selectorField.readOnly = true;
                 this.declarationComponent.type = 'inline';
@@ -144,5 +146,26 @@ exports.CssStyleRule = Montage.create(Component, {
                 this.element.classList.add(this.unappliedClass);
             }
         }
+    },
+
+    keyActions : {
+        value : {
+            hint : {
+                accept : [9,13], // accept hint
+                stop   : [27],   // stop editing
+                next   : [40],   // cycle to next hint
+                prev   : [38],   // cycle to prev hint
+                revert : [27],   // revert value
+                backsp : [8]     // backspace hit
+            },
+            noHint : {
+                stop   : [27,9,13],
+                next   : [40],
+                prev   : [38],
+                revert : [27],
+                backsp : [8]
+            }
+        },
+        distinct: true
     }
 });
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index b7244a2c..2cd5ac5c 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -61,7 +61,7 @@ exports.RuleList = Montage.create(Component, {
                     // found rule in our component list, or it's the inline rule
                     ruleComponent.update();
                     foundIndices.push(index);
-                } else {
+                } else if(!rule.applied) { /// remove rule (unless unapplied)
                     this.rulesToRemove.push(ruleComponent);
                 }
             }, this);