mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6234 from SimonBrandner/fix/room-dir-click/13751

Browse source 
Improve room directory click behaviour
This commit is contained in:
Travis Ralston 2021-06-22 19:44:20 -06:00 committed by GitHub
commit 759a4e796f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -337,11 +337,10 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
} }
private onRoomClicked = (room: IRoom, ev: ButtonEvent) => { private onRoomClicked = (room: IRoom, ev: ButtonEvent) => {
// If room was shift-clicked, remove it from the room directory
if (ev.shiftKey && !this.state.selectedCommunityId) { if (ev.shiftKey && !this.state.selectedCommunityId) {
ev.preventDefault(); ev.preventDefault();
this.removeFromDirectory(room); this.removeFromDirectory(room);
} else {
this.showRoom(room);
} }
}; };
@ -568,11 +567,11 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
let avatarUrl = null; let avatarUrl = null;
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
return [ return [
<div key={ `${room.room_id}_avatar` } <div
onClick={(ev) => this.onRoomClicked(room, ev)} key={ `${room.room_id}_avatar` }
// cancel onMouseDown otherwise shift-clicking highlights text onMouseDown={(ev) => this.onRoomClicked(room, ev)}
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_roomAvatar" className="mx_RoomDirectory_roomAvatar"
> >
<BaseAvatar <BaseAvatar
@ -584,42 +583,50 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
url={avatarUrl} url={avatarUrl}
/> />
</div>, </div>,
<div key={ `${room.room_id}_description` } <div
onClick={(ev) => this.onRoomClicked(room, ev)} key={ `${room.room_id}_description` }
// cancel onMouseDown otherwise shift-clicking highlights text onMouseDown={(ev) => this.onRoomClicked(room, ev)}
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_roomDescription" className="mx_RoomDirectory_roomDescription"
> >
<div className="mx_RoomDirectory_name">{ name }</div>&nbsp; <div
<div className="mx_RoomDirectory_topic" className="mx_RoomDirectory_name"
onClick={ (ev) => { ev.stopPropagation(); } } onMouseDown={(ev) => this.onRoomClicked(room, ev)}
>
{ name }
</div>&nbsp;
<div
className="mx_RoomDirectory_topic"
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
dangerouslySetInnerHTML={{ __html: topic }} dangerouslySetInnerHTML={{ __html: topic }}
/> />
<div className="mx_RoomDirectory_alias">{ getDisplayAliasForRoom(room) }</div> <div
className="mx_RoomDirectory_alias"
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
>
{ getDisplayAliasForRoom(room) }
</div>
</div>, </div>,
<div key={ `${room.room_id}_memberCount` } <div
onClick={(ev) => this.onRoomClicked(room, ev)} key={ `${room.room_id}_memberCount` }
// cancel onMouseDown otherwise shift-clicking highlights text onMouseDown={(ev) => this.onRoomClicked(room, ev)}
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_roomMemberCount" className="mx_RoomDirectory_roomMemberCount"
> >
{ room.num_joined_members } { room.num_joined_members }
</div>, </div>,
<div key={ `${room.room_id}_preview` } <div
onClick={(ev) => this.onRoomClicked(room, ev)} key={ `${room.room_id}_preview` }
onMouseDown={(ev) => this.onRoomClicked(room, ev)}
// cancel onMouseDown otherwise shift-clicking highlights text // cancel onMouseDown otherwise shift-clicking highlights text
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_preview" className="mx_RoomDirectory_preview"
> >
{previewButton} { previewButton }
</div>, </div>,
<div key={ `${room.room_id}_join` } <div
onClick={(ev) => this.onRoomClicked(room, ev)} key={ `${room.room_id}_join` }
// cancel onMouseDown otherwise shift-clicking highlights text onMouseDown={(ev) => this.onRoomClicked(room, ev)}
onMouseDown={(ev) => {ev.preventDefault();}}
className="mx_RoomDirectory_join" className="mx_RoomDirectory_join"
> >
{joinOrViewButton} { joinOrViewButton }
</div>, </div>,
]; ];
} }