toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add deactivated to separate row on user list and fix truncating user info (#2232)

Browse source
This commit is contained in:
Saturnino Abril 2018-10-09 20:50:34 +08:00
parent 68fe3653a8
commit 09a49302f2
8 changed files with 102 additions and 224 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/custom_list/channel_list_row/channel_list_row.js
View file

@ -43,7 +43,6 @@ export default class ChannelListRow extends React.PureComponent {
return (
<CustomListRow
id={this.props.id}
theme={this.props.theme}
onPress={this.props.onPress ? this.onPress : null}
enabled={this.props.enabled}
selectable={this.props.selectable}
@ -84,6 +83,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
container: {
flex: 1,
flexDirection: 'column',
paddingHorizontal: 15,
},
purpose: {
marginTop: 7,

78
app/components/custom_list/custom_list_row.js
View file

@ -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 (
<ConditionalTouchable
touchable={Boolean(this.props.enabled && this.props.onPress)}
onPress={this.props.onPress}
style={style.touchable}
>
<View style={style.container}>
{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,
},
});

1
app/components/custom_list/option_list_row/option_list_row.js
View file

@ -44,7 +44,6 @@ export default class OptionListRow extends React.PureComponent {
return (
<CustomListRow
id={value}
theme={theme}
onPress={this.onPress}
enabled={enabled}
selectable={selectable}

172
app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
View file

@ -6,7 +6,7 @@ exports[`UserListRow should match snapshot 1`] = `
Object {
"flex": 1,
"flexDirection": "row",
"marginLeft": 10,
"marginHorizontal": 10,
}
}
>
@ -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",
}
}
>
<Component
style={
Object {
"alignItems": "center",
"color": "#3d3c40",
"flexDirection": "row",
"marginLeft": 10,
}
}
>
@ -59,14 +31,12 @@ exports[`UserListRow should match snapshot 1`] = `
</Component>
<Component
style={
Array [
Object {
"marginLeft": 5,
},
Object {
"justifyContent": "center",
},
]
Object {
"flex": 1,
"flexDirection": "column",
"justifyContent": "center",
"marginLeft": 10,
}
}
>
<Component>
@ -84,13 +54,6 @@ exports[`UserListRow should match snapshot 1`] = `
</Component>
</Component>
</Component>
<Component
style={
Object {
"width": 25,
}
}
/>
</CustomListRow>
</Component>
`;
@ -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",
}
}
>
<Component
style={
Object {
"alignItems": "center",
"color": "#3d3c40",
"flexDirection": "row",
"marginLeft": 10,
}
}
>
@ -154,14 +89,12 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated
</Component>
<Component
style={
Array [
Object {
"marginLeft": 5,
},
Object {
"justifyContent": "center",
},
]
Object {
"flex": 1,
"flexDirection": "column",
"justifyContent": "center",
"marginLeft": 10,
}
}
>
<Component>
@ -177,13 +110,6 @@ exports[`UserListRow should match snapshot for currentUser with (you) populated
/>
</Component>
</Component>
<Component
style={
Object {
"width": 25,
}
}
/>
</CustomListRow>
</Component>
`;
@ -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",
}
}
>
<Component
style={
Object {
"alignItems": "center",
"color": "#3d3c40",
"flexDirection": "row",
"marginLeft": 10,
}
}
>
@ -247,14 +145,12 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
</Component>
<Component
style={
Array [
Object {
"marginLeft": 5,
},
Object {
"justifyContent": "center",
},
]
Object {
"flex": 1,
"flexDirection": "column",
"justifyContent": "center",
"marginLeft": 10,
}
}
>
<Component>
@ -267,16 +163,22 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
"fontSize": 15,
}
}
>
@user
</Component>
</Component>
<Component>
<Component
style={
Object {
"color": undefined,
"fontSize": 12,
"marginTop": 2,
}
}
/>
</Component>
</Component>
<Component
style={
Object {
"width": 25,
}
}
/>
</CustomListRow>
</Component>
`;

38
app/components/custom_list/user_list_row/user_list_row.js
View file

@ -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 {
<View style={style.container}>
<CustomListRow
id={id}
theme={theme}
onPress={this.onPress}
enabled={enabled}
selectable={selectable}
@ -84,7 +76,7 @@ export default class UserListRow extends React.PureComponent {
size={32}
/>
</View>
<View style={[style.textContainer, (showTeammateDisplay ? style.showTeammateDisplay : style.hideTeammateDisplay)]}>
<View style={style.textContainer}>
<View>
<Text
style={style.username}
@ -105,8 +97,16 @@ export default class UserListRow extends React.PureComponent {
</Text>
</View>
}
{user.delete_at > 0 &&
<View>
<Text
style={style.deactivated}
>
{formatMessage({id: 'mobile.user_list.deactivated', defaultMessage: 'Deactivated'})}
</Text>
</View>
}
</View>
<View style={style.rightFiller}/>
</CustomListRow>
</View>
);
@ -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),
},
};
});

2
app/components/custom_section_list.js
View file

@ -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,

31
app/screens/more_channels/more_channels.js
View file

@ -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 = (
<React.Fragment>
<View style={style.wrapper}>
<View style={style.searchbar}>
<SearchBar
ref='search_bar'
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
@ -365,25 +365,8 @@ export default class MoreChannels extends PureComponent {
}
}
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
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,
},
});

2
assets/base/i18n/en.json
View file

@ -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",