Base TypingMembersBar on new InfoBar component

src/gui/Pages/Chat/ChatPage.qml

@@ -63,6 +63,7 @@ HColumnPage {
     }
 
     TypingMembersBar {
+        typingMembers: JSON.parse(chat.roomInfo.typing_members)
         Layout.fillWidth: true
     }
 

src/gui/Pages/Chat/InfoBar.qml

@@ -0,0 +1,41 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../../Base"
+
+Rectangle {
+    implicitHeight: label.text ? rowLayout.height : 0
+    opacity: implicitHeight ? 1 : 0
+
+
+    readonly property alias icon: icon
+    readonly property alias label: label
+
+
+    Behavior on implicitHeight { HNumberAnimation {} }
+
+    HRowLayout {
+        id: rowLayout
+        spacing: theme.spacing
+
+        HIcon {
+            id: icon
+
+            Layout.fillHeight: true
+            Layout.leftMargin: rowLayout.spacing / 2
+        }
+
+        HLabel {
+            id: label
+            elide: Text.ElideRight
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.topMargin: rowLayout.spacing / 4
+            Layout.bottomMargin: rowLayout.spacing / 4
+            Layout.leftMargin: rowLayout.spacing / 2
+            Layout.rightMargin: rowLayout.spacing / 2
+        }
+    }
+}

src/gui/Pages/Chat/TypingMembersBar.qml

@@ -4,49 +4,20 @@ import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../../Base"
 
-Rectangle {
+InfoBar {
-    id: typingMembersBar
-
-    property alias label: typingLabel
-
     color: theme.chat.typingMembers.background
-    implicitHeight: typingLabel.text ? rowLayout.height : 0
+    icon.svgName: "typing"  // TODO: animate
-    opacity: implicitHeight ? 1 : 0
+    label.textFormat: Text.StyledText
+    label.text: {
+        const tm = typingMembers
 
-    Behavior on implicitHeight { HNumberAnimation {} }
+        if (tm.length === 0) return ""
+        if (tm.length === 1) return qsTr("%1 is typing...").arg(tm[0])
 
-    HRowLayout {
+        return qsTr("%1 and %2 are typing...")
-        id: rowLayout
+               .arg(tm.slice(0, -1).join(", ")).arg(tm.slice(-1)[0])
-        spacing: theme.spacing
-
-        HIcon {
-            id: icon
-            svgName: "typing"  // TODO: animate
-
-            Layout.fillHeight: true
-            Layout.leftMargin: rowLayout.spacing / 2
-        }
-
-        HLabel {
-            id: typingLabel
-            textFormat: Text.StyledText
-            elide: Text.ElideRight
-            text: {
-                const tm = JSON.parse(chat.roomInfo.typing_members)
-
-                if (tm.length === 0) return ""
-                if (tm.length === 1) return qsTr("%1 is typing...").arg(tm[0])
-
-                return qsTr("%1 and %2 are typing...")
-                       .arg(tm.slice(0, -1).join(", ")).arg(tm.slice(-1)[0])
-            }
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.topMargin: rowLayout.spacing / 4
-            Layout.bottomMargin: rowLayout.spacing / 4
-            Layout.leftMargin: rowLayout.spacing / 2
-            Layout.rightMargin: rowLayout.spacing / 2
-        }
     }
+
+
+    property var typingMembers: []
 }