fc83fb32e9
- Move the device combobox to the global drawer - Move search field and new button to header - Use Kirigami SearchField instead - Don't switch focus away from search field when typing - Give the New button an icon - Clarify the search field text - Center messages view loading indicator - Make send and attach buttons stick to bottom of text area - Make cursor an I-beam when hovering over text area - Move send button to the right - Give proper padding to messages view top - Move refresh action to global drawer - Show refresh button directly in loading message where it is most useful | Before | After | | ------ | ------ | | ![kdeconnectsms-old1](/uploads/469fa5f198ce81f1f53e8aa73694a824/kdeconnectsms-old1.png) | ![kdeconnectsms-new1](/uploads/c3b2b552d5d1bb73c566c6879c5b2a3c/kdeconnectsms-new1.png) | | ![kdeconnectsms-old2](/uploads/eed795529946ed9ff856d8599bc66fb2/kdeconnectsms-old2.png) | ![kdeconnectsms-new2](/uploads/7abff93670aaea36052f3e3bfe01da62/kdeconnectsms-new2.png) | | ![kdeconnectsms-old3](/uploads/f24dc7a902e33a1317cc8d9b90c39482/kdeconnectsms-old3.png) | ![kdeconnectsms-new3](/uploads/ea7d07f64d1904757dce56e86f1876ba/kdeconnectsms-new3.png) | cc @teams/usability @teams/vdg
181 lines
5.8 KiB
QML
181 lines
5.8 KiB
QML
/**
|
|
* SPDX-FileCopyrightText: 2018 Aleix Pol Gonzalez <aleixpol@kde.org>
|
|
* SPDX-FileCopyrightText: 2018 Nicolas Fella <nicolas.fella@gmx.de>
|
|
* SPDX-FileCopyrightText: 2018 Simon Redman <simon@ergotech.com>
|
|
*
|
|
* SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
|
|
*/
|
|
|
|
import QtQuick 2.15
|
|
import QtQuick.Controls 2.2 as Controls
|
|
import QtQuick.Layouts 1.1
|
|
import org.kde.people 1.0
|
|
import org.kde.kirigami 2.4 as Kirigami
|
|
import org.kde.kdeconnect.sms 1.0
|
|
import QtGraphicalEffects 1.0
|
|
|
|
Kirigami.ScrollablePage
|
|
{
|
|
id: page
|
|
|
|
property bool deviceConnected
|
|
property string deviceId
|
|
// property QtObject device
|
|
property string conversationId
|
|
property bool isMultitarget
|
|
property string initialMessage
|
|
property string invalidId: "-1"
|
|
|
|
property bool isInitalized: false
|
|
|
|
property var conversationModel: ConversationModel {
|
|
deviceId: page.deviceId
|
|
threadId: page.conversationId
|
|
addressList: page.addresses
|
|
|
|
onLoadingFinished: {
|
|
page.isInitalized = true
|
|
}
|
|
}
|
|
|
|
property var addresses
|
|
title: SmsHelper.getTitleForAddresses(addresses)
|
|
|
|
Component.onCompleted: {
|
|
if (initialMessage.length > 0) {
|
|
messageField.text = initialMessage;
|
|
initialMessage = ""
|
|
}
|
|
if (conversationId == invalidId) {
|
|
isInitalized = true
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build a chat message which is representative of all chat messages
|
|
*
|
|
* In other words, one which I can use to get a reasonable height guess
|
|
*/
|
|
ChatMessage {
|
|
id: genericMessage
|
|
name: "Generic Sender"
|
|
messageBody: "Generic Message Body"
|
|
dateTime: new Date('2000-0-0')
|
|
visible: false
|
|
enabled: false
|
|
}
|
|
|
|
ListView {
|
|
id: viewport
|
|
model: QSortFilterProxyModel {
|
|
id: model
|
|
sortOrder: Qt.AscendingOrder
|
|
sortRole: ConversationModel.DateRole
|
|
sourceModel: conversationModel
|
|
}
|
|
|
|
spacing: Kirigami.Units.largeSpacing
|
|
highlightMoveDuration: 0
|
|
|
|
Controls.BusyIndicator {
|
|
running: !isInitalized
|
|
anchors.centerIn: parent
|
|
}
|
|
|
|
header: Item {
|
|
height: Kirigami.Units.largeSpacing * 2
|
|
}
|
|
headerPositioning: ListView.InlineHeader
|
|
|
|
onContentHeightChanged: {
|
|
if (viewport.contentHeight <= 0) {
|
|
return
|
|
}
|
|
|
|
if (!isInitalized) {
|
|
// If we aren't initialized, we need to request enough messages to fill the view
|
|
// In order to do that, request one more message until we have enough
|
|
if (viewport.contentHeight < viewport.height) {
|
|
console.debug("Requesting another message to fill the screen")
|
|
conversationModel.requestMoreMessages(1)
|
|
} else {
|
|
// Finish initializing: Scroll to the bottom of the view
|
|
|
|
// View the most-recent message
|
|
viewport.forceLayout()
|
|
Qt.callLater(viewport.positionViewAtEnd)
|
|
isInitalized = true
|
|
}
|
|
return
|
|
}
|
|
}
|
|
|
|
delegate: ChatMessage {
|
|
name: model.sender
|
|
messageBody: model.display
|
|
sentByMe: model.fromMe
|
|
dateTime: new Date(model.date)
|
|
multiTarget: isMultitarget
|
|
attachmentList: model.attachments
|
|
|
|
width: viewport.width
|
|
|
|
ListView.onAdd: {
|
|
if (!isInitalized) {
|
|
return
|
|
}
|
|
|
|
if (index == viewport.count - 1) {
|
|
// This message is being inserted at the newest position
|
|
// We want to scroll to show it if the user is "almost" looking at it
|
|
|
|
// Define some fudge area. If the message is being drawn offscreen but within
|
|
// this distance, we move to show it anyway.
|
|
// Selected to be genericMessage.height because that value scales for different
|
|
// font sizes / DPI / etc. -- Better ideas are welcome!
|
|
// Double the value works nicely
|
|
var offscreenFudge = 2 * genericMessage.height
|
|
|
|
var viewportYBottom = viewport.contentY + viewport.height
|
|
|
|
if (y < viewportYBottom + genericMessage.height) {
|
|
viewport.highlightMoveDuration = -1
|
|
viewport.currentIndex = index
|
|
}
|
|
}
|
|
}
|
|
|
|
onMessageCopyRequested: {
|
|
SmsHelper.copyToClipboard(message)
|
|
}
|
|
}
|
|
|
|
onMovementEnded: {
|
|
if (!isInitalized) {
|
|
return
|
|
}
|
|
// Unset the highlightRangeMode if it was set previously
|
|
highlightRangeMode = ListView.ApplyRange
|
|
|
|
// If we have scrolled to the last message currently in the view, request some more
|
|
if (atYBeginning) {
|
|
// "Lock" the view to the message currently at the beginning of the view
|
|
// This prevents the view from snapping to the top of the messages we are about to request
|
|
currentIndex = 0 // Index 0 is the beginning of the view
|
|
preferredHighlightBegin = visibleArea.yPosition
|
|
preferredHighlightEnd = preferredHighlightBegin + currentItem.height
|
|
highlightRangeMode = ListView.StrictlyEnforceRange
|
|
|
|
highlightMoveDuration = 0
|
|
|
|
// Get more messages
|
|
conversationModel.requestMoreMessages()
|
|
}
|
|
}
|
|
}
|
|
|
|
footer: SendingArea {
|
|
width: parent.width
|
|
addresses: page.addresses
|
|
}
|
|
}
|