From f8320257c074f0c552d24069861014c2e5a9ac56 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 2 Jul 2012 10:09:10 -0700
Subject: Fix: IKNINJA-1634

Fixing reference error for gradient stops on click.
---
 js/components/gradientpicker.reel/gradientpicker.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'js/components')

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index f912eb51..2627683c 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -148,6 +148,7 @@ exports.GradientPicker = Montage.create(Component, {
 				//Storing refereces to buttons and actual stop container
 				button.stop = stop;
 				tooltip.stop = stop;
+				holder.stop = stop;
 				stop.button = button;
 				//Adding stop to container
 				this.trackChips.appendChild(stop);
-- 
cgit v1.2.3


From 8966fc4903f0eec61816d9b9bdbcac9b7d99c320 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Mon, 2 Jul 2012 13:19:00 -0700
Subject: Bug: Font Name & Size not updating text tool

Signed-off-by: Armen Kesablyan <armen@motorola.com>
---
 .../text-properties.reel/text-properties.css       |   4 +
 .../text-properties.reel/text-properties.html      | 120 +++++-----
 .../text-properties.reel/text-properties.js        | 261 +++++----------------
 3 files changed, 112 insertions(+), 273 deletions(-)

(limited to 'js/components')

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index 586cdcd5..7ab3ae9a 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -39,6 +39,10 @@
     width: 160px;
 }
 
+.optionsTextTool .montage-button:hover {
+    color:#FFF;
+}
+
 .fontColorChipContainer {
     margin-left: 10px !important;
     margin-right: 0px;
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 8899ff3c..6a94cf0a 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -11,79 +11,87 @@
 
         <script type="text/montage-serialization">
         {
-
             "owner": {
                 "prototype": "js/components/tools-properties/text-properties.reel",
                 "properties": {
                     "element": {"#": "textProperties"},
-                    "className": {"@": "className"},
-                    "tagType": {"@": "tagType"},
-                    "fontSelection": {"@": "fontSelection"},
-                    "fontSettings": {"@": "fontSettings"},
-                    "fontSize": {"@": "fontSize"},
+
+                    "fontName": {"@": "fontname"},
+                    "fontSize": {"@": "fontsize"},
                     "fontColor": {"#": "fontColorCtrl"},
+
                     "btnBold": {"@": "btnBold"},
                     "btnItalic": {"@": "btnItalic"},
                     "btnUnderline": {"@": "btnUnderline"},
                     "btnStrikethrough": {"@": "btnStrikethrough"},
+
                     "alignLeft": {"@": "alignLeft"},
                     "alignCenter": {"@": "alignCenter"},
                     "alignRight": {"@": "alignRight"},
                     "alignJustify": {"@": "alignJustify"},
+
                     "indent": {"@": "indent"},
                     "outdent": {"@": "outdent"},
+
                     "numberedList": {"@": "numberedList"},
                     "bulletedList": {"@": "bulletedList"}
                 }
             },
-            "className": {
-                "prototype": "js/components/textfield.reel[TextField]",
+
+            "fontname": {
+                "prototype": "montage/ui/native/select.reel",
                 "properties": {
-                    "element": {"#": "className"}
+                    "element": {"#": "fontname"},
+                    "preventFocus": true,
+                    "contentController": {"@": "fontnameController"}
                 }
             },
-            "tagType": {
-                "prototype": "js/components/combobox.reel",
+
+            "fontnameController": {
+                "prototype": "montage/ui/controller/array-controller",
                 "properties": {
-                    "element": {"#": "tagType"}
+                    "selectObjectsOnAddition": false,
+                    "content": [
+                        {"text" : "Arial", "value": "Arial"},
+                        {"text" : "Arial Black", "value": "Arial Black"},
+                        {"text" : "Courier New", "value": "Courier New"},
+                        {"text" : "Garamond", "value": "Garamond"},
+                        {"text" : "Georgia", "value": "Georgia"},
+                        {"text" : "Open Sans", "value": "Open Sans"},
+                        {"text" : "Tahoma", "value": "Tahoma"},
+                        {"text" : "Times New Roman", "value": "Times New Roman"},
+                        {"text" : "Times", "value": "Times"},
+                        {"text" : "Trebuchet", "value": "Trebuchet MS"},
+                        {"text" : "Verdana", "value": "Verdana"}
+                    ]
                 }
             },
-            "fontSelection": {
-                "prototype": "js/components/combobox.reel",
-                "properties": {
-                    "element": {"#": "fontSelection"},
-                    "identifier": "fontSelection"
-                },
-                "listeners": [
-                    {
-                        "type": "change",
-                        "listener": {"@": "owner"}
-                    }
-                ]
 
-            },
-            "fontSettings": {
-                "prototype": "montage/ui/button.reel",
+            "fontsize": {
+                "prototype": "montage/ui/native/select.reel",
                 "properties": {
-                    "element": {"#": "fontSettings"}
+                    "element": {"#": "fontSize"},
+                    "preventFocus" : true,
+                    "contentController" : {"@": "fontsizeController"}
                 }
             },
 
-            "fontSize": {
-                "prototype": "js/components/combobox.reel",
+            "fontsizeController": {
+                "prototype": "montage/ui/controller/array-controller",
                 "properties": {
-                    "element": {"#": "fontSize"},
-                    "identifier": "fontSize"
-                },
-                "listeners": [
-                    {
-                        "type": "change",
-                        "listener": {"@": "owner"}
-                    }
-                ]
-
+                    "selectObjectsOnAddition": false,
+                    "content": [
+                        {"text" : "8pt", "value": "1"},
+                        {"text" : "10pt", "value": "2"},
+                        {"text" : "12pt", "value": "3"},
+                        {"text" : "14pt", "value": "4"},
+                        {"text" : "18pt", "value": "5"},
+                        {"text" : "24pt", "value": "6"},
+                        {"text" : "36pt", "value": "7"}
+                    ]
+                }
             },
-        
+
             "btnBold": {
                 "prototype": "montage/ui/toggle-button.reel",
                 "properties": {
@@ -103,13 +111,7 @@
                     "identifier": "btnItalic",
                     "pressedLabel": "I",
                     "unpressedLabel": "I"
-                },
-                "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
-                ]
+                }
             },
             "btnUnderline": {
                 "prototype": "montage/ui/toggle-button.reel",
@@ -119,13 +121,7 @@
                     "identifier": "btnUnderline",
                     "pressedLabel": "U",
                     "unpressedLabel": "U"
-                },
-                "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
-                ]
+                }
             },
             "btnStrikethrough": {
                 "prototype": "montage/ui/toggle-button.reel",
@@ -135,13 +131,7 @@
                     "identifier": "btnStrikethrough",
                     "pressedLabel": "S",
                     "unpressedLabel": "S"
-                },
-                "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
-                ]
+                }
             },
             
             "alignLeft": {
@@ -276,12 +266,8 @@
 
     <body>
         <div data-montage-id="textProperties" class="subToolHolderPanel optionsTextTool toolOptionsFloatChildren">
-            <label class="label" style="display: none">Class:</label>
-            <input data-montage-id="className" style="display: none" />
-            <label class="label" style="display: none">Tag:</label>
-            <select data-montage-id="tagType" style="display: none"></select>
             <label class="label overrideMargin">Font:</label>
-            <select data-montage-id="fontSelection" class="nj-skinned fontSelection"></select>
+            <select data-montage-id="fontname" class="nj-skinned fontSelection"></select>
             <button data-montage-id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
             <select data-montage-id="fontSize" class="nj-skinned"></select>
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 c5729e98..4f944adf 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -8,13 +8,15 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var ArrayController = require("montage/ui/controller/array-controller").ArrayController;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
+var Converter = require("montage/core/converter/converter").Converter;
 
 exports.TextProperties = Montage.create(ToolProperties, {
-    className: {value: null, serializable: true},
-    tagType: {value: null, serializable: true},
-    fontSelection: {value: null, serializable: true},
-    fontSettings: {value: null, serializable: true},
+
+    fontName: {value: null, serializable: true},
     fontSize: {value: null, serializable: true},
+
+    fontSettings: {value: null, serializable: true}, // Note: Isn't used currently will need fontSettings Popup
+
     fontColor: {value: null, serializable: true},
     btnBold: {value: null, serializable: true},
     btnItalic: {value: null, serializable: true},
@@ -33,66 +35,59 @@ exports.TextProperties = Montage.create(ToolProperties, {
     fontTypes: {value: null, serializable: true},
     fontSizes: {value: null, serializable: true},
 
+    // Draw Cycle
     prepareForDraw: {
         value: function() {
-            // code commented out because montage ui element select-input is incomplete. Will switch back when they fix or actually complete the component
-//            this.fontTypes = Montage.create(ArrayController);
-//            this.fontTypes.content = [
-//                { value: "Arial", text: "Arial" },
-//                { value: "Arial Black", text: "Arial Black" },
-//                { value: "Courier New", text: "Courier New" },
-//                { value: "Garamond", text: "Garamond" },
-//                { value: "Georgia", text: "Georgia" },
-//                { value: "Open Sans", text: "Open Sans" },
-//                { value: "Tahoma", text: "Tahoma" },
-//                { value: "Times New Roman", text: "Times New Roman" },
-//                { value: "Trebuchet MS", text: "Trebuchet MS" },
-//                { value: "Verdana", text: "Verdana" }
-//            ];
-
-            //this.fontSelection.contentController = this.fontTypes;
-//
-//            this.fontSizes = Montage.create(ArrayController);
-//            this.fontSizes.content = [
-//                { value: 1, text: "8pt" },
-//                { value: 2, text: "10pt" },
-//                { value: 3, text: "12pt" },
-//                { value: 4, text: "14pt" },
-//                { value: 5, text: "18pt" },
-//                { value: 6, text: "24pt" },
-//                { value: 7, text: "36pt" }
-//            ];
-//            this.fontSize.contentController = this.fontSizes;
-            
-            this.fontSelection.items = ["Arial", "Arial Black", "Courier New", "Garamond", "Georgia",  "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
-            this.fontSize.items = ["8pt","10pt","12pt","14pt","18pt","24pt","36pt"];
-            this.tagType.items = ["div", "span", "p", "section", "article", "h1", "h2", "h3", "h4", "h5", "h6"];
-        }
-    },
 
+            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);
+
+            //Bind to Rich Text editor that lives on the stage component
+            Object.defineBinding(this.application.ninja.stage.textTool, "fontName", {
+                boundObject: this.fontName,
+                boundObjectPropertyPath: "value",
+                oneway: false
+            });
+
+            Object.defineBinding(this.application.ninja.stage.textTool, "fontSize", {
+                boundObject: this.fontSize,
+                boundObjectPropertyPath: "value",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnBold, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "bold",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnItalic, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "italic",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnUnderline, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "underline",
+                oneway: false
+            });
+
+            Object.defineBinding(this.btnStrikethrough, "pressed", {
+                boundObject: this.application.ninja.stage.textTool,
+                boundObjectPropertyPath: "strikeThrough",
+                oneway: false
+            });
+        }
+    },
+
+    // Events
     handleEditorSelect: {
         value: function(e) {
-            //this.application.ninja.stage.textTool.updateStates();
-//            this.fontSelection.value = this.application.ninja.stage.textTool.states.fontname;
-//
-//            for( var i = 0; i < this.fontSize.items.length; i++) {
-//                if (this.application.ninja.stage.textTool.states.fontsize == i + 1) {
-//                    this.fontSize.value = this.fontSize.items[i]
-//                    break;
-//                }
-//            }
-        }
-    },
-
-    _subPrepare: {
-        value: function() {
-            //this.divElement.addEventListener("click", this, false);
-        }
-    },
-
-    handleClick: {
-        value: function(event) {
-           // this.selectedElement = event._event.target.id;
 
         }
     },
@@ -161,158 +156,12 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
-    handleFontSizeChange: {
-        value: function(e) {
-            //We need the index of whats selected. This is a temporary solution til we can have a variable amount for font-size.
-            for( var i = 0; i < this.fontSize.items.length; i++) {
-                if (this.fontSize.value === this.fontSize.items[i]) {
-                    this.application.ninja.stage.textTool.doAction("fontsize", (i +1));
-                    break;
-                }
-            }
-        }
-    },
-
-    defineInitialProperties: {
-        value: function() {
-            if (!this.initialized) {
-
-                //Setup Font Selection tool
-                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, false);
-
-                Object.defineBinding(this.btnBold, "pressed", {
-                  boundObject: this.application.ninja.stage.textTool,
-                  boundObjectPropertyPath: "bold",
-                  oneway: false
-                });
-
-                Object.defineBinding(this.btnItalic, "pressed", {
-                  boundObject: this.application.ninja.stage.textTool,
-                  boundObjectPropertyPath: "italic",
-                  oneway: false
-                });
-
-                Object.defineBinding(this.btnUnderline, "pressed", {
-                  boundObject: this.application.ninja.stage.textTool,
-                  boundObjectPropertyPath: "underline",
-                  oneway: false
-                });
-
-                Object.defineBinding(this.btnStrikethrough, "pressed", {
-                  boundObject: this.application.ninja.stage.textTool,
-                  boundObjectPropertyPath: "strikeThrough",
-                  oneway: false
-                });
-
-                Object.defineBinding(this.alignLeft, "pressed", {
-                  boundObject: this.application.ninja.stage.textTool,
-                  boundObjectPropertyPath: "justify",
-                  boundValueMutator: this.validateJustify,
-                  oneway: false
-                });
-//
-//                Object.defineBinding(this.alignCenter, "pressed", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "justifycenter",
-//                  boundValueMutator: this.validatePressed,
-//                  oneway: true
-//                });
-//
-//                Object.defineBinding(this.alignRight, "pressed", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "justifyright",
-//                  boundValueMutator: this.validatePressed,
-//                  oneway: true
-//                });
-//
-//                Object.defineBinding(this.alignJustify, "pressed", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "justifyfull",
-//                  boundValueMutator: this.validatePressed,
-//                  oneway: true
-//                });
-//
-//                Object.defineBinding(this.numberedList, "pressed", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "insertorderedlist",
-//                  boundValueMutator: this.validatePressed,
-//                  oneway: true
-//                });
-//
-//                Object.defineBinding(this.bulletedList, "pressed", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "insertunorderedlist",
-//                  boundValueMutator: this.validatePressed,
-//                  oneway: true
-//                });
-//
-//                Object.defineBinding(this.fontSelection, "value", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "fontname",
-//                  boundValueMutator: this.validateFont,
-//                  oneway: true
-//                });
-//
-//                Object.defineBinding(this.fontSize, "value", {
-//                  boundObject: this.application.ninja.stage.textTool,
-//                  boundObjectPropertyPath: "states.fontsize",
-//                  boundValueMutator: this.validateFontSize.bind(this),
-//                  oneway: true
-//                });
-
-                this.initialized = true;
-            }
-
-        }
-    },
-
-    validatePressed: {
-        value: function(val) {
-            if (val == "true") return true; else return false
-        }
-    },
-
-    validateFont: {
-        value: function(val) {
-            return val;
-        }
-    },
-
-    validateFontSize: {
-        value: function(val) {
-            val = parseInt(val);
-            return this.fontSize.items[val - 1];
-        }
-    },
-
-    initialized: {
-        value: false
-    },
-
-    handleFontSelectionChange: {
-        value: function(e) {
-            this.application.ninja.stage.textTool.element.focus();
-            this.application.ninja.stage.textTool.doAction("fontname", this.fontSelection.value);
-
-            //Note: Set Font Color on selection to ColorChip Component;
-            //this.this.application.ninja.stage.textTool.foreColor
-
-        }
-    },
 
     handleFontColorChange: {
         value: function(e) {
             this.application.ninja.stage.textTool.foreColor = e._event.color.css;
-            this.application.ninja.stage.textTool.element.focus();
-            //this.application.ninja.stage.textTool.doAction("forecolor",e._event.color.css);
-
         }
     }
 
+});
 
