[IMPROVE] UserCard and UserInfo Show Real Names Setting (#18628)

ggazzo · web-flow · commit 06467a6d183b · 2020-08-21T03:10:31.000-03:00
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
@@ -48,7 +48,7 @@ export const UserInfo = React.memo(function UserInfo({
 		{actions}
 
 		<Margins block='x4'>
-			<UserCard.Username name={username} status={status} />
+			<UserCard.Username name={name || username} status={status} />
 			<Info>{customStatus}</Info>
 
 			{!!roles && <>
@@ -61,6 +61,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>;
