changeset 324:8131d0ccf21b

browser_side: prepare user input for microblog titles
author souliane <souliane@mailoo.org>
date Sat, 04 Jan 2014 02:38:23 +0100
parents 0b7934e75e76
children d07b54fdc60a
files browser_side/richtext.py public/libervia.css
diffstat 2 files changed, 66 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/browser_side/richtext.py	Sat Jan 04 00:17:46 2014 +0100
+++ b/browser_side/richtext.py	Sat Jan 04 02:38:23 2014 +0100
@@ -23,14 +23,16 @@
 from pyjamas.ui.Button import Button
 from pyjamas.ui.DialogBox import DialogBox
 from pyjamas.ui.Label import Label
+from pyjamas.ui.HTML import HTML
 from pyjamas.ui.FlexTable import FlexTable
 from pyjamas.ui.HorizontalPanel import HorizontalPanel
 
 from dialog import ConfirmDialog, InfoDialog
+from base_panels import ToggleStackPanel
 from list_manager import ListManager
 
 from sat_frontends.tools import composition
-
+from sat.core.i18n import _
 
 # used for onCloseCallback
 CANCEL, SYNC_NOT_SAVE, SAVE = xrange(0, 3)
@@ -53,19 +55,22 @@
         # This must be done before FlexTable.__init__ because it is used by setVisible
         self.host = host
 
+        self.no_title = 'no_title' in options
+        #self.no_title = True  # XXX: remove this line when titles are managed
         self.no_close = 'no_close' in options
         self.update_msg = 'update_msg' in options
         self.no_recipient = 'no_recipient' in options
         self.no_command = 'no_command' in options
         self.no_sync_unibox = self.no_command or 'no_sync_unibox' in options
         self.no_main_style = 'no_style' in options or 'no_main_style' in options
-        self.no_toolbar_style = 'no_style' in options or 'no_toolbar_style' in options
+        self.no_title_style = 'no_style' in options or 'no_title_style' in options
         self.no_textarea_style = 'no_style' in options or 'no_textarea_style' in options
 
-        offset1 = 0 if self.no_recipient else len(composition.RECIPIENT_TYPES)
-        offset2 = len(composition.RICH_FORMATS) if self._debug else 1
-        offset3 = 0 if self.no_command else 1
-        FlexTable.__init__(self, offset1 + offset2 + 1 + offset3, 2)
+        offset1 = 0 if self.no_recipient else (len(composition.RECIPIENT_TYPES) + 1)
+        offset2 = 0 if self.no_title else 1
+        offset3 = len(composition.RICH_FORMATS) if self._debug else 1
+        offset4 = 0 if self.no_command else 1
+        FlexTable.__init__(self, offset1 + offset2 + offset3 + 1 + offset4, 2)
         if not self.no_main_style:
             self.addStyleName('richTextEditor')
 
@@ -73,20 +78,34 @@
         self._on_close_callback = onCloseCallback
         self.original_text = ''
 
+        current_offset = offset1
         if not self.no_recipient:
             # recipient types sub-panels are automatically added by the manager
             self.recipient = RecipientManager(self)
             self.recipient.createWidgets(title_format="%s: ")
+            self.getFlexCellFormatter().setColSpan(current_offset - 1, 0, 2)
+            spacer = HTML('')
+            spacer.setStyleName('recipientSpacer')
+            self.setWidget(current_offset - 1, 0, spacer)
+
+        current_offset += offset2
+        if not self.no_title:
+            self.title_panel = TitlePanel()
+            self.title_panel.addStyleName("richTextTitle")
+            self.getFlexCellFormatter().setColSpan(current_offset - 1, 0, 2)
+            self.setWidget(current_offset - 1, 0, self.title_panel)
 
         # Rich text tool bar is automatically added by setVisible
+        self.offset_toolbar = offset1 + offset2
 
+        current_offset += offset3 + 1
         self.textarea = TextArea()
         if not self.no_textarea_style:
             self.textarea.addStyleName('richTextArea')
+        self.getFlexCellFormatter().setColSpan(current_offset - 1, 0, 2)
+        self.setWidget(current_offset - 1, 0, self.textarea)
 
-        self.getFlexCellFormatter().setColSpan(offset1 + offset2, 0, 2)
-        self.setWidget(offset1 + offset2, 0, self.textarea)
-
+        current_offset += offset4
         if not self.no_command:
             self.command = HorizontalPanel()
             self.command.addStyleName("marginAuto")
