From fa0c1fff88c21ea4704a1e1e17bd8e3f3b7101d7 Mon Sep 17 00:00:00 2001 From: Ian Macdonald Date: Fri, 25 Feb 2022 01:48:11 +0100 Subject: [PATCH] Use up to two scaled initials as a placeholder for users with no avatar. If the user's name consists of just a single word, then use up to two letters from that word as the placeholder. This provides better differentiation of users than the current practice of using just a single letter for everyone. --- .../avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx | 10 +++++++--- ts/util/getInitials.ts | 6 +++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx index 3136d728c..bda153d20 100644 --- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -97,8 +97,12 @@ export const AvatarPlaceHolder = (props: Props) => { ); } - const initial = getInitials(name)?.toLocaleUpperCase() || '0'; - const fontSize = diameter * 0.5; + let initials = getInitials(name)?.toLocaleUpperCase() || '0'; + if (name.indexOf(' ') === -1) { + initials = name.substr(0, 2); + } + + const fontSize = diameter * (1 / (initials.length + 1)); const bgColorIndex = hash % avatarPlaceholderColors.length; @@ -126,7 +130,7 @@ export const AvatarPlaceHolder = (props: Props) => { strokeWidth={1} alignmentBaseline="central" > - {initial} + {initials} diff --git a/ts/util/getInitials.ts b/ts/util/getInitials.ts index dd0d62464..b890870f6 100644 --- a/ts/util/getInitials.ts +++ b/ts/util/getInitials.ts @@ -7,5 +7,9 @@ export function getInitials(name?: string): string | undefined { return name[2]; } - return name[0]; + const initials = name.split(' ').slice(0, 2).map(n => { + return n[0]; + }) + + return initials.join(''); }