Rewrite HTile and adapt components using it

Rewrite HTile in a more standard way, hopefully fixing the
mysterious segfault on some systems

src/gui/Base/HTile.qml

@@ -1,141 +0,0 @@
-// SPDX-License-Identifier: LGPL-3.0-or-later
-
-import QtQuick 2.12
-import QtQuick.Layouts 1.12
-
-HButton {
-    id: tile
-
-
-    signal leftClicked()
-    signal rightClicked()
-    signal longPressed()
-
-    default property alias additionalData: contentItem.data
-
-    property bool compact: window.settings.compactMode
-    property real contentOpacity: 1
-
-    readonly property alias title: title
-    readonly property alias additionalInfo: additionalInfo
-    readonly property alias rightInfo: rightInfo
-    readonly property alias subtitle: subtitle
-    readonly property Item loadedImage: imageLoader.item
-
-    property alias contextMenu: contextMenuLoader.sourceComponent
-
-    property Component image
-
-
-    contentItem: HRowLayout {
-        id: contentItem
-        spacing: tile.spacing
-        opacity: tile.contentOpacity
-
-        HLoader {
-            id: imageLoader
-            sourceComponent: image
-        }
-
-        HColumnLayout {
-            Layout.fillWidth: true
-
-            HRowLayout {
-                spacing: tile.spacing
-
-                HLabel {
-                    id: title
-                    text: "Missing title"
-                    elide: Text.ElideRight
-                    verticalAlignment: Qt.AlignVCenter
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-                }
-
-                HLabel {
-                    id: rightInfo
-                    font.pixelSize: theme.fontSize.small
-                    verticalAlignment: Qt.AlignVCenter
-                    color: theme.colors.halfDimText
-                    visible: Layout.maximumWidth > 0
-
-                    Layout.fillHeight: true
-                    Layout.maximumWidth:
-                        text && tile.width >= 200 * theme.uiScale ?
-                        implicitWidth : 0
-
-                    Behavior on Layout.maximumWidth { HNumberAnimation {} }
-                }
-
-                HRowLayout {
-                    id: additionalInfo
-                    visible: visibleChildren.length > 0
-                }
-
-            }
-
-            HRichLabel {
-                id: subtitle
-                textFormat: Text.StyledText
-                font.pixelSize: theme.fontSize.small
-                verticalAlignment: Qt.AlignVCenter
-                elide: Text.ElideRight
-                color: theme.colors.dimText
-                visible: Layout.maximumHeight > 0
-
-                Layout.maximumHeight: ! compact && text ? implicitHeight : 0
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                Behavior on Layout.maximumHeight { HNumberAnimation {} }
-            }
-        }
-    }
-
-
-    Binding on topPadding {
-        value: spacing / 4
-        when: compact
-    }
-
-    Binding on bottomPadding {
-        value: spacing / 4
-        when: compact
-    }
-
-    TapHandler {
-        acceptedButtons: Qt.LeftButton
-        onTapped: leftClicked()
-        onLongPressed: tile.longPressed()
-    }
-
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        acceptedPointerTypes: PointerDevice.GenericPointer | PointerDevice.Pen
-        onTapped: {
-            rightClicked()
-            if (contextMenu) contextMenuLoader.active = true
-        }
-    }
-
-    TapHandler {
-        acceptedPointerTypes: PointerDevice.Finger | PointerDevice.Pen
-        onLongPressed: {
-            rightClicked()
-            if (contextMenu) contextMenuLoader.active = true
-        }
-    }
-
-    Connections {
-        enabled: contextMenuLoader.status === Loader.Ready
-        target: contextMenuLoader.item
-        onClosed: contextMenuLoader.active = false
-    }
-
-    HLoader {
-        id: contextMenuLoader
-        active: false
-        onLoaded: item.popup()
-    }
-}

src/gui/Base/HTile/ContentRow.qml

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import ".."
+
+HRowLayout {
+    spacing: tile.spacing
+    opacity: tile.contentOpacity
+
+
+    property HTile tile
+}

