Use 3 dot typing indicator, clean up code a bit.

Move TypingIndicator.qml out of ChatBox folder.
It wasn't part of the ChatBox.

fixes #367 by eliding instead of wrapping text

imports/NeoChat/Component/ChatBox/TypingPane.qml

@@ -1,66 +0,0 @@
-/* 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 {
-                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
-            }
-        }
-    }
-}

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

imports/NeoChat/Component/TypingPane.qml

@@ -0,0 +1,107 @@
+/* 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 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
+        }
+    }
+}

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

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(", ")) : ""
+            labelText: visible ? i18ncp(
-            width: parent.width
+                "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 {

res.qrc

@@ -17,6 +17,7 @@
         <file>imports/NeoChat/Component/qmldir</file>
         <file>imports/NeoChat/Component/FullScreenImage.qml</file>
         <file>imports/NeoChat/Component/FancyEffectsContainer.qml</file>
+        <file>imports/NeoChat/Component/TypingPane.qml</file>
         <file>imports/NeoChat/Component/ChatBox</file>
         <file>imports/NeoChat/Component/ChatBox/ChatBox.qml</file>
         <file>imports/NeoChat/Component/ChatBox/ChatBar.qml</file>