Use Unicode aware character-wise slicing (#159)

diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index 616cea63f1a4145e60e2dbb98e17cd8313f1d2ec..950c9baef573bc53469dbc81a31638ceac5abca5 100644 (file)
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -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>
           )

diff --git a/src/app/molecules/image-upload/ImageUpload.jsx b/src/app/molecules/image-upload/ImageUpload.jsx
index da794892532b7a88a0191bd6e7e73372f62888be..5beed72b6a9b69ea3b3bd55bcb1c7ec31ea1053c 100644 (file)
--- a/src/app/molecules/image-upload/ImageUpload.jsx
+++ b/src/app/molecules/image-upload/ImageUpload.jsx
@@ -48,7 +48,7 @@ function ImageUpload({
       >
         <Avatar
           imageSrc={imageSrc}
-          text={text.slice(0, 1)}
+          text={text}
           bgColor={bgColor}
           size="large"
         />

diff --git a/src/app/molecules/people-selector/PeopleSelector.jsx b/src/app/molecules/people-selector/PeopleSelector.jsx
index 5fff5c0b4544732c437923981370d97d88b5ea1c..23c71f9f54688b315aeb93ab847c02b4c9be4884 100644 (file)
--- a/src/app/molecules/people-selector/PeopleSelector.jsx
+++ b/src/app/molecules/people-selector/PeopleSelector.jsx
@@ -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>

diff --git a/src/app/molecules/room-intro/RoomIntro.jsx b/src/app/molecules/room-intro/RoomIntro.jsx
index e9ae6f525ff72268e43701266414e34466d2a05a..315d561a87dbf981ef629561f220ac9ae1390998 100644 (file)
--- a/src/app/molecules/room-intro/RoomIntro.jsx
+++ b/src/app/molecules/room-intro/RoomIntro.jsx
@@ -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>

diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index 47201a625500175cc07f202ea13f8b6dacd60048..3367746f7267a206ce7e37d26b9e56c827ad7def 100644 (file)
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -51,7 +51,7 @@ function RoomSelector({
       content={(
         <>
           <Avatar
-            text={name.slice(0, 1)}
+            text={name}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
             iconSrc={iconSrc}

diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
index 7a5e20bc5ff1f3b59403f5db332d54a9867aa3be..059d6d39bb9aac0f6c445da5de273547057285a9 100644 (file)
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ b/src/app/molecules/room-tile/RoomTile.jsx
@@ -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">

diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx
index 35fe8f2e8645a9452d15e59cb1cf13a4e472f957..b93a6b52a5e887fe5d39b9416a44e1dbac516a09 100644 (file)
--- a/src/app/organisms/navigation/SideBar.jsx
+++ b/src/app/organisms/navigation/SideBar.jsx
@@ -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}

diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 191678a3e76126d0f933f3b29160cc6801026608..590c6da91046050d933b7b3d3deab0a20a10c56b 100644 (file)
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -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"
           />

diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx
index 170d25d17bb18ae9754efcc4fc76b25fcbbe0cbd..60bbca3726326a59bff8c5be2feb5a5c3de27ed6 100644 (file)
--- a/src/app/organisms/room/RoomViewContent.jsx
+++ b/src/app/organisms/room/RoomViewContent.jsx
@@ -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"
         />

diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index e51cbd3822e2efaf3a1d4ed46f7ec6a4ea5538f3..30072f6a3e898abda924c7a932d56c27f412967d 100644 (file)
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -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>}