feat: add an improved typing notification bar above chatbar

Fix #330

imports/NeoChat/Component/ChatBox/ChatBox.qml

@@ -86,6 +86,7 @@ Item {
         anchors.bottom: replyPane.top
     }
 
+
     ReplyPane {
         id: replyPane
         visible: ChatBoxHelper.isReplying || ChatBoxHelper.isEditing

imports/NeoChat/Component/ChatBox/TypingPane.qml

@@ -0,0 +1,67 @@
+/* SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.de>
+ * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
+ * SPDX-FileCopyrightText: 2021 Srevin Saju <srevinsaju@sugarlabs.org>
+ * 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 {
+                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
+                anchors.topMargin: 1
+                anchors.bottomMargin: 1
+                id: typingIndicatorBackground
+                color: Kirigami.Theme.backgroundColor
+            }
+        }
+    }
+}

imports/NeoChat/Component/ChatBox/qmldir

@@ -5,3 +5,4 @@ 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

imports/NeoChat/Page/RoomPage.qml

@@ -595,23 +595,6 @@ Kirigami.ScrollablePage {
             }
         }
 
-        header: RowLayout {
-            id: typingNotification
-
-            visible: !loadingIndicator.visible && currentRoom && currentRoom.usersTyping.length > 0
-            height: visible ? implicitHeight: 0
-            spacing: Kirigami.Units.largeSpacing
-
-            QQC2.BusyIndicator {
-                Layout.preferredWidth: Kirigami.Units.iconSizes.smallMedium
-                Layout.preferredHeight: Kirigami.Units.iconSizes.smallMedium
-            }
-            QQC2.Label {
-                text: 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(", ")) : ""
-            }
-        }
-
-
         Component.onCompleted: {
             updateReadMarker()
             if (currentRoom) {
@@ -665,8 +648,29 @@ Kirigami.ScrollablePage {
 
             FullScreenImage {}
         }
+
+
+        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
+            height: visible ? implicitHeight : 0
+            anchors.bottom: attachmentSeparator.top
+            Behavior on height {
+                NumberAnimation {
+                    property: "height"
+                    duration: Kirigami.Units.shortDuration
+                    easing.type: Easing.OutCubic
+                }
+            }
+            z: 2
+        }
+        headerPositioning: ListView.OverlayHeader
+
     }
 
+
     footer: ChatBox {
         id: chatBox
         visible: !invitation.visible && !(messageListView.count === 0 && !currentRoom.allHistoryLoaded)