Page MenuHomePhabricator
Files F3574729

D12648.diff
No OneTemporary
Actions

D12648.diff
View Options

diff --git a/native/chat/settings/thread-settings-notifications.react.js b/native/chat/settings/thread-settings-notifications.react.js
--- a/native/chat/settings/thread-settings-notifications.react.js
+++ b/native/chat/settings/thread-settings-notifications.react.js
@@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
import {
threadSettingsNotificationsCopy,
@@ -10,9 +10,10 @@
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import EnumSettingsOption from '../../components/enum-settings-option.react.js';
+import SWMansionIcon from '../../components/swmansion-icon.react.js';
import HeaderRightTextButton from '../../navigation/header-right-text-button.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
-import { useStyles } from '../../themes/colors.js';
+import { useStyles, useColors } from '../../themes/colors.js';
import AllNotifsIllustration from '../../vectors/all-notifs-illustration.react.js';
import BadgeNotifsIllustration from '../../vectors/badge-notifs-illustration.react.js';
import MutedNotifsIllustration from '../../vectors/muted-notifs-illustration.react.js';
@@ -22,6 +23,114 @@
+threadInfo: ThreadInfo,
};
+type NotificationDescriptionProps = {
+ +selected: boolean,
+ +bannerNotifsEnabled: boolean,
+ +badgeCountEnabled: boolean,
+ +livesInFocusedTab: boolean,
+};
+
+function NotificationDescription(
+ props: NotificationDescriptionProps,
+): React.Node {
+ const {
+ selected,
+ bannerNotifsEnabled,
+ badgeCountEnabled,
+ livesInFocusedTab,
+ } = props;
+
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const bannerNotifsDescriptionTextStyles = React.useMemo(() => {
+ const style = [styles.notificationOptionDescriptionText];
+
+ if (selected && !bannerNotifsEnabled) {
+ style.push(styles.notificationOptionDescriptionTextDisabledSelected);
+ } else if (!bannerNotifsEnabled) {
+ style.push(styles.notificationOptionDescriptionTextDisabled);
+ }
+
+ return style;
+ }, [
+ bannerNotifsEnabled,
+ selected,
+ styles.notificationOptionDescriptionText,
+ styles.notificationOptionDescriptionTextDisabled,
+ styles.notificationOptionDescriptionTextDisabledSelected,
+ ]);
+
+ const badgeCountDescriptionTextStyles = React.useMemo(() => {
+ const style = [styles.notificationOptionDescriptionText];
+
+ if (selected && !badgeCountEnabled) {
+ style.push(styles.notificationOptionDescriptionTextDisabledSelected);
+ } else if (!badgeCountEnabled) {
+ style.push(styles.notificationOptionDescriptionTextDisabled);
+ }
+
+ return style;
+ }, [
+ badgeCountEnabled,
+ selected,
+ styles.notificationOptionDescriptionText,
+ styles.notificationOptionDescriptionTextDisabled,
+ styles.notificationOptionDescriptionTextDisabledSelected,
+ ]);
+
+ let bannerNotifsIconColor = colors.panelForegroundSecondaryLabel;
+ if (selected && !bannerNotifsEnabled) {
+ bannerNotifsIconColor = colors.panelInputSecondaryForeground;
+ } else if (!bannerNotifsEnabled) {
+ bannerNotifsIconColor = colors.panelSecondaryForeground;
+ }
+
+ let badgeCountIconColor = colors.panelForegroundSecondaryLabel;
+ if (selected && !badgeCountEnabled) {
+ badgeCountIconColor = colors.panelInputSecondaryForeground;
+ } else if (!badgeCountEnabled) {
+ badgeCountIconColor = colors.panelSecondaryForeground;
+ }
+
+ return (
+ <>
+ <View style={styles.notificationOptionDescriptionListItem}>
+ <SWMansionIcon
+ name={bannerNotifsEnabled ? 'check' : 'cross'}
+ size={12}
+ color={bannerNotifsIconColor}
+ />
+ <Text style={bannerNotifsDescriptionTextStyles}>
+ {threadSettingsNotificationsCopy.BANNER_NOTIFS}
+ </Text>
+ </View>
+ <View style={styles.notificationOptionDescriptionListItem}>
+ <SWMansionIcon
+ name={badgeCountEnabled ? 'check' : 'cross'}
+ size={12}
+ color={badgeCountIconColor}
+ />
+ <Text style={badgeCountDescriptionTextStyles}>
+ {threadSettingsNotificationsCopy.BADGE_COUNT}
+ </Text>
+ </View>
+ <View style={styles.notificationOptionDescriptionListItem}>
+ <SWMansionIcon
+ name="check"
+ size={12}
+ color={colors.panelForegroundSecondaryLabel}
+ />
+ <Text style={styles.notificationOptionDescriptionText}>
+ {livesInFocusedTab
+ ? threadSettingsNotificationsCopy.IN_FOCUSED_TAB
+ : threadSettingsNotificationsCopy.IN_BACKGROUND_TAB}
+ </Text>
+ </View>
+ </>
+ );
+}
+
type Props = {
+navigation: ChatNavigationProp<'ThreadSettingsNotifications'>,
+route: NavigationRoute<'ThreadSettingsNotifications'>,
@@ -85,6 +194,42 @@
[styles.notificationOptionIconContainer],
);
+ const allNotificationsDescription = React.useMemo(
+ () => (
+ <NotificationDescription
+ selected={notificationSettings === 'focused'}
+ bannerNotifsEnabled={true}
+ badgeCountEnabled={true}
+ livesInFocusedTab={true}
+ />
+ ),
+ [notificationSettings],
+ );
+
+ const badgeOnlyDescription = React.useMemo(
+ () => (
+ <NotificationDescription
+ selected={notificationSettings === 'badge-only'}
+ bannerNotifsEnabled={false}
+ badgeCountEnabled={true}
+ livesInFocusedTab={true}
+ />
+ ),
+ [notificationSettings],
+ );
+
+ const mutedDescription = React.useMemo(
+ () => (
+ <NotificationDescription
+ selected={notificationSettings === 'background'}
+ bannerNotifsEnabled={false}
+ badgeCountEnabled={false}
+ livesInFocusedTab={false}
+ />
+ ),
+ [notificationSettings],
+ );
+
return (
<View style={styles.container}>
<View style={styles.enumSettingsOptionContainer}>
@@ -92,7 +237,7 @@
name={threadSettingsNotificationsCopy.FOCUSED}
enumValue={notificationSettings === 'focused'}
onEnumValuePress={onFocusedSelected}
- description=""
+ description={allNotificationsDescription}
icon={allNotificationsIllustration}
/>
</View>
@@ -101,7 +246,7 @@
name={threadSettingsNotificationsCopy.BADGE_ONLY}
enumValue={notificationSettings === 'badge-only'}
onEnumValuePress={onBadgeOnlySelected}
- description=""
+ description={badgeOnlyDescription}
icon={badgeOnlyIllustration}
/>
</View>
@@ -110,7 +255,7 @@
name={threadSettingsNotificationsCopy.BACKGROUND}
enumValue={notificationSettings === 'background'}
onEnumValuePress={onBackgroundSelected}
- description=""
+ description={mutedDescription}
icon={mutedIllustration}
/>
</View>
@@ -130,6 +275,24 @@
marginLeft: 8,
marginRight: 16,
},
+ notificationOptionDescriptionListItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 4,
+ },
+ notificationOptionDescriptionText: {
+ color: 'panelForegroundSecondaryLabel',
+ marginLeft: 4,
+ fontSize: 14,
+ },
+ notificationOptionDescriptionTextDisabled: {
+ textDecorationLine: 'line-through',
+ color: 'panelSecondaryForeground',
+ },
+ notificationOptionDescriptionTextDisabledSelected: {
+ color: 'panelInputSecondaryForeground',
+ textDecorationLine: 'line-through',
+ },
};
export default ThreadSettingsNotifications;
diff --git a/native/components/enum-settings-option.react.js b/native/components/enum-settings-option.react.js
--- a/native/components/enum-settings-option.react.js
+++ b/native/components/enum-settings-option.react.js
@@ -11,7 +11,7 @@
type EnumSettingsOptionProps = {
+icon?: string | React.Node,
+name: string,
- +description: string,
+ +description: string | React.Node,
+enumValue: boolean,
+onEnumValuePress: () => mixed,
+type?: InputType,
@@ -47,6 +47,14 @@
return icon;
}, [icon, styles.enumIcon, colors.purpleButton]);
+ const descriptionElement = React.useMemo(() => {
+ if (typeof description === 'string') {
+ return <Text style={styles.enumInfoDescription}>{description}</Text>;
+ }
+
+ return description;
+ }, [description, styles.enumInfoDescription]);
+
const enumInputStyles = React.useMemo(() => {
const style = [styles.enumInput];
@@ -106,7 +114,7 @@
{enumIcon}
<View style={styles.enumInfoContainer}>
<Text style={styles.enumInfoName}>{name}</Text>
- <Text style={styles.enumInfoDescription}>{description}</Text>
+ {descriptionElement}
</View>
<View style={styles.enumInputContainer}>
<View style={enumInputStyles}>{enumInputFill}</View>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 29, 5:55 PM (6 h, 10 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2733621
Default Alt Text
D12648.diff (8 KB)

Event Timeline