Mercurial > libervia-web

diff public/libervia.css @ 232:0ed09cc0566f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
line wrap: on
line diff
--- a/public/libervia.css	Tue Oct 08 13:38:42 2013 +0200
+++ b/public/libervia.css	Tue Oct 08 14:12:38 2013 +0200
@@ -377,6 +377,14 @@
 
 div.contactBox {
     width: 100%;
+	/* We want the contact panel to not use all the available height when displayed
+	   in the unibox panel (grey part), because the dialogs panels (white part) should
+	   still be visible. The setting max-height: fit-content would be appropriate here
+	   but it doesn't work with firefox 24.0. TODO: check if the current setting works
+	   with other browsers... the panel should of course not be displayed on 100px
+	   but exactly fit the contacts box.
+     */
+	max-height: 100px;
 }
 
 .contactTitle {
@@ -472,6 +480,7 @@
 }
 
 .uniBox {
+    width: 100%;
     height: 45px;
     padding: 5px;
     border: 1px solid #bbb;
@@ -482,6 +491,11 @@
     -moz-box-shadow:inset 0 0 10px #ddd;
 }
 
+.uniBoxButton {
+    width:30px;
+    height:45px;
+}
+
 .statusPanel {
     margin: auto;
     text-align: center;
@@ -1126,3 +1140,106 @@
 a:hover.url {
     text-decoration: underline
 }
+
+/* Rich Text Editor */
+
+.richTextEditor {
+	width: 600px;
+	max-width:600px;
+	min-width: 600px;
+	margin-top: 9px;
+	margin-left:18px;
+}
+
+.richTextToolbar {
+	margin: 15px auto auto 0px;
+}
+
+.richTextFormatLabel {
+	text-align: right;
+	margin: 14px 0px 0px 14px;
+	font-size: 12px;
+}
+
+.richTextArea {
+    width:100%;
+    height:250px;
+}
+
+.richTextToolButton {
+	cursor: pointer;
+    width:26px;
+    height:26px;
+    vertical-align: middle;
+    margin: 2px 1px;
+    border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    box-shadow: 0px 1px 4px #000;
+    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
+	border: none;
+	-webkit-transition: color 0.2s linear; 
+    -moz-transition: color 0.2s linear; 
+    -o-transition: color 0.2s linear;
+}
+
+.richTextIcon {
+    width:16px;
+    height:16px;
+    vertical-align: middle;
+}
+
+/* Recipients panel */
+
+.recipientButtonCell {
+	width:55px;
+}
+
+.recipientTypeMenu {
+}
+
+.recipientTypeItem {
+	cursor: pointer;
+    border-radius: 5px;
+    width: 50px;
+}
+
+.recipientPanel {
+}
+
+.recipientTextBox {
+	cursor: pointer;
+    width: auto;
+    border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6);
+    -webkit-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6);
+    -moz-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6);
+    padding: 2px 1px;
+    margin: 0px;
+    color: #444;
+    font-size: 1em;
+}
+
+.recipientRemoveButton {
+	margin: 0px 10px 0px 0px;
+	padding: 0px;
+	border: 1px dashed red;
+    border-radius: 5px 5px 5px 5px;
+}
+
+.richTextRemoveIcon {
+	color: red;
+    width:15px;
+    height:15px;
+	vertical-align: baseline;
+}
+
+.dragover-recipientPanel {
+	border-radius: 5px;
+    background: none repeat scroll 0% 0% rgb(135, 179, 255);
+    border: 1px dashed rgb(35,79,255);
+}
+