Notification count fixes
parent
6533d7dd08
commit
b5c64a03b6
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue