Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Give each room directory entry the listitem role to correspond with the containing list. #7035

Merged
merged 1 commit into from
Oct 29, 2021
Merged

Give each room directory entry the listitem role to correspond with the containing list. #7035

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
9 changes: 7 additions & 2 deletions res/css/structures/_RoomDirectory.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ limitations under the License.
vertical-align: text-top;
margin-right: 2px;
content: "";
mask: url('$(res)/img/feather-customised/user.svg');
mask: url("$(res)/img/feather-customised/user.svg");
mask-repeat: no-repeat;
mask-position: center;
// scale it down and make the size slightly bigger (16 instead of 14px)
Expand All @@ -132,7 +132,8 @@ limitations under the License.
}
}

.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
.mx_RoomDirectory_join,
.mx_RoomDirectory_preview {
align-self: center;
white-space: nowrap;
}
Expand Down Expand Up @@ -220,3 +221,7 @@ limitations under the License.
margin-top: 5px;
}
}

.mx_RoomDirectory_listItem {
display: contents;
}
23 changes: 11 additions & 12 deletions src/components/structures/RoomDirectory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -589,9 +589,12 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32);

// We use onMouseDown instead of onClick, so that we can avoid text getting selected
return [
return <div
key={room.room_id}
role="listitem"
className="mx_RoomDirectory_listItem"
>
<div
key={`${room.room_id}_avatar`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_roomAvatar"
>
Expand All @@ -603,9 +606,8 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
idName={name}
url={avatarUrl}
/>
</div>,
</div>
<div
key={`${room.room_id}_description`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_roomDescription"
>
Expand All @@ -626,30 +628,27 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
>
{ getDisplayAliasForRoom(room) }
</div>
</div>,
</div>
<div
key={`${room.room_id}_memberCount`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_roomMemberCount"
>
{ room.num_joined_members }
</div>,
</div>
<div
key={`${room.room_id}_preview`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text
className="mx_RoomDirectory_preview"
>
{ previewButton }
</div>,
</div>
<div
key={`${room.room_id}_join`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_join"
>
{ joinOrViewButton }
</div>,
];
</div>
</div>;
}

private stringLooksLikeId(s: string, fieldType: IFieldType) {
Expand Down