From b1c42c3d3de39e4876df362c70927d9af6565dba Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Wed, 28 Jun 2023 14:11:07 +0200 Subject: [PATCH] Make the whole right sidebar scrollable The sidebar grew a lot and now contains some tools. This makes the space left for the room members very small. Particuliary on mobile. So make the whole sidebar contained inside the ScrollView This also refactor a few things (e.g. use a plain ToolBar for the header) --- src/qml/Panel/DirectChatDrawerHeader.qml | 3 +- src/qml/Panel/GroupChatDrawerHeader.qml | 46 ++-- src/qml/Panel/RoomDrawer.qml | 270 ++++++++++++----------- 3 files changed, 157 insertions(+), 162 deletions(-) diff --git a/src/qml/Panel/DirectChatDrawerHeader.qml b/src/qml/Panel/DirectChatDrawerHeader.qml index 5b49204c3..3dd153f86 100644 --- a/src/qml/Panel/DirectChatDrawerHeader.qml +++ b/src/qml/Panel/DirectChatDrawerHeader.qml @@ -48,7 +48,7 @@ ColumnLayout { room: room, user: room.getUser(room.directChatRemoteUser.id), }) - popup.closed.connect(function() { + popup.closed.connect(() => { userListItem.highlighted = false }) if (roomDrawer.modal) { @@ -61,7 +61,6 @@ ColumnLayout { Kirigami.Heading { Layout.fillWidth: true - level: 1 type: Kirigami.Heading.Type.Primary wrapMode: QQC2.Label.Wrap text: room.displayName diff --git a/src/qml/Panel/GroupChatDrawerHeader.qml b/src/qml/Panel/GroupChatDrawerHeader.qml index 0dd108aca..a6c14fd0a 100644 --- a/src/qml/Panel/GroupChatDrawerHeader.qml +++ b/src/qml/Panel/GroupChatDrawerHeader.qml @@ -11,7 +11,9 @@ import org.kde.neochat 1.0 ColumnLayout { id: root + Layout.fillWidth: true + RowLayout { Layout.fillWidth: true Layout.leftMargin: Kirigami.Units.largeSpacing @@ -30,8 +32,11 @@ ColumnLayout { width: Kirigami.Units.gridUnit height: Kirigami.Units.gridUnit - anchors.bottom: parent.bottom - anchors.right: parent.right + + anchors { + bottom: parent.bottom + right: parent.right + } radius: Math.round(width / 2) @@ -49,12 +54,12 @@ ColumnLayout { Kirigami.Heading { Layout.fillWidth: true - level: 1 type: Kirigami.Heading.Type.Primary wrapMode: QQC2.Label.Wrap text: room ? room.displayName : i18n("No name") textFormat: Text.PlainText } + Kirigami.SelectableLabel { Layout.fillWidth: true textFormat: TextEdit.PlainText @@ -63,36 +68,15 @@ ColumnLayout { } } - QQC2.ScrollView { + Kirigami.SelectableLabel { + Layout.fillWidth: true Layout.leftMargin: Kirigami.Units.largeSpacing Layout.rightMargin: Kirigami.Units.largeSpacing - Layout.fillWidth: true - Layout.fillHeight: true - Layout.maximumHeight: Math.min(topicText.contentHeight, Kirigami.Units.gridUnit * 15) - // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890) - QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff - - QQC2.TextArea { - id: topicText - padding: 0 - text: room && room.topic ? room.topic.replace(replaceLinks, "$1") : i18n("No Topic") - readonly property var replaceLinks: /(http[s]?:\/\/[^ \r\n]*)/g - textFormat: TextEdit.MarkdownText - wrapMode: Text.Wrap - selectByMouse: true - color: Kirigami.Theme.textColor - selectedTextColor: Kirigami.Theme.highlightedTextColor - selectionColor: Kirigami.Theme.highlightColor - onLinkActivated: UrlHelper.openUrl(link) - readOnly: true - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton - cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.IBeamCursor - } - background: Item {} - } + text: room && room.topic ? room.topic.replace(replaceLinks, "$1") : i18n("No Topic") + readonly property var replaceLinks: /(http[s]?:\/\/[^ \r\n]*)/g + textFormat: TextEdit.MarkdownText + wrapMode: Text.Wrap + onLinkActivated: UrlHelper.openUrl(link) } - } diff --git a/src/qml/Panel/RoomDrawer.qml b/src/qml/Panel/RoomDrawer.qml index 0072c6120..b65ec2c0d 100644 --- a/src/qml/Panel/RoomDrawer.qml +++ b/src/qml/Panel/RoomDrawer.qml @@ -71,26 +71,24 @@ Kirigami.OverlayDrawer { contentItem: Loader { id: loader active: roomDrawer.drawerOpen + sourceComponent: ColumnLayout { - id: columnLayout - property alias userSearchText: userListSearchField.text + readonly property string userSearchText: userListView.headerItem.userListSearchField.text property alias highlightedUser: userListView.currentIndex - spacing: Kirigami.Units.largeSpacing - Kirigami.AbstractApplicationHeader { + spacing: 0 + + QQC2.ToolBar { Layout.fillWidth: true - topPadding: Kirigami.Units.smallSpacing / 2; - bottomPadding: Kirigami.Units.smallSpacing / 2; - rightPadding: Kirigami.Units.largeSpacing - leftPadding: Kirigami.Units.largeSpacing - RowLayout { - anchors.fill: parent + Layout.preferredHeight: pageStack.globalToolBar.preferredHeight + + contentItem: RowLayout { Kirigami.Heading { Layout.fillWidth: true text: i18n("Room information") - level: 1 } + QQC2.ToolButton { id: settingsButton @@ -99,124 +97,14 @@ Kirigami.OverlayDrawer { display: QQC2.AbstractButton.IconOnly onClicked: QQC2.ApplicationWindow.window.pageStack.pushDialogLayer('qrc:/Categories.qml', {room: room}, { title: i18n("Room Settings") }) - QQC2.ToolTip { - text: settingsButton.text - } + + QQC2.ToolTip.text: text + QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + QQC2.ToolTip.visible: hovered } } } - Loader { - active: true - Layout.fillWidth: true - sourceComponent: room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader - } - - Kirigami.ListSectionHeader { - label: i18n("Options") - activeFocusOnTab: false - } - - Kirigami.BasicListItem { - id: devtoolsButton - - icon: "tools" - text: i18n("Open developer tools") - visible: Config.developerTools - - onClicked: { - applicationWindow().pageStack.layers.push("qrc:/DevtoolsPage.qml", {room: room}, {title: i18n("Developer Tools")}) - roomDrawer.close(); - } - } - Kirigami.BasicListItem { - id: searchButton - - icon: "search" - text: i18n("Search in this room") - - onClicked: { - pageStack.pushDialogLayer("qrc:/SearchPage.qml", { - currentRoom: room - }, { - title: i18nc("@action:title", "Search") - }) - } - } - Kirigami.BasicListItem { - id: locationsButton - - icon: "map-flat" - text: i18n("Show locations for this room") - - onClicked: pageStack.pushDialogLayer("qrc:/LocationsPage.qml", { - room: room - }, { - title: i18nc("Locations on a map", "Locations") - }) - } - Kirigami.BasicListItem { - id: favouriteButton - - icon: room && room.isFavourite ? "rating" : "rating-unrated" - text: room && room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite") - - onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0) - } - - Kirigami.ListSectionHeader { - label: i18n("Members") - activeFocusOnTab: false - spacing: 0 - visible: !room.isDirectChat() - - QQC2.ToolButton { - id: memberSearchToggle - checkable: true - icon.name: "search" - QQC2.ToolTip.text: i18n("Search user in room") - QQC2.ToolTip.visible: hovered - QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay - onToggled: { - userListSearchField.text = ""; - } - } - - QQC2.ToolButton { - visible: roomDrawer.room.canSendState("invite") - icon.name: "list-add-user" - - onClicked: { - applicationWindow().pageStack.layers.push("qrc:/InviteUserPage.qml", {room: roomDrawer.room}) - roomDrawer.close(); - } - - QQC2.ToolTip.text: i18n("Invite user to room") - QQC2.ToolTip.visible: hovered - QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay - } - - QQC2.Label { - Layout.alignment: Qt.AlignRight - text: room ? i18np("%1 member", "%1 members", room.joinedCount) : i18n("No member count") - } - } - - Kirigami.SearchField { - id: userListSearchField - visible: memberSearchToggle.checked - - onVisibleChanged: if (visible) forceActiveFocus() - Layout.fillWidth: true - Layout.leftMargin: Kirigami.Units.largeSpacing - 1 - Layout.rightMargin: Kirigami.Units.largeSpacing - 1 - Layout.bottomMargin: Kirigami.Units.smallSpacing - - focusSequence: "Ctrl+Shift+F" - - onAccepted: sortedMessageEventModel.filterString = text; - } - QQC2.ScrollView { Layout.fillWidth: true Layout.fillHeight: true @@ -226,11 +114,130 @@ Kirigami.OverlayDrawer { ListView { id: userListView - clip: true - activeFocusOnTab: true - visible: !room.isDirectChat() - model: KSortFilterProxyModel { + header: ColumnLayout { + id: columnLayout + + property alias userListSearchField: userListSearchField + + spacing: Kirigami.Units.largeSpacing + width: userListView.width + + Loader { + active: true + Layout.fillWidth: true + Layout.topMargin: Kirigami.Units.smallSpacing + sourceComponent: room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader + } + + Kirigami.ListSectionHeader { + label: i18n("Options") + activeFocusOnTab: false + } + + Kirigami.BasicListItem { + id: devtoolsButton + + icon: "tools" + text: i18n("Open developer tools") + visible: Config.developerTools + + onClicked: { + applicationWindow().pageStack.layers.push("qrc:/DevtoolsPage.qml", {room: room}, {title: i18n("Developer Tools")}) + roomDrawer.close(); + } + } + Kirigami.BasicListItem { + id: searchButton + + icon: "search" + text: i18n("Search in this room") + + onClicked: { + pageStack.pushDialogLayer("qrc:/SearchPage.qml", { + currentRoom: room + }, { + title: i18nc("@action:title", "Search") + }) + } + } + Kirigami.BasicListItem { + id: favouriteButton + + icon: room && room.isFavourite ? "rating" : "rating-unrated" + text: room && room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite") + + onClicked: room.isFavourite ? room.removeTag("m.favourite") : room.addTag("m.favourite", 1.0) + } + + Kirigami.BasicListItem { + id: locationsButton + + icon: "map-flat" + text: i18n("Show locations for this room") + + onClicked: pageStack.pushDialogLayer("qrc:/LocationsPage.qml", { + room: room + }, { + title: i18nc("Locations on a map", "Locations") + }) + } + + Kirigami.ListSectionHeader { + label: i18n("Members") + activeFocusOnTab: false + spacing: 0 + visible: !room.isDirectChat() + + QQC2.ToolButton { + id: memberSearchToggle + checkable: true + icon.name: "search" + QQC2.ToolTip.text: i18n("Search user in room") + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + onToggled: { + userListSearchField.text = ""; + } + } + + QQC2.ToolButton { + visible: roomDrawer.room.canSendState("invite") + icon.name: "list-add-user" + + onClicked: { + applicationWindow().pageStack.layers.push("qrc:/InviteUserPage.qml", {room: roomDrawer.room}) + roomDrawer.close(); + } + + QQC2.ToolTip.text: i18n("Invite user to room") + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + } + + QQC2.Label { + Layout.alignment: Qt.AlignRight + text: room ? i18np("%1 member", "%1 members", room.joinedCount) : i18n("No member count") + } + } + + Kirigami.SearchField { + id: userListSearchField + visible: memberSearchToggle.checked + + onVisibleChanged: if (visible) forceActiveFocus() + Layout.fillWidth: true + Layout.leftMargin: Kirigami.Units.largeSpacing - 1 + Layout.rightMargin: Kirigami.Units.largeSpacing - 1 + Layout.bottomMargin: Kirigami.Units.smallSpacing + + focusSequence: "Ctrl+Shift+F" + + onAccepted: sortedMessageEventModel.filterString = text; + } + } + + KSortFilterProxyModel { id: sortedMessageEventModel sourceModel: UserListModel { @@ -243,6 +250,11 @@ Kirigami.OverlayDrawer { filterCaseSensitivity: Qt.CaseInsensitive } + model: room.isDirectChat() ? 0 : sortedMessageEventModel + + clip: true + activeFocusOnTab: true + delegate: Kirigami.BasicListItem { id: userListItem