-});
\ No newline at end of file
-- 
cgit v1.2.3


From 3d3e37c55e96b74c6c0a2841574fb03814d52999 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Tue, 3 Jul 2012 12:19:56 -0700
Subject: Text Tool 2

Signed-off-by: Armen Kesablyan <armen@motorola.com>
---
 .../text-properties.reel/text-properties.html      |  73 ++++--------
 .../text-properties.reel/text-properties.js        | 128 +++++++++++++--------
 2 files changed, 108 insertions(+), 93 deletions(-)

(limited to 'js/components')

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 6a94cf0a..e0edfdd6 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -139,31 +139,28 @@
                 "properties": {
                     "element": {"#": "alignLeft"},
                     "pressedClass": "active",
-                    "identifier": "alignLeft",
+                    "identifier": "justifyLeft",
                     "pressedLabel": "",
-                    "unpressedLabel": ""
+                    "unpressedLabel": "",
+                    "pressed": false
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
+
             "alignCenter": {
                 "prototype": "montage/ui/toggle-button.reel",
                 "properties": {
                     "element": {"#": "alignCenter"},
                     "pressedClass": "active",
-                    "identifier": "alignCenter",
+                    "identifier": "justifyCenter",
                     "pressedLabel": "",
-                    "unpressedLabel": ""
+                    "unpressedLabel": "",
+                    "pressed": false
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
             "alignRight": {
@@ -171,15 +168,13 @@
                 "properties": {
                     "element": {"#": "alignRight"},
                     "pressedClass": "active",
-                    "identifier": "alignRight",
+                    "identifier": "justifyRight",
                     "pressedLabel": "",
-                    "unpressedLabel": ""
+                    "unpressedLabel": "",
+                    "pressed": false
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
             "alignJustify": {
@@ -187,43 +182,33 @@
                 "properties": {
                     "element": {"#": "alignJustify"},
                     "pressedClass": "active",
-                    "identifier": "alignJustify",
+                    "identifier": "justify",
                     "pressedLabel": "",
-                    "unpressedLabel": ""
+                    "unpressedLabel": "",
+                    "pressed": false
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
             "indent": {
                 "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "indent"},
-                    "identifier": "indent",
-                    "value": ">>"
+                    "identifier": "indent"
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
             "outdent": {
                 "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "outdent"},
-                    "identifier": "outdent",
-                    "value": "<<"
+                    "identifier": "outdent"
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
             "bulletedList": {
@@ -236,10 +221,7 @@
                     "unpressedLabel": "• • •"
                 },
                 "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
+                    { "type": "action", "listener": {"@": "owner"} }
                 ]
             },
             "numberedList": {
@@ -251,12 +233,7 @@
                     "pressedLabel": "1 2 3",
                     "unpressedLabel": "1 2 3"
                 },
-                "listeners": [
-                    {
-                        "type": "action",
-                        "listener": {"@": "owner"}
-                    }
-                ]
+                "listeners": [ { "type": "action", "listener": {"@": "owner"} } ]
             }
 
     	}
@@ -285,8 +262,8 @@
                 <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"></button>
-                <button data-montage-id="outdent" class="nj-skinned textButton"></button>
+                <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>
             </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 4f944adf..126665e2 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -8,32 +8,70 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var ArrayController = require("montage/ui/controller/array-controller").ArrayController;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
-var Converter = require("montage/core/converter/converter").Converter;
 
 exports.TextProperties = Montage.create(ToolProperties, {
 
     fontName: {value: null, serializable: true},
     fontSize: {value: null, serializable: true},
-
-    fontSettings: {value: null, serializable: true}, // Note: Isn't used currently will need fontSettings Popup
-
     fontColor: {value: null, serializable: true},
+
     btnBold: {value: null, serializable: true},
     btnItalic: {value: null, serializable: true},
     btnUnderline: {value: null, serializable: true},
     btnStrikethrough: {value: null, serializable: true},
-    txtLink: {value: null, serializable: true},
-    linkTarget: {value: null, serializable: true},
+
     alignLeft: {value: null, serializable: true},
     alignCenter: {value: null, serializable: true},
     alignRight: {value: null, serializable: true},
     alignJustify: {value: null, serializable: true},
+
     indent: {value: null, serializable: true},
     outdent: {value: null, serializable: true},
+
     numberedList: {value: null, serializable: true},
     bulletedList: {value: null, serializable: true},
-    fontTypes: {value: null, serializable: true},
-    fontSizes: {value: null, serializable: true},
+
+    // Events
+    handleEditorSelect: {
+        value: function(e) {
+            this.alignLeft.pressed = false;
+            this.alignCenter.pressed = false;
+            this.alignRight.pressed = false;
+            this.alignJustify.pressed = false;
+            this.bulletedList.pressed = false;
+            this.numberedList.pressed = false;
+
+
+            switch(this.application.ninja.stage.textTool.justify) {
+                case "left":
+                    this.alignLeft.pressed = true;
+                    break;
+                case "center":
+                    this.alignCenter.pressed = true;
+                    break;
+                case "right":
+                    this.alignRight.pressed = true;
+                    break;
+                case "full":
+                    this.alignJustify.pressed = true;
+            }
+
+            switch(this.application.ninja.stage.textTool.listStyle) {
+                case "ordered":
+                    this.numberedList.pressed = true;
+                    break;
+                case "unordered":
+                    this.bulletedList.pressed = true;
+            }
+        }
+    },
+
+    handleEditorBlur: {
+        value: function(e) {
+
+        }
+    },
+
 
     // Draw Cycle
     prepareForDraw: {
@@ -46,6 +84,7 @@ exports.TextProperties = Montage.create(ToolProperties, {
 
             this.application.ninja.stage.textTool.addEventListener("editorSelect", this.handleEditorSelect.bind(this), false);
 
+
             //Bind to Rich Text editor that lives on the stage component
             Object.defineBinding(this.application.ninja.stage.textTool, "fontName", {
                 boundObject: this.fontName,
@@ -85,83 +124,82 @@ exports.TextProperties = Montage.create(ToolProperties, {
         }
     },
 
-    // Events
-    handleEditorSelect: {
-        value: function(e) {
-
-        }
-    },
-    
-    handleAlignLeftAction: {
+    // Actions
+    handleJustifyLeftAction: {
         value: function(e) {
-            //this.alignLeft.value = false;
-            this.alignCenter.value = false;
-            this.alignRight.value = false;
-            this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyleft");
+            this.alignCenter.pressed = false;
+            this.alignRight.pressed = false;
+            this.alignJustify.pressed = false;
+            this.application.ninja.stage.textTool.justify = "left";
         }
     },
 
-    handleAlignCenterAction: {
+    handleJustifyCenterAction: {
         value: function(e) {
-            this.alignLeft.value = false;
-            //this.alignCenter.value = false;
-            this.alignRight.value = false;
-            this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifycenter");
+            this.alignLeft.pressed = false;
+            this.alignRight.pressed = false;
+            this.alignJustify.pressed = false;
+            this.application.ninja.stage.textTool.justify = "center"
         }
     },
 
-    handleAlignRightAction: {
+    handleJustifyRightAction: {
         value: function(e) {
-            this.alignLeft.value = false;
-            this.alignCenter.value = false;
-            //this.alignRight.value = false;
-            this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyright");
+            this.alignLeft.pressed = false;
+            this.alignCenter.pressed = false;
+            this.alignJustify.pressed = false;
+            this.application.ninja.stage.textTool.justify = "right";
         }
     },
 
-    handleAlignJustifyAction: {
+    handleJustifyAction: {
         value: function(e) {
-            this.alignLeft.value = false;
-            this.alignCenter.value = false;
-            this.alignRight.value = false;
-            //this.alignJustify.value = false;
-            this.application.ninja.stage.textTool.doAction("justifyfull");
+            this.alignLeft.pressed = false;
+            this.alignCenter.pressed = false;
+            this.alignRight.pressed = false;
+            this.application.ninja.stage.textTool.justify = "full";
         }
     },
 
     handleIndentAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("indent");
+            this.application.ninja.stage.textTool.indent();
         }
     },
 
     handleOutdentAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("outdent");
+            this.application.ninja.stage.textTool.outdent();
         }
     },
 
     handleBulletedListAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("insertunorderedlist");
+            this.numberedList.pressed = false;
+            if(e._currentTarget.pressed) {
+                this.application.ninja.stage.textTool.listStyle = "unordered";
+            } else {
+                this.application.ninja.stage.textTool.listStyle = "none";
+            }
         }
     },
 
     handleNumberedListAction: {
         value: function(e) {
-            this.application.ninja.stage.textTool.doAction("insertorderedlist");
+            this.bulletedList.pressed = false;
+            if(e._currentTarget.pressed) {
+                this.application.ninja.stage.textTool.listStyle = "ordered";
+            } else {
+                this.application.ninja.stage.textTool.listStyle = "none";
+            }
         }
     },
 
 
     handleFontColorChange: {
         value: function(e) {
-            this.application.ninja.stage.textTool.foreColor = e._event.color.css;
+            this.application.ninja.stage.textTool.element.style.color = e._event.color.css;
         }
     }
 
 });
-
-- 
cgit v1.2.3


From cbb39c7833994c6e1db3f5b445fbedf5c70b95cc Mon Sep 17 00:00:00 2001
From: Ananya Sen
Date: Tue, 3 Jul 2012 13:02:06 -0700
Subject: fixed IKNINJA-1877 : Clicking on a menu item should commit on mouse
 up and not on mouse down.

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
---
 js/components/menu/menu-entry.reel/menu-entry.js | 13 +++++++++-
 js/components/menu/menu-item.reel/menu-item.css  |  2 ++
 js/components/menu/menu-item.reel/menu-item.js   | 30 ++++++++++++++++--------
 3 files changed, 34 insertions(+), 11 deletions(-)

(limited to 'js/components')

diff --git a/js/components/menu/menu-entry.reel/menu-entry.js b/js/components/menu/menu-entry.reel/menu-entry.js
index 0f5503f6..93628dec 100755
--- a/js/components/menu/menu-entry.reel/menu-entry.js
+++ b/js/components/menu/menu-entry.reel/menu-entry.js
@@ -78,10 +78,21 @@ exports.MenuEntry = Montage.create(Component, {
         }
     },
 
+    toggleOnMenuItemAction: {
+        value: function() {
+            // TODO: Hack! Rework this!
+            //for non menu headers only
+            this.parentComponent.ownerComponent.toggleActivation(this);
+        }
+    },
+
     captureMousedown: {
         value: function(event) {
             // TODO: Hack! Rework this!
-            this.parentComponent.ownerComponent.toggleActivation(this);
+            //for menu headers only
+            if(event.target.getAttribute("data-montage-id") === "topHeaderText"){
+                this.parentComponent.ownerComponent.toggleActivation(this);
+            }
         }
     },
 
diff --git a/js/components/menu/menu-item.reel/menu-item.css b/js/components/menu/menu-item.reel/menu-item.css
index e5ceda5c..0b8092c1 100755
--- a/js/components/menu/menu-item.reel/menu-item.css
+++ b/js/components/menu/menu-item.reel/menu-item.css
@@ -9,10 +9,12 @@
     font-size: 10pt;
     padding: 3px 12px 3px 8px;
     text-shadow : 1px 1px 1px #000000;
+    cursor:pointer;
 }
 
 .menuItem:hover {
     background-color: #7f7f7f;
+    cursor:pointer;
 }
 
 .menubg .subEntries {
diff --git a/js/components/menu/menu-item.reel/menu-item.js b/js/components/menu/menu-item.reel/menu-item.js
index 3a5bf4ab..cad833a0 100755
--- a/js/components/menu/menu-item.reel/menu-item.js
+++ b/js/components/menu/menu-item.reel/menu-item.js
@@ -96,18 +96,15 @@ exports.MenuItem = Montage.create(Component, {
 
             if(this.data.submenu) {
                 this.submenu = true;
-
                 this.subentries = this.data.entries;
-
                 this.subMenu.classList.add("subMenu");
-                this.element.addEventListener("mouseover", this, false);
-                this.element.addEventListener("mouseout", this, false);
-
             }
 
+            this.element.addEventListener("mouseover", this, false);
+            this.element.addEventListener("mouseout", this, false);
 
             this.itemText.innerHTML = this.data.displayText;
-            this.element.addEventListener("mousedown", this, true);
+            this.element.addEventListener("mouseup", this, true);
         }
     },
 
@@ -132,10 +129,13 @@ exports.MenuItem = Montage.create(Component, {
         }
     },
 
-    captureMousedown: {
+    captureMouseup: {
         value: function(event) {
 
-            if(this.data.radio && this.checked) return;
+            if(this.data.radio && this.checked){
+                this.parentComponent.ownerComponent.toggleOnMenuItemAction();
+                return;
+            }
 
             if( ( this.enabled === true || this.enabled > 0 ) && (this.submenu === false) ) {
                 if(this.data.action) {
@@ -143,6 +143,7 @@ exports.MenuItem = Montage.create(Component, {
                 } else  if(this.checked !== null) {
                     this.checked = !this.checked;
                 }
+                this.parentComponent.ownerComponent.toggleOnMenuItemAction();
             }
 
         }
@@ -150,13 +151,22 @@ exports.MenuItem = Montage.create(Component, {
 
     handleMouseover: {
         value: function() {
-            if(this.enabled) this.subMenu.style.display = "block";
+            if(this.enabled){
+                this.element.style.backgroundColor = "#7f7f7f";
+                this.element.style.cursor = "pointer";
+                if(this.data.submenu) {
+                    this.subMenu.style.display = "block";
+                }
+            }
         }
     },
 
     handleMouseout: {
         value: function() {
-            this.subMenu.style.display = "none";
+            this.element.style.backgroundColor = "#474747";
+            if(this.data.submenu) {
+                this.subMenu.style.display = "none";
+            }
         }
     }
 
-- 
cgit v1.2.3


From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs

---
 js/components/colorbar.reel/colorbar.html          |  40 +-
 js/components/colorbar.reel/colorbar.js            | 236 +++----
 js/components/colorbar.reel/css/colorbar.scss      |   2 +-
 js/components/colorwheel.reel/colorwheel.html      |  60 +-
 js/components/colorwheel.reel/colorwheel.js        | 710 ++++++++++-----------
 js/components/colorwheel.reel/css/colorwheel.scss  |   6 +-
 js/components/combobox.reel/combobox.js            |   4 +-
 js/components/core/class-uuid.js                   |   2 +-
 .../gradientpicker.reel/css/gradientpicker.scss    | 146 ++---
 .../gradientpicker.reel/gradientpicker.html        |  96 +--
 .../gradientpicker.reel/gradientpicker.js          | 460 ++++++-------
 js/components/hintable.reel/hintable.js            |  14 +-
 .../layout/document-bar.reel/document-bar.html     |   4 +-
 .../layout/document-bar.reel/document-bar.js       |  30 +-
 .../layout/document-entry.reel/document-entry.html |   4 +-
 .../layout/tools-list.reel/tools-list.html         |   4 +-
 .../tools-properties.reel/tools-properties.html    |   6 +-
 .../popup-manager.reel/popup-manager.html          |  18 +-
 js/components/popup-manager.reel/popup-manager.js  | 212 +++---
 js/components/popup.reel/css/popup.scss            |  54 +-
 js/components/popup.reel/popup.html                |  28 +-
 js/components/popup.reel/popup.js                  | 336 +++++-----
 js/components/prompt.reel/prompt.js                | 112 ++--
 js/components/radio.reel/radio.js                  |   4 +-
 .../binding-properties.html                        |   4 +-
 .../brush-properties.reel/brush-properties.html    |   4 +-
 .../eraser-properties.reel/eraser-properties.html  |   4 +-
 .../eyedropper-properties.html                     |   4 +-
 .../fill-properties.reel/fill-properties.html      |   2 +-
 .../ink-bottle-properties.css                      |   2 +-
 .../line-properties.reel/line-properties.html      |   4 +-
 .../object3d-properties.html                       |   4 +-
 .../oval-properties.reel/oval-properties.html      |   4 +-
 .../pan-properties.reel/pan-properties.html        |   4 +-
 .../rect-properties.reel/rect-properties.html      |   4 +-
 .../rotate-stage-properties.html                   |   4 +-
 .../selection-properties.html                      |   2 +-
 .../shape-properties.reel/shape-properties.html    |   4 +-
 .../tag-properties.reel/tag-properties.html        |   4 +-
 .../text-properties.reel/text-properties.html      |   4 +-
 .../zoom-properties.reel/zoom-properties.html      |   4 +-
 js/components/treeview/leaf.reel/leaf.html         |   6 +-
 .../treeview/ninja-leaf.reel/ninja-leaf.html       |   6 +-
 js/components/treeview/treeview.reel/treeview.html |   6 +-
 js/components/ui/color-chip.reel/color-chip.html   |   2 +-
 js/components/ui/color-chip.reel/color-chip.js     |   6 +-
 js/components/ui/file-input.reel/file-input.js     |   4 +-
 js/components/ui/icon-list-basic/icon.reel/icon.js |  22 +-
 .../ui/icon-list-basic/iconsList.reel/iconsList.js |  18 +-
 .../ui/property-control.reel/property-control.js   |  10 +-
 js/components/ui/tree-basic/tree.reel/tree.js      |  18 +-
 .../ui/tree-basic/treeItem.reel/treeItem.js        |  16 +-
 52 files changed, 1382 insertions(+), 1382 deletions(-)

(limited to 'js/components')

diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html
index e61cc2f2..fc31d742 100755
--- a/js/components/colorbar.reel/colorbar.html
+++ b/js/components/colorbar.reel/colorbar.html
@@ -31,28 +31,28 @@ POSSIBILITY OF SUCH DAMAGE.
 </copyright>
 -->
 <html>
-	<head>
-    	
-    	<link rel="stylesheet" type="text/css" href="css/colorbar.css">
-   		
-   		<script type="text/montage-serialization">
-   			{
-            	"owner": {
-                	"prototype": "js/components/colorbar.reel[ColorBar]",
-                	"properties": {
-                    	"element": {"#": "colorbar"}
+    <head>
+        
+        <link rel="stylesheet" type="text/css" href="css/colorbar.css">
+        
+        <script type="text/montage-serialization">
+            {
+                "owner": {
+                    "prototype": "js/components/colorbar.reel[ColorBar]",
+                    "properties": {
+                        "element": {"#": "colorbar"}
 
-                	}
-            	}
-        	}
-		</script>
-		
-	</head>
-	
-	<body>
+                    }
+                }
+            }
+        </script>
+        
+    </head>
     
-    	<canvas data-montage-id="colorbar" class="colorbar"></canvas>
+    <body>
     
-	</body>
+        <canvas data-montage-id="colorbar" class="colorbar"></canvas>
+    
+    </body>
 
 </html>
diff --git a/js/components/colorbar.reel/colorbar.js b/js/components/colorbar.reel/colorbar.js
index 4f3577d9..808ada4e 100755
--- a/js/components/colorbar.reel/colorbar.js
+++ b/js/components/colorbar.reel/colorbar.js
@@ -30,152 +30,152 @@ POSSIBILITY OF SUCH DAMAGE.
 
 ////////////////////////////////////////////////////////////////////////
 //
-var Montage = 			require("montage/core/core").Montage,
-	Component = 		require("montage/ui/component").Component;
+var Montage =           require("montage/core/core").Montage,
+    Component =         require("montage/ui/component").Component;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as ColorBar
 exports.ColorBar = Montage.create(Component, {
-	////////////////////////////////////////////////////////////////////
-	//No reel needed since it's just a bar component
-	hasTemplate: {
+    ////////////////////////////////////////////////////////////////////
+    //No reel needed since it's just a bar component
+    hasTemplate: {
         value: true
     },
     ////////////////////////////////////////////////////////////////////
     //Width of spectrum (not including b/w buttons)
     _colorBarSpectrumWidth: {
-    	value: null
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Width of spectrum steps (used to calculate size of B/W buttons)
     _colorBarSpectrumWidthSteps: {
-    	value: 10
+        value: 10
     },
     ////////////////////////////////////////////////////////////////////
     //Default value
     _value: {
         value: {h: 0, s: 0, v: 0}
     },
-	////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
     //HSV Value selected from bar
     value: {
         get: function() {return this._value;},
         set: function(value) {
-        	if (value) {
-        		//Checking for limits (Max and Min HSV values)
-	            if (value.h > Math.PI*2) {
-    	        	value.h = Math.PI*2;
-        	   	} else if (value.h < 0) {
-           			value.h = 0;
-	           	}
-    	       	//
-        	   	if (value.s > 1) {
-           			value.s = 1;
-	           	} else if (value.s < 0) {
-    	       		value.s = 0;
-        	   	}
-           		//
-	           	if (value.v > 1) {
-    	       		value.v = 1;
-        	    } else if (value.v < 0) {
-           			value.v = 0;
-	           	}
-    	       	//Setting value
-        	    this._value = value;
-        	    //
-        	    if (!this._isMouseDown) {
-        	    	this._dispatchActionEvent('change', true);
-        	    }
+            if (value) {
+                //Checking for limits (Max and Min HSV values)
+                if (value.h > Math.PI*2) {
+                    value.h = Math.PI*2;
+                } else if (value.h < 0) {
+                    value.h = 0;
+                }
+                //
+                if (value.s > 1) {
+                    value.s = 1;
+                } else if (value.s < 0) {
+                    value.s = 0;
+                }
+                //
+                if (value.v > 1) {
+                    value.v = 1;
+                } else if (value.v < 0) {
+                    value.v = 0;
+                }
+                //Setting value
+                this._value = value;
+                //
+                if (!this._isMouseDown) {
+                    this._dispatchActionEvent('change', true);
+                }
             }
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
     prepareForDraw: {
-    	value: function() {
- 			//Nothing
-    	}
+        value: function() {
+            //Nothing
+        }
     },
     ////////////////////////////////////////////////////////////////////
     //Setting up and drawing canvas to object
     willDraw: {
-    	value: function() {
-    		//Setting the width and height of the canvas to match container
-    		this.element.width = parseInt(window.getComputedStyle(this.element, null).width);
-    		this.element.height = parseInt(window.getComputedStyle(this.element, null).height);
-    	}
+        value: function() {
+            //Setting the width and height of the canvas to match container
+            this.element.width = parseInt(window.getComputedStyle(this.element, null).width);
+            this.element.height = parseInt(window.getComputedStyle(this.element, null).height);
+        }
     },
     ////////////////////////////////////////////////////////////////////
     //
     draw: {
-    	value: function () {
-    		//Local variables
-    		var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i;
-			//calculating width of spectrum (remainder is used for B/W buttons)
-			cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps);
-			//Context and Gradient
-			cb_ctx = cb_canvas.getContext('2d');
-			cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height);
-			////////////////////////////////////////////////////////
-			//Looping through set intervals (Creating spectrum)
-			for (i=0; i<60; i++) {
-				//Calculating slice number
-				cb_slc = Math.round(255*i/60);
-				//Creating gradient slices (6 colors in color theory)
-				cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)');
-				cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)');
-				cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')');
-				cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)');
-				cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)');
-				cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')');
-			}
-			//Adding Color Bar to the canvas (Gradients)
-			cb_ctx.fillStyle = cb_grdnt;
-  			cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
-  			////////////////////////////////////////////////////////
-  			//White Gradient overlay to simulate L
-  			cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height);
-  			cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)');
-  			cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
-  			cb_ctx.fillStyle = cb_grdnt;
-  			cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
-  			//Black Gradient overlay to simulate S
-  			cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height);
-  			cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)');
-  			cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)');
-  			cb_ctx.fillStyle = cb_grdnt;
-  			cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
-  			//Black "button"
-  			cb_ctx.fillStyle = "#000";
-  			cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2);
-  			//Black line divider
-			cb_ctx.fillStyle = "#000";
-  			cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height);
-  			//White "button"
-  			cb_ctx.fillStyle = "#FFF";
-  			cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2);
-  			//Saving
-    		cb_ctx.restore();
-			cb_ctx.save();
-			//Cleaning up
-			cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null;
-    	}
+        value: function () {
+            //Local variables
+            var cb_canvas = this.element, cb_ctx, cb_grdnt, cb_slc, cb_gwidth, PI = Math.PI, i;
+            //calculating width of spectrum (remainder is used for B/W buttons)
+            cb_gwidth = Math.round(cb_canvas.width - cb_canvas.width/this._colorBarSpectrumWidthSteps);
+            //Context and Gradient
+            cb_ctx = cb_canvas.getContext('2d');
+            cb_grdnt = cb_ctx.createLinearGradient(0, cb_canvas.height, cb_gwidth, cb_canvas.height);
+            ////////////////////////////////////////////////////////
+            //Looping through set intervals (Creating spectrum)
+            for (i=0; i<60; i++) {
+                //Calculating slice number
+                cb_slc = Math.round(255*i/60);
+                //Creating gradient slices (6 colors in color theory)
+                cb_grdnt.addColorStop(i/360, 'rgb(255, '+cb_slc+', 0)');
+                cb_grdnt.addColorStop((i+60)/360, 'rgb('+(255-cb_slc)+', 255, 0)');
+                cb_grdnt.addColorStop((i+120)/360, 'rgb(0, 255, '+cb_slc+')');
+                cb_grdnt.addColorStop((i+180)/360, 'rgb(0, '+(255-cb_slc)+', 255)');
+                cb_grdnt.addColorStop((i+240)/360, 'rgb('+cb_slc+', 0, 255)');
+                cb_grdnt.addColorStop((i+300)/360, 'rgb(255, 0,'+(255-cb_slc)+')');
+            }
+            //Adding Color Bar to the canvas (Gradients)
+            cb_ctx.fillStyle = cb_grdnt;
+            cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
+            ////////////////////////////////////////////////////////
+            //White Gradient overlay to simulate L
+            cb_grdnt = cb_ctx.createLinearGradient(0, 0, 0, cb_canvas.height);
+            cb_grdnt.addColorStop(0.0, 'rgba(255, 255, 255, 1)');
+            cb_grdnt.addColorStop(0.5, 'rgba(255, 255, 255, 0)');
+            cb_ctx.fillStyle = cb_grdnt;
+            cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
+            //Black Gradient overlay to simulate S
+            cb_grdnt = cb_ctx.createLinearGradient(0,0,0,cb_canvas.height);
+            cb_grdnt.addColorStop(0.5, 'rgba(0, 0, 0, 0)');
+            cb_grdnt.addColorStop(1.0, 'rgba(0, 0, 0, 1)');
+            cb_ctx.fillStyle = cb_grdnt;
+            cb_ctx.fillRect(0, 0, cb_gwidth, cb_canvas.height);
+            //Black "button"
+            cb_ctx.fillStyle = "#000";
+            cb_ctx.fillRect(cb_gwidth, cb_canvas.height/2, cb_gwidth, cb_canvas.height/2);
+            //Black line divider
+            cb_ctx.fillStyle = "#000";
+            cb_ctx.fillRect(cb_gwidth-1, 0, cb_gwidth+1, cb_canvas.height);
+            //White "button"
+            cb_ctx.fillStyle = "#FFF";
+            cb_ctx.fillRect(cb_gwidth, 0, cb_gwidth, cb_canvas.height/2);
+            //Saving
+            cb_ctx.restore();
+            cb_ctx.save();
+            //Cleaning up
+            cb_canvas = cb_ctx = cb_grdnt = cb_slc = cb_gwidth = PI = i = null;
+        }
     },
     ////////////////////////////////////////////////////////////////////
     //Adding ColorBar to the element
     didDraw: {
-    	value: function() {
-    		//Adding functionality via events
-			this.element.addEventListener("mousedown", this, false);
-			this.element.addEventListener("mouseover", this, false);
-			this.element.addEventListener("mousemove", this, false);
-    	}
+        value: function() {
+            //Adding functionality via events
+            this.element.addEventListener("mousedown", this, false);
+            this.element.addEventListener("mouseover", this, false);
+            this.element.addEventListener("mousemove", this, false);
+        }
     },
     ////////////////////////////////////////////////////////////////////
     //Mouse Down (adds other events and updates HSV)
     handleMousedown: {
         value: function (e) {
             if (!this._colorBarSpectrumWidth)
-	            this._colorBarSpectrumWidth = (this.element.width - this.element.width/this._colorBarSpectrumWidthSteps)-1;
+                this._colorBarSpectrumWidth = (this.element.width - this.element.width/this._colorBarSpectrumWidthSteps)-1;
             this._isMouseDown = true;
             document.addEventListener("mouseup", this, false);
             this._updateHsv(e);
@@ -184,7 +184,7 @@ exports.ColorBar = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Used to check mouse mode and display cursor
     _isMouseDown: {
-    	value: false
+        value: false
     },
     ////////////////////////////////////////////////////////////////////
     //Mouse Move (updates HSV)
@@ -209,27 +209,27 @@ exports.ColorBar = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Updating HSV values
     _updateHsv: {
-    	value: function (e) {
-    		if (e.offsetX > this._colorBarSpectrumWidth) {
-				//Faking button functionality - Simple B/W selection
-				if (e.offsetY >= this.element.offsetHeight/2) { this.value = {h: this.value.h, s: 1, v: 0};} // White
-				else { this.value = {h: this.value.h, s: 0, v: 1};} // Black
-			} else {
-				//Checking for S or V to be applied (no mixing on bar)
-				if (e.offsetY >= this.element.offsetHeight/2) { //Saturation
-					this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1-(e.offsetY-this.element.offsetHeight/2)/((this.element.offsetHeight/2-1)), s: 1};
-				} else { //Vibrance
-					this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1, s: (e.offsetY)/((this.element.offsetHeight/2))};
-				}
-			}
-			//
-			this._dispatchActionEvent('changing', false);
-    	}
+        value: function (e) {
+            if (e.offsetX > this._colorBarSpectrumWidth) {
+                //Faking button functionality - Simple B/W selection
+                if (e.offsetY >= this.element.offsetHeight/2) { this.value = {h: this.value.h, s: 1, v: 0};} // White
+                else { this.value = {h: this.value.h, s: 0, v: 1};} // Black
+            } else {
+                //Checking for S or V to be applied (no mixing on bar)
+                if (e.offsetY >= this.element.offsetHeight/2) { //Saturation
+                    this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1-(e.offsetY-this.element.offsetHeight/2)/((this.element.offsetHeight/2-1)), s: 1};
+                } else { //Vibrance
+                    this.value = {h: e.offsetX/this._colorBarSpectrumWidth*Math.PI*2, v: 1, s: (e.offsetY)/((this.element.offsetHeight/2))};
+                }
+            }
+            //
+            this._dispatchActionEvent('changing', false);
+        }
     },
     ////////////////////////////////////////////////////////////////////
     //Dispatching "Change" event
     _dispatchActionEvent: {
-     	value: function(type, userInitiated) {
+        value: function(type, userInitiated) {
             var actionEvent = document.createEvent("CustomEvent");
             actionEvent.initEvent(type, true, true);
             actionEvent.type = type;
diff --git a/js/components/colorbar.reel/css/colorbar.scss b/js/components/colorbar.reel/css/colorbar.scss
index 086aa1ea..e9ecdc30 100755
--- a/js/components/colorbar.reel/css/colorbar.scss
+++ b/js/components/colorbar.reel/css/colorbar.scss
@@ -31,5 +31,5 @@ POSSIBILITY OF SUCH DAMAGE.
 
 .colorbar
 {
-	cursor: crosshair;
+    cursor: crosshair;
 }
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
index b39479a8..4f542f88 100755
--- a/js/components/colorwheel.reel/colorwheel.html
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -31,39 +31,39 @@ POSSIBILITY OF SUCH DAMAGE.
 </copyright>
 -->
 <html lang="en">
-	<head>
-    	
-    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    	
-    	<link rel="stylesheet" type="text/css" href="css/colorwheel.css">
+    <head>
+        
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        
+        <link rel="stylesheet" type="text/css" href="css/colorwheel.css">
 
-		<script type="text/montage-serialization">
-   			{
-            	"owner": {
-                	"prototype": "js/components/colorwheel.reel[ColorWheel]",
-                	"properties": {
-                    	"element": {"#": "colorwheel"},
-                    	"wheel": {"#": "wheel"},
-                    	"wheelSelect": {"#": "wselect"},
-                    	"swatch": {"#": "swatch"},
-                    	"swatchSelect": {"#": "sselect"}
+        <script type="text/montage-serialization">
+            {
+                "owner": {
+                    "prototype": "js/components/colorwheel.reel[ColorWheel]",
+                    "properties": {
+                        "element": {"#": "colorwheel"},
+                        "wheel": {"#": "wheel"},
+                        "wheelSelect": {"#": "wselect"},
+                        "swatch": {"#": "swatch"},
+                        "swatchSelect": {"#": "sselect"}
 
-                	}
-            	}
-        	}
-		</script>
-		
-	</head>
-	
-	<body>
+                    }
+                }
+            }
+        </script>
+        
+    </head>
     
-    	<div data-montage-id="colorwheel" class="colorwheel">
-    		<canvas data-montage-id="wheel"></canvas>
-    		<canvas data-montage-id="swatch"></canvas>
-    		<canvas data-montage-id="sselect"></canvas>
-    		<canvas data-montage-id="wselect"></canvas>
-    	</div>
+    <body>
     
-	</body>
+        <div data-montage-id="colorwheel" class="colorwheel">
+            <canvas data-montage-id="wheel"></canvas>
+            <canvas data-montage-id="swatch"></canvas>
+            <canvas data-montage-id="sselect"></canvas>
+            <canvas data-montage-id="wselect"></canvas>
+        </div>
+    
+    </body>
 
 </html>
diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
index a7c70038..97a1751d 100755
--- a/js/components/colorwheel.reel/colorwheel.js
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -30,14 +30,14 @@ POSSIBILITY OF SUCH DAMAGE.
 
 ////////////////////////////////////////////////////////////////////////
 //
-var Montage = 	require("montage/core/core").Montage,
-	Component = require("montage/ui/component").Component;
+var Montage =   require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.ColorWheel = Montage.create(Component, {
-	////////////////////////////////////////////////////////////////////
-	//
-	hasTemplate: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    hasTemplate: {
         value: true
     },
     ////////////////////////////////////////////////////////////////////
@@ -45,7 +45,7 @@ exports.ColorWheel = Montage.create(Component, {
     _value: {
         value: {h: 0, s: 0, v: 0}
     },
-	///