From e11e9f9ffa1975bcfefa530f17cd1d29e0c936b8 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 15 Aug 2012 12:21:02 -0700
Subject: CSS Panel - Fix layout when editing long CSS values.

---
 js/panels/css-panel/css-style.reel/css-style.css |  9 +++++++++
 js/panels/css-panel/css-style.reel/css-style.js  | 24 +++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
index d6ca76d1..d114a61f 100644
--- a/js/panels/css-panel/css-style.reel/css-style.css
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -138,6 +138,15 @@ POSSIBILITY OF SUCH DAMAGE.
 .style-item .hintable-hint {
     color: #bdbdbd;
 }
+.edit-value {
+    white-space: normal;
+}
+.edit-value dt {
+    margin-right: -5px;
+}
+.edit-value dd {
+    margin-left: 5px;
+}
 
 /* ------------------------
   Empty Style (Add Style)
diff --git a/js/panels/css-panel/css-style.reel/css-style.js b/js/panels/css-panel/css-style.reel/css-style.js
index dee94e75..e0055dc6 100644
--- a/js/panels/css-panel/css-style.reel/css-style.js
+++ b/js/panels/css-panel/css-style.reel/css-style.js
@@ -57,6 +57,7 @@ exports.CssStyle = Montage.create(Component, {
     delegate          : { value: null },
     disabledClass     : { value: 'style-item-disabled' },
     editingStyleClass : { value: 'edit-style-item' },
+    editingValueClass : { value: 'edit-value' },
     editNewEmptyClass : { value: 'edit-empty-style' },
     invalidStyleClass : { value: "style-item-invalid" },
     emptyStyleClass   : { value: "empty-css-style" },
@@ -181,6 +182,18 @@ exports.CssStyle = Montage.create(Component, {
         }
     },
 
+    _editingValue : { value: null },
+    editingValue : {
+        get : function() { return this._editingValue; },
+        set : function(value) {
+            if(value === this._editingValue) { return; }
+
+            this._editingValue = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     remove : {
         value: function() {
             var branchController = this.parentComponent.parentComponent.contentController;
@@ -257,6 +270,9 @@ exports.CssStyle = Montage.create(Component, {
             if(this.empty) {
                 this.editingNewStyle = true;
             }
+
+            this.editingValue = (this.valueField.element === e._currentTarget.element);
+
         }
     },
 
@@ -300,7 +316,7 @@ exports.CssStyle = Montage.create(Component, {
                 return false;
             }
 
-            this.editing = false;
+            this.editing = this.editingValue = false;
 
             if(this.empty && !this.dirty && !fieldsClicked.bind(this)()) {
                 ///// Show add button
@@ -457,6 +473,12 @@ exports.CssStyle = Montage.create(Component, {
             } else {
                 this._element.classList.remove(this.editingStyleClass);
             }
+
+            if(this.editingValue) {
+                this._element.classList.add(this.editingValueClass);
+            } else {
+                this._element.classList.remove(this.editingValueClass);
+            }
         }
     }
 });
-- 
cgit v1.2.3


From a34663e154af834176b758b6da368f634cd2a6bd Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 15 Aug 2012 14:56:51 -0700
Subject: CSS Panel - Add some padding to editable values

---
 js/panels/css-panel/css-style.reel/css-style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
index d114a61f..928c2a33 100644
--- a/js/panels/css-panel/css-style.reel/css-style.css
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -142,10 +142,10 @@ POSSIBILITY OF SUCH DAMAGE.
     white-space: normal;
 }
 .edit-value dt {
-    margin-right: -5px;
+    margin-right: -7px;
 }
 .edit-value dd {
-    margin-left: 5px;
+    margin-left: 7px;
 }
 
 /* ------------------------
-- 
cgit v1.2.3


From b3567811595f33f8fa8bcf36cd5aaf749120334d Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 21 Aug 2012 10:25:14 -0700
Subject: Tools - Removed transition on tool button hover to prevent flicker

---
 css/ninja.css                   | 2 +-
 scss/imports/scss/_toolbar.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/css/ninja.css b/css/ninja.css
index 8e1666c2..82cda121 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -845,7 +845,7 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .toolsList hr { border: 0px; border-top: 1px solid #232323; border-bottom: 1px solid #3A3A3A; margin: 2px; width: 100%; }
 
-.toolbutton { width: 29px; height: 29px; background-position: center center; background-repeat: no-repeat; border-radius: 3px; opacity: 1; margin-bottom: 2px; -webkit-transform: scale(0.8); -webkit-transition: 0.15s all cubic-bezier(0.44, 0.19, 0, 0.99); }
+.toolbutton { width: 29px; height: 29px; background-position: center center; background-repeat: no-repeat; border-radius: 3px; opacity: 1; margin-bottom: 2px; -webkit-transform: scale(0.8); }
 
 .toolbutton:hover, .toolbutton.active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; }
 
diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss
index 98b43535..54ea2aee 100755
--- a/scss/imports/scss/_toolbar.scss
+++ b/scss/imports/scss/_toolbar.scss
@@ -65,7 +65,6 @@
     opacity: 1;
     margin-bottom: 2px;
     -webkit-transform: scale(0.8);
-    -webkit-transition: 0.15s all cubic-bezier(.44,.19,0,.99);
 }
 
 .toolbutton:hover, .toolbutton.active {
-- 
cgit v1.2.3