Add typing notification.

imports/Spectral/Panel/RoomPanel.qml

@@ -69,12 +69,19 @@ Item {
             onClicked: roomDrawer.open()
         }
 
-        AutoListView {
+        ColumnLayout {
             Layout.fillWidth: true
-            Layout.maximumWidth: 960
             Layout.fillHeight: true
+            Layout.maximumWidth: 960
             Layout.leftMargin: 16
             Layout.rightMargin: 16
+            Layout.bottomMargin: 16
+
+            spacing: 16
+
+            AutoListView {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
                 Layout.alignment: Qt.AlignHCenter
 
                 id: messageListView
@@ -363,15 +370,69 @@ Item {
                 }
             }
 
+            Control {
+                Layout.maximumWidth: parent.width * 0.8
+
+                visible: currentRoom && currentRoom.hasUsersTyping
+                padding: 8
+
+                contentItem: RowLayout {
+                    spacing: 8
+
+                    Repeater {
+                        model: currentRoom && currentRoom.hasUsersTyping ? currentRoom.usersTyping : null
+
+                        delegate: Avatar {
+                            Layout.preferredWidth: 24
+                            Layout.preferredHeight: 24
+
+                            source: modelData.avatarUrl
+                            hint: modelData.displayName
+                        }
+                    }
+
+                    Rectangle {
+                        Layout.preferredWidth: 6
+                        Layout.preferredHeight: 6
+                        Layout.alignment: Qt.AlignCenter
+
+                        color: MPalette.accent
+                        radius: height / 2
+                    }
+
+                    Rectangle {
+                        Layout.preferredWidth: 6
+                        Layout.preferredHeight: 6
+                        Layout.alignment: Qt.AlignCenter
+
+                        color: MPalette.accent
+                        radius: height / 2
+                    }
+
+                    Rectangle {
+                        Layout.preferredWidth: 6
+                        Layout.preferredHeight: 6
+                        Layout.alignment: Qt.AlignCenter
+
+                        color: MPalette.accent
+                        radius: height / 2
+                    }
+                }
+
+                background: Rectangle {
+                    color: MPalette.banner
+                    radius: height / 2
+                }
+            }
+
             RoomPanelInput {
                 Layout.fillWidth: true
-            Layout.margins: 16
-            Layout.maximumWidth: 960
                 Layout.alignment: Qt.AlignHCenter
 
                 id: roomPanelInput
             }
         }
+    }
 
     function goToEvent(eventID) {
         var index = messageEventModel.eventIDToIndex(eventID)

imports/Spectral/Panel/RoomPanelInput.qml

@@ -220,8 +220,7 @@ Control {
 
                 text: currentRoom != null ? currentRoom.cachedInput : ""
 
-                background: Item {
+                background: Item {}
-                }
 
                 Rectangle {
                     width: currentRoom && currentRoom.hasFileUploading ? parent.width * currentRoom.fileUploadingProgress / 100 : 0
@@ -251,9 +250,6 @@ Control {
                     onTriggered: currentRoom.sendTypingNotification(true)
                 }
 
-                ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
-                ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
-
                 Keys.onReturnPressed: {
                     if (event.modifiers & Qt.ShiftModifier) {
                         insert(cursorPosition, "\n")

src/spectralroom.cpp

@@ -118,16 +118,14 @@ bool SpectralRoom::hasUsersTyping() {
   return count != 0;
 }
 
-QString SpectralRoom::getUsersTyping() {
+QVariantList SpectralRoom::getUsersTyping() {
-  QString usersTypingStr;
   QList<User*> users = usersTyping();
   users.removeOne(localUser());
+  QVariantList out;
   for (User* user : users) {
-    usersTypingStr += user->displayname() + " ";
+    out.append(QVariant::fromValue(user));
   }
-  usersTypingStr += users.count() < 2 ? "is" : "are";
+  return out;
-  usersTypingStr += " typing.";
-  return usersTypingStr;
 }
 
 void SpectralRoom::sendTypingNotification(bool isTyping) {

src/spectralroom.h

@@ -13,7 +13,7 @@ using namespace QMatrixClient;
 class SpectralRoom : public Room {
   Q_OBJECT
   Q_PROPERTY(bool hasUsersTyping READ hasUsersTyping NOTIFY typingChanged)
-  Q_PROPERTY(QString usersTyping READ getUsersTyping NOTIFY typingChanged)
+  Q_PROPERTY(QVariantList usersTyping READ getUsersTyping NOTIFY typingChanged)
   Q_PROPERTY(QString cachedInput READ cachedInput WRITE setCachedInput NOTIFY
                  cachedInputChanged)
   Q_PROPERTY(bool hasFileUploading READ hasFileUploading NOTIFY
@@ -43,7 +43,7 @@ class SpectralRoom : public Room {
   }
 
   bool hasUsersTyping();
-  QString getUsersTyping();
+  QVariantList getUsersTyping();
 
   QString lastEvent();
   bool isEventHighlighted(const QMatrixClient::RoomEvent* e) const;