Skip to content

New room list: add support to up/down arrow navigation #29798

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

New room list: add support to up/down arrow navigation #29798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
all: unset;
cursor: pointer;

&:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}

.mx_RoomListItemView_container {
padding-left: var(--cpd-space-2x);
font: var(--cpd-font-body-md-regular);
Expand All @@ -44,12 +40,12 @@
}
}

.mx_RoomListItemView_menu_open {
.mx_RoomListItemView_hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}

.mx_RoomListItemView_content {
padding-right: var(--cpd-space-1-5x);
}
.mx_RoomListItemView_menu_open .mx_RoomListItemView_content {
padding-right: var(--cpd-space-1-5x);
}

.mx_RoomListItemView_selected {
Expand Down
51 changes: 38 additions & 13 deletions src/components/views/rooms/RoomListPanel/RoomList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
* Please see LICENSE files in the repository root for full details.
*/

import React, { useCallback, type JSX } from "react";
import { AutoSizer, List, type ListRowProps } from "react-virtualized";
import React, { useCallback, type JSX, useState, useEffect } from "react";
import { ArrowKeyStepper, AutoSizer, List, type ListRowProps } from "react-virtualized";

import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
import { _t } from "../../../../languageHandler";
Expand All @@ -23,28 +23,53 @@ interface RoomListProps {
* A virtualized list of rooms.
*/
export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Element {
const [focusedIndex, setFocusedIndex] = useState(activeIndex);
useEffect(() => {
setFocusedIndex(activeIndex);
}, [activeIndex]);

const roomRendererMemoized = useCallback(
({ key, index, style }: ListRowProps) => (
<RoomListItemView room={rooms[index]} key={key} style={style} isSelected={activeIndex === index} />
<RoomListItemView
room={rooms[index]}
key={key}
style={style}
isSelected={activeIndex === index}
isKeyboardSelected={focusedIndex === index}
/>
),
[rooms, activeIndex],
[rooms, activeIndex, focusedIndex],
);

// The first div is needed to make the virtualized list take all the remaining space and scroll correctly
return (
<div className="mx_RoomList" data-testid="room-list">
<AutoSizer>
{({ height, width }) => (
<List
aria-label={_t("room_list|list_title")}
className="mx_RoomList_List"
rowRenderer={roomRendererMemoized}
<ArrowKeyStepper
mode="cells"
columnCount={1}
rowCount={rooms.length}
rowHeight={48}
height={height}
width={width}
scrollToIndex={activeIndex ?? 0}
/>
isControlled={true}
scrollToRow={focusedIndex ?? 0}
onScrollToChange={({ scrollToRow }) => setFocusedIndex(scrollToRow)}
>
{({ onSectionRendered, scrollToRow }) => (
<List
onSectionRendered={onSectionRendered}
scrollToRow={scrollToRow}
aria-label={_t("room_list|list_title")}
className="mx_RoomList_List"
rowRenderer={roomRendererMemoized}
rowCount={rooms.length}
rowHeight={48}
height={height}
width={width}
scrollToIndex={activeIndex ?? 0}
tabIndex={-1}
/>
)}
</ArrowKeyStepper>
)}
</AutoSizer>
</div>
Expand Down
31 changes: 26 additions & 5 deletions src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/

import React, { type JSX, memo, useState } from "react";
import React, { type JSX, memo, useEffect, useRef, useState } from "react";
import { type Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";

Expand All @@ -24,6 +24,10 @@ interface RoomListItemViewPropsProps extends React.HTMLAttributes<HTMLButtonElem
* Whether the room is selected
*/
isSelected: boolean;
/**
* Whether the room is focused when navigating with the keyboard
*/
isKeyboardSelected: boolean;
}

/**
Expand All @@ -32,24 +36,40 @@ interface RoomListItemViewPropsProps extends React.HTMLAttributes<HTMLButtonElem
export const RoomListItemView = memo(function RoomListItemView({
room,
isSelected,
isKeyboardSelected,
...props
}: RoomListItemViewPropsProps): JSX.Element {
const ref = useRef<HTMLButtonElement>(null);
const vm = useRoomListItemViewModel(room);

const [isHover, setIsHover] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);

// Focus the button when the room is selected via keyboard navigation
useEffect(() => {
if (isKeyboardSelected) {
ref.current?.focus();
} else {
ref.current?.blur();
}
}, [isKeyboardSelected]);

// The compound menu in RoomListItemMenuView needs to be rendered when the hover menu is shown
// Using display: none; and then display:flex when hovered in CSS causes the menu to be misaligned
const showHoverDecoration = (isMenuOpen || isHover) && vm.showHoverMenu;
const showHoverDecoration = isMenuOpen || isHover;
const showHoverMenu = showHoverDecoration && vm.showHoverMenu;

const isNotificationDecorationVisible = !showHoverDecoration && vm.showNotificationDecoration;
const isInvitation = vm.notificationState.invited;
const isNotificationDecorationVisible = isInvitation || (!showHoverDecoration && vm.showNotificationDecoration);

return (
<button
ref={ref}
className={classNames("mx_RoomListItemView", {
mx_RoomListItemView_empty: !isNotificationDecorationVisible && !showHoverDecoration,
mx_RoomListItemView_notification_decoration: isNotificationDecorationVisible,
mx_RoomListItemView_menu_open: showHoverDecoration,
mx_RoomListItemView_hover: showHoverDecoration,
mx_RoomListItemView_menu_open: showHoverMenu,
mx_RoomListItemView_selected: isSelected,
mx_RoomListItemView_bold: vm.isBold,
})}
Expand All @@ -61,6 +81,7 @@ export const RoomListItemView = memo(function RoomListItemView({
onMouseOut={() => setIsHover(false)}
onFocus={() => setIsHover(true)}
onBlur={() => setIsHover(false)}
tabIndex={isKeyboardSelected ? 0 : -1}
{...props}
>
{/* We need this extra div between the button and the content in order to add a padding which is not messing with the virtualized list */}
Expand All @@ -76,7 +97,7 @@ export const RoomListItemView = memo(function RoomListItemView({
<span className="mx_RoomListItemView_roomName" title={vm.name}>
{vm.name}
</span>
{showHoverDecoration ? (
{showHoverMenu ? (
<RoomListItemMenuView
room={room}
setMenuOpen={(isOpen) => {
Expand Down
Loading