Room Directory UI for exploring and joining public rooms. V1: simplistic server + network facilities
This commit is contained in:
kamathmanu
parent
0d700d9933
commit
93f8c24fc5
|
|
@ -0,0 +1,155 @@
|
|||
// SPDX-FileCopyrightText: 2021 Nheko Contributors
|
||||
//
|
||||
// SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.3
|
||||
import QtQuick.Layouts 1.3
|
||||
import im.nheko 1.0
|
||||
import im.nheko.RoomDirectoryModel 1.0
|
||||
|
||||
ApplicationWindow {
|
||||
id: roomDirectoryWindow
|
||||
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
|
||||
title: qsTr("Explore Public Rooms")
|
||||
|
||||
header: RowLayout {
|
||||
id: searchBarLayout
|
||||
spacing: Nheko.paddingMedium
|
||||
width: parent.width
|
||||
|
||||
implicitHeight: roomTextInput.height
|
||||
|
||||
MatrixTextField {
|
||||
id: roomSearch
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
font.pixelSize: fontMetrics.font.pixelSize
|
||||
padding: Nheko.paddingSmall
|
||||
color: Nheko.colors.text
|
||||
placeholderText: qsTr("Search for public rooms")
|
||||
onTextChanged: searchTimer.restart()
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: searchTimer
|
||||
|
||||
interval: 350
|
||||
onTriggered: roomDirView.model.setSearchTerm(roomSearch.text)
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: roomDirView
|
||||
anchors.fill: parent
|
||||
height: parent.height - searchBarLayout.height
|
||||
model: RoomDirectoryModel {
|
||||
id: roomDir
|
||||
}
|
||||
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: Math.ceil(fontMetrics.lineSpacing * 2.5)
|
||||
|
||||
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.AlignLeft
|
||||
Layout.preferredHeight: Math.max(roomTopic.height, roomCount.height, joinRoomButton.height)
|
||||
|
||||
Label {
|
||||
id: roomTopic
|
||||
color: roomDirDelegate.unimportantText
|
||||
font.weight: Font.Thin
|
||||
font.pixelSize: fontMetrics.font.pixelSize
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 2
|
||||
Layout.fillWidth: true
|
||||
text: model.topic
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
Label {
|
||||
id: roomCount
|
||||
color: roomDirDelegate.unimportantText
|
||||
Layout.fillWidth: false
|
||||
font.weight: Font.Thin
|
||||
font.pixelSize: fontMetrics.font.pixelSize
|
||||
text: model.numMembers.toString()
|
||||
}
|
||||
|
||||
Button {
|
||||
id: joinRoomButton
|
||||
Layout.fillWidth: false
|
||||
text: "Join"
|
||||
Layout.margins: Nheko.paddingSmall
|
||||
onClicked: roomDir.joinRoom(model.index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -549,6 +556,11 @@ Page {
|
|||
ToolTip.visible: hovered
|
||||
ToolTip.text: qsTr("Room directory")
|
||||
Layout.margins: Nheko.paddingMedium
|
||||
onClicked: {
|
||||
console.debug("Roomdir clicked");
|
||||
var win = roomDirectoryComponent.createObject(timelineRoot);
|
||||
win.show();
|
||||
}
|
||||
}
|
||||
|
||||
ImageButton {
|
||||
|
|
|
|||
|
|
@ -143,7 +143,8 @@
|
|||
<file>qml/emoji/EmojiPicker.qml</file>
|
||||
<file>qml/emoji/StickerPicker.qml</file>
|
||||
<file>qml/UserProfile.qml</file>
|
||||
<file>qml/delegates/MessageDelegate.qml</file>
|
||||
<file>qml/RoomDirectory.qml</file>
|
||||
<file>qml/delegates/MessageDelegate.qml</file>
|
||||
<file>qml/delegates/TextMessage.qml</file>
|
||||
<file>qml/delegates/NoticeMessage.qml</file>
|
||||
<file>qml/delegates/ImageMessage.qml</file>
|
||||
|
|
|
|||
Loading…
Reference in New Issue