@@ -95,8 +114,8 @@
                 self.command.add(Button("Back to quick box", listener=self.closeAndSave))
             self.command.add(Button("Update" if self.update_msg else "Send message",
                                     listener=self.__close if (self.update_msg or self.no_recipient) else self.sendMessage))
-            self.getFlexCellFormatter().setColSpan(offset1 + offset2 + 1, 0, 2)
-            self.setWidget(offset1 + offset2 + 1, 0, self.command)
+            self.getFlexCellFormatter().setColSpan(current_offset - 1, 0, 2)
+            self.setWidget(current_offset - 1, 0, self.command)
 
     @classmethod
     def getOrCreate(cls, host, parent=None, onCloseCallback=None):
@@ -160,19 +179,17 @@
         if hasattr(self, "_format") and self._format == _format:
             return
         self._format = _format
-        offset1 = 0 if self.no_recipient else len(composition.RECIPIENT_TYPES)
         count = 0
         for _format in composition.RICH_FORMATS.keys() if self._debug else [self._format]:
             toolbar = HorizontalPanel()
-            if not self.no_toolbar_style:
-                toolbar.addStyleName('richTextToolbar')
+            toolbar.addStyleName('richTextToolbar')
             for key in composition.RICH_FORMATS[_format].keys():
                 self.addToolbarButton(toolbar, _format, key)
             label = Label("Format: %s" % _format)
             label.addStyleName("richTextFormatLabel")
             toolbar.add(label)
-            self.getFlexCellFormatter().setColSpan(offset1 + count, 0, 2)
-            self.setWidget(offset1 + count, 0, toolbar)
+            self.getFlexCellFormatter().setColSpan(self.offset_toolbar + count, 0, 2)
+            self.setWidget(self.offset_toolbar + count, 0, toolbar)
             count += 1
 
     @property
@@ -304,15 +321,31 @@
 class RecipientManager(ListManager):
     """A manager for sub-panels to set the recipients for each recipient type."""
 
-    def __init__(self, parent):
+    def __init__(self, parent, y_offset=0):
         # TODO: be sure we also display empty groups and disconnected contacts + their groups
         # store the full list of potential recipients (groups and contacts)
         list_ = []
         list_.append("@@")
         list_.extend("@%s" % group for group in parent.host.contact_panel.getGroups())
         list_.extend(contact for contact in parent.host.contact_panel.getContacts())
-        ListManager.__init__(self, parent, composition.RECIPIENT_TYPES, list_)
+        ListManager.__init__(self, parent, composition.RECIPIENT_TYPES, list_, {'y': y_offset})
 
         self.registerPopupMenuPanel(entries=composition.RECIPIENT_TYPES,
                                     hide=lambda sender, key: self.__children[key]["panel"].isVisible(),
                                     callback=self.setContactPanelVisible)
+
+
+class TitlePanel(ToggleStackPanel):
+    """A toggle panel to set the message title"""
+    def __init__(self):
+        ToggleStackPanel.__init__(self, Width="100%")
+        self.text_area = TextArea()
+        self.add(self.text_area, _("Title"))
+        self.addStackChangeListener(self)
+
+    def onStackChanged(self, sender, index, visible=None):
+        if visible is None:
+            visible = sender.getWidget(index).getVisible()
+        text = self.text_area.getText()
+        suffix = "" if (visible or not text) else (": %s" % text)
+        sender.setStackText(index, _("Title") + suffix)
--- a/public/libervia.css	Sat Jan 04 00:17:46 2014 +0100
+++ b/public/libervia.css	Sat Jan 04 02:38:23 2014 +0100
@@ -1268,7 +1268,6 @@
 }
 
 .richTextToolbar {
-	margin: 15px auto auto 0px;
 }
 
 .richTextFormatLabel {
@@ -1300,6 +1299,17 @@
     -o-transition: color 0.2s linear;
 }
 
+.richTextTitle {
+    margin-bottom: 5px;
+}
+
+.richTextTitle textarea {
+    height: 23px;
+    width: 99%;
+    margin: auto;
+    display: block;
+}
+
 .richTextIcon {
     width:16px;
     height:16px;
@@ -1366,6 +1376,10 @@
     border: 1px dashed rgb(35,79,255);
 }
 
+.recipientSpacer {
+    height: 15px;
+}
+
 /* Popup (context) menu */
 
 .popupMenuItem {