3 files changed, 294 insertions, 61 deletions
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..2eb608d3 100644
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -30,4 +30,6 @@
    font-size:11px;
 }
+.optionsTextTool .fontSelection {
+    width:100px;
+}
+\ 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..14123b12 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",
@@ -72,48 +80,90 @@
                "module": "js/components/hottextunit.reel",
                "name": "HotTextUnit",
                "properties": {
-                    "element": {"#": "fontSize"}
+                    "element": {"#": "fontSize"},
-                }
+                    "value": 12,
-            },
+                    "identifier": "fontSize"
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "changing",
+                        "listener": {"@": "owner"}
+                    }
+                ]
-            "fontColor": {
-                "module": "js/components/button.reel",
-                "name": "Button",
-                "properties": {
-                    "element": {"#": "fontColor"}
-                }
            },
+          "fontColor": {
+               "module" : "js/components/ui/color-chip.reel",
+               "name" : "ColorChip",
+               "properties" : {
+                   "element" : {"#": "fontColor"},
+                   "mode": "chip"
+               }
+           },
            "btnBold": {
                "module": "js/components/button.reel",
                "name": "Button",
                "properties": {
                    "element": {"#": "btnBold"},
-                    "_isToggleButton": true
+                    "_isToggleButton": true,
-                }
+                    "identifier": "btnBold"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "btnItalic": {
                "module": "js/components/button.reel",
                "name": "Button",
                "properties": {
                    "element": {"#": "btnItalic"},
-                    "_isToggleButton": true
+                    "_isToggleButton": true,
-                }
+                    "identifier": "btnItalic"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "btnUnderline": {
                "module": "js/components/button.reel",
                "name": "Button",
                "properties": {
                    "element": {"#": "btnUnderline"},
-                    "_isToggleButton": true
+                    "_isToggleButton": true,
-                }
+                    "identifier": "btnUnderline"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "btnStrikethrough": {
                "module": "js/components/button.reel",
                "name": "Button",
                "properties": {
                    "element": {"#": "btnStrikethrough"},
-                    "_isToggleButton": true
+                    "_isToggleButton": true,
-                }
+                    "identifier": "btnStrikethrough"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "txtLink": {
                "module": "js/components/textfield.reel",
@@ -134,66 +184,106 @@
                "module": "js/components/button.reel",
                "name": "Button",
                "properties": {
-                    "element": {"#": "alignLeft"}
+                    "element": {"#": "alignLeft"},
-                }
+                    "_isToggleButton": true,
+                    "identifier": "alignLeft"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "alignCenter": {
                "module": "js/components/button.reel",
                "name": "Button",
                "properties": {
-                    "element": {"#": "alignCenter"}
+                    "element": {"#": "alignCenter"},
-                }
+                    "_isToggleButton": true,
+                    "identifier": "alignCenter"

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..2eb608d3 100644 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -30,4 +30,6 @@
30	font-size:11px;	30	font-size:11px;
31	}	31	}
32		32
33		33	.optionsTextTool .fontSelection {
		34	width:100px;
		35	} \ 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..14123b12 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",
@@ -72,48 +80,90 @@
72	"module": "js/components/hottextunit.reel",	80	"module": "js/components/hottextunit.reel",
73	"name": "HotTextUnit",	81	"name": "HotTextUnit",
74	"properties": {	82	"properties": {
75	"element": {"#": "fontSize"}	83	"element": {"#": "fontSize"},
76	}	84	"value": 12,
77	},	85	"identifier": "fontSize"
		86	},
		87	"listeners": [
		88	{
		89	"type": "change",
		90	"listener": {"@": "owner"}
		91	},
		92	{
		93	"type": "changing",
		94	"listener": {"@": "owner"}
		95	}
		96	]
78		97
79	"fontColor": {
80	"module": "js/components/button.reel",
81	"name": "Button",
82	"properties": {
83	"element": {"#": "fontColor"}
84	}
85	},	98	},
		99
		100	"fontColor": {
		101	"module" : "js/components/ui/color-chip.reel",
		102	"name" : "ColorChip",
		103	"properties" : {
		104	"element" : {"#": "fontColor"},
		105	"mode": "chip"
		106	}
		107	},
86	"btnBold": {	108	"btnBold": {
87	"module": "js/components/button.reel",	109	"module": "js/components/button.reel",
88	"name": "Button",	110	"name": "Button",
89	"properties": {	111	"properties": {
90	"element": {"#": "btnBold"},	112	"element": {"#": "btnBold"},
91	"_isToggleButton": true	113	"_isToggleButton": true,
92	}	114	"identifier": "btnBold"
		115	},
		116	"listeners": [
		117	{
		118	"type": "action",
		119	"listener": {"@": "owner"}
		120	}
		121	]
93	},	122	},
94	"btnItalic": {	123	"btnItalic": {
95	"module": "js/components/button.reel",	124	"module": "js/components/button.reel",
96	"name": "Button",	125	"name": "Button",
97	"properties": {	126	"properties": {
98	"element": {"#": "btnItalic"},	127	"element": {"#": "btnItalic"},
99	"_isToggleButton": true	128	"_isToggleButton": true,
100	}	129	"identifier": "btnItalic"
		130	},
		131	"listeners": [
		132	{
		133	"type": "action",
		134	"listener": {"@": "owner"}
		135	}
		136	]
101	},	137	},
102	"btnUnderline": {	138	"btnUnderline": {
103	"module": "js/components/button.reel",	139	"module": "js/components/button.reel",
104	"name": "Button",	140	"name": "Button",
105	"properties": {	141	"properties": {
106	"element": {"#": "btnUnderline"},	142	"element": {"#": "btnUnderline"},
107	"_isToggleButton": true	143	"_isToggleButton": true,
108	}	144	"identifier": "btnUnderline"
		145	},
		146	"listeners": [
		147	{
		148	"type": "action",
		149	"listener": {"@": "owner"}
		150	}
		151	]
109	},	152	},
110	"btnStrikethrough": {	153	"btnStrikethrough": {
111	"module": "js/components/button.reel",	154	"module": "js/components/button.reel",
112	"name": "Button",	155	"name": "Button",
113	"properties": {	156	"properties": {
114	"element": {"#": "btnStrikethrough"},	157	"element": {"#": "btnStrikethrough"},
115	"_isToggleButton": true	158	"_isToggleButton": true,
116	}	159	"identifier": "btnStrikethrough"
		160	},
		161	"listeners": [
		162	{
		163	"type": "action",
		164	"listener": {"@": "owner"}
		165	}
		166	]
117	},	167	},
118	"txtLink": {	168	"txtLink": {
119	"module": "js/components/textfield.reel",	169	"module": "js/components/textfield.reel",
@@ -134,66 +184,106 @@
134	"module": "js/components/button.reel",	184	"module": "js/components/button.reel",
135	"name": "Button",	185	"name": "Button",
136	"properties": {	186	"properties": {
137	"element": {"#": "alignLeft"}	187	"element": {"#": "alignLeft"},
138	}	188	"_isToggleButton": true,
		189	"identifier": "alignLeft"
		190	},
		191	"listeners": [
		192	{
		193	"type": "action",
		194	"listener": {"@": "owner"}
		195	}
		196	]
139	},	197	},
140	"alignCenter": {	198	"alignCenter": {
141	"module": "js/components/button.reel",	199	"module": "js/components/button.reel",
142	"name": "Button",	200	"name": "Button",
143	"properties": {	201	"properties": {
144	"element": {"#": "alignCenter"}	202	"element": {"#": "alignCenter"},
145	}	203	"_isToggleButton": true,
		204	"identifier": "alignCenter"
		205