Explore rooms page RoundedItemDelegate

Move the explore rooms page to using the new RoundedItemDelegate
2023-09-10 09:00:57 +00:00
parent b2f592afeb
commit 323cd4962e
5 changed files with 109 additions and 78 deletions
--- a/src/models/publicroomlistmodel.cpp
+++ b/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()) {
-            return {};
+        if (avatarUrl.isEmpty() || !m_connection) {
+            return QUrl();
        }
-        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[AvatarRole] = "avatar";
+    roles[DisplayNameRole] = "displayName";
+    roles[AvatarUrlRole] = "avatarUrl";
    roles[TopicRole] = "topic";
-    roles[RoomIDRole] = "roomID";
+    roles[RoomIdRole] = "roomId";
    roles[MemberCountRole] = "memberCount";
    roles[AllowGuestsRole] = "allowGuests";
    roles[WorldReadableRole] = "worldReadable";
--- a/src/models/publicroomlistmodel.h
+++ b/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. */
-        AvatarRole, /**< The source URL for the room's avatar. */
+        DisplayNameRole = Qt::DisplayRole + 1, /**< The name of the room. */
+        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.
--- a/src/qml/Page/ExplorerDelegate.qml
+++ b/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
+                }
+            }
+        }
+    }
+}
--- a/src/qml/Page/JoinRoomPage.qml
+++ b/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 {
-            property bool justJoined: false
-            width: publicRoomsListView.width
-            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
-                        }
-                    }
-                }
-            }
+        delegate: ExplorerDelegate {
+            connection: root.connection
+            onRoomSelected: root.closeDialog()
        }

        footer: RowLayout {
--- a/src/res.qrc
+++ b/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>