[MM-23584][MM-23675] Add first and last name to user profile view & language support (#4092)

* Add name to profile view

* Add first and last name fields

* Styling update

* Update snapshot

* Add language support and change ordering
This commit is contained in:
shred86 2020-04-09 03:05:01 -07:00 committed by GitHub
parent 7afa9aed01
commit c07e8fb8d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 9 deletions

View file

@ -146,13 +146,12 @@ exports[`user_profile should match snapshot 1`] = `
"fontWeight": "600",
"marginBottom": 10,
"marginTop": 25,
"textTransform": "uppercase",
},
null,
]
}
>
USERNAME
</Text>
/>
<Text
style={
Array [
@ -164,7 +163,7 @@ exports[`user_profile should match snapshot 1`] = `
]
}
>
fred
test
</Text>
</View>
<View>
@ -177,13 +176,42 @@ exports[`user_profile should match snapshot 1`] = `
"fontWeight": "600",
"marginBottom": 10,
"marginTop": 25,
"textTransform": "uppercase",
},
null,
]
}
/>
<Text
style={
Array [
Object {
"color": "#3d3c40",
"fontSize": 15,
},
null,
]
}
>
NICKNAME
fake
</Text>
</View>
<View>
<Text
style={
Array [
Object {
"color": undefined,
"fontSize": 13,
"fontWeight": "600",
"marginBottom": 10,
"marginTop": 25,
"textTransform": "uppercase",
},
null,
]
}
/>
<Text
style={
Array [

View file

@ -140,13 +140,32 @@ export default class UserProfile extends PureComponent {
};
buildDisplayBlock = (property) => {
const {formatMessage} = this.context.intl;
const {theme, user, isLandscape} = this.props;
const style = createStyleSheet(theme);
let label;
if (Object.prototype.hasOwnProperty.call(user, property) && user[property].length > 0) {
switch (property) {
case 'first_name':
label = formatMessage({id: 'user.settings.general.firstName', defaultMessage: 'First Name'});
break;
case 'last_name':
label = formatMessage({id: 'user.settings.general.lastName', defaultMessage: 'Last Name'});
break;
case 'email':
label = formatMessage({id: 'user.settings.general.email', defaultMessage: 'Email'});
break;
case 'nickname':
label = formatMessage({id: 'user.settings.general.nickname', defaultMessage: 'Nickname'});
break;
case 'position':
label = formatMessage({id: 'user.settings.general.position', defaultMessage: 'Position'});
}
if (user.hasOwnProperty(property) && user[property].length > 0) {
return (
<View>
<Text style={[style.header, padding(isLandscape)]}>{property.toUpperCase()}</Text>
<Text style={[style.header, padding(isLandscape)]}>{label}</Text>
<Text style={[style.text, padding(isLandscape)]}>{user[property]}</Text>
</View>
);
@ -284,11 +303,12 @@ export default class UserProfile extends PureComponent {
return (
<View style={style.content}>
{this.props.enableTimezone && this.buildTimezoneBlock()}
{this.buildDisplayBlock('username')}
{this.buildDisplayBlock('first_name')}
{this.buildDisplayBlock('last_name')}
{this.props.config.ShowEmailAddress === 'true' && this.buildDisplayBlock('email')}
{this.buildDisplayBlock('nickname')}
{this.buildDisplayBlock('position')}
{this.props.enableTimezone && this.buildTimezoneBlock()}
</View>
);
}
@ -351,6 +371,7 @@ const createStyleSheet = makeStyleSheetFromTheme((theme) => {
header: {
fontSize: 13,
fontWeight: '600',
textTransform: 'uppercase',
color: changeOpacity(theme.centerChannelColor, 0.5),
marginTop: 25,
marginBottom: 10,