Explore rooms page RoundedItemDelegate

Move the explore rooms page to using the new RoundedItemDelegate

src/models/publicroomlistmodel.cpp

@@ -171,7 +171,7 @@ QVariant PublicRoomListModel::data(const QModelIndex &index, int role) const
         return {};
     }
     auto room = rooms.at(index.row());
-    if (role == NameRole) {
+    if (role == DisplayNameRole) {
         auto displayName = room.name;
         if (!displayName.isEmpty()) {
             return displayName;
@@ -188,18 +188,17 @@ QVariant PublicRoomListModel::data(const QModelIndex &index, int role) const
 
         return room.roomId;
     }
-    if (role == AvatarRole) {
+    if (role == AvatarUrlRole) {
         auto avatarUrl = room.avatarUrl;
-
+        if (avatarUrl.isEmpty() || !m_connection) {
-        if (avatarUrl.isEmpty()) {
+            return QUrl();
-            return {};
         }
-        return avatarUrl.url().remove(0, 6);
+        return m_connection->makeMediaUrl(avatarUrl);
     }
     if (role == TopicRole) {
         return room.topic;
     }
-    if (role == RoomIDRole) {
+    if (role == RoomIdRole) {
         return room.roomId;
     }
     if (role == AliasRole) {
@@ -232,10 +231,10 @@ QHash<int, QByteArray> PublicRoomListModel::roleNames() const
 {
     QHash<int, QByteArray> roles;
 
-    roles[NameRole] = "name";
+    roles[DisplayNameRole] = "displayName";
-    roles[AvatarRole] = "avatar";
+    roles[AvatarUrlRole] = "avatarUrl";
     roles[TopicRole] = "topic";
-    roles[RoomIDRole] = "roomID";
+    roles[RoomIdRole] = "roomId";
     roles[MemberCountRole] = "memberCount";
     roles[AllowGuestsRole] = "allowGuests";
     roles[WorldReadableRole] = "worldReadable";

src/models/publicroomlistmodel.h

@@ -58,10 +58,10 @@ public:
      * @brief Defines the model roles.
      */
     enum EventRoles {
-        NameRole = Qt::DisplayRole + 1, /**< The name of the room. */
+        DisplayNameRole = Qt::DisplayRole + 1, /**< The name of the room. */
-        AvatarRole, /**< The source URL for the room's avatar. */
+        AvatarUrlRole, /**< The source URL for the room's avatar. */
         TopicRole, /**< The room topic. */
-        RoomIDRole, /**< The room matrix ID. */
+        RoomIdRole, /**< The room matrix ID. */
         AliasRole, /**< The room canonical alias. */
         MemberCountRole, /**< The number of members in the room. */
         AllowGuestsRole, /**< Whether the room allows guest users. */
@@ -76,7 +76,7 @@ public:
      *
      * @sa QAbstractItemModel::data
      */
-    [[nodiscard]] QVariant data(const QModelIndex &index, int role = NameRole) const override;
+    [[nodiscard]] QVariant data(const QModelIndex &index, int role = DisplayNameRole) const override;
 
     /**
      * @brief Number of rows in the model.

src/qml/Page/ExplorerDelegate.qml

@@ -0,0 +1,91 @@
+// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as Components
+
+import org.kde.neochat 1.0
+
+Delegates.RoundedItemDelegate {
+    id: root
+
+    required property NeoChatConnection connection
+    required property string roomId
+    required property string displayName
+    required property url avatarUrl
+    required property string alias
+    required property string topic
+    required property int memberCount
+    required property bool isJoined
+    property bool justJoined: false
+
+    signal roomSelected()
+
+    onClicked: {
+        if (!isJoined) {
+            Controller.joinRoom(root.roomId)
+            justJoined = true;
+        } else {
+            RoomManager.enterRoom(root.connection.room(root.roomId))
+        }
+        root.roomSelected()
+    }
+
+    contentItem: RowLayout {
+        Components.Avatar {
+            Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+            Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+            source: root.avatarUrl
+            name: root.displayName
+        }
+        ColumnLayout {
+            Layout.fillWidth: true
+            RowLayout {
+                Layout.fillWidth: true
+                Kirigami.Heading {
+                    Layout.fillWidth: true
+                    level: 4
+                    text: root.displayName
+                    font.bold: true
+                    textFormat: Text.PlainText
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
+                }
+                QQC2.Label {
+                    visible: root.isJoined || root.justJoined
+                    text: i18n("Joined")
+                    color: Kirigami.Theme.linkColor
+                }
+            }
+            QQC2.Label {
+                Layout.fillWidth: true
+                visible: text
+                text: root.topic ? root.topic.replace(/(\r\n\t|\n|\r\t)/gm," ") : ""
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                wrapMode: Text.NoWrap
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Kirigami.Icon {
+                    source: "user"
+                    color: Kirigami.Theme.disabledTextColor
+                    implicitHeight: Kirigami.Units.iconSizes.small
+                    implicitWidth: Kirigami.Units.iconSizes.small
+                }
+                QQC2.Label {
+                    text: root.memberCount + " " + (root.alias ?? root.roomId)
+                    color: Kirigami.Theme.disabledTextColor
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+}

src/qml/Page/JoinRoomPage.qml

@@ -195,6 +195,7 @@ Kirigami.ScrollablePage {
 
     ListView {
         id: publicRoomsListView
+        topMargin: Kirigami.Units.smallSpacing
         clip: true
         model: PublicRoomListModel {
             id: publicRoomListModel
@@ -208,70 +209,9 @@ Kirigami.ScrollablePage {
             if(publicRoomListModel.hasMore && contentHeight - contentY < publicRoomsListView.height + 200)
                 publicRoomListModel.next();
         }
-        delegate: Kirigami.AbstractListItem {
+        delegate: ExplorerDelegate {
-            property bool justJoined: false
+            connection: root.connection
-            width: publicRoomsListView.width
+            onRoomSelected: root.closeDialog()
-            onClicked: {
-                if (!isJoined) {
-                    Controller.joinRoom(roomID)
-                    justJoined = true;
-                } else {
-                    RoomManager.enterRoom(connection.room(roomID))
-                }
-                applicationWindow().pageStack.layers.pop();
-            }
-            contentItem: RowLayout {
-                KirigamiComponents.Avatar {
-                    Layout.preferredWidth: Kirigami.Units.gridUnit * 2
-                    Layout.preferredHeight: Kirigami.Units.gridUnit * 2
-
-                    source: model.avatar ? ("image://mxc/" + model.avatar) : ""
-                    name: model.name
-                }
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    RowLayout {
-                        Layout.fillWidth: true
-                        Kirigami.Heading {
-                            Layout.fillWidth: true
-                            level: 4
-                            text: name
-                            font.bold: true
-                            textFormat: Text.PlainText
-                            elide: Text.ElideRight
-                            wrapMode: Text.NoWrap
-                        }
-                        QQC2.Label {
-                            visible: isJoined || justJoined
-                            text: i18n("Joined")
-                            color: Kirigami.Theme.linkColor
-                        }
-                    }
-                    QQC2.Label {
-                        Layout.fillWidth: true
-                        visible: text
-                        text: topic ? topic.replace(/(\r\n\t|\n|\r\t)/gm," ") : ""
-                        textFormat: Text.PlainText
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                    }
-                    RowLayout {
-                        Layout.fillWidth: true
-                        Kirigami.Icon {
-                            source: "user"
-                            color: Kirigami.Theme.disabledTextColor
-                            implicitHeight: Kirigami.Units.iconSizes.small
-                            implicitWidth: Kirigami.Units.iconSizes.small
-                        }
-                        QQC2.Label {
-                            text: memberCount + " " + (alias ?? roomID)
-                            color: Kirigami.Theme.disabledTextColor
-                            elide: Text.ElideRight
-                            Layout.fillWidth: true
-                        }
-                    }
-                }
-            }
         }
 
         footer: RowLayout {

src/res.qrc

@@ -18,6 +18,7 @@
         <file alias="RoomPage.qml">qml/Page/RoomPage.qml</file>
         <file alias="RoomWindow.qml">qml/Page/RoomWindow.qml</file>
         <file alias="JoinRoomPage.qml">qml/Page/JoinRoomPage.qml</file>
+        <file alias="ExplorerDelegate.qml">qml/Page/ExplorerDelegate.qml</file>
         <file alias="InviteUserPage.qml">qml/Page/InviteUserPage.qml</file>
         <file alias="StartChatPage.qml">qml/Page/StartChatPage.qml</file>
         <file alias="ImageEditorPage.qml">qml/Page/ImageEditorPage.qml</file>