Improve TypingMembersBar

TODO.md

@@ -1,3 +1,6 @@
+- daybreak color
+- rename component id that are named "root"
+- html links color
 - invite/leave/forget backend funcs
 - license headers
 - replace "property var" by "property <object>" where applicable and

src/icons/typing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.963 8.261c-.566-.585-.536-1.503.047-2.07l5.948-5.768c.291-.281.664-.423 1.035-.423.376 0 .75.146 1.035.44l-8.065 7.821zm-9.778 14.696c-.123.118-.185.277-.185.436 0 .333.271.607.607.607.152 0 .305-.057.423-.171l.999-.972-.845-.872-.999.972zm8.44-11.234l-3.419 3.314c-1.837 1.781-2.774 3.507-3.64 5.916l1.509 1.559c2.434-.79 4.187-1.673 6.024-3.455l3.418-3.315-3.892-4.019zm9.97-10.212l-8.806 8.54 4.436 4.579 8.806-8.538c.645-.626.969-1.458.969-2.291 0-2.784-3.373-4.261-5.405-2.29z"/></svg>

src/qml/Base/HScrollableTextArea.qml

@@ -26,7 +26,5 @@ ScrollView {
             id: textAreaBackground
             color: HStyle.controls.textArea.background
         }
-
-        //Keys.forwardTo: [scrollView]
     }
 }

src/qml/Chat/Chat.qml

@@ -55,7 +55,10 @@ HColumnLayout {
                 Layout.fillHeight: true
             }
 
-            TypingMembersBar {}
+            TypingMembersBar {
+                Layout.fillWidth: true
+                //Layout.preferredHeight: text ? implicitHeight : 0
+            }
 
             InviteBanner {
                 visible: category === "Invites"

src/qml/Chat/SendBox.qml

@@ -27,6 +27,7 @@ HRectangle {
         HScrollableTextArea {
             Layout.fillHeight: true
             Layout.fillWidth: true
+            Layout.topMargin: Math.max(0, root.Layout.minimumHeight - 34)
 
             id: textArea
             placeholderText: qsTr("Type a message...")

src/qml/Chat/Timeline/EventDelegate.qml

@@ -75,12 +75,6 @@ Column {
         width: roomEventDelegate.width
     }
 
-    Item { // TODO: put this in Daybreak.qml?
-        visible: dayBreak
-        width: parent.width
-        height: topPadding
-    }
-
     EventContent {
         anchors.right: isOwn ? parent.right : undefined
     }

src/qml/Chat/Timeline/EventList.qml

@@ -3,6 +3,8 @@ import SortFilterProxyModel 0.2
 import "../../Base"
 
 HRectangle {
+    property alias listView: roomEventListView
+
     property int space: 8
 
     color: HStyle.chat.roomEventList.background

src/qml/Chat/TypingMembersBar.qml

@@ -3,17 +3,30 @@ import QtQuick.Layouts 1.3
 import "../Base"
 
 HRectangle {
+    property alias label: typingLabel
+
+    implicitWidth: childrenRect.width
+    implicitHeight: typingLabel.text ? childrenRect.height : 0
     color: HStyle.chat.typingMembers.background
 
-    Layout.fillWidth: true
+    Row {
-    Layout.preferredHeight: usersLabel.text ? usersLabel.implicitHeight : 0
+        spacing: 8
+        leftPadding: spacing
+        rightPadding: spacing
+        topPadding: 2
+        bottomPadding: 2
+
+        HIcon {
+            svgName: "typing"  // TODO: animate
+            height: typingLabel.height
+        }
 
         HLabel {
-        id: usersLabel
+            id: typingLabel
-        anchors.fill: parent
-
             text: chatPage.roomInfo.typingText
+            textFormat: Text.StyledText
             elide: Text.ElideMiddle
             maximumLineCount: 1
         }
+    }
 }

src/qml/EventHandlers/rooms.js

@@ -1,9 +1,15 @@
+//Qt.include("../utils.js")
+
+
 function typingTextFor(members, our_user_id) {
     var names = []
 
     for (var i = 0; i < members.length; i++) {
         if (members[i] != our_user_id) {
             names.push(users.getUser(members[i]).displayName)
+            //names.push(coloredNameHtml(
+                //users.getUser(members[i]).displayName, members[i]
+            //))
         }
     }
 

src/qml/SidePane/PaneToolBar.qml

@@ -12,6 +12,7 @@ HRowLayout {
     HButton {
         iconName: "settings"
         backgroundColor: HStyle.sidePane.settingsButton.background
+        Layout.preferredHeight: parent.height
     }
 
     HTextField {