diff --git a/smsapp/qml/ChatMessage.qml b/smsapp/qml/ChatMessage.qml
new file mode 100644
index 00000000..7c61ccf2
--- /dev/null
+++ b/smsapp/qml/ChatMessage.qml
@@ -0,0 +1,111 @@
+/*
+ * Kaidan - A user-friendly XMPP client for every device!
+ *
+ * Copyright (C) 2016-2018 Kaidan developers and contributors
+ * (see the LICENSE file for a full list of copyright authors)
+ *
+ * Kaidan is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * In addition, as a special exception, the author of Kaidan gives
+ * permission to link the code of its release with the OpenSSL
+ * project's "OpenSSL" library (or with modified versions of it that
+ * use the same license as the "OpenSSL" library), and distribute the
+ * linked executables. You must obey the GNU General Public License in
+ * all respects for all of the code used other than "OpenSSL". If you
+ * modify this file, you may extend this exception to your version of
+ * the file, but you are not obligated to do so. If you do not wish to
+ * do so, delete this exception statement from your version.
+ *
+ * Kaidan 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kaidan. If not, see .
+ */
+
+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
+
+RowLayout {
+ id: root
+
+ property bool sentByMe: true
+ property string messageBody
+ property date dateTime
+ property bool isRead: false
+ property string recipientAvatarUrl
+
+ // own messages are on the right, others on the left
+ layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
+ spacing: Kirigami.Units.largeSpacing
+ width: parent.width - Kirigami.Units.largeSpacing * 4
+ anchors.horizontalCenter: parent.horizontalCenter
+
+ RoundImage {
+ id: avatar
+ visible: !sentByMe
+ source: recipientAvatarUrl
+ fillMode: Image.PreserveAspectFit
+ mipmap: true
+ height: width
+ Layout.preferredHeight: Kirigami.Units.gridUnit * 2.2
+ Layout.preferredWidth: Kirigami.Units.gridUnit * 2.2
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+ sourceSize.height: Kirigami.Units.gridUnit * 2.2
+ sourceSize.width: Kirigami.Units.gridUnit * 2.2
+ }
+
+ Rectangle {
+ id: box
+ Layout.preferredWidth: content.width + Kirigami.Units.gridUnit * 0.9
+ Layout.preferredHeight: content.height + Kirigami.Units.gridUnit * 0.6
+
+ 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
+ }
+ }
+
+ ColumnLayout {
+ id: content
+ spacing: 0
+ anchors.centerIn: box
+
+ Controls.Label {
+ text: messageBody
+ textFormat: Text.PlainText
+ wrapMode: Text.Wrap
+ color: sentByMe ? Kirigami.Theme.buttonTextColor : Kirigami.Theme.complementaryTextColor
+
+ Layout.maximumWidth: root.width - Kirigami.Units.gridUnit * 6
+ }
+
+ 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
+ }
+ }
+ }
+
+ Item {
+ Layout.fillWidth: true
+ }
+}
diff --git a/smsapp/qml/ConversationDisplay.qml b/smsapp/qml/ConversationDisplay.qml
index 2cfa8c36..0c524828 100644
--- a/smsapp/qml/ConversationDisplay.qml
+++ b/smsapp/qml/ConversationDisplay.qml
@@ -1,74 +1,76 @@
/*
* This file is part of KDE Telepathy Chat
*
* Copyright (C) 2015 Aleix Pol Gonzalez
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* This library 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
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
import QtQuick 2.1
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import org.kde.people 1.0
-import org.kde.kirigami 2.2 as Kirigami
+import org.kde.kirigami 2.4 as Kirigami
import org.kde.kdeconnect.sms 1.0
Kirigami.ScrollablePage
{
id: page
property alias personUri: person.personUri
readonly property QtObject person: PersonData {
id: person
}
property QtObject device
property string conversationId
property string phoneNumber
title: person && person.name ? i18n("%1: %2", person.name, phoneNumber) : phoneNumber
ListView {
+
model: ConversationModel {
id: model
deviceId: device.id()
threadId: page.conversationId
}
- delegate: Kirigami.BasicListItem {
- readonly property real margin: 100
- x: fromMe ? Kirigami.Units.gridUnit : margin
- width: parent.width - margin - Kirigami.Units.gridUnit
- contentItem: Label { text: model.display }
+ spacing: Kirigami.Units.largeSpacing
+
+ delegate: ChatMessage {
+ messageBody: model.display
+ sentByMe: model.fromMe
+ dateTime: new Date(model.date)
}
}
footer: RowLayout {
enabled: page.device
TextField {
id: message
Layout.fillWidth: true
placeholderText: i18n("Say hi...")
onAccepted: {
console.log("sending sms", page.phoneNumber)
model.sendReplyToConversation(message.text)
text = ""
}
}
Button {
text: "Send"
onClicked: {
message.accepted()
}
}
}
}
diff --git a/smsapp/qml/RoundImage.qml b/smsapp/qml/RoundImage.qml
new file mode 100644
index 00000000..d3e1c369
--- /dev/null
+++ b/smsapp/qml/RoundImage.qml
@@ -0,0 +1,52 @@
+/*
+ * Kaidan - A user-friendly XMPP client for every device!
+ *
+ * Copyright (C) 2017-2018 Kaidan developers and contributors
+ * (see the LICENSE file for a full list of copyright authors)
+ *
+ * Kaidan is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * In addition, as a special exception, the author of Kaidan gives
+ * permission to link the code of its release with the OpenSSL
+ * project's "OpenSSL" library (or with modified versions of it that
+ * use the same license as the "OpenSSL" library), and distribute the
+ * linked executables. You must obey the GNU General Public License in
+ * all respects for all of the code used other than "OpenSSL". If you
+ * modify this file, you may extend this exception to your version of
+ * the file, but you are not obligated to do so. If you do not wish to
+ * do so, delete this exception statement from your version.
+ *
+ * Kaidan 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kaidan. If not, see .
+ */
+
+import QtQuick 2.6
+import QtGraphicalEffects 1.0
+
+Image {
+ id: img
+ property bool isRound: true
+
+ layer.enabled: isRound
+ layer.effect: OpacityMask {
+ maskSource: Item {
+ width: img.paintedWidth
+ height: img.paintedHeight
+
+ Rectangle {
+ anchors.centerIn: parent
+ width: Math.min(img.width, img.height)
+ height: width
+ radius: Math.min(width, height)
+ }
+ }
+ }
+}
diff --git a/smsapp/resources.qrc b/smsapp/resources.qrc
index dd63e4fe..6e0aa3a3 100644
--- a/smsapp/resources.qrc
+++ b/smsapp/resources.qrc
@@ -1,7 +1,9 @@
qml/main.qml
qml/ConversationList.qml
qml/ConversationDisplay.qml
+ qml/ChatMessage.qml
+ qml/RoundImage.qml