From 09a49302f275331e5b46f66f1a92d0adde8e084f Mon Sep 17 00:00:00 2001 From: Saturnino Abril Date: Tue, 9 Oct 2018 20:50:34 +0800 Subject: [PATCH] Add deactivated to separate row on user list and fix truncating user info (#2232) --- .../channel_list_row/channel_list_row.js | 2 +- app/components/custom_list/custom_list_row.js | 78 ++++---- .../option_list_row/option_list_row.js | 1 - .../__snapshots__/user_list_test.test.js.snap | 172 ++++-------------- .../user_list_row/user_list_row.js | 38 ++-- app/components/custom_section_list.js | 2 - app/screens/more_channels/more_channels.js | 31 +--- assets/base/i18n/en.json | 2 +- 8 files changed, 102 insertions(+), 224 deletions(-) diff --git a/app/components/custom_list/channel_list_row/channel_list_row.js b/app/components/custom_list/channel_list_row/channel_list_row.js index 7d2ef8848..5375d71e7 100644 --- a/app/components/custom_list/channel_list_row/channel_list_row.js +++ b/app/components/custom_list/channel_list_row/channel_list_row.js @@ -43,7 +43,6 @@ export default class ChannelListRow extends React.PureComponent { return ( { container: { flex: 1, flexDirection: 'column', + paddingHorizontal: 15, }, purpose: { marginTop: 7, diff --git a/app/components/custom_list/custom_list_row.js b/app/components/custom_list/custom_list_row.js index 7650dbf09..7212bbcae 100644 --- a/app/components/custom_list/custom_list_row.js +++ b/app/components/custom_list/custom_list_row.js @@ -4,17 +4,16 @@ import PropTypes from 'prop-types'; import React from 'react'; import { + StyleSheet, View, } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; import ConditionalTouchable from 'app/components/conditional_touchable'; import CustomPropTypes from 'app/constants/custom_prop_types'; -import {makeStyleSheetFromTheme} from 'app/utils/theme'; export default class CustomListRow extends React.PureComponent { static propTypes = { - theme: PropTypes.object.isRequired, onPress: PropTypes.func, enabled: PropTypes.bool, selectable: PropTypes.bool, @@ -28,12 +27,11 @@ export default class CustomListRow extends React.PureComponent { }; render() { - const style = getStyleFromTheme(this.props.theme); - return ( {this.props.selectable && @@ -58,40 +56,40 @@ export default class CustomListRow extends React.PureComponent { } } -const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { - return { - container: { - flexDirection: 'row', - height: 65, - paddingHorizontal: 15, - alignItems: 'center', - backgroundColor: theme.centerChannelBg, - }, - children: { - flexDirection: 'row', - }, - selector: { - height: 28, - width: 28, - borderRadius: 14, - borderWidth: 1, - borderColor: '#888', - alignItems: 'center', - justifyContent: 'center', - }, - selectorContainer: { - flex: 1, - height: 50, - paddingRight: 15, - alignItems: 'center', - justifyContent: 'center', - }, - selectorDisabled: { - backgroundColor: '#888', - }, - selectorFilled: { - backgroundColor: '#378FD2', - borderWidth: 0, - }, - }; +const style = StyleSheet.create({ + touchable: { + flex: 1, + }, + container: { + flexDirection: 'row', + height: 65, + flex: 1, + alignItems: 'center', + }, + children: { + flex: 1, + flexDirection: 'row', + }, + selector: { + height: 28, + width: 28, + borderRadius: 14, + borderWidth: 1, + borderColor: '#888', + alignItems: 'center', + justifyContent: 'center', + }, + selectorContainer: { + height: 50, + paddingRight: 10, + alignItems: 'center', + justifyContent: 'center', + }, + selectorDisabled: { + backgroundColor: '#888', + }, + selectorFilled: { + backgroundColor: '#378FD2', + borderWidth: 0, + }, }); diff --git a/app/components/custom_list/option_list_row/option_list_row.js b/app/components/custom_list/option_list_row/option_list_row.js index 48dfc17fa..8b9cb38bf 100644 --- a/app/components/custom_list/option_list_row/option_list_row.js +++ b/app/components/custom_list/option_list_row/option_list_row.js @@ -44,7 +44,6 @@ export default class OptionListRow extends React.PureComponent { return ( @@ -14,41 +14,13 @@ exports[`UserListRow should match snapshot 1`] = ` enabled={true} id="21345" onPress={[Function]} - theme={ - Object { - "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", - } - } > @@ -59,14 +31,12 @@ exports[`UserListRow should match snapshot 1`] = ` @@ -84,13 +54,6 @@ exports[`UserListRow should match snapshot 1`] = ` - `; @@ -101,7 +64,7 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated Object { "flex": 1, "flexDirection": "row", - "marginLeft": 10, + "marginHorizontal": 10, } } > @@ -109,41 +72,13 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated enabled={true} id="21345" onPress={[Function]} - theme={ - Object { - "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", - } - } > @@ -154,14 +89,12 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated @@ -177,13 +110,6 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated /> - `; @@ -194,7 +120,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = ` Object { "flex": 1, "flexDirection": "row", - "marginLeft": 10, + "marginHorizontal": 10, } } > @@ -202,41 +128,13 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = ` enabled={true} id="21345" onPress={[Function]} - theme={ - Object { - "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", - } - } > @@ -247,14 +145,12 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = ` @@ -267,16 +163,22 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = ` "fontSize": 15, } } + > + @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 d411c93a3..68f6b08fa 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 @@ -58,13 +58,6 @@ export default class UserListRow extends React.PureComponent { }, {username}); } - if (user.delete_at > 0) { - usernameDisplay = formatMessage({ - id: 'more_direct_channels.directchannel.deactivated', - defaultMessage: '{displayname} - Deactivated', - }, {displayname: usernameDisplay}); - } - const teammateDisplay = displayUsername(user, teammateNameDisplay); const showTeammateDisplay = teammateDisplay !== username; @@ -72,7 +65,6 @@ export default class UserListRow extends React.PureComponent { - + } + {user.delete_at > 0 && + + + {formatMessage({id: 'mobile.user_list.deactivated', defaultMessage: 'Deactivated'})} + + + } - ); @@ -118,23 +118,19 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { container: { flex: 1, flexDirection: 'row', - marginLeft: 10, + marginHorizontal: 10, }, profileContainer: { flexDirection: 'row', - marginLeft: 10, + alignItems: 'center', color: theme.centerChannelColor, }, textContainer: { - marginLeft: 5, - }, - showTeammateDisplay: { + marginLeft: 10, + justifyContent: 'center', flexDirection: 'column', flex: 1, }, - hideTeammateDisplay: { - justifyContent: 'center', - }, displayName: { fontSize: 15, color: changeOpacity(theme.centerChannelColor, 0.5), @@ -143,8 +139,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { fontSize: 15, color: theme.centerChannelColor, }, - rightFiller: { - width: 25, + deactivated: { + marginTop: 2, + fontSize: 12, + color: changeOpacity(theme.centerChannelColor, 0.5), }, }; }); diff --git a/app/components/custom_section_list.js b/app/components/custom_section_list.js index d6a21affb..c95a2ffa1 100644 --- a/app/components/custom_section_list.js +++ b/app/components/custom_section_list.js @@ -254,8 +254,6 @@ export default class CustomSectionList extends React.PureComponent { const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { listView: { - flex: 1, - backgroundColor: theme.centerChannelBg, ...Platform.select({ android: { marginBottom: 20, diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js index 047eef106..b8210467d 100644 --- a/app/screens/more_channels/more_channels.js +++ b/app/screens/more_channels/more_channels.js @@ -7,6 +7,7 @@ import {intlShape} from 'react-intl'; import { Platform, InteractionManager, + StyleSheet, View, } from 'react-native'; @@ -20,7 +21,7 @@ import Loading from 'app/components/loading'; import SearchBar from 'app/components/search_bar'; import StatusBar from 'app/components/status_bar'; import {alertErrorWithFallback} from 'app/utils/general'; -import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; +import {changeOpacity, setNavigatorStyles} from 'app/utils/theme'; import {t} from 'app/utils/i18n'; export default class MoreChannels extends PureComponent { @@ -300,7 +301,6 @@ export default class MoreChannels extends PureComponent { const {adding, channels, searching, term} = this.state; const {formatMessage} = intl; const isLoading = requestStatus.status === RequestStatus.STARTED || requestStatus.status === RequestStatus.NOT_STARTED; - const style = getStyleFromTheme(theme); const more = searching ? () => true : this.loadMoreChannels; let content; @@ -320,7 +320,7 @@ export default class MoreChannels extends PureComponent { content = ( - + { - return { - wrapper: { - marginVertical: 5, - }, - container: { - flex: 1, - backgroundColor: theme.centerChannelBg, - }, - navTitle: { - ...Platform.select({ - android: { - fontSize: 18, - }, - ios: { - fontSize: 15, - fontWeight: 'bold', - }, - }), - }, - }; +const style = StyleSheet.create({ + searchbar: { + marginVertical: 5, + }, }); diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 76571b2b8..29328d675 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -416,6 +416,7 @@ "mobile.timezone_settings.manual": "Change timezone", "mobile.timezone_settings.select": "Select Timezone", "mobile.user.settings.notifications.email.fifteenMinutes": "Every 15 minutes", + "mobile.user_list.deactivated": "Deactivated", "mobile.video_playback.failed_description": "An error occurred while trying to play the video.\n", "mobile.video_playback.failed_title": "Video playback failed", "mobile.video.save_error_message": "To save the video file you need to download it first.", @@ -428,7 +429,6 @@ "modal.manual_status.auto_responder.message_offline": "Would you like to switch your status to \"Offline\" and disable Automatic Replies?", "modal.manual_status.auto_responder.message_online": "Would you like to switch your status to \"Online\" and disable Automatic Replies?", "more_channels.title": "More Channels", - "more_direct_channels.directchannel.deactivated": "{displayname} - Deactivated", "msg_typing.areTyping": "{users} and {last} are typing...", "msg_typing.isTyping": "{user} is typing...", "navbar_dropdown.logout": "Logout",