Mercurial > libervia-desktop-kivy
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" |