smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: follow mode collaborator status indicator (#7459)

Browse source
This commit is contained in:
David Luzar 2023-12-18 16:14:25 +01:00 • committed by GitHub
parent 2a0fe2584e
commit 0808532b49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 75 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/excalidraw/actions/actionNavigate.tsx
View file

@ -1,5 +1,8 @@
import { getClientColor } from "../clients";
import { Avatar } from "../components/Avatar";
import { GoToCollaboratorComponentProps } from "../components/UserList";
import { eyeIcon } from "../components/icons";
import { t } from "../i18n";
import { Collaborator } from "../types";
import { register } from "./register";
@ -35,38 +38,43 @@ export const actionGoToCollaborator = register({
};
},
PanelComponent: ({ updateData, data, appState }) => {
const [clientId, collaborator, withName] = data as [
string,
Collaborator,
boolean,
];
const [socketId, collaborator, withName, isBeingFollowed] =
data as GoToCollaboratorComponentProps;
const background = getClientColor(clientId);
const background = getClientColor(socketId);
return withName ? (
<div
className="dropdown-menu-item dropdown-menu-item-base"
onClick={() => updateData({ ...collaborator, clientId })}
className="dropdown-menu-item dropdown-menu-item-base UserList__collaborator"
onClick={() => updateData({ ...collaborator, socketId })}
>
<Avatar
color={background}
onClick={() => {}}
name={collaborator.username || ""}
src={collaborator.avatarUrl}
isBeingFollowed={appState.userToFollow?.socketId === clientId}
isBeingFollowed={isBeingFollowed}
isCurrentUser={collaborator.isCurrentUser === true}
/>
{collaborator.username}
<div
className="UserList__collaborator-follow-status-icon"
style={{ visibility: isBeingFollowed ? "visible" : "hidden" }}
title={isBeingFollowed ? t("userList.hint.followStatus") : undefined}
aria-hidden
>
{eyeIcon}
</div>
</div>
) : (
<Avatar
color={background}
onClick={() => {
updateData({ ...collaborator, clientId });
updateData({ ...collaborator, socketId });
}}
name={collaborator.username || ""}
src={collaborator.avatarUrl}
isBeingFollowed={appState.userToFollow?.socketId === clientId}
isBeingFollowed={isBeingFollowed}
isCurrentUser={collaborator.isCurrentUser === true}
/>
);