Refine SMS conversation view
Summary: Use components from Kaidan messenger Reviewers: #kde_connect, sredman Reviewed By: #kde_connect, sredman Subscribers: sredman, kdeconnect Tags: #kde_connect Differential Revision: https://phabricator.kde.org/D14635
This commit is contained in:
Nicolas Fella
parent
a1b5c4e2d9
commit
21b52d7dcf
4 changed files with 173 additions and 6 deletions
111
smsapp/qml/ChatMessage.qml
Normal file
111
smsapp/qml/ChatMessage.qml
Normal file
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ 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
|
||||
|
|
@ -39,17 +39,19 @@ Kirigami.ScrollablePage
|
|||
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 {
|
||||
|
|
|
|||
52
smsapp/qml/RoundImage.qml
Normal file
52
smsapp/qml/RoundImage.qml
Normal file
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,5 +3,7 @@
|
|||
<file>qml/main.qml</file>
|
||||
<file>qml/ConversationList.qml</file>
|
||||
<file>qml/ConversationDisplay.qml</file>
|
||||
<file>qml/ChatMessage.qml</file>
|
||||
<file>qml/RoundImage.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
Loading…
Reference in a new issue