diff browser_side/panels.py @ 442:17259c2ff96f

browser_side: changes about the UI (remarks from Franck): - select "Register" by default instead of "Login" - make the "Register" and "Login" button more visible - do not use the "New message" button, directly display an empty entry - "New message" button would be bigger (if we use it again) - remove the background from the microblog entry header - "toggle syntax" button is displayed below the text area and with plain text (no icon) - icons for entry action are displayed in this order: "reply", "edit", "delete" - icon for replying is bigger than the others - used a "smiley" from tango as default avatar
author souliane <souliane@mailoo.org>
date Wed, 14 May 2014 12:24:38 +0200
parents d52f529a6d42
children
line wrap: on
line diff
--- a/browser_side/panels.py	Tue May 13 17:09:41 2014 +0200
+++ b/browser_side/panels.py	Wed May 14 12:24:38 2014 +0200
@@ -62,6 +62,11 @@
 from sat.core.i18n import _
 
 
+# TODO: at some point we should decide which behaviors to keep and remove these two constants
+TOGGLE_EDITION_USE_ICON = False  # set to True to use an icon inside the "toggle syntax" button
+NEW_MESSAGE_USE_BUTTON = False  # set to True to display the "New message" button instead of an empty entry
+
+
 class UniBoxPanel(HorizontalPanel):
     """Panel containing the UniBox"""
 
@@ -412,7 +417,10 @@
         entry_avatar.add(self.avatar)
         self.panel.add(entry_avatar)
 
-        self.entry_dialog = HorizontalPanel()
+        if TOGGLE_EDITION_USE_ICON:
+            self.entry_dialog = HorizontalPanel()
+        else:
+            self.entry_dialog = VerticalPanel()
         self.entry_dialog.setStyleName('mb_entry_dialog')
         self.panel.add(self.entry_dialog)
 
@@ -457,13 +465,14 @@
             self.entry_actions.add(label)
             return label
 
+        if self.comments:
+            self.comment_label = addIcon(u"↶", "Comment this message")
+            self.comment_label.setStyleName('mb_entry_action_larger')
         is_publisher = self.author == self._blog_panel.host.whoami.bare
+        if is_publisher:
+            self.update_label = addIcon(u"✍", "Edit this message")
         if is_publisher or str(self.node).endswith(self._blog_panel.host.whoami.bare):
             self.delete_label = addIcon(u"✗", "Delete this message")
-        if is_publisher:
-            self.update_label = addIcon(u"✍", "Edit this message")
-        if self.comments:
-            self.comment_label = addIcon(u"↶", "Comment this message")
 
     def updateAvatar(self, new_avatar):
         """Change the avatar of the entry
@@ -607,16 +616,26 @@
             pass
         entry.bubble.edit(edit)
         if edit:
-            entry.entry_dialog.setWidth('80%')
             if isinstance(entry.bubble, richtext.RichTextEditor):
                 image = '<a class="richTextIcon">A</a>'
+                html = '<a style="color: blue;">raw text</a>'
                 title = _('Switch to raw text edition')
             else:
                 image = '<img src="media/icons/tango/actions/32/format-text-italic.png" class="richTextIcon"/>'
+                html = '<a style="color: blue;">rich text</a>'
                 title = _('Switch to rich text edition')
-            entry.toggle_syntax_button = Button(image, entry.toggleContentSyntax)
-            entry.toggle_syntax_button.setTitle(title)
-            entry.entry_dialog.add(entry.toggle_syntax_button)
+            if TOGGLE_EDITION_USE_ICON:
+                entry.entry_dialog.setWidth('80%')
+                entry.toggle_syntax_button = Button(image, entry.toggleContentSyntax)
+                entry.toggle_syntax_button.setTitle(title)
+                entry.entry_dialog.add(entry.toggle_syntax_button)
+            else:
+                entry.toggle_syntax_button = HTML(html)
+                entry.toggle_syntax_button.addClickListener(entry.toggleContentSyntax)
+                entry.toggle_syntax_button.addStyleName('mb_entry_toggle_syntax')
+                entry.entry_dialog.add(entry.toggle_syntax_button)
+                entry.toggle_syntax_button.setStyleAttribute('top', '-20px')  # XXX: need to force CSS
+                entry.toggle_syntax_button.setStyleAttribute('left', '-20px')
 
     def toggleContentSyntax(self):
         """Toggle the editor between raw and rich text"""
@@ -668,23 +687,26 @@
 
     def refresh(self):
         """Refresh the display of this widget. If the unibox is disabled,
-        display the 'New message' button on top of the panel"""
-        enable_button = self.host.uni_box is None
+        display the 'New message' button or an empty bubble on top of the panel"""
         if hasattr(self, 'new_button'):
-            self.new_button.setVisible(enable_button)
+            self.new_button.setVisible(self.host.uni_box is None)
             return
-        if enable_button:
+        if self.host.uni_box is None:
             def addBox():
-                self.new_button.setVisible(False)
+                if hasattr(self, 'new_button'):
+                    self.new_button.setVisible(False)
                 data = {'id': str(time()),
                         'new': True,
                         'author': self.host.whoami.bare,
                         }
                 entry = self.addEntry(data)
                 entry.edit(True)
-            self.new_button = Button("New message", listener=addBox)
-            self.new_button.setStyleName("microblogNewButton")
-            self.vpanel.insert(self.new_button, 0)
+            if NEW_MESSAGE_USE_BUTTON:
+                self.new_button = Button("New message", listener=addBox)
+                self.new_button.setStyleName("microblogNewButton")
+                self.vpanel.insert(self.new_button, 0)
+            else:
+                addBox()
 
     @classmethod
     def registerClass(cls):