Commit 20fe0d47 authored by Linus Jahn's avatar Linus Jahn 🍙 Committed by Linus Jahn

Slightly redesign and refactor ChatPage and ChatMessage

This should also fix all issues with word wrapping in chat messages.

Fixes #158.
parent 38ca97d2
......@@ -30,24 +30,17 @@
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.0 as Kirigami
import QtGraphicalEffects 1.0
import "elements"
Kirigami.Page {
id: root
Kirigami.ScrollablePage {
property string chatName
property string recipientJid
title: chatName
leftPadding: 0
rightPadding: 0
bottomPadding: 0
topPadding: 0
keyboardNavigationEnabled: true
background: Image {
id: bgimage
......@@ -58,46 +51,34 @@ Kirigami.Page {
verticalAlignment: Image.AlignTop
}
//
// Chat
//
ColumnLayout {
anchors.fill: parent
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
bottomMargin: 20
verticalLayoutDirection: ListView.BottomToTop
spacing: 12
// connect the database
model: kaidan.messageModel
delegate: ChatMessage {
width: parent.width
sentByMe: model.recipient !== kaidan.jid
messageBody: model.message
dateTime: new Date(timestamp)
isRead: model.isDelivered
recipientAvatarUrl: kaidan.avatarStorage.getHashOfJid(author) !== "" ?
kaidan.avatarStorage.getAvatarUrl(author) :
kaidan.getResourcePath("images/fallback-avatar.svg")
mainItem: ListView {
verticalLayoutDirection: ListView.BottomToTop
spacing: Kirigami.Units.smallSpacing * 2
// connect the database
model: kaidan.messageModel
delegate: ChatMessage {
sentByMe: model.recipient !== kaidan.jid
messageBody: model.message
dateTime: new Date(model.timestamp)
isRead: model.isDelivered
recipientAvatarUrl: {
kaidan.avatarStorage.getHashOfJid(author) !== "" ?
kaidan.avatarStorage.getAvatarUrl(author) :
kaidan.getResourcePath("images/fallback-avatar.svg")
}
Controls.ScrollIndicator.vertical: Controls.ScrollIndicator {}
}
}
//
// Message Writing
//
footer: Controls.Pane {
id: sendingArea
layer.enabled: sendingArea.enabled
layer.effect: DropShadow {
verticalOffset: 1
color: Material.dropShadowColor
color: Kirigami.Theme.disabledTextColor
samples: 20
spread: 0.3
}
......@@ -109,19 +90,19 @@ Kirigami.Page {
}
RowLayout {
width: parent.width
anchors.fill: parent
Controls.ToolButton {
id: attachButton
Layout.preferredWidth: 60
Layout.preferredHeight: 60
Layout.preferredWidth: Kirigami.Units.gridUnit * 3
Layout.preferredHeight: Kirigami.Units.gridUnit * 3
padding: 0
Kirigami.Icon {
source: "document-send-symbolic"
isMask: true
smooth: true
anchors.centerIn: parent
width: 30
width: Kirigami.Units.gridUnit * 2
height: width
}
}
......@@ -131,7 +112,7 @@ Kirigami.Page {
Layout.fillWidth: true
placeholderText: qsTr("Compose message")
wrapMode: Controls.TextArea.Wrap
topPadding: 19
topPadding: Kirigami.Units.gridUnit * 0.8
bottomPadding: topPadding
selectByMouse: true
background: Item {}
......@@ -149,8 +130,8 @@ Kirigami.Page {
Controls.ToolButton {
id: sendButton
Layout.preferredWidth: 60
Layout.preferredHeight: 60
Layout.preferredWidth: Kirigami.Units.gridUnit * 3
Layout.preferredHeight: Kirigami.Units.gridUnit * 3
padding: 0
Kirigami.Icon {
source: "document-send"
......@@ -158,7 +139,7 @@ Kirigami.Page {
isMask: true
smooth: true
anchors.centerIn: parent
width: 30
width: Kirigami.Units.gridUnit * 2
height: width
}
onClicked: {
......
......@@ -29,95 +29,88 @@
*/
import QtQuick 2.6
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0 as Controls
import org.kde.kirigami 2.0 as Kirigami
import QtQuick.Layouts 1.3
RowLayout {
id: root
property bool sentByMe: true
property string messageBody;
property date dateTime;
property string messageBody
property date dateTime
property bool isRead: false
property string recipientAvatarUrl;
property string recipientAvatarUrl
spacing: Kirigami.Units.gridUnit * 0.5
// own messages are on the right, others on the left
layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
Item {
Layout.preferredWidth: 5
}
spacing: Kirigami.Units.largeSpacing
width: parent.width - Kirigami.Units.largeSpacing * 4
anchors.horizontalCenter: parent.horizontalCenter
RoundImage {
id: avatar
visible: !sentByMe
source: recipientAvatarUrl
height: width
fillMode: Image.PreserveAspectFit
Layout.preferredWidth: Kirigami.Units.gridUnit * 2.2
mipmap: true
height: width
Layout.preferredHeight: Kirigami.Units.gridUnit * 2.2
Layout.preferredWidth: Kirigami.Units.gridUnit * 2.2
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
mipmap: true
sourceSize.height: Kirigami.Units.gridUnit * 2.2
sourceSize.width: Kirigami.Units.gridUnit * 2.2
}
Item {
id: bubble
height: label.implicitHeight + messageInfo.height
width: Math.max(label.width, dateLabel.width + checkmark.width
+ Kirigami.Units.gridUnit * (checkmark.visible ? 1.7 : 0.7))
Rectangle {
id: box
Layout.preferredWidth: content.width + Kirigami.Units.gridUnit * 0.9
Layout.preferredHeight: content.height + Kirigami.Units.gridUnit * 0.6
Rectangle {
id: box
height: parent.height
width: parent.width
color: sentByMe ? "white" : "#4c9b4a"
radius: 12
border.width: 1
border.color: "#E1DFDF"
color: sentByMe ? Kirigami.Theme.complementaryTextColor : Kirigami.Theme.highlightColor
radius: Kirigami.Units.smallSpacing * 2
layer.enabled: box.visible
layer.effect: DropShadow {
verticalOffset: Kirigami.Units.gridUnit * 0.08
horizontalOffset: Kirigami.Units.gridUnit * 0.08
color: Kirigami.Theme.disabledTextColor
samples: 10
spread: 0.1
}
}
Column {
id: layout
ColumnLayout {
id: content
spacing: 0
anchors.centerIn: box
Controls.Label {
id: label
width: Math.min(implicitWidth, pageStack.lastItem.width * 0.8)
height: implicitHeight
leftPadding: Kirigami.Units.gridUnit * 0.5
rightPadding: Kirigami.Units.gridUnit * 0.5
topPadding: Kirigami.Units.gridUnit * 0.5
bottomPadding: Kirigami.Units.gridUnit * 0.2
text: messageBody
textFormat: Text.PlainText
wrapMode: Text.Wrap
font.pixelSize: 16
color: sentByMe ? "black" : "white"
}
Controls.Label {
text: messageBody
textFormat: Text.PlainText
wrapMode: Text.Wrap
color: sentByMe ? Kirigami.Theme.buttonTextColor : Kirigami.Theme.complementaryTextColor
Row {
id: messageInfo
leftPadding: Kirigami.Units.gridUnit * 0.5
rightPadding: Kirigami.Units.gridUnit * 0.5
bottomPadding: Kirigami.Units.gridUnit * 0.5
spacing: Kirigami.Units.gridUnit * 0.5
Layout.maximumWidth: root.width - Kirigami.Units.gridUnit * 6
}
Controls.Label {
id: dateLabel
visible: date
height: implicitHeight
text: Qt.formatDateTime(dateTime, "dd MMM, hh:mm")
color: sentByMe ? "grey" : "#e0e0e0"
}
RowLayout {
Controls.Label {
id: dateLabel
text: Qt.formatDateTime(dateTime, "dd. MMM yyyy, hh:mm")
color: Kirigami.Theme.disabledTextColor
font.pixelSize: Kirigami.Units.gridUnit * 0.8
}
Image {
id: checkmark
visible: (sentByMe && isRead)
anchors.verticalCenter: dateLabel.verticalCenter
height: Kirigami.Units.gridUnit * 0.6
width: Kirigami.Units.gridUnit * 0.6
source: kaidan.getResourcePath("images/message_checkmark.svg")
mipmap: true
}
Image {
id: checkmark
visible: (sentByMe && isRead)
source: kaidan.getResourcePath("images/message_checkmark.svg")
Layout.preferredHeight: Kirigami.Units.gridUnit * 0.65
Layout.preferredWidth: Kirigami.Units.gridUnit * 0.65
sourceSize.height: Kirigami.Units.gridUnit * 0.65
sourceSize.width: Kirigami.Units.gridUnit * 0.65
}
}
}
......
......@@ -38,8 +38,9 @@ Image {
layer.enabled: isRound
layer.effect: OpacityMask {
maskSource: Item {
width: img.width
height: img.height
width: img.paintedWidth
height: img.paintedHeight
Rectangle {
anchors.centerIn: parent
width: Math.min(img.width, img.height)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment