acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

tweak hover state (#5892)

Browse Source
This commit is contained in:
Samuel Newman
2024-10-21 21:21:08 +03:00
committed by GitHub
parent f6649e22a7
commit 090ac041c3
1 changed files with 103 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/Drawer.tsx
+103 -108
View File
@@ -226,7 +226,6 @@ let DrawerContent = ({}: {}): React.ReactNode => {
<ScrollView <ScrollView
style={[a.flex_1]} style={[a.flex_1]}
contentContainerStyle={[ contentContainerStyle={[
a.px_xl,
{ {
paddingTop: Math.max( paddingTop: Math.max(
insets.top + a.pt_xl.paddingTop, insets.top + a.pt_xl.paddingTop,
@@ -234,18 +233,20 @@ let DrawerContent = ({}: {}): React.ReactNode => {
), ),
}, },
]}> ]}>
{hasSession && currentAccount ? ( <View style={[a.px_xl]}>
<DrawerProfileCard {hasSession && currentAccount ? (
account={currentAccount} <DrawerProfileCard
onPressProfile={onPressProfile} account={currentAccount}
/> onPressProfile={onPressProfile}
) : ( />
<View style={[a.pr_xl]}> ) : (
<NavSignupCard /> <View style={[a.pr_xl]}>
</View> <NavSignupCard />
)} </View>
)}
<Divider style={[a.mt_xl, a.mb_sm]} /> <Divider style={[a.mt_xl, a.mb_sm]} />
</View>
{hasSession ? ( {hasSession ? (
<> <>
@@ -272,34 +273,36 @@ let DrawerContent = ({}: {}): React.ReactNode => {
</> </>
)} )}
<Divider style={[a.mb_xl, a.mt_sm]} /> <View style={[a.px_xl]}>
<Divider style={[a.mb_xl, a.mt_sm]} />
<View style={[a.flex_col, a.gap_md, a.flex_wrap]}> <View style={[a.flex_col, a.gap_md, a.flex_wrap]}>
<InlineLinkText <InlineLinkText
style={[a.text_md]} style={[a.text_md]}
label={_(msg`Terms of Service`)} label={_(msg`Terms of Service`)}
to="https://bsky.social/about/support/tos"> to="https://bsky.social/about/support/tos">
<Trans>Terms of Service</Trans> <Trans>Terms of Service</Trans>
</InlineLinkText> </InlineLinkText>
<InlineLinkText <InlineLinkText
style={[a.text_md]} style={[a.text_md]}
to="https://bsky.social/about/support/privacy-policy" to="https://bsky.social/about/support/privacy-policy"
label={_(msg`Privacy Policy`)}> label={_(msg`Privacy Policy`)}>
<Trans>Privacy Policy</Trans> <Trans>Privacy Policy</Trans>
</InlineLinkText> </InlineLinkText>
{kawaii && ( {kawaii && (
<Text style={t.atoms.text_contrast_medium}> <Text style={t.atoms.text_contrast_medium}>
<Trans> <Trans>
Logo by{' '} Logo by{' '}
<InlineLinkText <InlineLinkText
style={[a.text_md]} style={[a.text_md]}
to="/profile/sawaratsuki.bsky.social" to="/profile/sawaratsuki.bsky.social"
label="@sawaratsuki.bsky.social"> label="@sawaratsuki.bsky.social">
@sawaratsuki.bsky.social @sawaratsuki.bsky.social
</InlineLinkText> </InlineLinkText>
</Trans> </Trans>
</Text> </Text>
)} )}
</View>
</View> </View>
</ScrollView> </ScrollView>
@@ -387,8 +390,6 @@ let SearchMenuItem = ({
) )
} }
label={_(msg`Search`)} label={_(msg`Search`)}
accessibilityLabel={_(msg`Search`)}
accessibilityHint=""
bold={isActive} bold={isActive}
onPress={onPress} onPress={onPress}
/> />
@@ -415,8 +416,6 @@ let HomeMenuItem = ({
) )
} }
label={_(msg`Home`)} label={_(msg`Home`)}
accessibilityLabel={_(msg`Home`)}
accessibilityHint=""
bold={isActive} bold={isActive}
onPress={onPress} onPress={onPress}
/> />
@@ -443,8 +442,6 @@ let ChatMenuItem = ({
) )
} }
label={_(msg`Chat`)} label={_(msg`Chat`)}
accessibilityLabel={_(msg`Chat`)}
accessibilityHint=""
bold={isActive} bold={isActive}
onPress={onPress} onPress={onPress}
/> />
@@ -472,7 +469,6 @@ let NotificationsMenuItem = ({
) )
} }
label={_(msg`Notifications`)} label={_(msg`Notifications`)}
accessibilityLabel={_(msg`Notifications`)}
accessibilityHint={ accessibilityHint={
numUnreadNotifications === '' numUnreadNotifications === ''
? '' ? ''
@@ -505,8 +501,6 @@ let FeedsMenuItem = ({
) )
} }
label={_(msg`Feeds`)} label={_(msg`Feeds`)}
accessibilityLabel={_(msg`Feeds`)}
accessibilityHint=""
bold={isActive} bold={isActive}
onPress={onPress} onPress={onPress}
/> />
@@ -522,8 +516,6 @@ let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
<MenuItem <MenuItem
icon={<List style={[t.atoms.text]} width={iconWidth} />} icon={<List style={[t.atoms.text]} width={iconWidth} />}
label={_(msg`Lists`)} label={_(msg`Lists`)}
accessibilityLabel={_(msg`Lists`)}
accessibilityHint=""
onPress={onPress} onPress={onPress}
/> />
) )
@@ -549,8 +541,6 @@ let ProfileMenuItem = ({
) )
} }
label={_(msg`Profile`)} label={_(msg`Profile`)}
accessibilityLabel={_(msg`Profile`)}
accessibilityHint=""
onPress={onPress} onPress={onPress}
/> />
) )
@@ -564,74 +554,79 @@ let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
<MenuItem <MenuItem
icon={<Settings style={[t.atoms.text]} width={iconWidth} />} icon={<Settings style={[t.atoms.text]} width={iconWidth} />}
label={_(msg`Settings`)} label={_(msg`Settings`)}
accessibilityLabel={_(msg`Settings`)}
accessibilityHint=""
onPress={onPress} onPress={onPress}
/> />
) )
} }
SettingsMenuItem = React.memo(SettingsMenuItem) SettingsMenuItem = React.memo(SettingsMenuItem)
function MenuItem({ function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
icon,
label,
accessibilityLabel,
count,
bold,
onPress,
}: MenuItemProps) {
const t = useTheme() const t = useTheme()
return ( return (
<PressableScale <Button
testID={`menuItemButton-${label}`} testID={`menuItemButton-${label}`}
style={[a.flex_row, a.align_center, a.gap_sm, {paddingVertical: 10}]}
onPress={onPress} onPress={onPress}
accessibilityRole="tab" accessibilityRole="tab"
accessibilityLabel={accessibilityLabel} label={label}>
accessibilityHint="" {({hovered, pressed}) => (
targetScale={0.95}> <View
<View style={[a.relative]}> style={[
{icon} a.flex_1,
{count ? ( a.flex_row,
<View a.gap_md,
style={[ a.py_md,
a.absolute, a.px_xl,
a.inset_0, (hovered || pressed) && t.atoms.bg_contrast_25,
a.align_end, ]}>
{top: -4, right: a.gap_sm.gap * -1}, <View style={[a.relative]}>
]}> {icon}
<View {count ? (
style={[ <View
a.rounded_full,
{
right: count.length === 1 ? 6 : 0,
paddingHorizontal: 4,
paddingVertical: 1,
backgroundColor: t.palette.primary_500,
},
]}>
<Text
style={[ style={[
a.text_xs, a.absolute,
a.leading_tight, a.inset_0,
a.font_bold, a.align_end,
{ {top: -4, right: a.gap_sm.gap * -1},
fontVariant: ['tabular-nums'], ]}>
color: colors.white, <View
}, style={[
]} a.rounded_full,
numberOfLines={1}> {
{count} right: count.length === 1 ? 6 : 0,
</Text> paddingHorizontal: 4,
</View> paddingVertical: 1,
backgroundColor: t.palette.primary_500,
},
]}>
<Text
style={[
a.text_xs,
a.leading_tight,
a.font_bold,
{
fontVariant: ['tabular-nums'],
color: colors.white,
},
]}
numberOfLines={1}>
{count}
</Text>
</View>
</View>
) : undefined}
</View> </View>
) : undefined} <Text
</View> style={[
<Text a.flex_1,
style={[a.flex_1, a.text_2xl, bold && a.font_bold, web(a.leading_snug)]} a.text_2xl,
numberOfLines={1}> bold && a.font_heavy,
{label} web(a.leading_snug),
</Text> ]}
</PressableScale> numberOfLines={1}>
{label}
</Text>
</View>
)}
</Button>
) )
} }