src/gui/Base/HTile/HTile.qml

@@ -0,0 +1,65 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import ".."
+
+HButton {
+    id: tile
+
+
+    signal leftClicked()
+    signal rightClicked()
+    signal longPressed()
+
+
+    property bool compact: window.settings.compactMode
+    property real contentOpacity: 1
+
+    property alias contextMenu: contextMenuLoader.sourceComponent
+
+
+    Binding on topPadding {
+        value: spacing / 4
+        when: compact
+    }
+
+    Binding on bottomPadding {
+        value: spacing / 4
+        when: compact
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.LeftButton
+        onTapped: leftClicked()
+        onLongPressed: tile.longPressed()
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.RightButton
+        acceptedPointerTypes: PointerDevice.GenericPointer | PointerDevice.Pen
+        onTapped: {
+            rightClicked()
+            if (contextMenu) contextMenuLoader.active = true
+        }
+    }
+
+    TapHandler {
+        acceptedPointerTypes: PointerDevice.Finger | PointerDevice.Pen
+        onLongPressed: {
+            rightClicked()
+            if (contextMenu) contextMenuLoader.active = true
+        }
+    }
+
+    Connections {
+        enabled: contextMenuLoader.status === Loader.Ready
+        target: contextMenuLoader.item
+        onClosed: contextMenuLoader.active = false
+    }
+
+    HLoader {
+        id: contextMenuLoader
+        active: false
+        onLoaded: item.popup()
+    }
+}

src/gui/Base/HTile/HTileDelegate.qml

