kdeconnect-kde/smsapp/qml/SendingArea.qml
Bharadwaj Raju (away; can't respond) fc83fb32e9 smsapp: Assorted UI improvements
- 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
2022-02-09 03:47:36 +00:00

201 lines
7.4 KiB
QML

/**
* SPDX-FileCopyrightText: 2020 Aniket Kumar <anikketkumar786@gmail.com>
*
* SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/
import QtQuick 2.1
import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.1
import org.kde.kirigami 2.4 as Kirigami
import QtGraphicalEffects 1.0
import QtQuick.Dialogs 1.1
import org.kde.kdeconnect.sms 1.0
ColumnLayout {
id: root
property var addresses
property var selectedFileUrls: []
readonly property int maxMessageSize: 600000
MessageDialog {
id: messageDialog
title: i18nd("kdeconnect-sms", "Failed to send")
text: i18nd("kdeconnect-sms", "Max message size limit exceeded.")
onAccepted: {
messageDialog.close()
}
}
FileDialog {
id: fileDialog
folder: shortcuts.home
selectMultiple: true
onAccepted: {
root.selectedFileUrls = fileDialog.fileUrls
fileDialog.close()
}
}
Controls.Pane {
id: sendingArea
enabled: page.deviceConnected
layer.enabled: sendingArea.enabled
layer.effect: DropShadow {
verticalOffset: 1
color: Kirigami.Theme.disabledTextColor
samples: 20
spread: 0.3
}
Layout.fillWidth: true
padding: 0
wheelEnabled: true
background: Rectangle {
color: Kirigami.Theme.backgroundColor
}
RowLayout {
anchors.fill: parent
Controls.ScrollView {
Layout.fillWidth: true
Layout.maximumHeight: page.height > 300 ? page.height / 3 : 2 * page.height / 3
contentWidth: page.width - sendButtonArea.width
clip: true
Controls.ScrollBar.horizontal.policy: Controls.ScrollBar.AlwaysOff
Controls.TextArea {
anchors.fill: parent
id: messageField
placeholderText: i18nd("kdeconnect-sms", "Compose message")
wrapMode: TextEdit.Wrap
topPadding: Kirigami.Units.gridUnit * 0.5
bottomPadding: topPadding
selectByMouse: true
hoverEnabled: true
background: MouseArea {
hoverEnabled: true
acceptedButtons: Qt.NoButton
cursorShape: Qt.IBeamCursor
z: 1
}
Keys.onReturnPressed: {
if (event.key === Qt.Key_Return) {
if (event.modifiers & Qt.ShiftModifier) {
messageField.append("")
} else {
sendButton.onClicked()
event.accepted = true
}
}
}
}
}
ColumnLayout {
id: sendButtonArea
Layout.alignment: Qt.AlignBottom
RowLayout {
Controls.ToolButton {
id: attachFilesButton
enabled: true
Layout.preferredWidth: Kirigami.Units.gridUnit * 2
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
padding: 0
Text {
id: attachedFilesCount
text: selectedFileUrls.length
color: "red"
visible: selectedFileUrls.length > 0
}
Kirigami.Icon {
source: "insert-image"
isMask: true
smooth: true
anchors.centerIn: parent
width: Kirigami.Units.gridUnit * 1.5
height: width
}
onClicked: {
fileDialog.open()
}
}
Controls.ToolButton {
id: clearAttachmentButton
visible: selectedFileUrls.length > 0
Layout.preferredWidth: Kirigami.Units.gridUnit * 2
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
padding: 0
Kirigami.Icon {
id: cancelIcon
source: "edit-clear"
isMask: true
smooth: true
anchors.centerIn: parent
width: Kirigami.Units.gridUnit * 1.5
height: width
}
onClicked: {
selectedFileUrls = []
if (messageField.text == "") {
sendButton.enabled = false
}
}
}
Controls.ToolButton {
id: sendButton
enabled: messageField.text.length || selectedFileUrls.length
Layout.preferredWidth: Kirigami.Units.gridUnit * 2
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
padding: 0
Kirigami.Icon {
source: "document-send"
enabled: sendButton.enabled
isMask: true
smooth: true
anchors.centerIn: parent
width: Kirigami.Units.gridUnit * 1.5
height: width
}
property bool messageSent: false
onClicked: {
// disable the button to prevent sending
// the same message several times
sendButton.enabled = false
if (SmsHelper.totalMessageSize(selectedFileUrls, messageField.text) > maxMessageSize) {
messageDialog.visible = true
} else if (page.conversationId === page.invalidId) {
messageSent = conversationModel.startNewConversation(messageField.text, addresses, selectedFileUrls)
} else {
messageSent = conversationModel.sendReplyToConversation(messageField.text, selectedFileUrls)
}
if (messageSent) {
messageField.text = ""
selectedFileUrls = []
sendButton.enabled = false
}
}
}
}
Controls.Label {
id: "charCount"
text: conversationModel.getCharCountInfo(messageField.text)
visible: text.length > 0
Layout.minimumWidth: Math.max(Layout.minimumWidth, width) // Make this label only grow, never shrink
}
}
}
}
}