diff --git a/app/screens/home/channel_list/categories_list/categories/categories.tsx b/app/screens/home/channel_list/categories_list/categories/categories.tsx index 9297c38a7..a27043dc7 100644 --- a/app/screens/home/channel_list/categories_list/categories/categories.tsx +++ b/app/screens/home/channel_list/categories_list/categories/categories.tsx @@ -102,7 +102,17 @@ const Categories = ({categories, onlyUnreads, unreadsOnTop}: Props) => { return ( <> - {!switchingTeam && !initiaLoad && ( + {!switchingTeam && !initiaLoad && onlyUnreads && + + + + } + {!switchingTeam && !initiaLoad && !onlyUnreads && ( + + + + + + + ); +} + +export default SvgComponent; diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx new file mode 100644 index 000000000..203936a4c --- /dev/null +++ b/app/screens/home/channel_list/categories_list/categories/unreads/empty_state/index.tsx @@ -0,0 +1,88 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React, {useMemo} from 'react'; +import {View} from 'react-native'; + +import {showUnreadChannelsOnly} from '@actions/local/channel'; +import FormattedText from '@components/formatted_text'; +import TouchableWithFeedback from '@components/touchable_with_feedback'; +import {useServerUrl} from '@context/server'; +import {useTheme} from '@context/theme'; +import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles'; +import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; +import {typography} from '@utils/typography'; + +import EmptyIllustration from './empty_unreads'; + +type Props = { + onlyUnreads: boolean; +} + +const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ + button: { + marginTop: 24, + }, + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + paddingHorizontal: 40, + maxWidth: 480, + top: -20, + }, + title: { + color: theme.sidebarText, + textAlign: 'center', + ...typography('Heading', 400, 'SemiBold'), + }, + paragraph: { + marginTop: 8, + textAlign: 'center', + color: changeOpacity(theme.sidebarText, 0.72), + ...typography('Body', 200), + }, +})); + +function EmptyUnreads({onlyUnreads}: Props) { + const theme = useTheme(); + const serverUrl = useServerUrl(); + const styles = getStyleSheet(theme); + + const buttonStyle = useMemo(() => [buttonBackgroundStyle(theme, 'lg', 'tertiary', 'inverted'), styles.button], + [theme]); + + const onPress = () => { + showUnreadChannelsOnly(serverUrl, !onlyUnreads); + }; + + return ( + + + + + + + + + ); +} + +export default EmptyUnreads; diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/index.ts b/app/screens/home/channel_list/categories_list/categories/unreads/index.ts index bd470a14b..c83f160d2 100644 --- a/app/screens/home/channel_list/categories_list/categories/unreads/index.ts +++ b/app/screens/home/channel_list/categories_list/categories/unreads/index.ts @@ -9,7 +9,7 @@ import {combineLatestWith, map, switchMap} from 'rxjs/operators'; import {Preferences} from '@constants'; import {getPreferenceAsBool} from '@helpers/api/preference'; import {filterAndSortMyChannels, makeChannelsMap} from '@helpers/database'; -import {getChannelById, observeChannelsByLastPostAt, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel'; +import {getChannelById, observeChannelsByLastPostAt, observeCurrentChannel, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel'; import {queryPreferencesByCategoryAndName} from '@queries/servers/preference'; import {observeLastUnreadChannelId} from '@queries/servers/system'; @@ -45,7 +45,10 @@ const enhanced = withObservables(['currentTeamId', 'isTablet', 'onlyUnreads'], ( const unreadChannels = unreadsOnTop.pipe(switchMap((gU) => { if (gU || onlyUnreads) { - const lastUnread = isTablet ? observeLastUnreadChannelId(database).pipe(switchMap(getC)) : of$(undefined); + const lastUnread = isTablet ? observeLastUnreadChannelId(database).pipe( + switchMap(getC), + switchMap((ch) => (ch ? of$(ch) : observeCurrentChannel(database))), + ) : of$(undefined); const myUnreadChannels = queryMyChannelUnreads(database, currentTeamId).observeWithColumns(['last_post_at']); const notifyProps = myUnreadChannels.pipe(switchMap((cs) => observeNotifyPropsByChannels(database, cs))); const channels = myUnreadChannels.pipe(switchMap((myChannels) => observeChannelsByLastPostAt(database, myChannels))); diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx index cc22fdb88..25e061c65 100644 --- a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx +++ b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx @@ -22,6 +22,7 @@ describe('components/channel_list/categories/body', () => { undefined} + onlyUnreads={false} />, {database}, ); diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx index 7f6b391d5..343af45fc 100644 --- a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx +++ b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx @@ -7,12 +7,20 @@ import {FlatList, Text} from 'react-native'; import ChannelItem from '@components/channel_item'; import {useTheme} from '@context/theme'; +import {useIsTablet} from '@hooks/device'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; +import Empty from './empty_state'; + import type ChannelModel from '@typings/database/models/servers/channel'; const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ + empty: { + alignItems: 'center', + flexGrow: 1, + justifyContent: 'center', + }, heading: { color: changeOpacity(theme.sidebarText, 0.64), ...typography('Heading', 75), @@ -24,16 +32,18 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ })); type UnreadCategoriesProps = { - unreadChannels: ChannelModel[]; onChannelSwitch: (channelId: string) => void; + onlyUnreads: boolean; + unreadChannels: ChannelModel[]; } const extractKey = (item: ChannelModel) => item.id; -const UnreadCategories = ({onChannelSwitch, unreadChannels}: UnreadCategoriesProps) => { - const theme = useTheme(); - const styles = getStyleSheet(theme); +const UnreadCategories = ({onChannelSwitch, onlyUnreads, unreadChannels}: UnreadCategoriesProps) => { const intl = useIntl(); + const theme = useTheme(); + const isTablet = useIsTablet(); + const styles = getStyleSheet(theme); const renderItem = useCallback(({item}: {item: ChannelModel}) => { return ( @@ -44,20 +54,31 @@ const UnreadCategories = ({onChannelSwitch, unreadChannels}: UnreadCategoriesPro ); }, [onChannelSwitch]); - if (!unreadChannels.length) { + const showEmptyState = onlyUnreads && !unreadChannels.length; + const showTitle = !onlyUnreads || (onlyUnreads && !showEmptyState); + const EmptyState = showEmptyState && !isTablet ? ( + + ) : undefined; + + if (!unreadChannels.length && !onlyUnreads) { return null; } + return ( <> + {showTitle && {intl.formatMessage({id: 'mobile.channel_list.unreads', defaultMessage: 'UNREADS'})} + } diff --git a/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx b/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx index 7131dd710..51444a402 100644 --- a/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx +++ b/app/screens/home/channel_list/categories_list/threads_button/threads_button.tsx @@ -81,7 +81,7 @@ const ThreadsButton = ({currentChannelId, onlyUnreads, unreadsAndMentions}: Prop return [container, icon, text]; }, [customStyles, isActive, styles, unreads]); - if (onlyUnreads && !unreads && !mentions) { + if (onlyUnreads && !isActive && !unreads && !mentions) { return null; } diff --git a/app/utils/buttonStyles.ts b/app/utils/buttonStyles.ts index 2e8c962e4..f77ef25c9 100644 --- a/app/utils/buttonStyles.ts +++ b/app/utils/buttonStyles.ts @@ -241,16 +241,16 @@ export const buttonBackgroundStyle = ( }, inverted: { default: { - backgroundColor: changeOpacity('#FFFFFF', 0.12), + backgroundColor: changeOpacity(theme.sidebarText, 0.12), }, hover: { - backgroundColor: changeOpacity('#FFFFFF', 0.16), + backgroundColor: changeOpacity(theme.sidebarText, 0.16), }, active: { - backgroundColor: changeOpacity('#FFFFFF', 0.24), + backgroundColor: changeOpacity(theme.sidebarText, 0.24), }, focus: { - backgroundColor: changeOpacity('#FFFFFF', 0.08), + backgroundColor: changeOpacity(theme.sidebarText, 0.08), borderColor: theme.sidebarTextActiveBorder, // @to-do; needs 32% white? borderWidth: 2, }, @@ -388,6 +388,10 @@ export const buttonTextStyle = ( color = theme.buttonBg; } + if (type === 'inverted' && emphasis === 'tertiary') { + color = theme.sidebarText; + } + const styles = StyleSheet.create({ main: { fontFamily: 'OpenSans-SemiBold', diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index a16bd9247..befede867 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -555,7 +555,6 @@ "notification_settings.auto_responder.default_message": "Hello, I am out of office and unable to respond to messages.", "notification_settings.auto_responder.enabled": "Enabled", "notification_settings.auto_responder.footer_message": "Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications.", - "notification_settings.auto_responder.message_placeholder": "Message", "notification_settings.mention.reply": "Send reply notifications for", "notification_settings.mentions": "Mentions", "notification_settings.mentions_replies": "Mentions and Replies", @@ -701,6 +700,9 @@ "threads.replies": "{count} {count, plural, one {reply} other {replies}}", "threads.unfollowMessage": "Unfollow Message", "threads.unfollowThread": "Unfollow Thread", + "unreads.empty.paragraph": "Turn off the unread filter to show all your channels.", + "unreads.empty.show_all": "Show all", + "unreads.empty.title": "No more unreads", "user.edit_profile.email.auth_service": "Login occurs through {service}. Email cannot be updated. Email address used for notifications is {email}.", "user.edit_profile.email.web_client": "Email must be updated using a web client or desktop application.", "user.settings.general.email": "Email",