diff --git a/imports/NeoChat/Component/ChatBox/TypingPane.qml b/imports/NeoChat/Component/ChatBox/TypingPane.qml deleted file mode 100644 index 9beb705f3..000000000 --- a/imports/NeoChat/Component/ChatBox/TypingPane.qml +++ /dev/null @@ -1,66 +0,0 @@ -/* SPDX-FileCopyrightText: 2020 Carl Schwan - * SPDX-FileCopyrightText: 2020 Noah Davis - * SPDX-FileCopyrightText: 2021 Srevin Saju - * SPDX-License-Identifier: GPL-2.0-or-later - */ - -import QtQuick 2.15 -import QtQuick.Layouts 1.15 -import QtQuick.Controls 2.15 -import org.kde.kirigami 2.14 as Kirigami -import org.kde.neochat 1.0 - -Loader { - id: root - property var typingNotification: null - - active: visible - sourceComponent: Pane { - id: typingPane - - padding: fontMetrics.lineSpacing * 0.25 - spacing: 0 - Kirigami.Theme.colorSet: Kirigami.Theme.View - - contentItem: RowLayout { - Layout.fillWidth: true - Layout.alignment: Qt.AlignLeft - spacing: 0 - - FontMetrics { - id: fontMetrics - font: typingLabel.font - } - Label { - id: typingLabel - textFormat: TextEdit.RichText - wrapMode: Label.Wrap - text: typingNotification - } - BusyIndicator { - running: root.active - Layout.alignment: Qt.AlignRight - Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium - Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium - } - } - - background: Item { - Rectangle { - height: 1 - property color borderColor: Kirigami.Theme.textColor - color: Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.1) - anchors { - left: typingIndicatorBackground.left - right: typingIndicatorBackground.right - bottom: typingIndicatorBackground.top - } - } - Rectangle { - anchors.fill: parent - id: typingIndicatorBackground - color: Kirigami.Theme.backgroundColor - } - } - } -} diff --git a/imports/NeoChat/Component/ChatBox/qmldir b/imports/NeoChat/Component/ChatBox/qmldir index e6d014d84..28b7a8a94 100644 --- a/imports/NeoChat/Component/ChatBox/qmldir +++ b/imports/NeoChat/Component/ChatBox/qmldir @@ -5,4 +5,3 @@ ReplyPane 1.0 ReplyPane.qml AttachmentPane 1.0 AttachmentPane.qml CompletionMenu 1.0 CompletionMenu.qml EmojiPickerPane 1.0 EmojiPickerPane.qml -TypingPane 1.0 TypingPane.qml diff --git a/imports/NeoChat/Component/TypingPane.qml b/imports/NeoChat/Component/TypingPane.qml new file mode 100644 index 000000000..8d23f5b75 --- /dev/null +++ b/imports/NeoChat/Component/TypingPane.qml @@ -0,0 +1,107 @@ +/* SPDX-FileCopyrightText: 2020 Carl Schwan + * SPDX-FileCopyrightText: 2020 Noah Davis + * SPDX-FileCopyrightText: 2021 Srevin Saju + * SPDX-License-Identifier: GPL-2.0-or-later + */ + +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 +import org.kde.kirigami 2.14 as Kirigami +import org.kde.neochat 1.0 + +Loader { + id: root + property string labelText: "" + + active: visible + sourceComponent: Pane { + id: typingPane + + clip: true + leftPadding: Kirigami.Units.largeSpacing + rightPadding: Kirigami.Units.largeSpacing + topPadding: Kirigami.Units.smallSpacing + bottomPadding: Kirigami.Units.smallSpacing + spacing: Kirigami.Units.largeSpacing + + FontMetrics { + id: fontMetrics + } + + contentItem: RowLayout { + spacing: typingPane.spacing + Row { + id: dotRow + property int duration: 400 + spacing: Kirigami.Units.smallSpacing + Repeater { + model: 3 + delegate: Rectangle { + id: dot + color: Kirigami.Theme.textColor + radius: height/2 + implicitWidth: fontMetrics.xHeight + implicitHeight: fontMetrics.xHeight + // rotating 45 degrees makes the dots look a bit smoother when scaled up + rotation: 45 + opacity: 0.5 + scale: 1 + // FIXME: Sometimes the animation timings for each + // dot drift slightly reletative to each other. + // Not everyone can see this, but I'm pretty sure it's there. + SequentialAnimation { + running: true + PauseAnimation { duration: dotRow.duration * index / 2 } + SequentialAnimation { + loops: Animation.Infinite + ParallelAnimation { + // Animators unfortunately sync up instead of being + // staggered, so I'm using NumberAnimations instead. + NumberAnimation { + target: dot; property: "scale"; + from: 1; to: 1.33 + duration: dotRow.duration + } + NumberAnimation { + target: dot; property: "opacity" + from: 0.5; to: 1 + duration: dotRow.duration + } + } + ParallelAnimation { + NumberAnimation { + target: dot; property: "scale" + from: 1.33; to: 1 + duration: dotRow.duration + } + NumberAnimation { + target: dot; property: "opacity" + from: 1; to: 0.5 + duration: dotRow.duration + } + } + PauseAnimation { duration: dotRow.duration } + } + } + } + } + } + Label { + id: typingLabel + elide: Text.ElideRight + text: root.labelText + } + } + + leftInset: mirrored ? 0 : -3 + rightInset: mirrored ? -3 : 0 + bottomInset: -3 + background: Rectangle { + radius: 3 + color: Kirigami.Theme.backgroundColor + border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2) + border.width: 1 + } + } +} diff --git a/imports/NeoChat/Component/qmldir b/imports/NeoChat/Component/qmldir index 96abab2d1..b5697c802 100644 --- a/imports/NeoChat/Component/qmldir +++ b/imports/NeoChat/Component/qmldir @@ -2,3 +2,4 @@ module NeoChat.Component FullScreenImage 1.0 FullScreenImage.qml ChatTextInput 1.0 ChatTextInput.qml FancyEffectsContainer 1.0 FancyEffectsContainer.qml +TypingPane 1.0 TypingPane.qml diff --git a/imports/NeoChat/Page/RoomPage.qml b/imports/NeoChat/Page/RoomPage.qml index ad85ca29d..1dcaf628d 100644 --- a/imports/NeoChat/Page/RoomPage.qml +++ b/imports/NeoChat/Page/RoomPage.qml @@ -720,8 +720,12 @@ Kirigami.ScrollablePage { header: TypingPane { id: typingPane visible: !loadingIndicator.visible && currentRoom && currentRoom.usersTyping.length > 0 - typingNotification: visible ? i18ncp("Message displayed when some users are typing", "%2 is typing", "%2 are typing", currentRoom.usersTyping.length, currentRoom.usersTyping.map(user => user.displayName).join(", ")) : "" - width: parent.width + labelText: visible ? i18ncp( + "Message displayed when some users are typing", "%2 is typing", "%2 are typing", + currentRoom.usersTyping.length, + currentRoom.usersTyping.map(user => user.displayName).join(", ") + ) : "" + anchors.left: parent.left height: visible ? implicitHeight : 0 Behavior on height { NumberAnimation { diff --git a/res.qrc b/res.qrc index b48b5ad08..11e76d592 100644 --- a/res.qrc +++ b/res.qrc @@ -17,6 +17,7 @@ imports/NeoChat/Component/qmldir imports/NeoChat/Component/FullScreenImage.qml imports/NeoChat/Component/FancyEffectsContainer.qml + imports/NeoChat/Component/TypingPane.qml imports/NeoChat/Component/ChatBox imports/NeoChat/Component/ChatBox/ChatBox.qml imports/NeoChat/Component/ChatBox/ChatBar.qml