Mercurial > libervia-web
comparison public/libervia.css @ 232:0ed09cc0566f
browser_side: added UIs for rich text editor and addressing to multiple recipients
The rich text format is set according to a user parameter which is for now not created,
so you will get a warning on the backend and no toolbar will be displayed.
For testing purpose:
- you can set _debug to True in RichTextEditor: that will display one toolbar per format.
- you can add this parameter to any plugin (the same will be added later in XEP-0071):
# DEBUG: TO BE REMOVED LATER, THIS BELONGS TO RICH TEXT EDITOR
FORMATS = {"markdown": {}, "bbcode": {}, "dokuwiki": {}, "html": {}}
FORMAT_PARAM_KEY = "Composition and addressing"
FORMAT_PARAM_NAME = "Format for rich text message composition"
# In the parameter definition:
<category name="%(format_category_name)s" label="%(format_category_label)s">
<param name="%(format_param_name)s" label="%(format_param_label)s"
value="%(format_param_default)s" type="list" security="0">
%(format_options)s
</param>
</category>
# Strings for the placeholders:
'format_category_name': FORMAT_PARAM_KEY,
'format_category_label': _(FORMAT_PARAM_KEY),
'format_param_name': FORMAT_PARAM_NAME,
'format_param_label': _(FORMAT_PARAM_NAME),
'format_param_default': FORMATS.keys()[0],
'format_options': ['<option value="%s"/>' % format for format in FORMATS.keys()]
author | souliane <souliane@mailoo.org> |
---|---|
date | Tue, 08 Oct 2013 14:12:38 +0200 |
parents | f3a5a094c8d6 |
children | 9b078380dacf |
comparison
equal
deleted
inserted
replaced
231:fab7aa366576 | 232:0ed09cc0566f |
---|---|
375 } | 375 } |
376 /* Contact List */ | 376 /* Contact List */ |
377 | 377 |
378 div.contactBox { | 378 div.contactBox { |
379 width: 100%; | 379 width: 100%; |
380 /* We want the contact panel to not use all the available height when displayed | |
381 in the unibox panel (grey part), because the dialogs panels (white part) should | |
382 still be visible. The setting max-height: fit-content would be appropriate here | |
383 but it doesn't work with firefox 24.0. TODO: check if the current setting works | |
384 with other browsers... the panel should of course not be displayed on 100px | |
385 but exactly fit the contacts box. | |
386 */ | |
387 max-height: 100px; | |
380 } | 388 } |
381 | 389 |
382 .contactTitle { | 390 .contactTitle { |
383 color: #cf2828; | 391 color: #cf2828; |
384 font-size: 1.7em; | 392 font-size: 1.7em; |
470 .uniBoxPanel { | 478 .uniBoxPanel { |
471 margin: 15px 22px 0 22px; | 479 margin: 15px 22px 0 22px; |
472 } | 480 } |
473 | 481 |
474 .uniBox { | 482 .uniBox { |
483 width: 100%; | |
475 height: 45px; | 484 height: 45px; |
476 padding: 5px; | 485 padding: 5px; |
477 border: 1px solid #bbb; | 486 border: 1px solid #bbb; |
478 color: #444; | 487 color: #444; |
479 background: #fff url('media/libervia/unibox_2.png') top right no-repeat; | 488 background: #fff url('media/libervia/unibox_2.png') top right no-repeat; |
480 box-shadow:inset 0 0 10px #ddd; | 489 box-shadow:inset 0 0 10px #ddd; |
481 -webkit-box-shadow:inset 0 0 10px #ddd; | 490 -webkit-box-shadow:inset 0 0 10px #ddd; |
482 -moz-box-shadow:inset 0 0 10px #ddd; | 491 -moz-box-shadow:inset 0 0 10px #ddd; |
492 } | |
493 | |
494 .uniBoxButton { | |
495 width:30px; | |
496 height:45px; | |
483 } | 497 } |
484 | 498 |
485 .statusPanel { | 499 .statusPanel { |
486 margin: auto; | 500 margin: auto; |
487 text-align: center; | 501 text-align: center; |
1124 } | 1138 } |
1125 | 1139 |
1126 a:hover.url { | 1140 a:hover.url { |
1127 text-decoration: underline | 1141 text-decoration: underline |
1128 } | 1142 } |
1143 | |
1144 /* Rich Text Editor */ | |
1145 | |
1146 .richTextEditor { | |
1147 width: 600px; | |
1148 max-width:600px; | |
1149 min-width: 600px; | |
1150 margin-top: 9px; | |
1151 margin-left:18px; | |
1152 } | |
1153 | |
1154 .richTextToolbar { | |
1155 margin: 15px auto auto 0px; | |
1156 } | |
1157 | |
1158 .richTextFormatLabel { | |
1159 text-align: right; | |
1160 margin: 14px 0px 0px 14px; | |
1161 font-size: 12px; | |
1162 } | |
1163 | |
1164 .richTextArea { | |
1165 width:100%; | |
1166 height:250px; | |
1167 } | |
1168 | |
1169 .richTextToolButton { | |
1170 cursor: pointer; | |
1171 width:26px; | |
1172 height:26px; | |
1173 vertical-align: middle; | |
1174 margin: 2px 1px; | |
1175 border-radius: 5px 5px 5px 5px; | |
1176 -webkit-border-radius: 5px 5px 5px 5px; | |
1177 -moz-border-radius: 5px 5px 5px 5px; | |
1178 box-shadow: 0px 1px 4px #000; | |
1179 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); | |
1180 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); | |
1181 border: none; | |
1182 -webkit-transition: color 0.2s linear; | |
1183 -moz-transition: color 0.2s linear; | |
1184 -o-transition: color 0.2s linear; | |
1185 } | |
1186 | |
1187 .richTextIcon { | |
1188 width:16px; | |
1189 height:16px; | |
1190 vertical-align: middle; | |
1191 } | |
1192 | |
1193 /* Recipients panel */ | |
1194 | |
1195 .recipientButtonCell { | |
1196 width:55px; | |
1197 } | |
1198 | |
1199 .recipientTypeMenu { | |
1200 } | |
1201 | |
1202 .recipientTypeItem { | |
1203 cursor: pointer; | |
1204 border-radius: 5px; | |
1205 width: 50px; | |
1206 } | |
1207 | |
1208 .recipientPanel { | |
1209 } | |
1210 | |
1211 .recipientTextBox { | |
1212 cursor: pointer; | |
1213 width: auto; | |
1214 border-radius: 5px 5px 5px 5px; | |
1215 -webkit-border-radius: 5px 5px 5px 5px; | |
1216 -moz-border-radius: 5px 5px 5px 5px; | |
1217 box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6); | |
1218 -webkit-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6); | |
1219 -moz-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6); | |
1220 padding: 2px 1px; | |
1221 margin: 0px; | |
1222 color: #444; | |
1223 font-size: 1em; | |
1224 } | |
1225 | |
1226 .recipientRemoveButton { | |
1227 margin: 0px 10px 0px 0px; | |
1228 padding: 0px; | |
1229 border: 1px dashed red; | |
1230 border-radius: 5px 5px 5px 5px; | |
1231 } | |
1232 | |
1233 .richTextRemoveIcon { | |
1234 color: red; | |
1235 width:15px; | |
1236 height:15px; | |
1237 vertical-align: baseline; | |
1238 } | |
1239 | |
1240 .dragover-recipientPanel { | |
1241 border-radius: 5px; | |
1242 background: none repeat scroll 0% 0% rgb(135, 179, 255); | |
1243 border: 1px dashed rgb(35,79,255); | |
1244 } | |
1245 |