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