From eba4d874df6ab98d94d1a59f471f5cb89c2f321e Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Mon, 16 Nov 2020 14:27:44 +0100 Subject: [PATCH] Improve Room Drawer This fix the bug of it not getting the right data and improve the look signically. --- imports/NeoChat/Panel/RoomDrawer.qml | 301 ++++++++++++++------------- qml/main.qml | 19 +- 2 files changed, 161 insertions(+), 159 deletions(-) diff --git a/imports/NeoChat/Panel/RoomDrawer.qml b/imports/NeoChat/Panel/RoomDrawer.qml index eef0bdf91..ad0fb0fa6 100644 --- a/imports/NeoChat/Panel/RoomDrawer.qml +++ b/imports/NeoChat/Panel/RoomDrawer.qml @@ -19,16 +19,20 @@ import NeoChat.Setting 1.0 import org.kde.neochat 1.0 Kirigami.OverlayDrawer { + id: roomDrawer property var room - id: roomDrawer enabled: true edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge - padding: 0 + topPadding: 0 + leftPadding: 0 + rightPadding: 0 + width: 400 + implicitWidth: 400 contentItem: ColumnLayout { - implicitWidth: Kirigami.Units.gridUnit * 15 // TODO FIXME + implicitWidth: Kirigami.Units.gridUnit * 20 Component { id: fullScreenImage @@ -36,169 +40,168 @@ Kirigami.OverlayDrawer { FullScreenImage {} } - RowLayout { + ToolBar { Layout.fillWidth: true - - spacing: 16 - - Kirigami.Avatar { - Layout.preferredWidth: 72 - Layout.preferredHeight: 72 - - name: room ? room.displayName : "No name" - source: room ? "image://mxc/" + room.avatarMediaId : null - } - - ColumnLayout { + implicitHeight: infoLayout.implicitHeight + bottomPadding: Kirigami.Units.largeSpacing + contentItem: ColumnLayout { + id: infoLayout Layout.fillWidth: true - - Label { - Layout.fillWidth: true - - font.pixelSize: 18 - font.bold: true - wrapMode: Label.Wrap - text: room ? room.displayName : "No Name" - color: MPalette.foreground - } - - Label { - Layout.fillWidth: true - - wrapMode: Label.Wrap - text: room ? room.totalMemberCount + " Members" : "No Member Count" - color: MPalette.lighter - } - } - } - - Kirigami.Separator { - Layout.fillWidth: true - } - - Control { - Layout.fillWidth: true - contentItem: Kirigami.FormLayout { - Label { - Kirigami.FormData.label: "Main Alias" - text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias" - } - Label { - Kirigami.FormData.label: "Topic" - text: room && room.topic ? room.topic : "No Topic" - wrapMode: Text.WordWrap - } - } - - background: AutoMouseArea { - onPrimaryClicked: roomSettingDialog.createObject(ApplicationWindow.overlay, {"room": room}).open() - } - } - - Kirigami.Separator { - Layout.fillWidth: true - } - - RowLayout { - Layout.fillWidth: true - - spacing: 8 - Kirigami.Icon { - Layout.preferredWidth: Kirigami.Units.gridUnit * 2 - Layout.preferredHeight: Kirigami.Units.gridUnit * 2 - source: "user-others" - } - - Label { - Layout.fillWidth: true - - wrapMode: Label.Wrap - text: room ? room.totalMemberCount + " Members" : "No Member Count" - } - - ToolButton { - Layout.preferredWidth: Kirigami.Units.gridUnit - Layout.preferredHeight: Kirigami.Units.gridUnit - icon.name: "list-add-user" - - onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"room": room}).open() - } - } - - AutoListView { - Layout.fillWidth: true - Layout.fillHeight: true - - id: userListView - - clip: true - - boundsBehavior: Flickable.DragOverBounds - - model: UserListModel { - room: roomDrawer.room - } - - delegate: Item { - width: userListView.width - height: 48 - RowLayout { - anchors.fill: parent - anchors.margins: 8 - spacing: 12 + Layout.fillWidth: true + Layout.margins: Kirigami.Units.largeSpacing + + spacing: Kirigami.Units.largeSpacing Kirigami.Avatar { - Layout.preferredWidth: height - Layout.fillHeight: true + Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5 + Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5 - source: "image://mxc/" + avatar - name: name + name: room ? room.displayName : i18n("No name") + source: room ? "image://mxc/" + room.avatarMediaId : undefined + } + + ColumnLayout { + Layout.fillWidth: true + spacing: 0 + + Kirigami.Heading { + Layout.fillWidth: true + level: 1 + font.bold: true + wrapMode: Label.Wrap + text: room ? room.displayName : i18n("No name") + } + + RowLayout { + Layout.fillWidth: true + Label { + Layout.fillWidth: true + + wrapMode: Label.Wrap + text: room ? i18np("%1 Member", "%1 Members", room.totalMemberCount) : i18n("No Member Count") + color: Kirigami.Theme.disabledTextColor + } + Button { + icon.name: 'settings-configure' + text: i18n("Room setting") + onClicked: { + roomSettingDialog.createObject(ApplicationWindow.overlay, {"room": room}).open() + roomDrawer.close(); + } + } + } + } + } + + Kirigami.Separator { + Layout.fillWidth: true + } + + Kirigami.FormLayout { + Layout.fillWidth: true + Label { + Kirigami.FormData.label: i18n("Main Alias") + text: room && room.canonicalAlias ? room.canonicalAlias :i18n("No Canonical Alias") + } + Label { + Kirigami.FormData.label: i18n("Topic") + text: room && room.topic ? room.topic : i18n("No Topic") + elide: Text.ElideRight + wrapMode: Text.WordWrap + } + } + + RowLayout { + Layout.fillWidth: true + + spacing: 8 + Kirigami.Icon { + source: "user-others" } Label { Layout.fillWidth: true - text: name - color: MPalette.foreground - textFormat: Text.PlainText - elide: Text.ElideRight - wrapMode: Text.NoWrap + wrapMode: Label.Wrap + text: room ? i18np("%1 Member", "%1 Members", room.totalMemberCount) : i18n("No Member Count") } - Label { - visible: perm != UserType.Member - - text: { - if (perm == UserType.Owner) { - return "Owner" - } - if (perm == UserType.Admin) { - return "Admin" - } - if (perm == UserType.Moderator) { - return "Mod" - } - if (perm == UserType.Muted) { - return "Muted" - } - return "" - } - color: perm == UserType.Muted ? MPalette.lighter : MPalette.accent - font.pixelSize: 12 - textFormat: Text.PlainText - wrapMode: Text.NoWrap + ToolButton { + icon.name: "list-add-user" + text: i18n("Invite") + onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"room": room}).open() } } - - RippleEffect { - anchors.fill: parent - - onPrimaryClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": room, "user": user}).open() - } } + } - ScrollBar.vertical: ScrollBar {} + ScrollView { + Layout.fillWidth: true + Layout.fillHeight: true + + ListView { + id: userListView + clip: true + headerPositioning: ListView.OverlayHeader + boundsBehavior: Flickable.DragOverBounds + + model: UserListModel { + room: roomDrawer.room + } + + delegate: Kirigami.AbstractListItem { + width: userListView.width + implicitHeight: Kirigami.Units.gridUnit * 2 + + contentItem: RowLayout { + Kirigami.Avatar { + Layout.preferredWidth: height + Layout.fillHeight: true + + source: "image://mxc/" + avatar + name: name + } + + Label { + Layout.fillWidth: true + + text: name + textFormat: Text.PlainText + elide: Text.ElideRight + wrapMode: Text.NoWrap + } + + Label { + visible: perm != UserType.Member + + text: { + if (perm == UserType.Owner) { + return i18n("Owner") + } + if (perm == UserType.Admin) { + return i18n("Admin") + } + if (perm == UserType.Moderator) { + return i18n("Mod") + } + if (perm == UserType.Muted) { + return i18n("Muted") + } + return "" + } + color: perm == UserType.Muted ? Kirigami.Theme.disabledTextColor : Kirigami.Theme.textColor + font.pixelSize: 12 + textFormat: Text.PlainText + wrapMode: Text.NoWrap + } + } + + action: Kirigami.Action { + onTriggered: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": room, "user": user}).open() + } + } + } } } diff --git a/qml/main.qml b/qml/main.qml index a78795e6a..d191f939a 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -15,7 +15,6 @@ import NeoChat.Component 1.0 import NeoChat.Panel 1.0 import NeoChat.Dialog 1.0 import NeoChat.Page 1.0 -import NeoChat.Page 1.0 Kirigami.ApplicationWindow { id: root @@ -24,7 +23,7 @@ Kirigami.ApplicationWindow { /** * Manage opening and close rooms */ - Item { + QtObject { id: roomManager property var currentRoom: null @@ -43,18 +42,12 @@ Kirigami.ApplicationWindow { pageStack.push(roomPage, { 'currentRoom': room, }); currentRoom = room; } - - Component { - id: roomPage - - RoomPage {} - } } contextDrawer: RoomDrawer { id: contextDrawer - enabled: root.currentRoomm !== null - room: root.currentRoom + enabled: roomManager.hasOpenRoom + room: roomManager.currentRoom handleVisible: enabled && (pageStack.currentItem instanceof RoomPage) } @@ -130,4 +123,10 @@ Kirigami.ApplicationWindow { connection: Controller.activeConnection } + + Component { + id: roomPage + + RoomPage {} + } }