[MM-12145] Make user info of user list on two rows: first with username and second with teammate display (#2185)
* make user list row on two columns: first is username, second is teammate display * move style of filler
This commit is contained in:
Saturnino Abril
Elias Nahum
parent
cd38d8690f
commit
bf36a7533e
5 changed files with 318 additions and 177 deletions
|
|
@ -49,7 +49,9 @@ export default class CustomListRow extends React.PureComponent {
|
|||
</View>
|
||||
</View>
|
||||
}
|
||||
{this.props.children}
|
||||
<View style={style.children}>
|
||||
{this.props.children}
|
||||
</View>
|
||||
</View>
|
||||
</ConditionalTouchable>
|
||||
);
|
||||
|
|
@ -65,9 +67,8 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
|
|||
alignItems: 'center',
|
||||
backgroundColor: theme.centerChannelBg,
|
||||
},
|
||||
displayName: {
|
||||
fontSize: 15,
|
||||
color: theme.centerChannelColor,
|
||||
children: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
selector: {
|
||||
height: 28,
|
||||
|
|
@ -79,6 +80,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
|
|||
justifyContent: 'center',
|
||||
},
|
||||
selectorContainer: {
|
||||
flex: 1,
|
||||
height: 50,
|
||||
paddingRight: 15,
|
||||
alignItems: 'center',
|
||||
|
|
|
|||
|
|
@ -1,147 +1,282 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UserListRow should match snapshot 1`] = `
|
||||
<CustomListRow
|
||||
enabled={true}
|
||||
id="21345"
|
||||
onPress={[Function]}
|
||||
theme={Object {}}
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(ProfilePicture)
|
||||
size={32}
|
||||
userId="21345"
|
||||
/>
|
||||
<Component
|
||||
style={
|
||||
<CustomListRow
|
||||
enabled={true}
|
||||
id="21345"
|
||||
onPress={[Function]}
|
||||
theme={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 5,
|
||||
"awayIndicator": "#ffbc42",
|
||||
"buttonBg": "#166de0",
|
||||
"buttonColor": "#ffffff",
|
||||
"centerChannelBg": "#ffffff",
|
||||
"centerChannelColor": "#3d3c40",
|
||||
"codeTheme": "github",
|
||||
"dndIndicator": "#f74343",
|
||||
"errorTextColor": "#fd5960",
|
||||
"linkColor": "#2389d7",
|
||||
"mentionBj": "#ffffff",
|
||||
"mentionColor": "#145dbf",
|
||||
"mentionHighlightBg": "#ffe577",
|
||||
"mentionHighlightLink": "#166de0",
|
||||
"newMessageSeparator": "#ff8800",
|
||||
"onlineIndicator": "#06d6a0",
|
||||
"sidebarBg": "#145dbf",
|
||||
"sidebarHeaderBg": "#1153ab",
|
||||
"sidebarHeaderTextColor": "#ffffff",
|
||||
"sidebarText": "#ffffff",
|
||||
"sidebarTextActiveBorder": "#579eff",
|
||||
"sidebarTextActiveColor": "#ffffff",
|
||||
"sidebarTextHoverBg": "#4578bf",
|
||||
"sidebarUnreadText": "#ffffff",
|
||||
"type": "Mattermost",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Component>
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 15,
|
||||
}
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"color": "#3d3c40",
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 10,
|
||||
}
|
||||
>
|
||||
user
|
||||
</Component>
|
||||
}
|
||||
>
|
||||
<Connect(ProfilePicture)
|
||||
size={32}
|
||||
userId="21345"
|
||||
/>
|
||||
</Component>
|
||||
<Component>
|
||||
<Component
|
||||
ellipsizeMode="tail"
|
||||
numberOfLines={1}
|
||||
style={
|
||||
<Component
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 15,
|
||||
"marginLeft": 5,
|
||||
},
|
||||
Object {
|
||||
"justifyContent": "center",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Component>
|
||||
<Component
|
||||
ellipsizeMode="tail"
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"color": "#3d3c40",
|
||||
"fontSize": 15,
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
(@user)
|
||||
>
|
||||
@user
|
||||
</Component>
|
||||
</Component>
|
||||
</Component>
|
||||
</Component>
|
||||
</CustomListRow>
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomListRow>
|
||||
</Component>
|
||||
`;
|
||||
|
||||
exports[`UserListRow should match snapshot for currentUser with (you) populated in list 1`] = `
|
||||
<CustomListRow
|
||||
enabled={true}
|
||||
id="21345"
|
||||
onPress={[Function]}
|
||||
theme={Object {}}
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(ProfilePicture)
|
||||
size={32}
|
||||
userId="21345"
|
||||
/>
|
||||
<Component
|
||||
style={
|
||||
<CustomListRow
|
||||
enabled={true}
|
||||
id="21345"
|
||||
onPress={[Function]}
|
||||
theme={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 5,
|
||||
"awayIndicator": "#ffbc42",
|
||||
"buttonBg": "#166de0",
|
||||
"buttonColor": "#ffffff",
|
||||
"centerChannelBg": "#ffffff",
|
||||
"centerChannelColor": "#3d3c40",
|
||||
"codeTheme": "github",
|
||||
"dndIndicator": "#f74343",
|
||||
"errorTextColor": "#fd5960",
|
||||
"linkColor": "#2389d7",
|
||||
"mentionBj": "#ffffff",
|
||||
"mentionColor": "#145dbf",
|
||||
"mentionHighlightBg": "#ffe577",
|
||||
"mentionHighlightLink": "#166de0",
|
||||
"newMessageSeparator": "#ff8800",
|
||||
"onlineIndicator": "#06d6a0",
|
||||
"sidebarBg": "#145dbf",
|
||||
"sidebarHeaderBg": "#1153ab",
|
||||
"sidebarHeaderTextColor": "#ffffff",
|
||||
"sidebarText": "#ffffff",
|
||||
"sidebarTextActiveBorder": "#579eff",
|
||||
"sidebarTextActiveColor": "#ffffff",
|
||||
"sidebarTextHoverBg": "#4578bf",
|
||||
"sidebarUnreadText": "#ffffff",
|
||||
"type": "Mattermost",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Component>
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
user
|
||||
</Component>
|
||||
</Component>
|
||||
<Component>
|
||||
<Component
|
||||
ellipsizeMode="tail"
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 15,
|
||||
"marginLeft": 5,
|
||||
}
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"color": "#3d3c40",
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(ProfilePicture)
|
||||
size={32}
|
||||
userId="21345"
|
||||
/>
|
||||
</Component>
|
||||
</Component>
|
||||
</CustomListRow>
|
||||
<Component
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"marginLeft": 5,
|
||||
},
|
||||
Object {
|
||||
"justifyContent": "center",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Component>
|
||||
<Component
|
||||
ellipsizeMode="tail"
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"color": "#3d3c40",
|
||||
"fontSize": 15,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Component>
|
||||
</Component>
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomListRow>
|
||||
</Component>
|
||||
`;
|
||||
|
||||
exports[`UserListRow should match snapshot for deactivated user 1`] = `
|
||||
<CustomListRow
|
||||
enabled={true}
|
||||
id="21345"
|
||||
onPress={[Function]}
|
||||
theme={Object {}}
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(ProfilePicture)
|
||||
size={32}
|
||||
userId="21345"
|
||||
/>
|
||||
<Component
|
||||
style={
|
||||
<CustomListRow
|
||||
enabled={true}
|
||||
id="21345"
|
||||
onPress={[Function]}
|
||||
theme={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 5,
|
||||
"awayIndicator": "#ffbc42",
|
||||
"buttonBg": "#166de0",
|
||||
"buttonColor": "#ffffff",
|
||||
"centerChannelBg": "#ffffff",
|
||||
"centerChannelColor": "#3d3c40",
|
||||
"codeTheme": "github",
|
||||
"dndIndicator": "#f74343",
|
||||
"errorTextColor": "#fd5960",
|
||||
"linkColor": "#2389d7",
|
||||
"mentionBj": "#ffffff",
|
||||
"mentionColor": "#145dbf",
|
||||
"mentionHighlightBg": "#ffe577",
|
||||
"mentionHighlightLink": "#166de0",
|
||||
"newMessageSeparator": "#ff8800",
|
||||
"onlineIndicator": "#06d6a0",
|
||||
"sidebarBg": "#145dbf",
|
||||
"sidebarHeaderBg": "#1153ab",
|
||||
"sidebarHeaderTextColor": "#ffffff",
|
||||
"sidebarText": "#ffffff",
|
||||
"sidebarTextActiveBorder": "#579eff",
|
||||
"sidebarTextActiveColor": "#ffffff",
|
||||
"sidebarTextHoverBg": "#4578bf",
|
||||
"sidebarUnreadText": "#ffffff",
|
||||
"type": "Mattermost",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Component>
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
user
|
||||
</Component>
|
||||
</Component>
|
||||
<Component>
|
||||
<Component
|
||||
ellipsizeMode="tail"
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 15,
|
||||
"marginLeft": 5,
|
||||
}
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"color": "#3d3c40",
|
||||
"flexDirection": "row",
|
||||
"marginLeft": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Connect(ProfilePicture)
|
||||
size={32}
|
||||
userId="21345"
|
||||
/>
|
||||
</Component>
|
||||
</Component>
|
||||
</CustomListRow>
|
||||
<Component
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"marginLeft": 5,
|
||||
},
|
||||
Object {
|
||||
"justifyContent": "center",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Component>
|
||||
<Component
|
||||
ellipsizeMode="tail"
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"color": "#3d3c40",
|
||||
"fontSize": 15,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Component>
|
||||
</Component>
|
||||
<Component
|
||||
style={
|
||||
Object {
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomListRow>
|
||||
</Component>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ import {
|
|||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
|
||||
import {displayUsername} from 'mattermost-redux/utils/user_utils';
|
||||
|
||||
import ProfilePicture from 'app/components/profile_picture';
|
||||
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
|
||||
import CustomListRow from 'app/components/custom_list/custom_list_row';
|
||||
|
|
@ -48,11 +50,11 @@ export default class UserListRow extends React.PureComponent {
|
|||
const {id, username} = user;
|
||||
const style = getStyleFromTheme(theme);
|
||||
|
||||
let usernameDisplay = `(@${username})`;
|
||||
let usernameDisplay = `@${username}`;
|
||||
if (isMyUser) {
|
||||
usernameDisplay = formatMessage({
|
||||
id: 'mobile.more_dms.you',
|
||||
defaultMessage: '(@{username} - you)',
|
||||
defaultMessage: '@{username} - you',
|
||||
}, {username});
|
||||
}
|
||||
|
||||
|
|
@ -63,36 +65,50 @@ export default class UserListRow extends React.PureComponent {
|
|||
}, {displayname: usernameDisplay});
|
||||
}
|
||||
|
||||
const teammateDisplay = displayUsername(user, teammateNameDisplay);
|
||||
const showTeammateDisplay = teammateDisplay !== username;
|
||||
|
||||
return (
|
||||
<CustomListRow
|
||||
id={id}
|
||||
theme={theme}
|
||||
onPress={this.onPress}
|
||||
enabled={enabled}
|
||||
selectable={selectable}
|
||||
selected={selected}
|
||||
>
|
||||
<ProfilePicture
|
||||
userId={id}
|
||||
size={32}
|
||||
/>
|
||||
<View style={style.textContainer}>
|
||||
<View>
|
||||
<Text style={style.displayName}>
|
||||
{displayUsername(user, teammateNameDisplay)}
|
||||
</Text>
|
||||
<View style={style.container}>
|
||||
<CustomListRow
|
||||
id={id}
|
||||
theme={theme}
|
||||
onPress={this.onPress}
|
||||
enabled={enabled}
|
||||
selectable={selectable}
|
||||
selected={selected}
|
||||
>
|
||||
<View style={style.profileContainer}>
|
||||
<ProfilePicture
|
||||
userId={id}
|
||||
size={32}
|
||||
/>
|
||||
</View>
|
||||
<View>
|
||||
<Text
|
||||
style={style.username}
|
||||
ellipsizeMode='tail'
|
||||
numberOfLines={1}
|
||||
>
|
||||
{usernameDisplay}
|
||||
</Text>
|
||||
<View style={[style.textContainer, (showTeammateDisplay ? style.showTeammateDisplay : style.hideTeammateDisplay)]}>
|
||||
<View>
|
||||
<Text
|
||||
style={style.username}
|
||||
ellipsizeMode='tail'
|
||||
numberOfLines={1}
|
||||
>
|
||||
{usernameDisplay}
|
||||
</Text>
|
||||
</View>
|
||||
{showTeammateDisplay &&
|
||||
<View>
|
||||
<Text
|
||||
style={style.displayName}
|
||||
ellipsizeMode='tail'
|
||||
numberOfLines={1}
|
||||
>
|
||||
{teammateDisplay}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
</CustomListRow>
|
||||
<View style={style.rightFiller}/>
|
||||
</CustomListRow>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -100,50 +116,35 @@ export default class UserListRow extends React.PureComponent {
|
|||
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
|
||||
return {
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
height: 65,
|
||||
paddingHorizontal: 15,
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.centerChannelBg,
|
||||
marginLeft: 10,
|
||||
},
|
||||
displayName: {
|
||||
fontSize: 15,
|
||||
color: theme.centerChannelColor,
|
||||
},
|
||||
icon: {
|
||||
fontSize: 20,
|
||||
profileContainer: {
|
||||
flexDirection: 'row',
|
||||
marginLeft: 10,
|
||||
color: theme.centerChannelColor,
|
||||
},
|
||||
textContainer: {
|
||||
flexDirection: 'row',
|
||||
marginLeft: 5,
|
||||
},
|
||||
username: {
|
||||
marginLeft: 5,
|
||||
showTeammateDisplay: {
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
},
|
||||
hideTeammateDisplay: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
displayName: {
|
||||
fontSize: 15,
|
||||
color: changeOpacity(theme.centerChannelColor, 0.5),
|
||||
},
|
||||
selector: {
|
||||
height: 28,
|
||||
width: 28,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: '#888',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
username: {
|
||||
fontSize: 15,
|
||||
color: theme.centerChannelColor,
|
||||
},
|
||||
selectorContainer: {
|
||||
height: 50,
|
||||
paddingRight: 15,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
selectorDisabled: {
|
||||
backgroundColor: '#888',
|
||||
},
|
||||
selectorFilled: {
|
||||
backgroundColor: '#378FD2',
|
||||
borderWidth: 0,
|
||||
rightFiller: {
|
||||
width: 25,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
import React from 'react';
|
||||
import {configure, shallow} from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
|
||||
import Preferences from 'mattermost-redux/constants/preferences';
|
||||
|
||||
import UserListRow from './user_list_row';
|
||||
|
||||
configure({adapter: new Adapter()});
|
||||
|
|
@ -27,7 +30,7 @@ describe('UserListRow', () => {
|
|||
username: 'user',
|
||||
delete_at: 0,
|
||||
},
|
||||
theme: {},
|
||||
theme: Preferences.THEMES.default,
|
||||
teammateNameDisplay: 'test',
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@
|
|||
"mobile.more_dms.cannot_add_more": "You cannot add more users",
|
||||
"mobile.more_dms.start": "Start",
|
||||
"mobile.more_dms.title": "New Conversation",
|
||||
"mobile.more_dms.you": "(@{username} - you)",
|
||||
"mobile.more_dms.you": "@{username} - you",
|
||||
"mobile.notice_mobile_link": "mobile apps",
|
||||
"mobile.notice_platform_link": "server",
|
||||
"mobile.notice_text": "Mattermost is made possible by the open source software used in our {platform} and {mobile}.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue