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

[GH-15305][MM-27677] Improve empty state for Recent Mentions. (#4715)

Browse source 
* Improve empty state for Recent Mentions.

* Change backgroud color of icon.

* Improve empty states for flagged and pinned posts.

* Update pinned posts' test snapshot.

* Change NoResult style as per figma specs.

* Change NoResults icons according to UX specs.

* Change style according to UX feedback.
This commit is contained in:
Jyoti Patel 2020-09-03 22:21:36 -04:00 committed by GitHub
parent 87802031f8
commit c9c22583d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 65 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/components/no_results.js
View file

@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Image, Text, View} from 'react-native';
import IonIcon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@ -12,6 +13,7 @@ export default class NoResults extends PureComponent {
static propTypes = {
description: PropTypes.string,
iconName: PropTypes.string,
iconType: PropTypes.oneOf(['' /* image */, 'ion', 'material-community']),
image: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
theme: PropTypes.object.isRequired,
title: PropTypes.string.isRequired,
@ -21,6 +23,7 @@ export default class NoResults extends PureComponent {
const {
description,
iconName,
iconType,
image,
theme,
title,
@ -36,18 +39,30 @@ export default class NoResults extends PureComponent {
/>
);
} else if (iconName) {
icon = (
<IonIcon
size={44}
color={changeOpacity(theme.centerChannelColor, 0.4)}
name={iconName}
/>
);
if (iconType === 'ion') {
icon = (
<IonIcon
size={72}
name={iconName}
style={style.icon}
/>
);
} else if (iconType === 'material-community') {
icon = (
<MaterialCommunityIcons
size={72}
name={iconName}
style={style.icon}
/>
);
}
}
return (
<View style={style.container}>
{icon}
<View style={style.iconContainer}>
{icon}
</View>
<Text style={style.title}>{title}</Text>
{description &&
<Text style={style.description}>{description}</Text>
@ -63,18 +78,33 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
paddingHorizontal: 15,
marginLeft: 32,
marginRight: 32,
marginBottom: 40,
},
title: {
color: changeOpacity(theme.centerChannelColor, 0.4),
color: changeOpacity(theme.centerChannelColor, 1),
fontSize: 20,
fontWeight: '600',
marginVertical: 15,
},
description: {
color: changeOpacity(theme.centerChannelColor, 0.4),
fontSize: 17,
color: changeOpacity(theme.centerChannelColor, 1),
fontSize: 16,
textAlign: 'center',
lineHeight: 24,
},
icon: {
color: theme.buttonBg,
},
iconContainer: {
height: 120,
width: 120,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 60,
marginBottom: 4,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
},
};
});

6
app/components/sidebars/settings/settings_sidebar_base.js
View file

@ -95,7 +95,7 @@ export default class SettingsSidebarBase extends PureComponent {
goToFlaggedScreen = (intl) => {
this.openModal(
'FlaggedPosts',
intl.formatMessage({id: 'search_header.title3', defaultMessage: 'Flagged Posts'}),
intl.formatMessage({id: 'search_header.title3', defaultMessage: 'Saved Messages'}),
);
};
@ -218,9 +218,9 @@ export default class SettingsSidebarBase extends PureComponent {
theme={theme}
/>
<DrawerItem
defaultMessage='Flagged Posts'
defaultMessage='Saved Messages'
i18nId='search_header.title3'
iconName='ios-flag'
iconName='ios-bookmark-outline'
iconType='ion'
onPress={this.goToFlagged}
separator={false}

2
app/screens/channel_info/pinned/__snapshots__/pinned.test.js.snap
View file

@ -3,7 +3,7 @@
exports[`ChannelInfo -> Pinned should match snapshot 1`] = `
<channelInfoRow
action={[Function]}
defaultMessage="Pinned Posts"
defaultMessage="Pinned Messages"
detail={0}
image={1}
isLandscape={false}

4
app/screens/channel_info/pinned/pinned.tsx
View file

@ -27,7 +27,7 @@ export default class Pinned extends PureComponent<PinnedProps> {
const {channelId} = this.props;
const {formatMessage} = this.context.intl;
const id = t('channel_header.pinnedPosts');
const defaultMessage = 'Pinned Posts';
const defaultMessage = 'Pinned Messages';
const screen = 'PinnedPosts';
const title = formatMessage({id, defaultMessage});
const passProps = {
@ -42,7 +42,7 @@ export default class Pinned extends PureComponent<PinnedProps> {
return (
<ChannelInfoRow
action={this.goToPinnedPosts}
defaultMessage='Pinned Posts'
defaultMessage='Pinned Messages'
detail={pinnedCount}
image={require('@assets/images/channel_info/pin.png')}
textId={t('channel_header.pinnedPosts')}

6
app/screens/flagged_posts/flagged_posts.js
View file

@ -140,10 +140,10 @@ export default class FlaggedPosts extends PureComponent {
<NoResults
description={formatMessage({
id: 'mobile.flagged_posts.empty_description',
defaultMessage: 'Flags are a way to mark messages for follow up. Your flags are personal, and cannot be seen by other users.',
defaultMessage: 'Saved messages are only visible to you. Mark messages for follow-up or save something for later by long-pressing a message and choosing Save from the menu.',
})}
iconName='ios-flag'
title={formatMessage({id: 'mobile.flagged_posts.empty_title', defaultMessage: 'No Flagged Posts'})}
iconName='ios-bookmark-outline'
title={formatMessage({id: 'mobile.flagged_posts.empty_title', defaultMessage: 'No Saved messages yet'})}
theme={theme}
/>
);

4
app/screens/pinned_posts/pinned_posts.js
View file

@ -141,10 +141,10 @@ export default class PinnedPosts extends PureComponent {
<NoResults
description={formatMessage({
id: 'mobile.pinned_posts.empty_description',
defaultMessage: 'Pin important items by holding down on any message and selecting "Pin to Channel".',
defaultMessage: 'Pin important messages which are visible to the whole channel. Long press on a message and choose Pin to Channel to save it here.',
})}
image={noResultsImage}
title={formatMessage({id: 'mobile.pinned_posts.empty_title', defaultMessage: 'No Pinned Posts'})}
title={formatMessage({id: 'mobile.pinned_posts.empty_title', defaultMessage: 'No Pinned messages yet'})}
theme={theme}
/>
);

7
app/screens/recent_mentions/recent_mentions.js
View file

@ -142,10 +142,11 @@ export default class RecentMentions extends PureComponent {
<NoResults
description={formatMessage({
id: 'mobile.recent_mentions.empty_description',
defaultMessage: 'Messages containing your username and other words that trigger mentions will appear here.',
defaultMessage: 'Messages where someone mentions you or includes your trigger words are saved here.',
})}
iconName='ios-at'
title={formatMessage({id: 'mobile.recent_mentions.empty_title', defaultMessage: 'No Recent Mentions'})}
iconName='at'
iconType='material-community'
title={formatMessage({id: 'mobile.recent_mentions.empty_title', defaultMessage: 'No Mentions yet'})}
theme={theme}
/>
);

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

@ -17,7 +17,7 @@
"channel_header.addMembers": "Add Members",
"channel_header.directchannel.you": "{displayname} (you) ",
"channel_header.manageMembers": "Manage Members",
"channel_header.pinnedPosts": "Pinned Posts",
"channel_header.pinnedPosts": "Pinned Messages",
"channel_header.viewMembers": "View Members",
"channel_info.header": "Header:",
"channel_info.purpose": "Purpose:",
@ -272,8 +272,8 @@
"mobile.files_paste.error_description": "An error occurred while pasting the file(s). Please try again.",
"mobile.files_paste.error_dismiss": "Dismiss",
"mobile.files_paste.error_title": "Paste failed",
"mobile.flagged_posts.empty_description": "Flags are a way to mark messages for follow up. Your flags are personal, and cannot be seen by other users.",
"mobile.flagged_posts.empty_title": "No Flagged Posts",
"mobile.flagged_posts.empty_description": "Saved messages are only visible to you. Mark messages for follow-up or save something for later by long-pressing a message and choosing Save from the menu.",
"mobile.flagged_posts.empty_title": "No Saved messages yet",
"mobile.help.title": "Help",
"mobile.image_preview.save": "Save Image",
"mobile.image_preview.save_video": "Save Video",
@ -363,8 +363,8 @@
"mobile.permission_denied_retry": "Settings",
"mobile.photo_library_permission_denied_description": "To save images and videos to your library, please change your permission settings.",
"mobile.photo_library_permission_denied_title": "{applicationName} would like to access your photo library",
"mobile.pinned_posts.empty_description": "Pin important items by holding down on any message and selecting \"Pin to Channel\".",
"mobile.pinned_posts.empty_title": "No Pinned Posts",
"mobile.pinned_posts.empty_description": "Pin important messages which are visible to the whole channel. Long press on a message and choose Pin to Channel to save it here.",
"mobile.pinned_posts.empty_title": "No Pinned messages yet",
"mobile.post_info.add_reaction": "Add Reaction",
"mobile.post_info.copy_text": "Copy Text",
"mobile.post_info.flag": "Flag",
@ -401,8 +401,8 @@
"mobile.push_notification_reply.placeholder": "Write a reply...",
"mobile.push_notification_reply.title": "Reply",
"mobile.reaction_header.all_emojis": "All",
"mobile.recent_mentions.empty_description": "Messages containing your username and other words that trigger mentions will appear here.",
"mobile.recent_mentions.empty_title": "No Recent Mentions",
"mobile.recent_mentions.empty_description": "Messages where someone mentions you or includes your trigger words are saved here.",
"mobile.recent_mentions.empty_title": "No Mentions yet",
"mobile.rename_channel.display_name_maxLength": "Channel name must be less than {maxLength, number} characters",
"mobile.rename_channel.display_name_minLength": "Channel name must be {minLength, number} or more characters",
"mobile.rename_channel.display_name_required": "Channel name is required",
@ -565,7 +565,7 @@
"search_bar.search": "Search",
"search_header.results": "Search Results",
"search_header.title2": "Recent Mentions",
"search_header.title3": "Flagged Posts",
"search_header.title3": "Saved Messages",
"search_item.channelArchived": "Archived",
"sidebar_right_menu.logout": "Logout",
"sidebar_right_menu.report": "Report a Problem",