From 79288440efeaa76e9bb51f25737bae46643ea2ab Mon Sep 17 00:00:00 2001 From: Colton Shaw <46071821+coltoneshaw@users.noreply.github.com> Date: Sat, 17 Jun 2023 16:01:26 -0400 Subject: [PATCH] [MM-50324]: Increased nickname length from 22 to 64 (#22670) --- .../channel_invite_modal.test.tsx.snap | 13 +++--- .../channel_invite_modal.tsx | 10 ++--- .../components/channel_members_rhs/member.tsx | 42 +++++++++++++------ .../list_item/user_details/user_details.tsx | 5 +++ .../user_list_row/user_list_row.tsx | 5 +++ .../widgets/inputs/users_emails_input.scss | 4 ++ .../src/sass/components/_suggestion-list.scss | 7 +++- webapp/channels/src/sass/layout/_headers.scss | 1 + webapp/channels/src/sass/utils/_flex.scss | 4 ++ webapp/channels/src/utils/constants.tsx | 2 +- 10 files changed, 65 insertions(+), 28 deletions(-) diff --git a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap index 610ccc3955..06d8fb3d6e 100644 --- a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap +++ b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap @@ -248,15 +248,12 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
- + +
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx index a24f097c7f..0dc8f37eba 100644 --- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx +++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx @@ -271,22 +271,20 @@ export default class ChannelInviteModal extends React.PureComponent
- - {displayName} + + {displayName} {option.is_bot && } {isGuest(option.roles) && } {displayName === option.username ? null : {'@'}{option.username} } {userMapping[option.id]} diff --git a/webapp/channels/src/components/channel_members_rhs/member.tsx b/webapp/channels/src/components/channel_members_rhs/member.tsx index 4d7ae5c3ed..723f7481cc 100644 --- a/webapp/channels/src/components/channel_members_rhs/member.tsx +++ b/webapp/channels/src/components/channel_members_rhs/member.tsx @@ -33,43 +33,49 @@ const Avatar = styled.div` `; const UserInfo = styled.div` + display: flex; flex: 1; + cursor: pointer; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - cursor: pointer; `; const DisplayName = styled.span` - display: inline-flex; - gap: 8px; + display: inline; + overflow: hidden; margin-left: 8px; - font-size: 14px; - line-height: 20px; color: var(--center-channel-color); + font-size: 14px; + gap: 8px; + line-height: 20px; + text-overflow: ellipsis; `; const Username = styled.span` - margin-left: 8px; + margin-left: 4px; + color: rgba(var(--center-channel-color-rgb), 0.56); font-size: 12px; line-height: 18px; - color: rgba(var(--center-channel-color-rgb), 0.56); `; const SendMessage = styled.button` display: none; - border: 0; - background-color: transparent; - padding: 0; width: 24px; height: 24px; + padding: 0; + border: 0; + margin-left: 8px; + background-color: transparent; border-radius: 4px; + &:hover { background-color: rgba(var(--center-channel-color-rgb), 0.12); } + .icon { - font-size: 14.4px; color: rgba(var(--center-channel-color-rgb), 0.56); + font-size: 14.4px; }; `; @@ -123,6 +129,7 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions return (
@@ -167,8 +174,14 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions userID={member.user.id} showTooltip={true} emojiSize={16} + spanStyle={{ + display: 'flex', + flex: '0 0 auto', + alignItems: 'center', + }} emojiStyle={{ marginLeft: '8px', + alignItems: 'center', }} /> @@ -242,18 +255,23 @@ export default styled(Member)` ${SendMessage} { display: block; + flex: 0 0 auto; } } .ProfileSpan { display: flex; + overflow: hidden; + width: 100%; flex-direction: row; align-items: center; + // This padding is to make sure the status icon doesnt get clipped off because of the overflow + padding: 4px 0; margin-right: auto; } .MenuWrapper { - font-weight: 600; font-size: 11px; + font-weight: 600; } `; diff --git a/webapp/channels/src/components/more_direct_channels/list_item/user_details/user_details.tsx b/webapp/channels/src/components/more_direct_channels/list_item/user_details/user_details.tsx index cca929d98d..7e4b83fdc2 100644 --- a/webapp/channels/src/components/more_direct_channels/list_item/user_details/user_details.tsx +++ b/webapp/channels/src/components/more_direct_channels/list_item/user_details/user_details.tsx @@ -76,6 +76,11 @@ export default function UserDetails(props: Props): JSX.Element { userID={option.id} showTooltip={true} emojiSize={15} + spanStyle={{ + display: 'flex', + flex: '0 0 auto', + alignItems: 'center', + }} />
{!isBot && ( diff --git a/webapp/channels/src/components/user_list_row/user_list_row.tsx b/webapp/channels/src/components/user_list_row/user_list_row.tsx index 0b3fe43e36..141206d6db 100644 --- a/webapp/channels/src/components/user_list_row/user_list_row.tsx +++ b/webapp/channels/src/components/user_list_row/user_list_row.tsx @@ -153,6 +153,11 @@ const UserListRow = ({user, status, extraInfo = [], actions = [], actionProps, a userID={user.id} emojiSize={16} showTooltip={true} + spanStyle={{ + display: 'flex', + flex: '0 0 auto', + alignItems: 'center', + }} /> diff --git a/webapp/channels/src/components/widgets/inputs/users_emails_input.scss b/webapp/channels/src/components/widgets/inputs/users_emails_input.scss index 9f2779dcdf..893c7cf66d 100644 --- a/webapp/channels/src/components/widgets/inputs/users_emails_input.scss +++ b/webapp/channels/src/components/widgets/inputs/users_emails_input.scss @@ -160,7 +160,9 @@ } .fullname { + overflow: hidden; opacity: 0.5; + text-overflow: ellipsis; &::before { padding: 5px; @@ -169,7 +171,9 @@ } .nickname { + overflow: hidden; opacity: 0.5; + text-overflow: ellipsis; &::before { content: "("; diff --git a/webapp/channels/src/sass/components/_suggestion-list.scss b/webapp/channels/src/sass/components/_suggestion-list.scss index 49dbf1ecbc..cd85b73787 100644 --- a/webapp/channels/src/sass/components/_suggestion-list.scss +++ b/webapp/channels/src/sass/components/_suggestion-list.scss @@ -204,6 +204,7 @@ white-space: nowrap; .suggestion-list__main { + display: flex; overflow: hidden; width: 100%; color: rgba(var(--center-channel-color-rgb), 1); @@ -225,7 +226,11 @@ .suggestion-list__main { width: unset; - max-width: 70%; + + > span:first-child { + overflow: hidden; + text-overflow: ellipsis; + } } .badge { diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss index 422ccc6575..1e03c42b1a 100644 --- a/webapp/channels/src/sass/layout/_headers.scss +++ b/webapp/channels/src/sass/layout/_headers.scss @@ -555,6 +555,7 @@ padding: 10px 15px; background: $bg--gray; border-radius: 3px; + word-break: break-word; } } diff --git a/webapp/channels/src/sass/utils/_flex.scss b/webapp/channels/src/sass/utils/_flex.scss index c882a68a39..2d55986936 100644 --- a/webapp/channels/src/sass/utils/_flex.scss +++ b/webapp/channels/src/sass/utils/_flex.scss @@ -18,6 +18,10 @@ -ms-flex-preferred-size: 0; } +.flex-auto { + flex: 0 0 auto; +} + .flex-wrap { flex-wrap: wrap; } diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx index 686ee962eb..0bed608672 100644 --- a/webapp/channels/src/utils/constants.tsx +++ b/webapp/channels/src/utils/constants.tsx @@ -1923,7 +1923,7 @@ export const Constants = { MAX_EMAIL_LENGTH: 128, MIN_USERNAME_LENGTH: 3, MAX_USERNAME_LENGTH: 22, - MAX_NICKNAME_LENGTH: 22, + MAX_NICKNAME_LENGTH: 64, MIN_PASSWORD_LENGTH: 5, MAX_PASSWORD_LENGTH: 64, MAX_POSITION_LENGTH: 128,