8 files changed, 568 insertions, 148 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;
+    padding: 6px;
-    -webkit-box-orient:horizontal;
-    -webkit-box-align: stretch;
-    padding: 5px;
 }
+.optionsTextTool .btnGroup {
-.optionsTextTool > * {
+    padding: 0px 8px;
-    -webkit-box-flex:0;
 }
-.optionsTextTool .button {
+.optionsTextTool > *, .optionsTextTool .btnGroup > * {
-    width: auto;
+    float:left;
 }
-.optionsTextTool .hottextunit {
+.optionsTextTool button {
-    padding-top:5px;
+    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"},
+                    "indent": {"@": "indent"},
-                    "indentLeft": {"@": "indentLeft"},
+                    "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",
+                "module": "js/components/combobox.reel",
-                "name": "HotTextUnit",
+                "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",
+                "module": "montage/ui/toggle-button.reel",
-                "name": "Button",
+                "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",
+                "module": "montage/ui/toggle-button.reel",
-                "name": "Button",
+                "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",
+                "module": "montage/ui/toggle-button.reel",
-                "name": "Button",
+                "name": "ToggleButton",
                "properties": {
                    "element": {"#": "btnUnderline"},
-                    "_isToggleButton": true
+                    "pressedClass": "active",
-                }
+                    "preventFocus": true,
+                    "identifier": "btnUnderline",
+                    "label": "U"
+                },
+                "listeners": [
+                    {
+                        "type": "action",

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, {
179	value: function() {	179	value: function() {
180	if(this.isToggleButton)	180	if(this.isToggleButton)
181	{	181	{
182	if(this._value)	182	if(this._value === true)
183	{	183	{
184	this.element.classList.remove(this.offState);	184	this.element.classList.remove(this.offState);
185	this.element.classList.add(this.onState);	185	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 @@
5	</copyright> */	5	</copyright> */
6		6
7	.optionsTextTool {	7	.optionsTextTool {
8	display: -webkit-box;	8	padding: 6px;
9	-webkit-box-orient:horizontal;
10	-webkit-box-align: stretch;
11	padding: 5px;
12	}	9	}
13		10
14		11	.optionsTextTool .btnGroup {
15	.optionsTextTool > * {	12	padding: 0px 8px;
16	-webkit-box-flex:0;
17	}	13	}
18		14
19	.optionsTextTool .button {	15	.optionsTextTool > , .optionsTextTool .btnGroup > {
20	width: auto;	16	float:left;
21
22	}	17	}
23		18
24	.optionsTextTool .hottextunit {	19	.optionsTextTool button {
25	padding-top:5px;	20	width: auto;
		21	padding: 4px 8px !important;
		22	margin-left:4px;
26	}	23	}
27		24
28	.optionsTextTool .label, .optionsTextTool .hottextunit {	25	.optionsTextTool .label, .optionsTextTool .hottextunit {
29	float:none;
30	font-size:11px;	26	font-size:11px;
31	}	27	}
32		28
		29	.optionsTextTool .fontSelection {
		30	width:100px;
		31	}
33		32
		33	.optionsTextTool .fontColor {
		34	width: 20px;
		35	height: 18px;
		36	margin: 2px 6px;
		37	} \ 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 @@
33	"alignCenter": {"@": "alignCenter"},	33	"alignCenter": {"@": "alignCenter"},
34	"alignRight": {"@": "alignRight"},	34	"alignRight": {"@": "alignRight"},
35	"alignJustify": {"@": "alignJustify"},	35	"alignJustify": {"@": "alignJustify"},
36	"indentRight": {"@": "indentRight"},	36	"indent": {"@": "indent"},
37	"indentLeft": {"@": "indentLeft"},	37	"outdent": {"@": "outdent"},
38	"numberedList": {"@": "numberedList"},	38	"numberedList": {"@": "numberedList"},
39	"bulletedList": {"@": "bulletedList"}	39	"bulletedList": {"@": "bulletedList"}
40	}	40	}
@@ -57,8 +57,16 @@
57	"module": "js/components/combobox.reel",	57	"module": "js/components/combobox.reel",
58	"name": "Combobox",	58	"name": "Combobox",
59	"properties": {	59	"properties": {
60	"element": {"#": "fontSelection"}	60	"element": {"#": "fontSelection"},
61	}	61	"identifier": "fontSelection"
		62	},
		63	"listeners": [
		64	{
		65	"type": "change",
		66	"listener": {"@": "owner"}
		67	}
		68	]
		69
62	},	70	},
63	"fontSettings": {	71	"fontSettings": {
64	"module": "js/components/button.reel",	72	"module": "js/components/button.reel",
@@ -69,131 +77,226 @@
69	},	77	},
70		78
71	"fontSize": {	79	"fontSize": {
72	"module": "js/components/hottextunit.reel",	80	"module": "js/components/combobox.reel",
73	"name": "HotTextUnit",	81	"name": "Combobox",
74	"properties": {	82	"properties": {
75	"element": {"#": "fontSize"}	83	"element": {"#": "fontSize"},
76	}	84	"identifier": "fontSize"
77	},	85	},
		86	"listeners": [
		87	{
		88	"type": "change",
		89	"listener": {"@": "owner"}
		90	}
		91	]
78		92
79	"fontColor": {
80	"module": "js/components/button.reel",
81	"name": "Button",
82	"properties": {
83	"element": {"#": "fontColor"}
84	}
85	},	93	},
		94
86	"btnBold": {	95	"btnBold": {
87	"module": "js/components/button.reel",	96	"module": "montage/ui/toggle-button.reel",
88	"name": "Button",	97	"name": "ToggleButton",
89	"properties": {	98	"properties": {
90	"element": {"#": "btnBold"},	99	"element": {"#": "btnBold"},
91	"_isToggleButton": true	100	"pressedClass": "active",
92	}	101	"preventFocus": true,
		102	"identifier": "btnBold",
		103	"label": "B"
		104	},
		105	"listeners": [
		106	{
		107	"type": "action",
		108	"listener": {"@": "owner"}
		109	}
		110	]
93	},	111	},
94	"btnItalic": {	112	"btnItalic": {
95	"module": "js/components/button.reel",	113	"module": "montage/ui/toggle-button.reel",
96	"name": "Button",	114	"name": "ToggleButton",
97	"properties": {	115	"properties": {
98	"element": {"#": "btnItalic"},	116	"element": {"#": "btnItalic"},
99	"_isToggleButton": true	117	"pressedClass": "active",
100	}	118	"preventFocus": true,
		119	"identifier": "btnItalic",
		120	"label": "I"
		121	},
		122	"listeners": [
		123	{
		124	"type": "action",
		125	"listener": {"@": "owner"}
		126	}
		127	]
101	},	128	},
102	"btnUnderline": {	129	"btnUnderline": {
103	"module": "js/components/button.reel",	130	"module": "montage/ui/toggle-button.reel",
104	"name": "Button",	131	"name": "ToggleButton",
105	"properties": {	132	"properties": {
106	"element": {"#": "btnUnderline"},	133	"element": {"#": "btnUnderline"},
107	"_isToggleButton": true	134	"pressedClass": "active",
108	}	135	"preventFocus": true,
		136	"identifier": "btnUnderline",
		137	"label": "U"
		138	},
		139	"listeners": [
		140	{
		141	"type": "action",