Use Unicode aware character-wise slicing (#159)

This commit is contained in:
Samuel Dionne-Riel 2021-11-10 03:00:25 -05:00 committed by GitHub
parent 2c9e32b6c4
commit 6e9394ec7a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 11 additions and 11 deletions

View file

@ -29,7 +29,7 @@ function Avatar({
{
iconSrc !== null
? <RawIcon size={size} src={iconSrc} />
: text !== null && <Text variant={textSize}>{text}</Text>
: text !== null && <Text variant={textSize}>{[...text][0]}</Text>
}
</span>
)

View file

@ -48,7 +48,7 @@ function ImageUpload({
>
<Avatar
imageSrc={imageSrc}
text={text.slice(0, 1)}
text={text}
bgColor={bgColor}
size="large"
/>

View file

@ -18,7 +18,7 @@ function PeopleSelector({
onClick={onClick}
type="button"
>
<Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="extra-small" />
<Avatar imageSrc={avatarSrc} text={name} bgColor={color} size="extra-small" />
<Text className="people-selector__name" variant="b1">{name}</Text>
{peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
</button>

View file

@ -17,7 +17,7 @@ function RoomIntro({
}) {
return (
<div className="room-intro">
<Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
<Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
<div className="room-intro__content">
<Text className="room-intro__name" variant="h1">{heading}</Text>
<Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>

View file

@ -51,7 +51,7 @@ function RoomSelector({
content={(
<>
<Avatar
text={name.slice(0, 1)}
text={name}
bgColor={colorMXID(roomId)}
imageSrc={imageSrc}
iconSrc={iconSrc}

View file

@ -22,7 +22,7 @@ function RoomTile({
<Avatar
imageSrc={avatarSrc}
bgColor={colorMXID(id)}
text={name.slice(0, 1)}
text={name}
/>
</div>
<div className="room-tile__content">

View file

@ -70,7 +70,7 @@ function ProfileAvatarMenu() {
tooltip={profile.displayName}
imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
bgColor={colorMXID(mx.getUserId())}
text={profile.displayName.slice(0, 1)}
text={profile.displayName}
/>
)}
/>
@ -190,7 +190,7 @@ function SideBar() {
tooltip={room.name}
bgColor={colorMXID(room.roomId)}
imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
text={room.name.slice(0, 1)}
text={room.name}
isUnread={notifications.hasNoti(sRoomId)}
notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
isAlert={notifications.getHighlightNoti(sRoomId) !== 0}

View file

@ -257,7 +257,7 @@ function ProfileViewer() {
<div className="profile-viewer__user">
<Avatar
imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
text={username.slice(0, 1)}
text={username}
bgColor={colorMXID(userId)}
size="large"
/>

View file

@ -356,7 +356,7 @@ function RoomViewContent({
<button type="button" onClick={() => openProfileViewer(mEvent.sender.userId, roomId)}>
<Avatar
imageSrc={mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop')}
text={getUsernameOfRoomMember(mEvent.sender).slice(0, 1)}
text={getUsernameOfRoomMember(mEvent.sender)}
bgColor={senderMXIDColor}
size="small"
/>

View file

@ -24,7 +24,7 @@ function RoomViewHeader({ roomId }) {
return (
<Header>
<Avatar imageSrc={avatarSrc} text={roomName.slice(0, 1)} bgColor={colorMXID(roomId)} size="small" />
<Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
<TitleWrapper>
<Text variant="h2">{roomName}</Text>
{ typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}