Merge branch 'ref/omni' of github.com:RocketChat/Rocket.Chat into ref…

…/omni-curr-chats
RocketChat · Aug 21, 2020 · da8388b · da8388b
2 parents 07f2e89 + ab78f68
commit da8388b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/client/components/basic/UserCard.js b/client/components/basic/UserCard.js
@@ -22,17 +22,16 @@ export const Action = ({ icon, label, ...props }) => (
 
 export const Info = (props) => (
 	<Box
-		mb='x4'
+		mbe='x4'
 		is='span'
-		fontSize='p1'
 		fontScale='p1'
 		color='hint'
 		withTruncatedText
 		{...props}
 	/>
 );
 
-export const Username = ({ name, status = <Status.Offline/> }) => <Box display='flex' flexShrink={0} alignItems='center' fontScale='s2' color='default' withTruncatedText>
+export const Username = ({ name, status = <Status.Offline/>, title }) => <Box display='flex' title={title} flexShrink={0} alignItems='center' fontScale='s2' color='default' withTruncatedText>
 	{status} <Box mis='x8' flexGrow={1} withTruncatedText>{name}</Box>
 </Box>;
 
@@ -81,8 +80,9 @@ const UserCard = forwardRef(({
 		</Box>}
 	</Box>
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis='x24' width='1px'>
-		<Username status={status} name={name}/>
-		{nickname && <Info title={t('Nickname')}>{nickname}</Info>}
+		<Box withTruncatedText display='flex'>
+			<Username status={status} name={name} title={username !== name && username}/>{nickname && <Box title={t('Nickname')} color='hint' mis='x8' fontScale='p1' withTruncatedText>({ nickname })</Box> }
+		</Box>
 		{ customStatus && <Info>{customStatus}</Info> }
 		<Roles>{roles}</Roles>
 		<Info>{localTime}</Info>

diff --git a/client/components/basic/UserCard.stories.js b/client/components/basic/UserCard.stories.js
@@ -16,6 +16,11 @@ const user = {
 	localTime: 'Local Time: 7:44 AM',
 };
 
+const nickname = {
+	...user,
+	nickname: 'nicknamenickname',
+};
+
 const largeName = {
 	...user,
 	customStatus:
@@ -59,8 +64,8 @@ const noBioNoLocalTimeNoRoles = {
 
 
 export const Basic = () => <UserCard {...user} />;
+export const Nickname = () => <UserCard {...nickname} />;
 export const LargeName = () => <UserCard {...largeName} />;
-
 export const NoRoles = () => <UserCard {...noRoles} />;
 export const NoActions = () => <UserCard {...noActions} />;
 export const NoLocalTime = () => <UserCard {...noLocalTime} />;

diff --git a/client/components/basic/UserInfo.js b/client/components/basic/UserInfo.js
@@ -50,7 +50,7 @@ export const UserInfo = React.memo(function UserInfo({
 		{actions}
 
 		<Margins block='x4'>
-			<Username name={username} status={status} />
+			<UserCard.Username name={name || username} status={status} />
 			<Info>{customStatus}</Info>
 
 			{!!roles && <>
@@ -63,6 +63,11 @@ export const UserInfo = React.memo(function UserInfo({
 				<Info><UTCClock utcOffset={utcOffset}/></Info>
 			</>}
 
+			{username !== name && <>
+				<Label>{t('Username')}</Label>
+				<Info>{username}</Info>
+			</>}
+
 			<Label>{t('Last_login')}</Label>
 			<Info>{lastLogin ? timeAgo(lastLogin) : t('Never')}</Info>
 

diff --git a/client/components/basic/UserInfo.stories.js b/client/components/basic/UserInfo.stories.js
@@ -23,4 +23,10 @@ const user = {
 	},
 };
 
+const nickname = {
+	...user,
+	nickname: 'Nickname',
+};
+
 export const Default = () => <VerticalBar><UserInfo { ...user } /></VerticalBar>;
+export const Nickname = () => <VerticalBar><UserInfo { ...nickname } /></VerticalBar>;