Merge branch 'text-tool' of https://github.com/dhg637/ninja-internal into feature-branch

4 files changed, 457 insertions, 137 deletions

diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js
index ce5ac1af..2d26c8b4 100644
--- a/js/components/button.reel/button.js
+++ b/js/components/button.reel/button.js
@@ -179,7 +179,7 @@ var Button = exports.Button = Montage.create(Component, {
         value: function() {
             if(this.isToggleButton)
             {
-                if(this._value)
+                if(this._value === true)
                 {
                     this.element.classList.remove(this.offState);
                     this.element.classList.add(this.onState);
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 d581c6c3..6aa61812 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -5,29 +5,33 @@
  </copyright> */
 
 .optionsTextTool {
-    display: -webkit-box;
-    -webkit-box-orient:horizontal;
-    -webkit-box-align: stretch;
-    padding: 5px;
+    padding: 6px;
 }
 
-
-.optionsTextTool > * {
-    -webkit-box-flex:0;
+.optionsTextTool .btnGroup {
+    padding: 0px 8px;
 }
 
-.optionsTextTool .button {
-    width: auto;
-
+.optionsTextTool > *, .optionsTextTool .btnGroup > * {
+    float:left;
 }
 
-.optionsTextTool .hottextunit {
-    padding-top:5px;
+.optionsTextTool button {
+    width: auto;
+    padding: 4px 8px !important;
+    margin-left:4px;
 }
 
 .optionsTextTool .label, .optionsTextTool .hottextunit {
-    float:none;
     font-size:11px;
 }
 
+.optionsTextTool .fontSelection {
+    width:100px;
+}
 
+.optionsTextTool .fontColor {
+    width: 20px;
+    height: 18px;
+    margin: 2px 6px;
+}
\ No newline at end of file
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 fb57c06d..7ded1236 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -33,8 +33,8 @@
                     "alignCenter": {"@": "alignCenter"},
                     "alignRight": {"@": "alignRight"},
                     "alignJustify": {"@": "alignJustify"},
-                    "indentRight": {"@": "indentRight"},
-                    "indentLeft": {"@": "indentLeft"},
+                    "indent": {"@": "indent"},
+                    "outdent": {"@": "outdent"},
                     "numberedList": {"@": "numberedList"},
                     "bulletedList": {"@": "bulletedList"}
                 }
@@ -57,8 +57,16 @@
                 "module": "js/components/combobox.reel",
                 "name": "Combobox",
                 "properties": {
-                    "element": {"#": "fontSelection"}
-                }
+                    "element": {"#": "fontSelection"},
+                    "identifier": "fontSelection"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+
             },
             "fontSettings": {
                 "module": "js/components/button.reel",
@@ -69,131 +77,226 @@
             },
 
             "fontSize": {
-                "module": "js/components/hottextunit.reel",
-                "name": "HotTextUnit",
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
                 "properties": {
-                    "element": {"#": "fontSize"}
-                }
-            },
+                    "element": {"#": "fontSize"},
+                    "identifier": "fontSize"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
 
-            "fontColor": {
-                "module": "js/components/button.reel",
-                "name": "Button",
-                "properties": {
-                    "element": {"#": "fontColor"}
-                }
             },
+        
             "btnBold": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnBold"},
-                    "_isToggleButton": true
-                }
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnBold",
+                    "label": "B"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnItalic": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnItalic"},
-                    "_isToggleButton": true
-                }
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnItalic",
+                    "label": "I"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
             "btnUnderline": {
-                "module": "js/components/button.reel",
-                "name": "Button",
+                "module": "montage/ui/toggle-button.reel",
+                "name": "ToggleButton",
                 "properties": {
                     "element": {"#": "btnUnderline"},
-                    "_isToggleButton": true
-                }
+                    "pressedClass": "active",
+                    "preventFocus": true,
+                    "identifier": "btnUnderline",
+                    "label": "U"
+                },
+