Mercurial > libervia-web

changeset 442:17259c2ff96f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 63017904c4d4
children eca26481176f
files browser_side/panels.py browser_side/register.py libervia.py public/libervia.css
diffstat 4 files changed, 67 insertions(+), 23 deletions(-) [+]
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):
--- a/browser_side/register.py	Tue May 13 17:09:41 2014 +0200
+++ b/browser_side/register.py	Wed May 14 12:24:38 2014 +0200
@@ -134,7 +134,7 @@
         self.right_side.add(login_tab, 'Login')
         self.right_side.add(register_tab, 'Register')
         self.right_side.addTabListener(self)
-        self.right_side.selectTab(0)
+        self.right_side.selectTab(1)
         login_tab.setWidth(None)
         register_tab.setWidth(None)
 
--- a/libervia.py	Tue May 13 17:09:41 2014 +0200
+++ b/libervia.py	Wed May 14 12:24:38 2014 +0200
@@ -267,7 +267,7 @@
 
         if jid_str not in self.avatars_cache:
             self.bridge.call('getEntityData', (dataReceived, avatarError), jid_str, ['avatar'])
-            self.avatars_cache[jid_str] = "/media/misc/empty_avatar"
+            self.avatars_cache[jid_str] = "/media/icons/tango/emotes/64/face-plain.png"
         return self.avatars_cache[jid_str]
 
     def registerWidget(self, wid):
--- a/public/libervia.css	Tue May 13 17:09:41 2014 +0200
+++ b/public/libervia.css	Wed May 14 12:24:38 2014 +0200
@@ -616,21 +616,30 @@
 }
 
 .registerPanel_tabs .gwt-Label {
-    margin-top: 20px;
-    margin-left: 15px;
+    margin: 15px 7.5px 0px 7.5px;
     cursor: pointer;
+    font-size: larger;
 }
 
 .registerPanel_tabs .gwt-TabBarItem div {
     color: #444;
+    padding: 5px 7.5px;
+    border-radius: 5px 5px 0px 5px;
+    box-shadow: inset 0px 0px 2px 1px #9F2828;
 }
 
 .registerPanel_tabs .gwt-TabBarItem div:hover {
     color: #fff;
+    box-shadow: inset 0px 0px 2px 2px #9F2828;
 }
 
 .registerPanel_tabs .gwt-TabBarItem-selected div {
     color: #fff;
+    box-shadow: inset 0px 0px 2px 2px #9F2828;
+}
+
+.registerPanel_tabs .gwt-TabBarRest {
+    border-bottom: 1px #3F1818 dashed;
 }
 
 .registerPanel_right_side {
@@ -808,6 +817,7 @@
 
 .microblogNewButton {
     width: 100%;
+    height: 35px;
 }
 
 .subPanel {
@@ -823,7 +833,6 @@
 
 .mb_entry_header
 {
-    background: #AFAFAF;
     cursor: pointer;
 }
 
@@ -895,7 +904,20 @@
     float: right;
     margin: 5px;
     cursor: pointer;
-    font-size: larger;
+    font-size: large;
+}
+
+.mb_entry_action_larger {
+    font-size: x-large;
+}
+
+.mb_entry_toggle_syntax {
+    cursor: pointer; 
+    text-align: right;
+    display: block;
+    position: relative;
+    top: -20px:
+    left: -20px;
 }
 
 /* Chat & MUC Room */