comparison src/cagou/plugins/plugin_wid_chat.kv @ 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 abb81efef3bb
comparison
equal deleted inserted replaced
44:7819e9efa250 45:b0595a33465d
18 <MessAvatar>: 18 <MessAvatar>:
19 size_hint: None, None 19 size_hint: None, None
20 size: dp(30), dp(30) 20 size: dp(30), dp(30)
21 21
22 <MessagesWidget>: 22 <MessagesWidget>:
23 spacing: self._spacing 23 cols: 1
24 padding: self._padding 24 padding: dp(10)
25 25 spacing: dp(5)
26 <MessageInputWidget>: 26 size_hint: 1, None
27 size_hint: 1,None 27 height: self.minimum_height
28 height: 40
29 hint_text: "Enter your message here"
30 28
31 <MessageWidget>: 29 <MessageWidget>:
30 cols: 1
32 mess_label: mess_label 31 mess_label: mess_label
33 mess_box: mess_box 32 padding: dp(10)
33 spacing: dp(5)
34 size_hint: 1, None 34 size_hint: 1, None
35 height: time_label.height + mess_label.height 35 height: self.minimum_height
36 on_height: if root.parent: root.parent.sizeAdjust() 36 on_width: self.widthAdjust()
37 on_width: self.sizeAdjust() 37 BoxLayout:
38 FloatLayout: 38 id: header_box
39 size_hint: 1, None
40 height: avatar.height
41 MessAvatar:
42 id: avatar
43 source: root.mess_data.avatar
39 Label: 44 Label:
40 id: time_label 45 id: time_label
41 text_size: None, None 46 text_size: None, None
42 size_hint: 1, None 47 size_hint: None, None
43 height: self.texture_size[1] 48 size: self.texture_size
44 pos_hint: {'x':0, 'y':0} 49 padding: dp(5), 0
45 text: root.mess_data.time_text 50 text: u"{}, {}".format(root.mess_data.nick, root.mess_data.time_text)
46 halign: "center"
47 Label:
48 size_hint: 1, 1
49 text_size: self.size
50 pos_hint: {'x':0, 'y':0}
51 text: root.mess_data.nick
52 halign: "left" if root.mess_data.own_mess else "right"
53 BoxLayout: 51 BoxLayout:
54 id: mess_box 52 # BoxLayout is needed here, else GridLayout won't let the Label choose its width
55 size_hint: None,None 53 size_hint: 1, None
56 size: sum([c.width for c in self.children]), mess_label.height 54 height: mess_label.height
57 pos_hint: {'x': 0} if root.mess_data.own_mess else {'right': 1} 55 on_size: root.widthAdjust()
58 Label: 56 Label:
59 canvas.before: 57 canvas.before:
60 Color: 58 Color:
61 rgba: 1, 1, 1, 1 59 rgba: 1, 1, 1, 1
62 BorderImage: 60 BorderImage:
63 source: app.expand("{media}/misc/borders/{}.jpg", "blue" if root.mess_data.own_mess else "gray") 61 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")
64 pos: self.pos 62 pos: self.pos
65 size: self.size 63 size: self.size
66 id: mess_label 64 id: mess_label
67 color: 0, 0, 0, 1 65 color: (0.74,0.74,0.24,1) if root.mess_data.type == "info" else (0, 0, 0, 1)
68 padding: 5, 5 66 padding: root.mess_padding
69 text_size: None, None 67 text_size: None, None
70 size_hint: None, None 68 size_hint: None, None
71 size: self.texture_size 69 size: self.texture_size
70 bold: True if root.mess_data.type == "info" else False
72 text: root.message or u' ' 71 text: root.message or u' '
73 on_texture_size: root.sizeAdjust() 72 # on_texture_size: root.widthAdjust()
73
74
75 <MessageInputWidget>:
76 size_hint: 1, None
77 height: dp(40)
78 hint_text: "Enter your message here"