Basic header and footer of room list
5 files changed, 199 insertions, 10 deletions
diff --git a/resources/qml/ChatPage.qml b/resources/qml/ChatPage.qml
index a02f0ca9..fc6137a6 100644
--- a/resources/qml/ChatPage.qml
+++ b/resources/qml/ChatPage.qml
@@ -19,14 +19,14 @@ Rectangle {
SplitView.minimumWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
SplitView.preferredWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
SplitView.maximumWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
- color: "blue"
+ color: Nheko.theme.sidebarBackground
}
- Rectangle {
- SplitView.minimumWidth: Nheko.avatarSize * 3 + Nheko.paddingSmall * 2
- SplitView.preferredWidth: Nheko.avatarSize * 3 + Nheko.paddingSmall * 2
- SplitView.maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
- color: "red"
+ RoomList {
+ //SplitView.maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
+
+ SplitView.minimumWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
+ SplitView.preferredWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
}
TimelineView {
@@ -36,6 +36,11 @@ Rectangle {
SplitView.minimumWidth: 400
}
+ handle: Rectangle {
+ implicitWidth: 2
+ color: SplitHandle.pressed ? Nheko.colors.highlight : (SplitHandle.hovered ? Nheko.colors.light : Nheko.theme.separator)
+ }
+
}
PrivacyScreen {
diff --git a/resources/qml/RoomList.qml b/resources/qml/RoomList.qml
new file mode 100644
index 00000000..25abb4d1
--- /dev/null
+++ b/resources/qml/RoomList.qml
@@ -0,0 +1,183 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.9
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.3
+import im.nheko 1.0
+
+Page {
+
+ background: Rectangle {
+ color: Nheko.theme.sidebarBackground
+ }
+
+ header: ColumnLayout {
+ spacing: 0
+
+ Rectangle {
+ color: Nheko.colors.window
+ Layout.fillWidth: true
+ Layout.alignment: Qt.AlignBottom
+ Layout.preferredHeight: userInfoGrid.implicitHeight + 2 * Nheko.paddingMedium
+ Layout.minimumHeight: 40
+
+ RowLayout {
+ id: userInfoGrid
+
+ spacing: Nheko.paddingMedium
+ anchors.fill: parent
+ anchors.margins: Nheko.paddingMedium
+
+ Avatar {
+ id: avatar
+
+ Layout.alignment: Qt.AlignVCenter
+ Layout.preferredWidth: Nheko.avatarSize
+ Layout.preferredHeight: Nheko.avatarSize
+ url: Nheko.currentUser.avatarUrl.replace("mxc://", "image://MxcImage/")
+ displayName: Nheko.currentUser.displayName
+ userid: Nheko.currentUser.userid
+ }
+
+ ColumnLayout {
+ id: col
+
+ Layout.alignment: Qt.AlignLeft
+ Layout.fillWidth: true
+ Layout.minimumWidth: 100
+ width: parent.width - avatar.width - logoutButton.width
+ Layout.preferredWidth: parent.width - avatar.width - logoutButton.width
+ spacing: 0
+
+ Label {
+ Layout.alignment: Qt.AlignBottom
+ color: Nheko.colors.text
+ font.pointSize: fontMetrics.font.pointSize * 1.1
+ font.weight: Font.DemiBold
+ text: userNameText.elidedText
+ maximumLineCount: 1
+ elide: Text.ElideRight
+ textFormat: Text.PlainText
+
+ TextMetrics {
+ id: userNameText
+
+ font.pointSize: fontMetrics.font.pointSize * 1.1
+ elide: Text.ElideRight
+ elideWidth: col.width
+ text: Nheko.currentUser.displayName
+ }
+
+ }
+
+ Label {
+ Layout.alignment: Qt.AlignTop
+ color: Nheko.colors.buttonText
+ font.weight: Font.Thin
+ text: userIdText.elidedText
+ maximumLineCount: 1
+ textFormat: Text.PlainText
+ font.pointSize: fontMetrics.font.pointSize * 0.9
+
+ TextMetrics {
+ id: userIdText
+
+ font.pointSize: fontMetrics.font.pointSize * 0.9
+ elide: Text.ElideRight
+ elideWidth: col.width
+ text: Nheko.currentUser.userid
+ }
+
+ }
+
+ }
+
+ Item {
+ }
+
+ ImageButton {
+ id: logoutButton
+
+ Layout.alignment: Qt.AlignVCenter
+ image: ":/icons/icons/ui/power-button-off.png"
+ ToolTip.visible: hovered
+ ToolTip.text: qsTr("Logout")
+ }
+
+ }
+
+ }
+
+ Rectangle {
+ color: Nheko.theme.separator
+ height: 2
+ Layout.fillWidth: true
+ }
+
+ }
+
+ footer: ColumnLayout {
+ spacing: 0
+
+ Rectangle {
+ color: Nheko.theme.separator
+ height: 1
+ Layout.fillWidth: true
+ }
+
+ Rectangle {
+ color: Nheko.colors.window
+ Layout.fillWidth: true
+ Layout.alignment: Qt.AlignBottom
+ Layout.preferredHeight: buttonRow.implicitHeight
+ Layout.minimumHeight: 40
+
+ RowLayout {
+ id: buttonRow
+
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.margins: Nheko.paddingMedium
+
+ ImageButton {
+ Layout.alignment: Qt.AlignBottom | Qt.AlignLeft
+ hoverEnabled: true
+ width: 22
+ height: 22
+ image: ":/icons/icons/ui/plus-black-symbol.png"
+ ToolTip.visible: hovered
+ ToolTip.text: qsTr("Start a new chat")
+ Layout.margins: Nheko.paddingMedium
+ }
+
+ ImageButton {
+ Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter
+ hoverEnabled: true
+ width: 22
+ height: 22
+ image: ":/icons/icons/ui/speech-bubbles-comment-option.png"
+ ToolTip.visible: hovered
+ ToolTip.text: qsTr("Room directory")
+ Layout.margins: Nheko.paddingMedium
+ }
+
+ ImageButton {
+ Layout.alignment: Qt.AlignBottom | Qt.AlignRight
+ hoverEnabled: true
+ width: 22
+ height: 22
+ image: ":/icons/icons/ui/settings.png"
+ ToolTip.visible: hovered
+ ToolTip.text: qsTr("User settings")
+ Layout.margins: Nheko.paddingMedium
+ }
+
+ }
+
+ }
+
+ }
+
+}
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 0d0e286d..257d670d 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -49,7 +49,7 @@ Item {
Layout.fillWidth: true
height: 1
z: 3
- color: Nheko.colors.mid
+ color: Nheko.theme.separator
}
Rectangle {
@@ -112,7 +112,7 @@ Item {
Layout.fillWidth: true
z: 3
height: 1
- color: Nheko.colors.mid
+ color: Nheko.theme.separator
}
ReplyPopup {
diff --git a/resources/qml/TopBar.qml b/resources/qml/TopBar.qml
index d5bcb3a8..bda5ce14 100644
--- a/resources/qml/TopBar.qml
+++ b/resources/qml/TopBar.qml
@@ -14,7 +14,7 @@ Rectangle {
property var room: TimelineManager.timeline
Layout.fillWidth: true
- implicitHeight: topLayout.height + 16
+ implicitHeight: topLayout.height + Nheko.paddingMedium * 2
z: 3
color: Nheko.colors.window
@@ -33,7 +33,7 @@ Rectangle {
anchors.left: parent.left
anchors.right: parent.right
- anchors.margins: 8
+ anchors.margins: Nheko.paddingMedium
anchors.verticalCenter: parent.verticalCenter
ImageButton {
diff --git a/resources/res.qrc b/resources/res.qrc
index 8105e966..c146f2d9 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -125,6 +125,7 @@
<file>qml/Root.qml</file>
<file>qml/ChatPage.qml</file>
+ <file>qml/RoomList.qml</file>
<file>qml/TimelineView.qml</file>
<file>qml/Avatar.qml</file>
<file>qml/Completer.qml</file>
|
