Mercurial > libervia-desktop-kivy
changeset 45:b0595a33465d
chat: design improvments:
- all message are now on the same side, no more left/right which can be difficult to read on big screen
- use of GridLayout for MessageWidget and MessagesWidget, as the minimum_height attribute simplify size handling. This attribute will be present in BoxLayout too in Kivy 1.9.2, so we may switch back in the future
- info messages are displayed in yellow with a black background
- nick and date are now displayed in the same label
- avatar, nick and date are on the same line just above the message bubble
- padding/spacing adjustments
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Sun, 04 Sep 2016 19:38:21 +0200 |
| parents | 7819e9efa250 |
| children | d6a63942d5ad |
| files | src/cagou/plugins/plugin_wid_chat.kv src/cagou/plugins/plugin_wid_chat.py |
| diffstat | 2 files changed, 50 insertions(+), 60 deletions(-) [+] |
line wrap: on
line diff
--- a/src/cagou/plugins/plugin_wid_chat.kv Mon Aug 29 01:23:49 2016 +0200 +++ b/src/cagou/plugins/plugin_wid_chat.kv Sun Sep 04 19:38:21 2016 +0200 @@ -20,54 +20,59 @@ size: dp(30), dp(30) <MessagesWidget>: - spacing: self._spacing - padding: self._padding - -<MessageInputWidget>: - size_hint: 1,None - height: 40 - hint_text: "Enter your message here" + cols: 1 + padding: dp(10) + spacing: dp(5) + size_hint: 1, None + height: self.minimum_height <MessageWidget>: + cols: 1 mess_label: mess_label - mess_box: mess_box + padding: dp(10) + spacing: dp(5) size_hint: 1, None - height: time_label.height + mess_label.height - on_height: if root.parent: root.parent.sizeAdjust() - on_width: self.sizeAdjust() - FloatLayout: + height: self.minimum_height + on_width: self.widthAdjust() + BoxLayout: + id: header_box + size_hint: 1, None + height: avatar.height + MessAvatar: + id: avatar + source: root.mess_data.avatar Label: id: time_label text_size: None, None - size_hint: 1, None - height: self.texture_size[1] - pos_hint: {'x':0, 'y':0} - text: root.mess_data.time_text - halign: "center" - Label: - size_hint: 1, 1 - text_size: self.size - pos_hint: {'x':0, 'y':0} - text: root.mess_data.nick - halign: "left" if root.mess_data.own_mess else "right" + size_hint: None, None + size: self.texture_size + padding: dp(5), 0 + text: u"{}, {}".format(root.mess_data.nick, root.mess_data.time_text) BoxLayout: - id: mess_box - size_hint: None,None - size: sum([c.width for c in self.children]), mess_label.height - pos_hint: {'x': 0} if root.mess_data.own_mess else {'right': 1} + # BoxLayout is needed here, else GridLayout won't let the Label choose its width + size_hint: 1, None + height: mess_label.height + on_size: root.widthAdjust() Label: canvas.before: Color: rgba: 1, 1, 1, 1 BorderImage: - source: app.expand("{media}/misc/borders/{}.jpg", "blue" if root.mess_data.own_mess else "gray") + source: app.expand("{media}/misc/black.png") if root.mess_data.type == "info" else app.expand("{media}/misc/borders/{}.jpg", "blue" if root.mess_data.own_mess else "gray") pos: self.pos size: self.size id: mess_label - color: 0, 0, 0, 1 - padding: 5, 5 + color: (0.74,0.74,0.24,1) if root.mess_data.type == "info" else (0, 0, 0, 1) + padding: root.mess_padding text_size: None, None size_hint: None, None size: self.texture_size + bold: True if root.mess_data.type == "info" else False text: root.message or u' ' - on_texture_size: root.sizeAdjust() + # on_texture_size: root.widthAdjust() + + +<MessageInputWidget>: + size_hint: 1, None + height: dp(40) + hint_text: "Enter your message here"
--- a/src/cagou/plugins/plugin_wid_chat.py Mon Aug 29 01:23:49 2016 +0200 +++ b/src/cagou/plugins/plugin_wid_chat.py Sun Sep 04 19:38:21 2016 +0200 @@ -22,9 +22,10 @@ log = logging.getLogger(__name__) from sat.core.i18n import _ from cagou.core.constants import Const as C -from kivy.uix.boxlayout import BoxLayout +from kivy.uix.gridlayout import GridLayout from kivy.uix.scrollview import ScrollView from kivy.uix.textinput import TextInput +from kivy.metrics import dp from kivy import properties from sat_frontends.quick_frontend import quick_widgets from sat_frontends.quick_frontend import quick_chat @@ -47,18 +48,10 @@ pass -class MessageWidget(BoxLayout): +class MessageWidget(GridLayout): mess_data = properties.ObjectProperty() mess_label = properties.ObjectProperty() - mess_box = properties.ObjectProperty() - - def __init__(self, **kwargs): - BoxLayout.__init__(self, orientation='vertical', **kwargs) - avatar = MessAvatar(source=self.mess_data.avatar) - if self.mess_data.own_mess: - self.mess_box.add_widget(avatar, len(self.mess_box.children)) - else: - self.mess_box.add_widget(avatar) + mess_padding = (dp(5), dp(5)) @property def chat(self): @@ -70,18 +63,19 @@ """Return currently displayed message""" return self.mess_data.main_message - def sizeAdjust(self): + def widthAdjust(self): """this widget grows up with its children""" + parent = self.mess_label.parent + padding_x = self.mess_padding[0] text_width, text_height = self.mess_label.texture_size - other_width = sum([c.width for c in self.mess_box.children if c != self.mess_label]) - if text_width + other_width > self.parent.width: - self.mess_label.text_size = (self.parent.width - other_width - 10, None) + if text_width > parent.width: + self.mess_label.text_size = (parent.width - padding_x, None) self.text_max = text_width - elif self.mess_label.text_size[0] is not None and text_width + other_width < self.parent.width - 10: - if text_width > self.text_max: + elif self.mess_label.text_size[0] is not None and text_width < parent.width - padding_x: + if text_width < self.text_max: self.mess_label.text_size = (None, None) else: - self.mess_label.text_size = (self.parent.width - other_width - 10, None) + self.mess_label.text_size = (parent.width - padding_x, None) class MessageInputWidget(TextInput): @@ -94,17 +88,8 @@ super(MessageInputWidget, self)._key_down(key, repeat) -class MessagesWidget(BoxLayout): - _spacing = properties.NumericProperty(10) - _padding = properties.NumericProperty(5) - - def __init__(self, **kwargs): - kwargs['orientation'] = 'vertical' - kwargs['size_hint'] = (1, None) - super(MessagesWidget, self).__init__(**kwargs) - - def sizeAdjust(self): - self.height = sum([(c.height+self._padding*2) for c in self.children]) + self._spacing +class MessagesWidget(GridLayout): + pass class Chat(quick_chat.QuickChat, cagou_widget.CagouWidget):