# HG changeset patch # User souliane # Date 1400063078 -7200 # Node ID 17259c2ff96faa20d7713f64ae20c9f493ab6184 # Parent 63017904c4d43ee42e011e4e85d3d62f36416857 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 diff -r 63017904c4d4 -r 17259c2ff96f browser_side/panels.py --- 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' + html = 'raw text' title = _('Switch to raw text edition') else: image = '' + html = 'rich text' 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): diff -r 63017904c4d4 -r 17259c2ff96f browser_side/register.py --- 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) diff -r 63017904c4d4 -r 17259c2ff96f libervia.py --- 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): diff -r 63017904c4d4 -r 17259c2ff96f public/libervia.css --- 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 */