Commit bfb720ab authored by Ilya Bizyaev's avatar Ilya Bizyaev 📱 Committed by GitHub

New chat page look (#179)

This commit:
* Updates Kirigami and Breeze submodules to make use of layout fixes and new icon
* Adds tool buttons for attachments and sending
* Changes text input appearance to a more traditional for messengers
* Adds "Enter to send, Ctrl-Enter for newline"
* Changes messages layout and corner radius
parent 8b4fc2d7
Subproject commit d7b11aabd28412731c86812510f7c299351879ee
Subproject commit ed7df288eda31fb52287082a129fec9c58f5af52
Subproject commit b0bf6b85ccd60aecb57c2cd5c54a912fc62d4113
Subproject commit 72f49c2026345579fb5444b930d6fa670fb849f7
......@@ -4,7 +4,8 @@
<file alias="bookmark-remove.svg">3rdparty/breeze-icons/icons/actions/22/bookmark-remove.svg</file>
<file alias="document-decrypt.svg">3rdparty/breeze-icons/icons/actions/22/document-decrypt.svg</file>
<file alias="contact-new.svg">3rdparty/breeze-icons/icons/actions/22/contact-new.svg</file>
<file alias="document-send-symbolic">3rdparty/breeze-icons/icons/actions/symbolic/document-send-symbolic.svg</file>
<file alias="document-send.svg">3rdparty/breeze-icons/icons/actions/16/document-send.svg</file>
<file alias="document-send-symbolic.svg">3rdparty/breeze-icons/icons/actions/symbolic/document-send-symbolic.svg</file>
<file alias="folder-sync.svg">3rdparty/breeze-icons/icons/actions/22/folder-sync.svg</file>
<file alias="go-next.svg">3rdparty/breeze-icons/icons/actions/22/go-next.svg</file>
<file alias="go-previous.svg">3rdparty/breeze-icons/icons/actions/22/go-previous.svg</file>
......
......@@ -30,8 +30,10 @@
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 {
......@@ -47,7 +49,7 @@ Kirigami.Page {
bottomPadding: 0
topPadding: 0
Image {
background: Image {
id: bgimage
source: kaidan.getResourcePath("images/chat.png")
anchors.fill: parent
......@@ -56,20 +58,15 @@ Kirigami.Page {
verticalAlignment: Image.AlignTop
}
//
// Chat
//
ColumnLayout {
anchors.fill: parent
//
// Chat
//
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: Kirigami.Units.gridUnit * 0.75
displayMarginBeginning: 40
displayMarginEnd: 40
bottomMargin: 20
verticalLayoutDirection: ListView.BottomToTop
......@@ -79,66 +76,108 @@ Kirigami.Page {
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")
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
samples: 20
spread: 0.3
}
Layout.fillWidth: true
padding: 0
wheelEnabled: true
background: Rectangle {
color: "white"
}
//
// Message Writing
//
Controls.Pane {
id: sendingArea
Layout.fillWidth: true
topPadding: Kirigami.Units.gridUnit * 0.1
bottomPadding: Kirigami.Units.gridUnit * 0.1
wheelEnabled: true
background: Rectangle {
color: "white"
RowLayout {
width: parent.width
Controls.ToolButton {
id: attachButton
Layout.preferredWidth: 60
Layout.preferredHeight: 60
padding: 0
Kirigami.Icon {
source: "document-send-symbolic"
isMask: true
smooth: true
anchors.centerIn: parent
width: 30
height: width
}
}
RowLayout {
width: parent.width
Controls.TextField {
id: messageField
Layout.fillWidth: true
placeholderText: qsTr("Compose message")
wrapMode: Controls.TextArea.Wrap
selectByMouse: true
onAccepted: {
sendButton.onClicked()
Controls.TextArea {
id: messageField
Layout.fillWidth: true
placeholderText: qsTr("Compose message")
wrapMode: Controls.TextArea.Wrap
topPadding: 19
bottomPadding: topPadding
selectByMouse: true
background: Item {}
Keys.onReturnPressed: {
if (event.key === Qt.Key_Return) {
if (event.modifiers & Qt.ControlModifier) {
messageField.append("")
} else {
sendButton.onClicked()
event.accepted = true
}
}
}
}
Controls.Button {
id: sendButton
text: qsTr("Send")
onClicked: {
// don't send empty messages
if (messageField.text == "") {
return;
}
Controls.ToolButton {
id: sendButton
Layout.preferredWidth: 60
Layout.preferredHeight: 60
padding: 0
Kirigami.Icon {
source: "document-send"
enabled: sendButton.enabled
isMask: true
smooth: true
anchors.centerIn: parent
width: 30
height: width
}
onClicked: {
// don't send empty messages
if (!messageField.text.length) {
return
}
// disable the button to prevent sending
// the same message several times
sendButton.enabled = false;
// disable the button to prevent sending
// the same message several times
sendButton.enabled = false
// send the message
kaidan.sendMessage(recipientJid, messageField.text);
// clean up the text field
messageField.text = "";
// send the message
kaidan.sendMessage(recipientJid, messageField.text)
// clean up the text field
messageField.text = ""
// reenable the button
sendButton.enabled = true;
}
// reenable the button
sendButton.enabled = true
}
}
}
......
......@@ -31,8 +31,9 @@
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import org.kde.kirigami 2.0 as Kirigami
import QtQuick.Layouts 1.3
Row {
RowLayout {
id: root
property bool sentByMe: true
property string messageBody: ""
......@@ -40,30 +41,37 @@ Row {
property bool isRead: false
property string recipientAvatarUrl: ""
anchors.right: sentByMe ? parent.right : undefined
spacing: Kirigami.Units.gridUnit * 0.5
layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
Item {
Layout.preferredWidth: 5
}
RoundImage {
id: avatar
visible: !sentByMe
width: Kirigami.Units.gridUnit * 2.2
height: Kirigami.Units.gridUnit * 2.2
source: recipientAvatarUrl
height: width
fillMode: Image.PreserveAspectFit
Layout.preferredWidth: Kirigami.Units.gridUnit * 2.2
Layout.preferredHeight: Kirigami.Units.gridUnit * 2.2
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
mipmap: true
}
Item {
id: bubble
height: label.implicitHeight + messageInfo.height
width: Math.max(label.width, checkmark.visible ? dateLabel.width + checkmark.width + Kirigami.Units.gridUnit * 1.7
: dateLabel.width + checkmark.width + Kirigami.Units.gridUnit * 0.7)
width: Math.max(label.width, dateLabel.width + checkmark.width
+ Kirigami.Units.gridUnit * (checkmark.visible ? 1.7 : 0.7))
Rectangle {
id: box
height: parent.height
width: parent.width
color: sentByMe ? "white" : "#4c9b4a"
radius: 2
radius: 12
border.width: 1
border.color: "#E1DFDF"
}
......@@ -95,20 +103,24 @@ Row {
Controls.Label {
id: dateLabel
height: implicitHeight
text: Qt.formatDateTime(dateTime, "dd MMM, hh:mm")
text: Qt.formatDateTime(dateTime, "dd MMM, hh:mm")
color: sentByMe ? "grey" : "#e0e0e0"
}
}
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");
source: kaidan.getResourcePath("images/message_checkmark.svg")
mipmap: true
}
}
}
}
Item {
Layout.fillWidth: true
}
}
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