@@ -2,6 +2,7 @@
 
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
+import ".."
 
 HTile {
     id: tile

src/gui/Base/HTile/SubtitleLabel.qml

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import ".."
+
+HRichLabel {
+    textFormat: Text.StyledText
+    font.pixelSize: theme.fontSize.small
+    verticalAlignment: Qt.AlignVCenter
+    elide: Text.ElideRight
+    color: theme.colors.dimText
+    visible: Layout.maximumHeight > 0
+
+    Layout.maximumHeight: ! tile.compact && text ? implicitHeight : 0
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+
+
+    property HTile tile
+
+
+    Behavior on Layout.maximumHeight { HNumberAnimation {} }
+}

src/gui/Base/HTile/TitleLabel.qml

@@ -0,0 +1,13 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import ".."
+
+HLabel {
+    elide: Text.ElideRight
+    verticalAlignment: Qt.AlignVCenter
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+}

src/gui/Base/HTile/TitleRightInfoLabel.qml

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import ".."
+
+HLabel {
+    font.pixelSize: theme.fontSize.small
+    verticalAlignment: Qt.AlignVCenter
+    color: theme.colors.halfDimText
+    visible: Layout.maximumWidth > 0
+
+    Layout.fillHeight: true
+    Layout.maximumWidth:
+        text && tile.width >= 200 * theme.uiScale ?
+        implicitWidth : 0
+
+
+    property HTile tile
+
+
+    Behavior on Layout.maximumWidth { HNumberAnimation {} }
+}

src/gui/MainPane/Account.qml

@@ -4,6 +4,7 @@ import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import Clipboard 0.1
 import "../Base"
+import "../Base/HTile"
 
 HTileDelegate {
     id: account
@@ -12,91 +13,35 @@ HTileDelegate {
     opacity: collapsed && ! mainPane.filter ?
              theme.mainPane.listView.account.collapsedOpacity : 1
 
-    title.text: model.display_name || model.id
+    contentItem: ContentRow {
-    title.font.pixelSize: theme.fontSize.big
+        tile: account
-    title.color:
-        hovered ?
-        utils.nameColor(model.display_name || model.id.substring(1)) :
-        theme.mainPane.listView.account.name
 
-    image: HUserAvatar {
+        HUserAvatar {
-        userId: model.id
+            id: avatar
-        displayName: model.display_name
+            userId: model.id
-        mxc: model.avatar_url
+            displayName: model.display_name
-        compact: account.compact
+            mxc: model.avatar_url
+            compact: account.compact
 
-        radius:
+            radius:
-            mainPane.small ?
+                mainPane.small ?
-            theme.mainPane.listView.account.collapsedAvatarRadius :
+                theme.mainPane.listView.account.collapsedAvatarRadius :
-            theme.mainPane.listView.account.avatarRadius
+                theme.mainPane.listView.account.avatarRadius
 
-        Behavior on radius { HNumberAnimation {} }
+            Behavior on radius { HNumberAnimation {} }
-    }
-
-    contextMenu: HMenu {
-        HMenuItem {
-            icon.name: "copy-user-id"
-            text: qsTr("Copy user ID")
-            onTriggered: Clipboard.text = model.id
         }
 
-        HMenuItemPopupSpawner {
+        TitleLabel {
-            icon.name: "sign-out"
+            text: model.display_name || model.id
-            icon.color: theme.colors.negativeBackground
+            font.pixelSize: theme.fontSize.big
-            text: qsTr("Sign out")
+            color:
+                hovered ?
+                utils.nameColor(model.display_name || model.id.substring(1)) :
+                theme.mainPane.listView.account.name
 
-            popup: "Popups/SignOutPopup.qml"
+            Behavior on color { HColorAnimation {} }
-            properties: { "userId": model.id }
         }
-    }
 
-    onActivated: {
-        pageLoader.showPage(
-            "AccountSettings/AccountSettings", { "userId": model.id }
-        )
-        mainPaneList.detachedCurrentIndex = false
-        mainPaneList.centerToHighlight    = false
-    }
-
-
-    readonly property alias addChat: addChat
-
-    readonly property bool collapsed:
-        (window.uiState.collapseAccounts[model.id] || false) &&
-        ! mainPane.filter
-
-
-    function setCollapse(collapse) {
-        window.uiState.collapseAccounts[model.id] = collapse
-        window.uiStateChanged()
-    }
-
-    function toggleCollapse() {
-        setCollapse(! collapsed)
-    }
-
-
-    Behavior on title.color { HColorAnimation {} }
-    Behavior on opacity { HNumberAnimation {} }
-    Behavior on leftPadding { HNumberAnimation {} }
-    Behavior on topPadding { HNumberAnimation {} }
-
-    Binding on leftPadding {
-        value: (mainPane.minimumSize - loadedImage.width) / 2
-        when: mainPane.small
-    }
-
-    Binding on topPadding {
-        value: theme.spacing
-        when: mainPane.small
-    }
-
-    Binding on bottomPadding {
-        value: theme.spacing
-        when: mainPane.small
-    }
-
-    HRowLayout {
         HButton {
             id: addChat
             iconItem.small: true
@@ -154,4 +99,66 @@ HTileDelegate {
             Behavior on opacity { HNumberAnimation {} }
         }
     }
+
+    contextMenu: HMenu {
+        HMenuItem {
+            icon.name: "copy-user-id"
+            text: qsTr("Copy user ID")
+            onTriggered: Clipboard.text = model.id
+        }
+
+        HMenuItemPopupSpawner {
+            icon.name: "sign-out"
+            icon.color: theme.colors.negativeBackground
+            text: qsTr("Sign out")
+
+            popup: "Popups/SignOutPopup.qml"
+            properties: { "userId": model.id }
+        }
+    }
+
+    onActivated: {
+        pageLoader.showPage(
+            "AccountSettings/AccountSettings", { "userId": model.id }
+        )
+        mainPaneList.detachedCurrentIndex = false
+        mainPaneList.centerToHighlight    = false
+    }
+
+
+    readonly property alias addChat: addChat
+
+    readonly property bool collapsed:
+        (window.uiState.collapseAccounts[model.id] || false) &&
+        ! mainPane.filter
+
+
+    function setCollapse(collapse) {
+        window.uiState.collapseAccounts[model.id] = collapse
+        window.uiStateChanged()
+    }
+
+    function toggleCollapse() {
+        setCollapse(! collapsed)
+    }
+
+
+    Behavior on opacity { HNumberAnimation {} }
+    Behavior on leftPadding { HNumberAnimation {} }
+    Behavior on topPadding { HNumberAnimation {} }
+
+    Binding on leftPadding {
+        value: (mainPane.minimumSize - avatar.width) / 2
+        when: mainPane.small
+    }
+
+    Binding on topPadding {
+        value: theme.spacing
+        when: mainPane.small
+    }
+
+    Binding on bottomPadding {
+        value: theme.spacing
+        when: mainPane.small
+    }
 }

src/gui/MainPane/Room.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts 1.12
 import Clipboard 0.1
 import ".."
 import "../Base"
+import "../Base/HTile"
 
 HTileDelegate {
     id: room
@@ -16,94 +17,118 @@ HTileDelegate {
     leftPadding: theme.spacing * 2
     rightPadding: theme.spacing
 
-    image: HRoomAvatar {
+    contentItem: ContentRow {
-        roomId: model.id
+        tile: room
-        displayName: model.display_name
-        mxc: model.avatar_url
-        compact: room.compact
 
-        radius:
+        HRoomAvatar {
-            mainPane.small ?
+            id: avatar
-            theme.mainPane.listView.room.collapsedAvatarRadius :
+            roomId: model.id
-            theme.mainPane.listView.room.avatarRadius
+            displayName: model.display_name
+            mxc: model.avatar_url
+            compact: room.compact
 
-        Behavior on radius { HNumberAnimation {} }
+            radius:
-    }
+                mainPane.small ?
+                theme.mainPane.listView.room.collapsedAvatarRadius :
+                theme.mainPane.listView.room.avatarRadius
 
-    title.color: theme.mainPane.listView.room.name
+            Behavior on radius { HNumberAnimation {} }
-    title.text: model.display_name || qsTr("Empty room")
-
-    additionalInfo.children: [
-        // HLabel {
-        //     text: model.mentions
-        //     font.pixelSize: theme.fontSize.small
-        //     verticalAlignment: Qt.AlignVCenter
-        //     leftPadding: theme.spacing / 4
-        //     rightPadding: leftPadding
-
-        //     scale: model.mentions === 0 ? 0 : 1
-        //     visible: scale > 0
-
-        //     background: Rectangle {
-        //         color: theme.colors.alertBackground
-        //         radius: theme.radius / 4
-        //     }
-
-        //     Behavior on scale { HNumberAnimation {} }
-        // },
-
-        HIcon {
-            svgName: "invite-received"
-            colorize: theme.colors.alertBackground
-            small: room.compact
-            visible: invited
-
-            Layout.maximumWidth: invited ? implicitWidth : 0
-
-            Behavior on Layout.maximumWidth { HNumberAnimation {} }
         }
-    ]
 
-    subtitle.color: theme.mainPane.listView.room.subtitle
+        HColumnLayout {
-    subtitle.textFormat: Text.StyledText
+            HRowLayout {
-    subtitle.font.italic:
+                spacing: room.spacing
-        lastEvent && lastEvent.event_type === "RoomMessageEmote"
-    subtitle.text: {
-        if (! lastEvent) return ""
 
-        const isEmote      = lastEvent.event_type === "RoomMessageEmote"
+                TitleLabel {
-        const isMsg        = lastEvent.event_type.startsWith("RoomMessage")
+                    text: model.display_name || qsTr("Empty room")
-        const isUnknownMsg = lastEvent.event_type === "RoomMessageUnknown"
+                    color: theme.mainPane.listView.room.name
-        const isCryptMedia = lastEvent.event_type.startsWith("RoomEncrypted")
+                }
 
-        // If it's a general event
+                // HLabel {
-        if (isEmote || isUnknownMsg || (! isMsg && ! isCryptMedia))
+                //     text: model.mentions
-            return utils.processedEventText(lastEvent)
+                //     font.pixelSize: theme.fontSize.small
+                //     verticalAlignment: Qt.AlignVCenter
+                //     leftPadding: theme.spacing / 4
+                //     rightPadding: leftPadding
 
-        const text = utils.coloredNameHtml(
+                //     scale: model.mentions === 0 ? 0 : 1
-            lastEvent.sender_name, lastEvent.sender_id
+                //     visible: scale > 0
-        ) + ": " + lastEvent.inline_content
 
-        return text.replace(
+                //     background: Rectangle {
-            /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,
+                //         color: theme.colors.alertBackground
-            `<font color="${theme.mainPane.listView.room.subtitleQuote}">` +
+                //         radius: theme.radius / 4
-            `$1</font>`,
+                //     }
-        )
-    }
 
-    rightInfo.color: theme.mainPane.listView.room.lastEventDate
+                //     Behavior on scale { HNumberAnimation {} }
-    rightInfo.text: {
+                // },
-        model.last_event_date < new Date(1) ?
-        "" :
 
-        utils.dateIsToday(model.last_event_date) ?
+                HIcon {
-        utils.formatTime(model.last_event_date, false) :  // no seconds
+                    svgName: "invite-received"
+                    colorize: theme.colors.alertBackground
+                    small: room.compact
+                    visible: invited
 
-        model.last_event_date.getFullYear() === new Date().getFullYear() ?
+                    Layout.maximumWidth: invited ? implicitWidth : 0
-        Qt.formatDate(model.last_event_date, "d MMM") :  // e.g. "5 Dec"
 
-        // model.last_event_date.getFullYear() ?
+                    Behavior on Layout.maximumWidth { HNumberAnimation {} }
-        Qt.formatDate(model.last_event_date, "MMM yyyy")  // e.g. "Jan 2020"
+                }
+
+                TitleRightInfoLabel {
+                    tile: room
+                    color: theme.mainPane.listView.room.lastEventDate
+                    text: {
+                        model.last_event_date < new Date(1) ?
+                        "" :
+
+                        // e.g. "03:24"
+                        utils.dateIsToday(model.last_event_date) ?
+                        utils.formatTime(model.last_event_date, false) :
+
+                        // e.g. "5 Dec"
+                        model.last_event_date.getFullYear() ===
+                        new Date().getFullYear() ?
+                        Qt.formatDate(model.last_event_date, "d MMM") :
+
+                        // e.g. "Jan 2020"
+                        Qt.formatDate(model.last_event_date, "MMM yyyy")
+                    }
+                }
+            }
+
+            SubtitleLabel {
+                tile: room
+                color: theme.mainPane.listView.room.subtitle
+                textFormat: Text.StyledText
+                font.italic:
+                    lastEvent && lastEvent.event_type === "RoomMessageEmote"
+
+                text: {
+                    if (! lastEvent) return ""
+
+                    const ev_type      = lastEvent.event_type
+                    const isEmote      = ev_type === "RoomMessageEmote"
+                    const isMsg        = ev_type.startsWith("RoomMessage")
+                    const isUnknownMsg = ev_type === "RoomMessageUnknown"
+                    const isCryptMedia = ev_type.startsWith("RoomEncrypted")
+
+                    // If it's a general event
+                    if (isEmote || isUnknownMsg || (! isMsg && ! isCryptMedia))
+                        return utils.processedEventText(lastEvent)
+
+                    const text = utils.coloredNameHtml(
+                        lastEvent.sender_name, lastEvent.sender_id
+                    ) + ": " + lastEvent.inline_content
+
+                    const subColor = theme.mainPane.listView.room.subtitleQuote
+
+                    return text.replace(
+                        /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,
+                        `<font color="${subColor}">` +
+                        `$1</font>`,
+                    )
+                }
+            }
+        }
     }
 
     contextMenu: HMenu {
@@ -194,7 +219,7 @@ HTileDelegate {
     Behavior on leftPadding { HNumberAnimation {} }
 
     Binding on leftPadding {
-        value: (mainPane.minimumSize - loadedImage.width) / 2
+        value: (mainPane.minimumSize - avatar.width) / 2
         when: mainPane.small
     }
 

src/gui/Pages/Chat/RoomPane/MemberDelegate.qml

@@ -3,32 +3,49 @@
 import QtQuick 2.12
 import Clipboard 0.1
 import "../../../Base"
+import "../../../Base/HTile"
 
 HTileDelegate {
-    id: memberDelegate
+    id: member
     backgroundColor: theme.chat.roomPane.listView.member.background
     contentOpacity:
         model.invited ? theme.chat.roomPane.listView.member.invitedOpacity : 1
 
-    image: HUserAvatar {
+    contentItem: ContentRow {
-        userId: model.id
+        tile: member
-        displayName: model.display_name
+
-        mxc: model.avatar_url
+        HUserAvatar {
-        powerLevel: model.power_level
+            id: avatar
-        shiftMembershipIconPosition: ! roomPane.collapsed
+            userId: model.id
-        invited: model.invited
+            displayName: model.display_name
-        compact: memberDelegate.compact
+            mxc: model.avatar_url
+            powerLevel: model.power_level
+            shiftMembershipIconPosition: ! roomPane.collapsed
+            invited: model.invited
+            compact: member.compact
+        }
+
+        HColumnLayout {
+            TitleLabel {
+                text: model.display_name || model.id
+                color:
+                    member.hovered ?
+                    utils.nameColor(
+                        model.display_name || model.id.substring(1)
+                    ) :
+                    theme.chat.roomPane.listView.member.name
+
+                Behavior on color { HColorAnimation {} }
+            }
+
+            SubtitleLabel {
+                tile: member
+                text: model.display_name ? model.id : ""
+                color: theme.chat.roomPane.listView.member.subtitle
+            }
+        }
     }
 
-    title.text: model.display_name || model.id
-    title.color:
-        memberDelegate.hovered ?
-        utils.nameColor(model.display_name || model.id.substring(1)) :
-        theme.chat.roomPane.listView.member.name
-
-    subtitle.text: model.display_name ? model.id : ""
-    subtitle.color: theme.chat.roomPane.listView.member.subtitle
-
     contextMenu: HMenu {
         HMenuItem {
             icon.name: "copy-user-id"
@@ -38,13 +55,11 @@ HTileDelegate {
     }
 
 
-    Behavior on title.color { HColorAnimation {} }
     Behavior on contentOpacity { HNumberAnimation {} }
     Behavior on spacing { HNumberAnimation {} }
 
     Binding on spacing {
-        value: (roomPane.minimumSize - loadedImage.width) / 2
+        value: (roomPane.minimumSize - avatar.width) / 2
-        when: loadedImage &&
+        when: avatar && roomPane.width < avatar.width + theme.spacing * 2
-              roomPane.width < loadedImage.width + theme.spacing * 2
     }
 }

src/gui/Pages/Chat/Timeline/EventFile.qml

@@ -4,6 +4,7 @@ import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import CppUtils 0.1
 import "../../../Base"
+import "../../../Base/HTile"
 
 HTile {
     id: file
@@ -14,12 +15,27 @@ HTile {
     )
     height: Math.max(theme.chat.message.avatarSize, implicitHeight)
 
-    title.text: loader.singleMediaInfo.media_title || qsTr("Untitled file")
+    contentItem: ContentRow {
-    title.elide: Text.ElideMiddle
+        tile: file
-    subtitle.text: CppUtils.formattedBytes(loader.singleMediaInfo.media_size)
 
-    image: HIcon {
+        HIcon {
-        svgName: "download"
+            svgName: "download"
+        }
+
+        HColumnLayout {
+            TitleLabel {
+                elide: Text.ElideMiddle
+                text: loader.singleMediaInfo.media_title ||
+                      qsTr("Untitled file")
+            }
+
+            SubtitleLabel {
+                tile: file
+                text: CppUtils.formattedBytes(
+                    loader.singleMediaInfo.media_size,
+                )
+            }
+        }
     }
 
     onRightClicked: eventDelegate.openContextMenu()