zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[🐴] Add hover context menu for convo list on web (#3923)

Browse source 
* remove some unnecessary props

* add hover trigger on web for convo list

* lint

* use `UserAvatar` to not affect accessibility

* remove extra wrapper

* add `label`

* always show on mobile

* adjust size of dots

* make the message trigger dots the same size

* ❓
This commit is contained in:
Hailey 2024-05-09 09:07:57 -07:00 • committed by GitHub
parent 55ac287d5e
commit 2fe76333bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 71 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/dms/ConvoMenu.tsx
View file

@ -1,5 +1,5 @@
import React, {useCallback} from 'react'
import {Keyboard, Pressable} from 'react-native'
import {Keyboard, Pressable, View} from 'react-native'
import {AppBskyActorDefs} from '@atproto/api'
import {ChatBskyConvoDefs} from '@atproto-labs/api'
import {msg, Trans} from '@lingui/macro'
@ -32,17 +32,19 @@ let ConvoMenu = ({
profile,
onUpdateConvo,
control,
hideTrigger,
currentScreen,
showMarkAsRead,
hideTrigger,
triggerOpacity,
}: {
convo: ChatBskyConvoDefs.ConvoView
profile: AppBskyActorDefs.ProfileViewBasic
onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
control?: Menu.MenuControlProps
hideTrigger?: boolean
currentScreen: 'list' | 'conversation'
showMarkAsRead?: boolean
hideTrigger?: boolean
triggerOpacity?: number
}): React.ReactNode => {
const navigation = useNavigation<NavigationProp>()
const {_} = useLingui()
@ -89,26 +91,28 @@ let ConvoMenu = ({
<>
<Menu.Root control={control}>
{!hideTrigger && (
<Menu.Trigger label={_(msg`Chat settings`)}>
{({props, state}) => (
<Pressable
{...props}
onPress={() => {
Keyboard.dismiss()
// eslint-disable-next-line react/prop-types -- eslint is confused by the name `props`
props.onPress()
}}
style={[
a.p_sm,
a.rounded_sm,
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
// make sure pfp is in the middle
{marginLeft: -10},
]}>
<DotsHorizontal size="lg" style={t.atoms.text} />
</Pressable>
)}
</Menu.Trigger>
<View style={{opacity: triggerOpacity}}>
<Menu.Trigger label={_(msg`Chat settings`)}>
{({props, state}) => (
<Pressable
{...props}
onPress={() => {
Keyboard.dismiss()
// eslint-disable-next-line react/prop-types -- eslint is confused by the name `props`
props.onPress()
}}
style={[
a.p_sm,
a.rounded_full,
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
// make sure pfp is in the middle
{marginLeft: -10},
]}>
<DotsHorizontal size="md" style={t.atoms.text} />
</Pressable>
)}
</Menu.Trigger>
</View>
)}
<Menu.Outer>
<Menu.Group>