sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add border to the Avatars (#2428)

Browse Source
This commit is contained in:
Lipis 2020-11-29 20:19:06 +02:00 committed by GitHub
parent b21fd49412
commit bdb1fb2dae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/actions/actionNavigate.tsx
View File

@ -43,12 +43,13 @@ export const actionGoToCollaborator = register({
return null; return null;
} }
const { background } = getClientColors(clientId); const { background, stroke } = getClientColors(clientId);
const shortName = getClientInitials(collaborator.username); const shortName = getClientInitials(collaborator.username);
return ( return (
<Avatar <Avatar
color={background} color={background}
border={stroke}
onClick={() => updateData(collaborator.pointer)} onClick={() => updateData(collaborator.pointer)}
> >
{shortName} {shortName}

9
src/components/Avatar.tsx
View File

@ -6,10 +6,15 @@ type AvatarProps = {
children: string; children: string;
onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
color: string; color: string;
border: string;
}; };
export const Avatar = ({ children, color, onClick }: AvatarProps) => ( export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
<div className="Avatar" style={{ background: color }} onClick={onClick}> <div
className="Avatar"
style={{ background: color, border: `1px solid ${border}` }}
onClick={onClick}
>
{children} {children}
</div> </div>
); );