Nheko room directory

CMakeLists.txt

@@ -359,6 +359,7 @@ set(SRC_FILES
 	src/TrayIcon.cpp
 	src/UserSettingsPage.cpp
 	src/UsersModel.cpp
+	src/RoomDirectoryModel.cpp
 	src/RoomsModel.cpp
 	src/Utils.cpp
 	src/WebRTCSession.cpp
@@ -564,6 +565,8 @@ qt5_wrap_cpp(MOC_HEADERS
 	src/TrayIcon.h
 	src/UserSettingsPage.h
 	src/UsersModel.h
+	src/RoomDirectoryModel.h
+	src/RoomsModel.h
 	src/WebRTCSession.h
 	src/WelcomePage.h
 	src/ReadReceiptsModel.h

resources/qml/RoomDirectory.qml

@@ -0,0 +1,216 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import "./ui"
+import QtQuick 2.9
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import im.nheko 1.0
+
+ApplicationWindow {
+    id: roomDirectoryWindow
+
+    property RoomDirectoryModel publicRooms
+
+    visible: true
+    x: MainWindow.x + (MainWindow.width / 2) - (width / 2)
+    y: MainWindow.y + (MainWindow.height / 2) - (height / 2)
+    minimumWidth: 650
+    minimumHeight: 420
+    palette: Nheko.colors
+    color: Nheko.colors.window
+    modality: Qt.WindowModal
+    flags: Qt.Dialog | Qt.WindowCloseButtonHint
+    title: qsTr("Explore Public Rooms")
+
+    Shortcut {
+        sequence: StandardKey.Cancel
+        onActivated: roomDirectoryWindow.close()
+    }
+
+    ListView {
+        id: roomDirView
+
+        anchors.fill: parent
+        model: publicRooms
+
+        delegate: Rectangle {
+            id: roomDirDelegate
+
+            property color background: Nheko.colors.window
+            property color importantText: Nheko.colors.text
+            property color unimportantText: Nheko.colors.buttonText
+            property int avatarSize: fontMetrics.lineSpacing * 4
+
+            color: background
+            height: avatarSize + 2.5 * Nheko.paddingMedium
+            width: ListView.view.width
+
+            RowLayout {
+                spacing: Nheko.paddingMedium
+                anchors.fill: parent
+                anchors.margins: Nheko.paddingMedium
+                implicitHeight: textContent.height
+
+                Avatar {
+                    id: roomAvatar
+
+                    Layout.alignment: Qt.AlignVCenter
+                    width: avatarSize
+                    height: avatarSize
+                    url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
+                    displayName: model.name
+                }
+
+                ColumnLayout {
+                    id: textContent
+
+                    Layout.alignment: Qt.AlignLeft
+                    Layout.fillWidth: true
+                    width: parent.width - avatar.width
+                    Layout.preferredWidth: parent.width - avatar.width
+                    Layout.preferredHeight: roomNameRow.height + roomDescriptionRow.height
+                    spacing: Nheko.paddingSmall
+
+                    RowLayout {
+                        id: roomNameRow
+
+                        Layout.fillWidth: true
+                        spacing: 0
+
+                        ElidedLabel {
+                            Layout.alignment: Qt.AlignBottom
+                            color: roomDirDelegate.importantText
+                            elideWidth: textContent.width * 0.5 - Nheko.paddingMedium
+                            font.pixelSize: fontMetrics.font.pixelSize * 1.1
+                            fullText: model.name
+                        }
+
+                    }
+
+                    RowLayout {
+                        id: roomDescriptionRow
+
+                        Layout.fillWidth: true
+                        Layout.preferredWidth: parent.width
+                        spacing: Nheko.paddingSmall
+                        Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                        Layout.preferredHeight: fontMetrics.lineSpacing * 4
+
+                        Label {
+                            id: roomTopic
+
+                            color: roomDirDelegate.unimportantText
+                            font.weight: Font.Thin
+                            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                            font.pixelSize: fontMetrics.font.pixelSize
+                            elide: Text.ElideRight
+                            maximumLineCount: 2
+                            Layout.fillWidth: true
+                            text: model.topic
+                            verticalAlignment: Text.AlignVCenter
+                            wrapMode: Text.WordWrap
+                        }
+
+                        Item {
+                            id: numMembersRectangle
+
+                            Layout.fillWidth: false
+                            Layout.margins: Nheko.paddingSmall
+                            width: roomCount.width
+
+                            Label {
+                                id: roomCount
+
+                                color: roomDirDelegate.unimportantText
+                                anchors.centerIn: parent
+                                Layout.fillWidth: false
+                                font.weight: Font.Thin
+                                font.pixelSize: fontMetrics.font.pixelSize
+                                text: model.numMembers.toString()
+                            }
+
+                        }
+
+                        Item {
+                            id: buttonRectangle
+
+                            Layout.fillWidth: false
+                            Layout.margins: Nheko.paddingSmall
+                            width: joinRoomButton.width
+
+                            Button {
+                                id: joinRoomButton
+
+                                visible: publicRooms.canJoinRoom(model.roomid)
+                                anchors.centerIn: parent
+                                width: Math.ceil(0.1 * roomDirectoryWindow.width)
+                                text: "Join"
+                                onClicked: publicRooms.joinRoom(model.index)
+                            }
+
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+        footer: Item {
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
+            visible: (publicRooms.reachedEndOfPagination == false) && publicRooms.loadingMoreRooms
+            // hacky but works
+            height: loadingSpinner.height + 2 * Nheko.paddingLarge
+            anchors.margins: Nheko.paddingLarge
+
+            Spinner {
+                id: loadingSpinner
+
+                anchors.centerIn: parent
+                anchors.margins: Nheko.paddingLarge
+                running: visible
+                foreground: Nheko.colors.mid
+                z: 7
+            }
+
+        }
+
+    }
+
+    publicRooms: RoomDirectoryModel {
+    }
+
+    header: RowLayout {
+        id: searchBarLayout
+
+        spacing: Nheko.paddingMedium
+        width: parent.width
+        implicitHeight: roomSearch.height
+
+        MatrixTextField {
+            id: roomSearch
+
+            Layout.fillWidth: true
+            selectByMouse: true
+            font.pixelSize: fontMetrics.font.pixelSize
+            padding: Nheko.paddingMedium
+            color: Nheko.colors.text
+            placeholderText: qsTr("Search for public rooms")
+            onTextChanged: searchTimer.restart()
+        }
+
+        Timer {
+            id: searchTimer
+
+            interval: 350
+            onTriggered: roomDirView.model.setSearchTerm(roomSearch.text)
+        }
+
+    }
+
+}

resources/qml/RoomList.qml

@@ -16,6 +16,13 @@ Page {
     property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 2.3)
     property bool collapsed: false
 
+Component {
+        id: roomDirectoryComponent
+
+        RoomDirectory {
+        }
+    }	
+
     ListView {
         id: roomlist
 
@@ -557,6 +564,10 @@ Page {
                     ToolTip.visible: hovered
                     ToolTip.text: qsTr("Room directory")
                     Layout.margins: Nheko.paddingMedium
+			onClicked: {
+                        var win = roomDirectoryComponent.createObject(timelineRoot);
+                        win.show();
+                    } 
                 }
 
                 ImageButton {

resources/res.qrc

@@ -142,6 +142,7 @@
         <file>qml/emoji/EmojiPicker.qml</file>
         <file>qml/emoji/StickerPicker.qml</file>
         <file>qml/UserProfile.qml</file>
+        <file>qml/RoomDirectory.qml</file>
         <file>qml/delegates/MessageDelegate.qml</file>
         <file>qml/delegates/Encrypted.qml</file>
         <file>qml/delegates/FileMessage.qml</file>