PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source
This commit is contained in:
Nolan Darilek 2021-10-29 07:30:05 -05:00 committed by GitHub
parent 3defb863b3
commit 98edc467e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/structures/_RoomDirectory.scss
View file

@ -121,7 +121,7 @@ limitations under the License.
vertical-align: text-top; vertical-align: text-top;
margin-right: 2px; margin-right: 2px;
content: ""; content: "";
mask: url('$(res)/img/feather-customised/user.svg'); mask: url("$(res)/img/feather-customised/user.svg");
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
// scale it down and make the size slightly bigger (16 instead of 14px) // scale it down and make the size slightly bigger (16 instead of 14px)
@ -132,7 +132,8 @@ limitations under the License.
} }
} }
.mx_RoomDirectory_join, .mx_RoomDirectory_preview { .mx_RoomDirectory_join,
.mx_RoomDirectory_preview {
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
} }
@ -220,3 +221,7 @@ limitations under the License.
margin-top: 5px; margin-top: 5px;
} }
} }
.mx_RoomDirectory_listItem {
display: contents;
}

23
src/components/structures/RoomDirectory.tsx
View file

@ -589,9 +589,12 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
if (room.avatar_url) avatarUrl = mediaFromMxc(room.avatar_url).getSquareThumbnailHttp(32); 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 // 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 <div
key={`${room.room_id}_avatar`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)} onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_roomAvatar" className="mx_RoomDirectory_roomAvatar"
> >
@ -603,9 +606,8 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
idName={name} idName={name}
url={avatarUrl} url={avatarUrl}
/> />
</div>, </div>
<div <div
key={`${room.room_id}_description`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)} onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_roomDescription" className="mx_RoomDirectory_roomDescription"
> >
@ -626,30 +628,27 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
> >
{ getDisplayAliasForRoom(room) } { getDisplayAliasForRoom(room) }
</div> </div>
</div>, </div>
<div <div
key={`${room.room_id}_memberCount`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)} onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_roomMemberCount" className="mx_RoomDirectory_roomMemberCount"
> >
{ room.num_joined_members } { room.num_joined_members }
</div>, </div>
<div <div
key={`${room.room_id}_preview`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)} onMouseDown={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text // cancel onMouseDown otherwise shift-clicking highlights text
className="mx_RoomDirectory_preview" className="mx_RoomDirectory_preview"
> >
{ previewButton } { previewButton }
</div>, </div>
<div <div
key={`${room.room_id}_join`}
onMouseDown={(ev) => this.onRoomClicked(room, ev)} onMouseDown={(ev) => this.onRoomClicked(room, ev)}
className="mx_RoomDirectory_join" className="mx_RoomDirectory_join"
> >
{ joinOrViewButton } { joinOrViewButton }
</div>, </div>
]; </div>;
} }
private stringLooksLikeId(s: string, fieldType: IFieldType) { private stringLooksLikeId(s: string, fieldType: IFieldType) {