Text Tool Color Change Fix

Signed-off-by: Armen Kesablyan <armen@motorola.com>

2 files changed, 73 insertions, 13 deletions

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index e84e1646..0840e6a6 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -287,8 +287,8 @@ POSSIBILITY OF SUCH DAMAGE.
                 <button data-montage-id="alignJustify" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignJustified.png"  class="unselectable"/></button>
             </div>
             <div class="btnGroup toolOptionsFloatChildren">
-                <button data-montage-id="indent" class="nj-skinned textButton"><img src="../../../../images/optionsbar/text/IndentMore.png" class="unselectable" style="height:16px" /></button>
-                <button data-montage-id="outdent" class="nj-skinned textButton"><img src="../../../../images/optionsbar/text/IndentLess.png" class="unselectable" style="height:16px" /></button>
+                <button data-montage-id="indent" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/IndentMore.png" class="unselectable" style="height:16px" /></button>
+                <button data-montage-id="outdent" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/IndentLess.png" class="unselectable" style="height:16px" /></button>
             </div>
             <div class="btnGroup toolOptionsFloatChildren">
                 <button data-montage-id="bulletedList" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/BulletedList.png" /></button>
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index 36aa3ce8..10285d0f 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -36,6 +36,27 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 
 exports.TextProperties = Montage.create(ToolProperties, {
 
+
+    _keepSelected: {value: false, serializable: false},
+    _addedColorChips: {value: false, serializable: false},
+
+    _setColor: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: {r:0,g:0,b:0,a:1,css: "rgb(0,0,0)"}, webGlColor: null }
+    },
+
+    setColor: {
+        enumerable: true,
+        get: function () {
+            return this._setColor;
+        },
+        set: function (value) {
+            if (value !== this._setColor) {
+                this._setColor = value;
+            }
+        }
+    },
+
     fontName: {value: null, serializable: true},
     fontSize: {value: null, serializable: true},
     fontColor: {value: null, serializable: true},
@@ -55,10 +76,13 @@ exports.TextProperties = Montage.create(ToolProperties, {
 
     numberedList: {value: null, serializable: true},
     bulletedList: {value: null, serializable: true},
+    lastSelection: {value: null, serializable: true},
 
     // Events
     handleEditorSelect: {
         value: function(e) {
+
+            //Reset Buttons
             this.alignLeft.pressed = false;
             this.alignCenter.pressed = false;
             this.alignRight.pressed = false;
@@ -66,7 +90,6 @@ exports.TextProperties = Montage.create(ToolProperties, {
             this.bulletedList.pressed = false;
             this.numberedList.pressed = false;
 
-
             switch(this.application.ninja.stage.textTool.justify) {
                 case "left":
                     this.alignLeft.pressed = true;
@@ -79,7 +102,7 @@ exports.TextProperties = Montage.create(ToolProperties, {
                     break;
                 case "full":
                     this.alignJustify.pressed = true;
-        }
+            }
 
             switch(this.application.ninja.stage.textTool.listStyle) {
                 case "ordered":
@@ -87,13 +110,30 @@ exports.TextProperties = Montage.create(ToolProperties, {
                     break;
                 case "unordered":
                     this.bulletedList.pressed = true;
+            }
+
+            if(!this._keepSelected) {
+                this.lastSelection = e.target._savedSelectedRange;
+            }
+            if(this.application.ninja.stage.textTool.foreColor) {
+                this.setColor.color = this.application.ninja.colorController.parseCssToColor(this.application.ninja.stage.textTool.foreColor);
+                this.fontColor.color(this.setColor.colorMode, this.setColor.color);
+            }
+
         }
+    },
+
+    handleEditorClicked: {
+        value: function(e) {
+            this._keepSelected = false;
         }
     },
 
     handleEditorBlur: {
         value: function(e) {
-
+            console.log("Editor Blur");
+            window.getSelection().addRange(this.lastSelection);
+            e.target.focus();
         }
     },
 
@@ -101,14 +141,9 @@ exports.TextProperties = Montage.create(ToolProperties, {
     // Draw Cycle
     prepareForDraw: {
         value: function() {
-
-                this.fontColor.props = {side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80};
-                this.application.ninja.colorController.addButton("chip", this.fontColor);
-                this.fontColor.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
-                this.fontColor.addEventListener("change",this.handleFontColorChange.bind(this),false);
-
             this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false);
-
+            this.application.ninja.stage.textTool.element.addEventListener("blur", this.handleEditorBlur.bind(this), false);
+            this.application.ninja.stage.textTool.element.addEventListener("click", this.handleEditorClicked.bind(this), false);
 
             //Bind to Rich Text editor that lives on the stage component
             Object.defineBinding(this.application.ninja.stage.textTool, "fontName", {
@@ -149,6 +184,23 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
+    willDraw: {
+        value: function() {
+            if (this._addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                this.fontColor.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: false, offset: -80 };
+                this.application.ninja.colorController.addButton("chip", this.fontColor);
+                this.fontColor.addEventListener("change", this.handleFontColorChange.bind(this), false);
+                this.fontColor.addEventListener("mousedown", this.handleColorChangeClick.bind(this), false);
+                this._addedColorChips = true;
+            }
+
+            if (this._addedColorChips) {
+                this.fontColor.color(this.setColor.colorMode, this.setColor.color);
+                this.application.ninja.stage.textTool.foreColor = this.setColor.color.css;
+            }
+        }
+    },
+
     // Actions
     handleJustifyLeftAction: {
         value: function(e) {
@@ -220,10 +272,18 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
+    handleColorChangeClick: {
+        value: function(e) {
+            this._keepSelected = true;
+        }
+    },
+
 
     handleFontColorChange: {
         value: function(e) {
-            this.application.ninja.stage.textTool.element.style.color = e._event.color.css;
+            this.setColor = e._event;
+            this.application.ninja.stage.textTool.foreColor = this.setColor.color.css;
+            //this.application.ninja.stage.textTool.element.style.color = e._event.color.css;