Notification count fixes

zio/stable
Paul Frazee 2023-03-13 21:46:16 -05:00
parent 6533d7dd08
commit b5c64a03b6
2 changed files with 53 additions and 15 deletions

View File

@ -26,6 +26,7 @@ import {
} from 'lib/icons' } from 'lib/icons'
import {colors} from 'lib/styles' import {colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {getTabState, TabState} from 'lib/routes/helpers' import {getTabState, TabState} from 'lib/routes/helpers'
export const BottomBar = observer(({navigation}: BottomTabBarProps) => { export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
@ -186,6 +187,10 @@ function Btn({
onPress?: (event: GestureResponderEvent) => void onPress?: (event: GestureResponderEvent) => void
onLongPress?: (event: GestureResponderEvent) => void onLongPress?: (event: GestureResponderEvent) => void
}) { }) {
const borderStyle = useColorSchemeStyle(
styles.notificationCountLight,
styles.notificationCountDark,
)
return ( return (
<TouchableOpacity <TouchableOpacity
style={styles.ctrl} style={styles.ctrl}
@ -193,7 +198,7 @@ function Btn({
onPressIn={onLongPress ? undefined : onPress} onPressIn={onLongPress ? undefined : onPress}
onLongPress={onLongPress}> onLongPress={onLongPress}>
{notificationCount ? ( {notificationCount ? (
<View style={styles.notificationCount}> <View style={[styles.notificationCount, borderStyle]}>
<Text style={styles.notificationCountLabel}>{notificationCount}</Text> <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
</View> </View>
) : undefined} ) : undefined}
@ -221,13 +226,20 @@ const styles = StyleSheet.create({
notificationCount: { notificationCount: {
position: 'absolute', position: 'absolute',
left: '52%', left: '52%',
top: 10, top: 8,
backgroundColor: colors.blue3, backgroundColor: colors.blue3,
paddingHorizontal: 4, paddingHorizontal: 4,
paddingBottom: 1, paddingBottom: 1,
borderRadius: 8, borderRadius: 6,
borderWidth: 2,
zIndex: 1, zIndex: 1,
}, },
notificationCountLight: {
borderColor: colors.white,
},
notificationCountDark: {
borderColor: colors.gray8,
},
notificationCountLabel: { notificationCountLabel: {
fontSize: 12, fontSize: 12,
fontWeight: 'bold', fontWeight: 'bold',

View File

@ -38,7 +38,7 @@ import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
import {pluralize} from 'lib/strings/helpers' import {pluralize} from 'lib/strings/helpers'
import {getCurrentRoute, isTab, getTabState, TabState} from 'lib/routes/helpers' import {getTabState, TabState} from 'lib/routes/helpers'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
export const DrawerContent = observer(() => { export const DrawerContent = observer(() => {
@ -49,13 +49,11 @@ export const DrawerContent = observer(() => {
const {track} = useAnalytics() const {track} = useAnalytics()
const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState( const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState(
state => { state => {
const currentRoute = state ? getCurrentRoute(state) : false
return { return {
isAtHome: currentRoute ? isTab(currentRoute.name, 'Home') : true, isAtHome: getTabState(state, 'Home') !== TabState.Outside,
isAtSearch: currentRoute ? isTab(currentRoute.name, 'Search') : false, isAtSearch: getTabState(state, 'Search') !== TabState.Outside,
isAtNotifications: currentRoute isAtNotifications:
? isTab(currentRoute.name, 'Notifications') getTabState(state, 'Notifications') !== TabState.Outside,
: false,
} }
}, },
) )
@ -133,8 +131,21 @@ export const DrawerContent = observer(() => {
<View style={[styles.menuItemIconWrapper]}> <View style={[styles.menuItemIconWrapper]}>
{icon} {icon}
{count ? ( {count ? (
<View style={styles.menuItemCount}> <View
<Text style={styles.menuItemCountLabel}>{count}</Text> style={[
styles.menuItemCount,
theme.colorScheme === 'light'
? styles.menuItemCountLight
: styles.menuItemCountDark,
count > 99
? styles.menuItemCountHundreds
: count > 9
? styles.menuItemCountTens
: undefined,
]}>
<Text style={styles.menuItemCountLabel} numberOfLines={1}>
{count > 999 ? `${Math.round(count / 1000)}k` : count}
</Text>
</View> </View>
) : undefined} ) : undefined}
</View> </View>
@ -346,16 +357,31 @@ const styles = StyleSheet.create({
}, },
menuItemCount: { menuItemCount: {
position: 'absolute', position: 'absolute',
right: -6, width: 'auto',
top: -2, right: -8,
backgroundColor: colors.red3, top: -8,
backgroundColor: colors.blue3,
borderWidth: 2,
paddingHorizontal: 4, paddingHorizontal: 4,
paddingBottom: 1, paddingBottom: 1,
borderRadius: 6, borderRadius: 6,
}, },
menuItemCountLight: {
borderColor: colors.white,
},
menuItemCountDark: {
borderColor: '#1B1919',
},
menuItemCountTens: {
width: 29,
},
menuItemCountHundreds: {
width: 38,
},
menuItemCountLabel: { menuItemCountLabel: {
fontSize: 12, fontSize: 12,
fontWeight: 'bold', fontWeight: 'bold',
fontVariant: ['tabular-nums'],
color: colors.white, color: colors.white,
}, },