From bf36a7533e0d8cc7e6e2b258249265c08f0acbfd Mon Sep 17 00:00:00 2001 From: Saturnino Abril Date: Fri, 28 Sep 2018 22:36:43 +0800 Subject: [PATCH] [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 --- app/components/custom_list/custom_list_row.js | 10 +- .../__snapshots__/user_list_test.test.js.snap | 353 ++++++++++++------ .../user_list_row/user_list_row.js | 125 ++++--- .../user_list_row/user_list_test.test.js | 5 +- assets/base/i18n/en.json | 2 +- 5 files changed, 318 insertions(+), 177 deletions(-) diff --git a/app/components/custom_list/custom_list_row.js b/app/components/custom_list/custom_list_row.js index 494349dc3..7650dbf09 100644 --- a/app/components/custom_list/custom_list_row.js +++ b/app/components/custom_list/custom_list_row.js @@ -49,7 +49,9 @@ export default class CustomListRow extends React.PureComponent { } - {this.props.children} + + {this.props.children} + ); @@ -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', diff --git a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap index c5095aacf..2e1519289 100644 --- a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap +++ b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap @@ -1,147 +1,282 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`UserListRow should match snapshot 1`] = ` - - - - - - user - + } + > + - - + + - (@user) + > + @user + - - + + + `; exports[`UserListRow should match snapshot for currentUser with (you) populated in list 1`] = ` - - - - - - user - - - - + - - + + + + + + + + `; exports[`UserListRow should match snapshot for deactivated user 1`] = ` - - - - - - user - - - - + - - + + + + + + + + `; diff --git a/app/components/custom_list/user_list_row/user_list_row.js b/app/components/custom_list/user_list_row/user_list_row.js index 80e1b7c5d..d411c93a3 100644 --- a/app/components/custom_list/user_list_row/user_list_row.js +++ b/app/components/custom_list/user_list_row/user_list_row.js @@ -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 ( - - - - - - {displayUsername(user, teammateNameDisplay)} - + + + + - - - {usernameDisplay} - + + + + {usernameDisplay} + + + {showTeammateDisplay && + + + {teammateDisplay} + + + } - - + + + ); } } @@ -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, }, }; }); diff --git a/app/components/custom_list/user_list_row/user_list_test.test.js b/app/components/custom_list/user_list_row/user_list_test.test.js index 5d37c8e0a..3e7039d46 100644 --- a/app/components/custom_list/user_list_row/user_list_test.test.js +++ b/app/components/custom_list/user_list_row/user_list_test.test.js @@ -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', }; diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index e2bd74a88..ad5afc2bb 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -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}.",