From 97c1dda4ba42128a63c8ae6eeb0a79c6fd9b5ae1 Mon Sep 17 00:00:00 2001 From: miruka Date: Sun, 12 May 2019 13:17:42 -0400 Subject: [PATCH] Add a basic member list pane to rooms --- TODO.md | 1 - harmonyqml/components/Chat/Chat.qml | 90 +++++++++++-------- harmonyqml/components/Chat/RoomHeader.qml | 62 +++++++++++-- .../Chat/RoomSidePane/MemberDelegate.qml | 37 ++++++++ .../Chat/RoomSidePane/MembersView.qml | 30 +++++++ .../Chat/RoomSidePane/RoomSidePane.qml | 16 ++++ harmonyqml/components/UI.qml | 17 +++- harmonyqml/components/Window.qml | 2 + harmonyqml/engine.py | 5 +- harmonyqml/icons/add_room.svg | 1 - harmonyqml/icons/home.svg | 1 - harmonyqml/icons/reduced_room_buttons.svg | 1 + harmonyqml/icons/room_view_files.svg | 1 + harmonyqml/icons/room_view_history.svg | 1 + ...{add_account.svg => room_view_members.svg} | 0 harmonyqml/icons/room_view_notifications.svg | 1 + harmonyqml/icons/room_view_settings.svg | 1 + 17 files changed, 216 insertions(+), 51 deletions(-) create mode 100644 harmonyqml/components/Chat/RoomSidePane/MemberDelegate.qml create mode 100644 harmonyqml/components/Chat/RoomSidePane/MembersView.qml create mode 100644 harmonyqml/components/Chat/RoomSidePane/RoomSidePane.qml delete mode 100644 harmonyqml/icons/add_room.svg delete mode 100644 harmonyqml/icons/home.svg create mode 100644 harmonyqml/icons/reduced_room_buttons.svg create mode 100644 harmonyqml/icons/room_view_files.svg create mode 100644 harmonyqml/icons/room_view_history.svg rename harmonyqml/icons/{add_account.svg => room_view_members.svg} (100%) create mode 100644 harmonyqml/icons/room_view_notifications.svg create mode 100644 harmonyqml/icons/room_view_settings.svg diff --git a/TODO.md b/TODO.md index 42bc9b06..c3f9ad6f 100644 --- a/TODO.md +++ b/TODO.md @@ -1,7 +1,6 @@ - Refactoring - Migrate more JS functions to their own files / Implement in Python instead - Don't bake in size properties for components - - Cleanup unused icons - Bug fixes - dataclass-like `default_factory` for ListItem diff --git a/harmonyqml/components/Chat/Chat.qml b/harmonyqml/components/Chat/Chat.qml index da70b10b..da12c594 100644 --- a/harmonyqml/components/Chat/Chat.qml +++ b/harmonyqml/components/Chat/Chat.qml @@ -3,9 +3,9 @@ import QtQuick.Layouts 1.3 import "../Base" import "Banners" import "RoomEventList" -import "DetailsPane" +import "RoomSidePane" -HSplitView { +HColumnLayout { property string userId: "" property string category: "" property string roomId: "" @@ -32,46 +32,58 @@ HSplitView { } ) - HColumnLayout { + RoomHeader { + id: roomHeader + displayName: roomInfo.displayName + topic: roomInfo.topic || "" + Layout.fillWidth: true - - RoomHeader { - displayName: roomInfo.displayName - topic: roomInfo.topic || "" - } - - RoomEventList { - Layout.fillWidth: true - Layout.fillHeight: true - } - - TypingMembersBar {} - - InviteBanner { - visible: category === "Invites" - inviter: roomInfo.inviter - } - - UnknownDevicesBanner { - visible: category == "Rooms" && hasUnknownDevices - } - - SendBox { - id: sendBox - visible: category == "Rooms" && ! hasUnknownDevices - } - - LeftBanner { - visible: category === "Left" - leftEvent: roomInfo.leftEvent - } + Layout.preferredHeight: 32 } - DetailsPane { - property int parentWidth: parent.width - onParentWidthChanged: width = Math.min(parent.width * 0.3, 300) - Layout.minimumWidth: 36 - Layout.maximumWidth: parent.width + HSplitView { + Layout.fillWidth: true + Layout.fillHeight: true + + HColumnLayout { + Layout.fillWidth: true + + RoomEventList { + Layout.fillWidth: true + Layout.fillHeight: true + } + + TypingMembersBar {} + + InviteBanner { + visible: category === "Invites" + inviter: roomInfo.inviter + } + + UnknownDevicesBanner { + visible: category == "Rooms" && hasUnknownDevices + } + + SendBox { + id: sendBox + visible: category == "Rooms" && ! hasUnknownDevices + } + + LeftBanner { + visible: category === "Left" + leftEvent: roomInfo.leftEvent + } + } + + RoomSidePane { + id: roomSidePane + + property int referenceWidth: roomHeader.buttonsWidth + onReferenceWidthChanged: width = referenceWidth + + Layout.minimumWidth: 36 + Layout.maximumWidth: parent.width + } } } diff --git a/harmonyqml/components/Chat/RoomHeader.qml b/harmonyqml/components/Chat/RoomHeader.qml index a9062dd4..c5ea8bcc 100644 --- a/harmonyqml/components/Chat/RoomHeader.qml +++ b/harmonyqml/components/Chat/RoomHeader.qml @@ -6,15 +6,14 @@ HRectangle { property string displayName: "" property string topic: "" + property bool collapseButtons: width < 480 + property alias buttonsWidth: viewButtons.width + id: roomHeader color: HStyle.chat.roomHeader.background - Layout.fillWidth: true - Layout.preferredHeight: 32 - HRowLayout { id: row - spacing: 8 anchors.fill: parent HAvatar { @@ -30,7 +29,12 @@ HRectangle { font.pixelSize: HStyle.fontSize.big elide: Text.ElideRight maximumLineCount: 1 - Layout.maximumWidth: row.width - row.totalSpacing - avatar.width + + Layout.maximumWidth: + row.width - Layout.leftMargin * 2 - avatar.width - + viewButtons.width - + (expandButton.visible ? expandButton.width : 0) + Layout.leftMargin: 8 } HLabel { @@ -39,10 +43,56 @@ HRectangle { font.pixelSize: HStyle.fontSize.small elide: Text.ElideRight maximumLineCount: 1 + Layout.maximumWidth: - row.width - row.totalSpacing - avatar.width - roomName.width + row.width - Layout.leftMargin * 2 - avatar.width - + roomName.width - viewButtons.width - + (expandButton.visible ? expandButton.width : 0) + Layout.leftMargin: 8 } HSpacer {} + + Row { + id: viewButtons + Layout.maximumWidth: collapseButtons ? 0 : implicitWidth + + HButton { + iconName: "room_view_members" + } + + HButton { + iconName: "room_view_files" + } + + HButton { + iconName: "room_view_notifications" + } + + HButton { + iconName: "room_view_history" + } + + HButton { + iconName: "room_view_settings" + } + + Behavior on Layout.maximumWidth { + NumberAnimation { id: buttonsAnimation; duration: 150 } + } + } + } + + HButton { + id: expandButton + z: 1 + anchors.right: parent.right + opacity: collapseButtons ? 1 : 0 + visible: opacity > 0 + iconName: "reduced_room_buttons" + + Behavior on opacity { + NumberAnimation { duration: buttonsAnimation.duration * 2 } + } } } diff --git a/harmonyqml/components/Chat/RoomSidePane/MemberDelegate.qml b/harmonyqml/components/Chat/RoomSidePane/MemberDelegate.qml new file mode 100644 index 00000000..637bbc8c --- /dev/null +++ b/harmonyqml/components/Chat/RoomSidePane/MemberDelegate.qml @@ -0,0 +1,37 @@ +import QtQuick 2.7 +import QtQuick.Layouts 1.3 +import "../../Base" + +MouseArea { + id: memberDelegate + width: memberList.width + height: childrenRect.height + + property var member: Backend.users.get(modelData) + + HRowLayout { + width: parent.width + spacing: memberList.spacing + + HAvatar { + id: memberAvatar + name: member.displayName.value + } + + HColumnLayout { + Layout.fillWidth: true + Layout.maximumWidth: + parent.width - parent.totalSpacing - memberAvatar.width + + HLabel { + id: memberName + text: member.displayName.value + elide: Text.ElideRight + maximumLineCount: 1 + verticalAlignment: Qt.AlignVCenter + + Layout.maximumWidth: parent.width + } + } + } +} diff --git a/harmonyqml/components/Chat/RoomSidePane/MembersView.qml b/harmonyqml/components/Chat/RoomSidePane/MembersView.qml new file mode 100644 index 00000000..86187655 --- /dev/null +++ b/harmonyqml/components/Chat/RoomSidePane/MembersView.qml @@ -0,0 +1,30 @@ +import QtQuick 2.7 +import QtQuick.Layouts 1.3 +import "../../Base" + +Column { + property int normalSpacing: 8 + property bool collapsed: + width < roomSidePane.Layout.minimumWidth + normalSpacing + + leftPadding: collapsed ? 0 : normalSpacing + rightPadding: leftPadding + + ListView { + width: parent.width + height: parent.height + + id: memberList + + spacing: collapsed ? 0 : normalSpacing + topMargin: spacing + bottomMargin: topMargin + + Behavior on spacing { + NumberAnimation { duration: 150 } + } + + model: chatPage.roomInfo.members + delegate: MemberDelegate {} + } +} diff --git a/harmonyqml/components/Chat/RoomSidePane/RoomSidePane.qml b/harmonyqml/components/Chat/RoomSidePane/RoomSidePane.qml new file mode 100644 index 00000000..05470a30 --- /dev/null +++ b/harmonyqml/components/Chat/RoomSidePane/RoomSidePane.qml @@ -0,0 +1,16 @@ +import QtQuick 2.7 +import QtQuick.Layouts 1.3 +import "../../Base" + +HRectangle { + id: roomSidePane + + HColumnLayout { + anchors.fill: parent + + MembersView { + Layout.fillHeight: true + Layout.fillWidth: true + } + } +} diff --git a/harmonyqml/components/UI.qml b/harmonyqml/components/UI.qml index 7bd59ac2..13937af8 100644 --- a/harmonyqml/components/UI.qml +++ b/harmonyqml/components/UI.qml @@ -50,8 +50,21 @@ Item { Component.onCompleted: { if (pageStack.initialPageSet) { return } pageStack.initialPageSet = true - showRoom("@test_mary:matrix.org", "Rooms", "!TSXGsbBbdwsdylIOJZ:matrix.org") - //showPage(accountsLoggedIn ? "Default" : "SignIn") + showPage(accountsLoggedIn ? "Default" : "SignIn") + if (accountsLoggedIn) { initialRoomTimer.start() } + } + + Timer { + // TODO: remove this, debug + id: initialRoomTimer + interval: appWindow.reloadedTimes > 0 ? 0 : 5000 + repeat: false + onTriggered: pageStack.showRoom( + "@test_mary:matrix.org", + "Rooms", + //"!TSXGsbBbdwsdylIOJZ:matrix.org" + "!HfNYlUkGqcWcpDQJpb:matrix.org" + ) } onCurrentItemChanged: if (currentItem) { diff --git a/harmonyqml/components/Window.qml b/harmonyqml/components/Window.qml index f71929d3..9c33f9a1 100644 --- a/harmonyqml/components/Window.qml +++ b/harmonyqml/components/Window.qml @@ -10,6 +10,8 @@ ApplicationWindow { onClosing: Backend.clients.removeAll() + property int reloadedTimes: 0 + Loader { anchors.fill: parent source: "UI.qml" diff --git a/harmonyqml/engine.py b/harmonyqml/engine.py index e87f2ed7..8e30885b 100644 --- a/harmonyqml/engine.py +++ b/harmonyqml/engine.py @@ -70,9 +70,12 @@ class Engine(QQmlApplicationEngine): def reloadQml(self) -> None: loader = self.rootObjects()[0].findChild(QObject, "UILoader") - source = loader.property("source") loader.setProperty("source", None) self.clearComponentCache() + window = self.rootObjects()[0] + reloaded_times = window.property("reloadedTimes") + window.setProperty("reloadedTimes", reloaded_times + 1) + loader.setProperty("source", source) diff --git a/harmonyqml/icons/add_room.svg b/harmonyqml/icons/add_room.svg deleted file mode 100644 index 3c1a47d9..00000000 --- a/harmonyqml/icons/add_room.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/harmonyqml/icons/home.svg b/harmonyqml/icons/home.svg deleted file mode 100644 index a2437676..00000000 --- a/harmonyqml/icons/home.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/harmonyqml/icons/reduced_room_buttons.svg b/harmonyqml/icons/reduced_room_buttons.svg new file mode 100644 index 00000000..7e65a83c --- /dev/null +++ b/harmonyqml/icons/reduced_room_buttons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/harmonyqml/icons/room_view_files.svg b/harmonyqml/icons/room_view_files.svg new file mode 100644 index 00000000..6168b479 --- /dev/null +++ b/harmonyqml/icons/room_view_files.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/harmonyqml/icons/room_view_history.svg b/harmonyqml/icons/room_view_history.svg new file mode 100644 index 00000000..04061e3e --- /dev/null +++ b/harmonyqml/icons/room_view_history.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/harmonyqml/icons/add_account.svg b/harmonyqml/icons/room_view_members.svg similarity index 100% rename from harmonyqml/icons/add_account.svg rename to harmonyqml/icons/room_view_members.svg diff --git a/harmonyqml/icons/room_view_notifications.svg b/harmonyqml/icons/room_view_notifications.svg new file mode 100644 index 00000000..cc51fa8b --- /dev/null +++ b/harmonyqml/icons/room_view_notifications.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/harmonyqml/icons/room_view_settings.svg b/harmonyqml/icons/room_view_settings.svg new file mode 100644 index 00000000..0bf18afc --- /dev/null +++ b/harmonyqml/icons/room_view_settings.svg @@ -0,0 +1 @@ + \ No newline at end of file