# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1473010701 -7200
# Node ID b0595a33465dce80334d7ca39f6248db35b62778
# Parent  7819e9efa250e066b7e098ab747788d3665eab38
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

diff -r 7819e9efa250 -r b0595a33465d src/cagou/plugins/plugin_wid_chat.kv
--- 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"
diff -r 7819e9efa250 -r b0595a33465d src/cagou/plugins/plugin_wid_chat.py
--- 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):