view 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
line wrap: on
line source

# Cagou: desktop/mobile frontend for Salut à Toi XMPP client
# Copyright (C) 2016 Jérôme Poisson (goffi@goffi.org)

# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.

# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.


<MessAvatar>:
    size_hint: None, None
    size: dp(30), dp(30)

<MessagesWidget>:
    cols: 1
    padding: dp(10)
    spacing: dp(5)
    size_hint: 1, None
    height: self.minimum_height

<MessageWidget>:
    cols: 1
    mess_label: mess_label
    padding: dp(10)
    spacing: dp(5)
    size_hint: 1, None
    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: None, None
            size: self.texture_size
            padding: dp(5), 0
            text: u"{}, {}".format(root.mess_data.nick, root.mess_data.time_text)
    BoxLayout:
        # 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/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.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.widthAdjust()


<MessageInputWidget>:
    size_hint: 1, None
    height: dp(40)
    hint_text: "Enter your message here"