From 624b1b06c5a686d88bf7f6b26da69b1631a01452 Mon Sep 17 00:00:00 2001 From: James Graham Date: Mon, 22 Apr 2024 18:18:15 +0200 Subject: [PATCH] Make the SpaceDrawer navigable with the keyboard. --- src/qml/ExploreComponent.qml | 1 - src/qml/SpaceDrawer.qml | 500 ++++++++++++++++++----------------- src/qml/UserInfo.qml | 2 + 3 files changed, 258 insertions(+), 245 deletions(-) diff --git a/src/qml/ExploreComponent.qml b/src/qml/ExploreComponent.qml index 8f4029c63..6cf7c170f 100644 --- a/src/qml/ExploreComponent.qml +++ b/src/qml/ExploreComponent.qml @@ -91,7 +91,6 @@ RowLayout { Layout.preferredWidth: root.desiredWidth ? root.desiredWidth - menuButton.width - root.spacing : -1 visible: !root.collapsed onTextChanged: root.textChanged(text) - KeyNavigation.tab: treeView } QQC2.ToolButton { diff --git a/src/qml/SpaceDrawer.qml b/src/qml/SpaceDrawer.qml index 9ec58dc3c..1947c1077 100644 --- a/src/qml/SpaceDrawer.qml +++ b/src/qml/SpaceDrawer.qml @@ -21,269 +21,281 @@ QQC2.Control { topPadding: 0 bottomPadding: 0 - contentItem: Loader { - id: sidebarColumn - z: 0 + onActiveFocusChanged: if (activeFocus) { + notificationsButton.forceActiveFocus(); + } - sourceComponent: ColumnLayout { - spacing: 0 + contentItem: ColumnLayout { + spacing: 0 - QQC2.ScrollView { - id: scrollView - Layout.fillWidth: true - Layout.fillHeight: true + QQC2.ScrollView { + id: scrollView + Layout.fillWidth: true + Layout.fillHeight: true - QQC2.ScrollBar.vertical.policy: QQC2.ScrollBar.AlwaysOff - QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff - contentWidth: -1 // disable horizontal scroll + QQC2.ScrollBar.vertical.policy: QQC2.ScrollBar.AlwaysOff + QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff + contentWidth: -1 // disable horizontal scroll - background: Rectangle { - color: Kirigami.Theme.backgroundColor - Kirigami.Theme.colorSet: Kirigami.Theme.View + background: Rectangle { + color: Kirigami.Theme.backgroundColor + Kirigami.Theme.colorSet: Kirigami.Theme.View + } + + ColumnLayout { + id: column + width: scrollView.width + spacing: 0 + + AvatarTabButton { + id: notificationsButton + + Layout.fillWidth: true + Layout.preferredHeight: width - Kirigami.Units.smallSpacing + Layout.maximumHeight: width - Kirigami.Units.smallSpacing + Layout.topMargin: Kirigami.Units.smallSpacing / 2 + Layout.bottomMargin: Kirigami.Units.smallSpacing / 2 + text: i18n("View notifications") + contentItem: Kirigami.Icon { + source: "notifications" + } + + activeFocusOnTab: true + + onClicked: pageStack.pushDialogLayer(Qt.createComponent('org.kde.neochat', 'NotificationsView'), { + connection: root.connection + }, { + title: i18nc("@title", "Notifications") + }) } - ColumnLayout { - id: column - width: scrollView.width - spacing: 0 + Kirigami.Separator { + Layout.fillWidth: true + Layout.leftMargin: Kirigami.Units.smallSpacing + Layout.rightMargin: Kirigami.Units.smallSpacing + } - AvatarTabButton { - id: notificationsButton + AvatarTabButton { + id: allRoomButton + + Layout.fillWidth: true + Layout.preferredHeight: width - Kirigami.Units.smallSpacing + Layout.maximumHeight: width - Kirigami.Units.smallSpacing + Layout.topMargin: Kirigami.Units.smallSpacing / 2 + + text: i18n("Home") + contentItem: Kirigami.Icon { + source: "user-home-symbolic" + } + + activeFocusOnTab: true + + checked: RoomManager.currentSpace.length === 0 + onClicked: { + RoomManager.currentSpace = ""; + root.selectionChanged(); + } + + QQC2.Label { + id: homeNotificationCountLabel + anchors.top: parent.top + anchors.right: parent.right + anchors.rightMargin: Kirigami.Units.smallSpacing / 2 + z: 1 + width: Math.max(homeNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height) + height: Kirigami.Units.iconSizes.smallMedium + + text: root.connection.homeNotifications > 0 ? root.connection.homeNotifications : "" + visible: root.connection.homeNotifications > 0 && (RoomManager.currentSpace.length > 0 || root.showDirectChats === true) + color: Kirigami.Theme.textColor + horizontalAlignment: Text.AlignHCenter + background: Rectangle { + visible: true + Kirigami.Theme.colorSet: Kirigami.Theme.Button + Kirigami.Theme.inherit: false + color: root.connection.homeHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor + radius: height / 2 + } + + TextMetrics { + id: homeNotificationCountTextMetrics + text: homeNotificationCountLabel.text + } + } + } + AvatarTabButton { + id: directChatButton + + Layout.fillWidth: true + Layout.preferredHeight: width - Kirigami.Units.smallSpacing + Layout.maximumHeight: width - Kirigami.Units.smallSpacing + Layout.topMargin: Kirigami.Units.smallSpacing / 2 + + text: i18nc("@button View all one-on-one chats with your friends.", "Friends") + contentItem: Kirigami.Icon { + source: "system-users" + } + + activeFocusOnTab: true + + checked: RoomManager.currentSpace === "DM" + onClicked: { + RoomManager.currentSpace = "DM"; + root.selectionChanged(); + } + + QQC2.Label { + id: directChatNotificationCountLabel + anchors.top: parent.top + anchors.right: parent.right + anchors.rightMargin: Kirigami.Units.smallSpacing / 2 + z: 1 + width: Math.max(directChatNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height) + height: Kirigami.Units.iconSizes.smallMedium + + text: root.connection.directChatNotifications > 0 ? root.connection.directChatNotifications : "" + visible: (root.connection.directChatNotifications > 0 || root.connection.directChatInvites) && RoomManager.currentSpace !== "DM" + color: Kirigami.Theme.textColor + horizontalAlignment: Text.AlignHCenter + background: Rectangle { + visible: true + Kirigami.Theme.colorSet: Kirigami.Theme.Button + Kirigami.Theme.inherit: false + color: root.connection.directChatsHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor + radius: height / 2 + } + + TextMetrics { + id: directChatNotificationCountTextMetrics + text: directChatNotificationCountLabel.text + } + } + } + + Repeater { + model: RoomManager.sortFilterSpaceListModel + + delegate: AvatarTabButton { + id: spaceDelegate + + required property string displayName + required property string avatar + required property string roomId + required property var currentRoom Layout.fillWidth: true Layout.preferredHeight: width - Kirigami.Units.smallSpacing Layout.maximumHeight: width - Kirigami.Units.smallSpacing - Layout.topMargin: Kirigami.Units.smallSpacing / 2 - Layout.bottomMargin: Kirigami.Units.smallSpacing / 2 - text: i18n("View notifications") - contentItem: Kirigami.Icon { - source: "notifications" - } - onClicked: pageStack.pushDialogLayer(Qt.createComponent('org.kde.neochat', 'NotificationsView'), { + text: displayName + source: avatar ? ("image://mxc/" + avatar) : "" + + activeFocusOnTab: true + + onSelected: { + RoomManager.resolveResource(spaceDelegate.roomId); + RoomManager.currentSpace = spaceDelegate.roomId; + } + checked: RoomManager.currentSpace === roomId + onContextMenuRequested: root.createContextMenu(currentRoom) + + QQC2.Label { + id: notificationCountLabel + anchors.top: parent.top + anchors.right: parent.right + anchors.rightMargin: Kirigami.Units.smallSpacing / 2 + z: 1 + width: Math.max(notificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height) + height: Kirigami.Units.iconSizes.smallMedium + + text: spaceDelegate.currentRoom.childrenNotificationCount > 0 ? spaceDelegate.currentRoom.childrenNotificationCount : "" + visible: spaceDelegate.currentRoom.childrenNotificationCount > 0 && RoomManager.currentSpace != spaceDelegate.roomId + color: Kirigami.Theme.textColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + background: Rectangle { + visible: true + Kirigami.Theme.colorSet: Kirigami.Theme.Button + Kirigami.Theme.inherit: false + color: spaceDelegate.currentRoom.childrenHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor + radius: height / 2 + } + + TextMetrics { + id: notificationCountTextMetrics + text: notificationCountLabel.text + } + } + } + } + + AvatarTabButton { + id: recommendedSpaceButton + Layout.fillWidth: true + Layout.preferredHeight: width - Kirigami.Units.smallSpacing + Layout.maximumHeight: width - Kirigami.Units.smallSpacing + + activeFocusOnTab: true + + visible: SpaceHierarchyCache.recommendedSpaceId.length > 0 && !root.connection.room(SpaceHierarchyCache.recommendedSpaceId) && !SpaceHierarchyCache.recommendedSpaceHidden + + text: i18nc("Join ", "Join %1", SpaceHierarchyCache.recommendedSpaceDisplayName) + source: SpaceHierarchyCache.recommendedSpaceAvatar.length > 0 ? root.connection.makeMediaUrl(SpaceHierarchyCache.recommendedSpaceAvatar) : "" + onClicked: { + recommendedSpaceDialogComponent.createObject(QQC2.ApplicationWindow.overlay, { connection: root.connection - }, { - title: i18nc("@title", "Notifications") - }) + }).open(); } - - Kirigami.Separator { - Layout.fillWidth: true - Layout.leftMargin: Kirigami.Units.smallSpacing - Layout.rightMargin: Kirigami.Units.smallSpacing + Component { + id: recommendedSpaceDialogComponent + RecommendedSpaceDialog {} } - - AvatarTabButton { - id: allRoomButton - - Layout.fillWidth: true - Layout.preferredHeight: width - Kirigami.Units.smallSpacing - Layout.maximumHeight: width - Kirigami.Units.smallSpacing - Layout.topMargin: Kirigami.Units.smallSpacing / 2 - - text: i18n("Home") - contentItem: Kirigami.Icon { - source: "user-home-symbolic" - } - - checked: RoomManager.currentSpace.length === 0 - onClicked: { - RoomManager.currentSpace = ""; - root.selectionChanged(); - } - - QQC2.Label { - id: homeNotificationCountLabel - anchors.top: parent.top - anchors.right: parent.right - anchors.rightMargin: Kirigami.Units.smallSpacing / 2 - z: 1 - width: Math.max(homeNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height) - height: Kirigami.Units.iconSizes.smallMedium - - text: root.connection.homeNotifications > 0 ? root.connection.homeNotifications : "" - visible: root.connection.homeNotifications > 0 && (RoomManager.currentSpace.length > 0 || root.showDirectChats === true) - color: Kirigami.Theme.textColor - horizontalAlignment: Text.AlignHCenter - background: Rectangle { - visible: true - Kirigami.Theme.colorSet: Kirigami.Theme.Button - Kirigami.Theme.inherit: false - color: root.connection.homeHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor - radius: height / 2 - } - - TextMetrics { - id: homeNotificationCountTextMetrics - text: homeNotificationCountLabel.text - } - } - } - AvatarTabButton { - id: directChatButton - - Layout.fillWidth: true - Layout.preferredHeight: width - Kirigami.Units.smallSpacing - Layout.maximumHeight: width - Kirigami.Units.smallSpacing - Layout.topMargin: Kirigami.Units.smallSpacing / 2 - - text: i18nc("@button View all one-on-one chats with your friends.", "Friends") - contentItem: Kirigami.Icon { - source: "system-users" - } - - checked: RoomManager.currentSpace === "DM" - onClicked: { - RoomManager.currentSpace = "DM"; - root.selectionChanged(); - } - - QQC2.Label { - id: directChatNotificationCountLabel - anchors.top: parent.top - anchors.right: parent.right - anchors.rightMargin: Kirigami.Units.smallSpacing / 2 - z: 1 - width: Math.max(directChatNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height) - height: Kirigami.Units.iconSizes.smallMedium - - text: root.connection.directChatNotifications > 0 ? root.connection.directChatNotifications : "" - visible: (root.connection.directChatNotifications > 0 || root.connection.directChatInvites) && RoomManager.currentSpace !== "DM" - color: Kirigami.Theme.textColor - horizontalAlignment: Text.AlignHCenter - background: Rectangle { - visible: true - Kirigami.Theme.colorSet: Kirigami.Theme.Button - Kirigami.Theme.inherit: false - color: root.connection.directChatsHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor - radius: height / 2 - } - - TextMetrics { - id: directChatNotificationCountTextMetrics - text: directChatNotificationCountLabel.text - } - } - } - - Repeater { - model: RoomManager.sortFilterSpaceListModel - - delegate: AvatarTabButton { - id: spaceDelegate - - required property string displayName - required property string avatar - required property string roomId - required property var currentRoom - - Layout.fillWidth: true - Layout.preferredHeight: width - Kirigami.Units.smallSpacing - Layout.maximumHeight: width - Kirigami.Units.smallSpacing - - text: displayName - source: avatar ? ("image://mxc/" + avatar) : "" - - onSelected: { - RoomManager.resolveResource(spaceDelegate.roomId); - RoomManager.currentSpace = spaceDelegate.roomId; - } - checked: RoomManager.currentSpace === roomId - onContextMenuRequested: root.createContextMenu(currentRoom) - - QQC2.Label { - id: notificationCountLabel - anchors.top: parent.top - anchors.right: parent.right - anchors.rightMargin: Kirigami.Units.smallSpacing / 2 - z: 1 - width: Math.max(notificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height) - height: Kirigami.Units.iconSizes.smallMedium - - text: spaceDelegate.currentRoom.childrenNotificationCount > 0 ? spaceDelegate.currentRoom.childrenNotificationCount : "" - visible: spaceDelegate.currentRoom.childrenNotificationCount > 0 && RoomManager.currentSpace != spaceDelegate.roomId - color: Kirigami.Theme.textColor - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - background: Rectangle { - visible: true - Kirigami.Theme.colorSet: Kirigami.Theme.Button - Kirigami.Theme.inherit: false - color: spaceDelegate.currentRoom.childrenHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor - radius: height / 2 - } - - TextMetrics { - id: notificationCountTextMetrics - text: notificationCountLabel.text - } - } - } - } - - AvatarTabButton { - id: recommendedSpaceButton - Layout.fillWidth: true - Layout.preferredHeight: width - Kirigami.Units.smallSpacing - Layout.maximumHeight: width - Kirigami.Units.smallSpacing - - visible: SpaceHierarchyCache.recommendedSpaceId.length > 0 && !root.connection.room(SpaceHierarchyCache.recommendedSpaceId) && !SpaceHierarchyCache.recommendedSpaceHidden - - text: i18nc("Join ", "Join %1", SpaceHierarchyCache.recommendedSpaceDisplayName) - source: SpaceHierarchyCache.recommendedSpaceAvatar.length > 0 ? root.connection.makeMediaUrl(SpaceHierarchyCache.recommendedSpaceAvatar) : "" - onClicked: { - recommendedSpaceDialogComponent.createObject(QQC2.ApplicationWindow.overlay, { - connection: root.connection - }).open(); - } - Component { - id: recommendedSpaceDialogComponent - RecommendedSpaceDialog {} - } - Rectangle { - color: Kirigami.Theme.backgroundColor - width: Kirigami.Units.gridUnit * 1.5 - height: width - anchors.bottom: parent.bottom - anchors.bottomMargin: Kirigami.Units.smallSpacing - anchors.rightMargin: Kirigami.Units.smallSpacing * 2 - anchors.right: parent.right - radius: width / 2 - z: parent.z + 1 - Kirigami.Icon { - anchors.fill: parent - z: parent + 1 - source: "list-add" - } - } - } - - Kirigami.Separator { - Layout.fillWidth: true - Layout.topMargin: Kirigami.Units.smallSpacing / 2 - Layout.bottomMargin: Kirigami.Units.smallSpacing / 2 - Layout.leftMargin: Kirigami.Units.smallSpacing - Layout.rightMargin: Kirigami.Units.smallSpacing - } - - AvatarTabButton { - Layout.fillWidth: true - Layout.preferredHeight: width - Kirigami.Units.smallSpacing - Layout.maximumHeight: width - Kirigami.Units.smallSpacing - - text: i18n("Create a space") - contentItem: Kirigami.Icon { + Rectangle { + color: Kirigami.Theme.backgroundColor + width: Kirigami.Units.gridUnit * 1.5 + height: width + anchors.bottom: parent.bottom + anchors.bottomMargin: Kirigami.Units.smallSpacing + anchors.rightMargin: Kirigami.Units.smallSpacing * 2 + anchors.right: parent.right + radius: width / 2 + z: parent.z + 1 + Kirigami.Icon { + anchors.fill: parent + z: parent + 1 source: "list-add" } - onClicked: pageStack.pushDialogLayer(Qt.createComponent('org.kde.neochat', 'CreateRoomDialog'), { - connection: root.connection, - isSpace: true, - title: i18nc("@title", "Create a Space") - }, { - title: i18nc("@title", "Create a Space") - }) } } + + Kirigami.Separator { + Layout.fillWidth: true + Layout.topMargin: Kirigami.Units.smallSpacing / 2 + Layout.bottomMargin: Kirigami.Units.smallSpacing / 2 + Layout.leftMargin: Kirigami.Units.smallSpacing + Layout.rightMargin: Kirigami.Units.smallSpacing + } + + AvatarTabButton { + Layout.fillWidth: true + Layout.preferredHeight: width - Kirigami.Units.smallSpacing + Layout.maximumHeight: width - Kirigami.Units.smallSpacing + + text: i18n("Create a space") + contentItem: Kirigami.Icon { + source: "list-add" + } + + activeFocusOnTab: true + + onClicked: pageStack.pushDialogLayer(Qt.createComponent('org.kde.neochat', 'CreateRoomDialog'), { + connection: root.connection, + isSpace: true, + title: i18nc("@title", "Create a Space") + }, { + title: i18nc("@title", "Create a Space") + }) + } } } } diff --git a/src/qml/UserInfo.qml b/src/qml/UserInfo.qml index 2c00415d5..cb4a83700 100644 --- a/src/qml/UserInfo.qml +++ b/src/qml/UserInfo.qml @@ -46,6 +46,8 @@ RowLayout { text: i18n("Edit this account") source: mediaId ? ("image://mxc/" + mediaId) : "" + activeFocusOnTab: true + onClicked: pageStack.pushDialogLayer(Qt.createComponent('org.kde.neochat.settings', 'AccountEditorPage'), { connection: root.connection }, {