tristan/kdeconnect-kde
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[smsapp] Rework message items

Browse source 
The current implementation seems to have an issue with an undetected binding loop that causes lockup. During investigation I figured that the code was way to complex and brittle for what we need.

This is a cleaner reimplementation. It also replaces the custom Avatar component with the one from Kirigami.

The looks are subject to tweaking of course
This commit is contained in:
Nicolas Fella 2020-07-01 19:15:45 +00:00
parent d0443e2e6b
commit 166a88072b
6 changed files with 106 additions and 419 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
smsapp/qml/Avatar.qml
View file

@ -1,58 +0,0 @@
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2019 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.0
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.2 as Kirigami
Item {
id: avatar
property string avatarUrl
property string name
RoundImage {
id: imageAvatar
visible: avatarUrl
source: avatarUrl
fillMode: Image.PreserveAspectFit
mipmap: true
height: width
anchors.fill: parent
isRound: true
}
TextAvatar {
id: textAvatar
visible: !avatarUrl
name: avatar.name
anchors.fill: parent
}
}

332
smsapp/qml/ChatMessage.qml
View file

@ -1,250 +1,126 @@
/*
* Kaidan - A user-friendly XMPP client for every device!
/**
* Copyright (C) 2020 Nicolas Fella <nicolas.fella@gmx.de>
*
* Copyright (C) 2016-2019 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
* This program 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 2 of
* the License or (at your option) version 3 or any later version
* accepted by the membership of KDE e.V. (or its successor approved
* by the membership of KDE e.V.), which shall act as a proxy
* defined in Section 14 of version 3 of the license.
*
* 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.
* This program 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.
*
* 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/>.
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import QtQuick 2.6
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.0 as Kirigami
//import im.kaidan.kaidan 1.0
import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import org.kde.kirigami 2.13 as Kirigami
RowLayout {
id: root
Item {
id: root
property string msgId
property string sender
property bool sentByMe: true
property string messageBody
property date dateTime
property bool isRead: false
property int mediaType
property string mediaGetUrl
property string mediaLocation
property bool edited
// property bool isLoading: kaidan.transferCache.hasUpload(msgId)
property string name
// property TransferJob upload: {
// if (mediaType !== Enums.MessageType.MessageText && isLoading) {
// return kaidan.transferCache.jobByMessageId(model.id)
// }
//
// return null
// }
property bool isSpoiler
property string spoilerHint
property bool isShowingSpoiler: false
property string avatarUrl: ""
height: Math.max(avatar.height, messageBubble.height)
signal messageCopyRequested(string message)
property string messageBody
property bool sentByMe
property date dateTime
property string name
// own messages are on the right, others on the left
layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
spacing: 8
width: ListView.view.width
signal messageCopyRequested(string message)
// placeholder
Item {
Layout.preferredWidth: root.layoutDirection === Qt.LeftToRight ? 5 : 10
}
Kirigami.Avatar {
id: avatar
width: Kirigami.Units.gridUnit * 2
height: width
visible: !root.sentByMe
name: root.name
Avatar {
id: avatar
visible: !sentByMe
avatarUrl: root.avatarUrl
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
name: root.name
Layout.preferredHeight: Kirigami.Units.gridUnit * 2.2
Layout.preferredWidth: Kirigami.Units.gridUnit * 2.2
}
// message bubble/box
Item {
Layout.preferredWidth: content.width + 13
Layout.preferredHeight: content.height + 8
Rectangle {
id: box
anchors.fill: parent
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
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton)
contextMenu.popup()
}
onPressAndHold: {
contextMenu.popup()
}
}
Controls.Menu {
id: contextMenu
Controls.MenuItem {
text: i18nd("kdeconnect-sms", "Copy Message")
enabled: bodyLabel.visible
onTriggered: {
root.messageCopyRequested(messageBody)
}
}
}
anchors.left: parent.left
anchors.leftMargin: Kirigami.Units.largeSpacing
}
ColumnLayout {
id: content
spacing: 0
anchors.centerIn: parent
anchors.margins: 4
RowLayout {
id: spoilerHintRow
visible: isSpoiler
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.LeftButton) {
isShowingSpoiler = !isShowingSpoiler
RowLayout {
id: messageBubble
anchors.right: parent.right
anchors.rightMargin: Kirigami.Units.largeSpacing
anchors.left: avatar.right
anchors.leftMargin: Kirigami.Units.largeSpacing
height: messageColumn.height
Rectangle {
Layout.maximumWidth: applicationWindow().wideScreen ? Math.min(messageColumn.contentWidth, root.width * 0.6) : messageColumn.contentWidth
Layout.fillWidth: true
Layout.alignment: root.sentByMe ? Qt.AlignRight : Qt.AlignLeft
Layout.fillHeight: true
Layout.minimumWidth: dateLabel.implicitWidth
color: {
Kirigami.Theme.colorSet = Kirigami.Theme.View
var accentColor = Kirigami.Theme.highlightColor
return Qt.tint(Kirigami.Theme.backgroundColor, Qt.rgba(accentColor.r, accentColor.g, accentColor.b, root.sentByMe ? 0.1 : 0.4))
}
}
}
Controls.Label {
id: dateLabeltest
text: spoilerHint == "" ? i18nd("kdeconnect-sms", "Spoiler") : spoilerHint
color: sentByMe ? Kirigami.Theme.textColor
: Kirigami.Theme.complementaryTextColor
font.pixelSize: Kirigami.Units.gridUnit * 0.8
}
radius: 6
Item {
Layout.fillWidth: true
height: 1
}
Column {
id: messageColumn
width: parent.width
height: childrenRect.height
Kirigami.Icon {
height: 28
width: 28
source: isShowingSpoiler ? "password-show-off" : "password-show-on"
color: sentByMe ? Kirigami.Theme.textColor : Kirigami.Theme.complementaryTextColor
}
}
Kirigami.Separator {
visible: isSpoiler
Layout.fillWidth: true
color: {
var bgColor = sentByMe ? Kirigami.Theme.backgroundColor : Kirigami.Theme.highlightColor
var textColor = sentByMe ? Kirigami.Theme.textColor : Kirigami.Theme.highlightedTextColor
return Qt.tint(textColor, Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.7))
}
}
property int contentWidth: Math.max(messageLabel.implicitWidth, dateLabel.implicitWidth)
ColumnLayout {
visible: isSpoiler && isShowingSpoiler || !isSpoiler
Label {
id: messageLabel
leftPadding: Kirigami.Units.largeSpacing
rightPadding: Kirigami.Units.largeSpacing
topPadding: Kirigami.Units.largeSpacing
width: parent.width
horizontalAlignment: root.sentByMe ? Text.AlignRight : Text.AlignLeft
wrapMode: Text.Wrap
text: root.messageBody
}
Label {
id: dateLabel
width: parent.width
text: Qt.formatDateTime(root.dateTime, "dd. MMM, hh:mm")
leftPadding: Kirigami.Units.largeSpacing
rightPadding: Kirigami.Units.largeSpacing
bottomPadding: Kirigami.Units.smallSpacing
color: Kirigami.Theme.disabledTextColor
horizontalAlignment: messageLabel.horizontalAlignment
}
}
Controls.ToolButton {
visible: {
false
// mediaType !== Enums.MessageText &&
// !isLoading &&
// mediaLocation === "" &&
// mediaGetUrl !== ""
}
text: i18nd("kdeconnect-sms", "Download")
onClicked: {
print("Downloading " + mediaGetUrl + "...")
kaidan.downloadMedia(msgId, mediaGetUrl)
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: mouse => {
if (mouse.button === Qt.RightButton) {
contextMenu.popup()
}
}
onPressAndHold: contextMenu.popup()
}
Menu {
id: contextMenu
MenuItem {
text: i18nd("kdeconnect-sms", "Copy Message")
enabled: messageLabel.visible
onTriggered: root.messageCopyRequested(root.messageBody)
}
}
}
// message body
Controls.Label {
id: bodyLabel
visible: messageBody !== "" && messageBody !== mediaGetUrl
text: messageBody//kaidan.utils.formatMessage(messageBody)
textFormat: Text.PlainText
wrapMode: Text.Wrap
color: sentByMe ? Kirigami.Theme.textColor
: Kirigami.Theme.complementaryTextColor
onLinkActivated: Qt.openUrlExternally(link)
Layout.maximumWidth: root.width - Kirigami.Units.gridUnit * 6
}
Kirigami.Separator {
visible: isSpoiler && isShowingSpoiler
Layout.fillWidth: true
color: {
var bgColor = sentByMe ? Kirigami.Theme.backgroundColor : Kirigami.Theme.highlightColor
var textColor = sentByMe ? Kirigami.Theme.textColor : Kirigami.Theme.highlightedTextColor
return Qt.tint(textColor, Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.7))
}
}
}
// message meta: date, isRead
RowLayout {
Controls.Label {
id: dateLabel
text: Qt.formatDateTime(dateTime, "dd. MMM yyyy, hh:mm")
color: sentByMe ? Kirigami.Theme.disabledTextColor
: Qt.darker(Kirigami.Theme.disabledTextColor, 1.3)
font.pixelSize: Kirigami.Units.gridUnit * 0.8
}
}
}
}
// placeholder
Item {
Layout.fillWidth: true
}
function updateIsLoading() {
isLoading = false
// isLoading = kaidan.transferCache.hasUpload(msgId)
}
Component.onCompleted: {
// kaidan.transferCache.jobsChanged.connect(updateIsLoading)
}
Component.onDestruction: {
// kaidan.transferCache.jobsChanged.disconnect(updateIsLoading)
}
}

2
smsapp/qml/ConversationDisplay.qml
View file

@ -124,6 +124,8 @@ Kirigami.ScrollablePage
sentByMe: model.fromMe
dateTime: new Date(model.date)
width: viewport.width
ListView.onAdd: {
if (!isInitalized) {
return

52
smsapp/qml/RoundImage.qml
View file

@ -1,52 +0,0 @@
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2019 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)
}
}
}
}

78
smsapp/qml/TextAvatar.qml
View file

@ -1,78 +0,0 @@
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2019 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 org.kde.kirigami 2.2 as Kirigami
import QtQuick 2.7
import QtQuick.Layouts 1.2
Rectangle {
id: avatar
property string name
color: Kirigami.Theme.highlightColor//Qt.lighter(kaidan.utils.getUserColor(name))
radius: width * 0.5
Text {
id: text
anchors.fill: parent
anchors.margins: Kirigami.Units.devicePixelRatio * 5
property var model
renderType: Text.QtRendering
color: Kirigami.Theme.textColor
font.weight: Font.Bold
font.pointSize: 100
minimumPointSize: Kirigami.Theme.defaultFont.pointSize
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: {
if (!name) {
return ""
}
// WIPQTQUICK HACK TODO Probably doesn't work with non-latin1.
var match = name.match(/([a-zA-Z0-9])([a-zA-Z0-9])/);
var abbrev = match[1].toUpperCase();
if (match.length > 2) {
abbrev += match[2].toLowerCase();
}
return abbrev;
}
}
}

3
smsapp/resources.qrc
View file

@ -4,8 +4,5 @@
<file>qml/ConversationList.qml</file>
<file>qml/ConversationDisplay.qml</file>
<file>qml/ChatMessage.qml</file>
<file>qml/RoundImage.qml</file>
<file>qml/Avatar.qml</file>
<file>qml/TextAvatar.qml</file>
</qresource>
</RCC>