diff options
Diffstat (limited to 'js/components/tools-properties')
3 files changed, 456 insertions, 136 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..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", | ||
142 | "listener": {"@": "owner"} | ||
143 | } | ||
144 | ] | ||
109 | }, | 145 | }, |
110 | "btnStrikethrough": { | 146 | "btnStrikethrough": { |
111 | "module": "js/components/button.reel", | 147 | "module": "montage/ui/toggle-button.reel", |
112 | "name": "Button", | 148 | "name": "ToggleButton", |
113 | "properties": { | 149 | "properties": { |
114 | "element": {"#": "btnStrikethrough"}, | 150 | "element": {"#": "btnStrikethrough"}, |
115 | "_isToggleButton": true | 151 | "pressedClass": "active", |
116 | } | 152 | "preventFocus": true, |