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