make room directory fit mobile screens

This commit is contained in:
Malte E 2022-02-21 22:27:35 +01:00
parent 46fbb0e749
commit 3d8e5c0028

View file

@ -16,8 +16,10 @@ ApplicationWindow {
property RoomDirectoryModel publicRooms property RoomDirectoryModel publicRooms
visible: true visible: true
minimumWidth: 650 minimumWidth: 340
minimumHeight: 420 minimumHeight: 340
height: 420
width: 650
palette: Nheko.colors palette: Nheko.colors
color: Nheko.colors.window color: Nheko.colors.window
modality: Qt.WindowModal modality: Qt.WindowModal
@ -38,7 +40,6 @@ ApplicationWindow {
ScrollHelper { ScrollHelper {
flickable: parent flickable: parent
anchors.fill: parent anchors.fill: parent
enabled: !Settings.mobileMode
} }
delegate: Rectangle { delegate: Rectangle {
@ -47,7 +48,7 @@ ApplicationWindow {
property color background: Nheko.colors.window property color background: Nheko.colors.window
property color importantText: Nheko.colors.text property color importantText: Nheko.colors.text
property color unimportantText: Nheko.colors.buttonText property color unimportantText: Nheko.colors.buttonText
property int avatarSize: fontMetrics.lineSpacing * 4 property int avatarSize: fontMetrics.height * 3.2
color: background color: background
height: avatarSize + Nheko.paddingLarge height: avatarSize + Nheko.paddingLarge
@ -56,13 +57,14 @@ ApplicationWindow {
RowLayout { RowLayout {
spacing: Nheko.paddingMedium spacing: Nheko.paddingMedium
anchors.fill: parent anchors.fill: parent
anchors.margins: Nheko.paddingLarge anchors.margins: Nheko.paddingMedium
implicitHeight: textContent.height implicitHeight: textContent.implicitHeight
Avatar { Avatar {
id: roomAvatar id: roomAvatar
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: Nheko.paddingMedium
width: avatarSize width: avatarSize
height: avatarSize height: avatarSize
url: model.avatarUrl.replace("mxc://", "image://MxcImage/") url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
@ -70,36 +72,31 @@ ApplicationWindow {
displayName: model.name displayName: model.name
} }
ColumnLayout { GridLayout {
id: textContent id: textContent
rows: 2
columns: 2
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
width: parent.width - avatar.width width: parent.width - avatar.width
Layout.preferredWidth: parent.width - avatar.width Layout.preferredWidth: parent.width - avatar.width
spacing: Nheko.paddingSmall
ElidedLabel { ElidedLabel {
Layout.alignment: Qt.AlignBottom Layout.row: 0
Layout.column: 0
Layout.fillWidth:true
color: roomDirDelegate.importantText color: roomDirDelegate.importantText
elideWidth: textContent.width - numMembersRectangle.width - buttonRectangle.width elideWidth: width
font.pixelSize: fontMetrics.font.pixelSize * 1.1
fullText: model.name fullText: model.name
} }
RowLayout {
id: roomDescriptionRow
Layout.preferredWidth: parent.width
spacing: Nheko.paddingSmall
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.preferredHeight: fontMetrics.lineSpacing * 4
Label { Label {
id: roomTopic id: roomTopic
color: roomDirDelegate.unimportantText color: roomDirDelegate.unimportantText
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.row: 1
font.pixelSize: fontMetrics.font.pixelSize Layout.column: 0
font.pointSize: fontMetrics.font.pointSize*0.9
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 2 maximumLineCount: 2
Layout.fillWidth: true Layout.fillWidth: true
@ -108,34 +105,22 @@ ApplicationWindow {
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
Item {
id: numMembersRectangle
Layout.margins: Nheko.paddingSmall
width: roomCount.width
Label { Label {
Layout.alignment: Qt.AlignHCenter
Layout.row: 0
Layout.column: 1
id: roomCount id: roomCount
color: roomDirDelegate.unimportantText color: roomDirDelegate.unimportantText
anchors.centerIn: parent font.pointSize: fontMetrics.font.pointSize*0.9
font.pixelSize: fontMetrics.font.pixelSize
text: model.numMembers.toString() text: model.numMembers.toString()
} }
}
Item {
id: buttonRectangle
Layout.margins: Nheko.paddingSmall
width: joinRoomButton.width
Button { Button {
Layout.row: 1
Layout.column: 1
id: joinRoomButton id: joinRoomButton
enabled: model.canJoin
visible: model.canJoin
anchors.centerIn: parent
text: "Join" text: "Join"
onClicked: publicRooms.joinRoom(model.index) onClicked: publicRooms.joinRoom(model.index)
} }
@ -146,10 +131,6 @@ ApplicationWindow {
} }
}
}
footer: Item { footer: Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: parent.width width: parent.width