[🐴] Add hover context menu for convo list on web (#3923)
* 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
* ❓
zio/stable
parent
55ac287d5e
commit
2fe76333bc
|
@ -57,9 +57,6 @@ export function ActionsWrapper({
|
||||||
message={message}
|
message={message}
|
||||||
control={menuControl}
|
control={menuControl}
|
||||||
triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
|
triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
|
||||||
onTriggerPress={onMouseEnter}
|
|
||||||
// @ts-expect-error web only
|
|
||||||
onMouseLeave={onMouseLeave}
|
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
@ -75,9 +72,6 @@ export function ActionsWrapper({
|
||||||
message={message}
|
message={message}
|
||||||
control={menuControl}
|
control={menuControl}
|
||||||
triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
|
triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
|
||||||
onTriggerPress={onMouseEnter}
|
|
||||||
// @ts-expect-error web only
|
|
||||||
onMouseLeave={onMouseLeave}
|
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, {useCallback} from 'react'
|
import React, {useCallback} from 'react'
|
||||||
import {Keyboard, Pressable} from 'react-native'
|
import {Keyboard, Pressable, View} from 'react-native'
|
||||||
import {AppBskyActorDefs} from '@atproto/api'
|
import {AppBskyActorDefs} from '@atproto/api'
|
||||||
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
|
@ -32,17 +32,19 @@ let ConvoMenu = ({
|
||||||
profile,
|
profile,
|
||||||
onUpdateConvo,
|
onUpdateConvo,
|
||||||
control,
|
control,
|
||||||
hideTrigger,
|
|
||||||
currentScreen,
|
currentScreen,
|
||||||
showMarkAsRead,
|
showMarkAsRead,
|
||||||
|
hideTrigger,
|
||||||
|
triggerOpacity,
|
||||||
}: {
|
}: {
|
||||||
convo: ChatBskyConvoDefs.ConvoView
|
convo: ChatBskyConvoDefs.ConvoView
|
||||||
profile: AppBskyActorDefs.ProfileViewBasic
|
profile: AppBskyActorDefs.ProfileViewBasic
|
||||||
onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
|
onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
|
||||||
control?: Menu.MenuControlProps
|
control?: Menu.MenuControlProps
|
||||||
hideTrigger?: boolean
|
|
||||||
currentScreen: 'list' | 'conversation'
|
currentScreen: 'list' | 'conversation'
|
||||||
showMarkAsRead?: boolean
|
showMarkAsRead?: boolean
|
||||||
|
hideTrigger?: boolean
|
||||||
|
triggerOpacity?: number
|
||||||
}): React.ReactNode => {
|
}): React.ReactNode => {
|
||||||
const navigation = useNavigation<NavigationProp>()
|
const navigation = useNavigation<NavigationProp>()
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
|
@ -89,6 +91,7 @@ let ConvoMenu = ({
|
||||||
<>
|
<>
|
||||||
<Menu.Root control={control}>
|
<Menu.Root control={control}>
|
||||||
{!hideTrigger && (
|
{!hideTrigger && (
|
||||||
|
<View style={{opacity: triggerOpacity}}>
|
||||||
<Menu.Trigger label={_(msg`Chat settings`)}>
|
<Menu.Trigger label={_(msg`Chat settings`)}>
|
||||||
{({props, state}) => (
|
{({props, state}) => (
|
||||||
<Pressable
|
<Pressable
|
||||||
|
@ -100,15 +103,16 @@ let ConvoMenu = ({
|
||||||
}}
|
}}
|
||||||
style={[
|
style={[
|
||||||
a.p_sm,
|
a.p_sm,
|
||||||
a.rounded_sm,
|
a.rounded_full,
|
||||||
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
|
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
|
||||||
// make sure pfp is in the middle
|
// make sure pfp is in the middle
|
||||||
{marginLeft: -10},
|
{marginLeft: -10},
|
||||||
]}>
|
]}>
|
||||||
<DotsHorizontal size="lg" style={t.atoms.text} />
|
<DotsHorizontal size="md" style={t.atoms.text} />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
)}
|
)}
|
||||||
</Menu.Trigger>
|
</Menu.Trigger>
|
||||||
|
</View>
|
||||||
)}
|
)}
|
||||||
<Menu.Outer>
|
<Menu.Outer>
|
||||||
<Menu.Group>
|
<Menu.Group>
|
||||||
|
|
|
@ -5,6 +5,7 @@ import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
|
import {isWeb} from 'platform/detection'
|
||||||
import {useConvo} from 'state/messages/convo'
|
import {useConvo} from 'state/messages/convo'
|
||||||
import {ConvoStatus} from 'state/messages/convo/types'
|
import {ConvoStatus} from 'state/messages/convo/types'
|
||||||
import {useSession} from 'state/session'
|
import {useSession} from 'state/session'
|
||||||
|
@ -21,12 +22,10 @@ import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '../icons/Clipb
|
||||||
export let MessageMenu = ({
|
export let MessageMenu = ({
|
||||||
message,
|
message,
|
||||||
control,
|
control,
|
||||||
hideTrigger,
|
|
||||||
triggerOpacity,
|
triggerOpacity,
|
||||||
}: {
|
}: {
|
||||||
hideTrigger?: boolean
|
hideTrigger?: boolean
|
||||||
triggerOpacity?: number
|
triggerOpacity?: number
|
||||||
onTriggerPress?: () => void
|
|
||||||
message: ChatBskyConvoDefs.MessageView
|
message: ChatBskyConvoDefs.MessageView
|
||||||
control: Menu.MenuControlProps
|
control: Menu.MenuControlProps
|
||||||
}): React.ReactNode => {
|
}): React.ReactNode => {
|
||||||
|
@ -64,7 +63,7 @@ export let MessageMenu = ({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Menu.Root control={control}>
|
<Menu.Root control={control}>
|
||||||
{!hideTrigger && (
|
{isWeb && (
|
||||||
<View style={{opacity: triggerOpacity}}>
|
<View style={{opacity: triggerOpacity}}>
|
||||||
<Menu.Trigger label={_(msg`Chat settings`)}>
|
<Menu.Trigger label={_(msg`Chat settings`)}>
|
||||||
{({props, state}) => (
|
{({props, state}) => (
|
||||||
|
@ -75,7 +74,7 @@ export let MessageMenu = ({
|
||||||
a.rounded_full,
|
a.rounded_full,
|
||||||
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
|
(state.hovered || state.pressed) && t.atoms.bg_contrast_25,
|
||||||
]}>
|
]}>
|
||||||
<DotsHorizontal size="sm" style={t.atoms.text} />
|
<DotsHorizontal size="md" style={t.atoms.text} />
|
||||||
</Pressable>
|
</Pressable>
|
||||||
)}
|
)}
|
||||||
</Menu.Trigger>
|
</Menu.Trigger>
|
||||||
|
|
|
@ -5,11 +5,12 @@ import {View} from 'react-native'
|
||||||
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
import {ChatBskyConvoDefs} from '@atproto-labs/api'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
import {useNavigation} from '@react-navigation/native'
|
||||||
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
||||||
import {sha256} from 'js-sha256'
|
import {sha256} from 'js-sha256'
|
||||||
|
|
||||||
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
|
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
|
||||||
import {MessagesTabNavigatorParams} from '#/lib/routes/types'
|
import {MessagesTabNavigatorParams, NavigationProp} from '#/lib/routes/types'
|
||||||
import {useGate} from '#/lib/statsig/statsig'
|
import {useGate} from '#/lib/statsig/statsig'
|
||||||
import {cleanError} from '#/lib/strings/errors'
|
import {cleanError} from '#/lib/strings/errors'
|
||||||
import {logger} from '#/logger'
|
import {logger} from '#/logger'
|
||||||
|
@ -18,7 +19,7 @@ import {useListConvos} from '#/state/queries/messages/list-converations'
|
||||||
import {useSession} from '#/state/session'
|
import {useSession} from '#/state/session'
|
||||||
import {List} from '#/view/com/util/List'
|
import {List} from '#/view/com/util/List'
|
||||||
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
|
import {TimeElapsed} from '#/view/com/util/TimeElapsed'
|
||||||
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||||
import {CenteredView} from '#/view/com/util/Views'
|
import {CenteredView} from '#/view/com/util/Views'
|
||||||
import {ScrollView} from '#/view/com/util/Views'
|
import {ScrollView} from '#/view/com/util/Views'
|
||||||
|
@ -239,6 +240,7 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {currentAccount} = useSession()
|
const {currentAccount} = useSession()
|
||||||
const menuControl = useMenuControl()
|
const menuControl = useMenuControl()
|
||||||
|
const {gtMobile} = useBreakpoints()
|
||||||
|
|
||||||
let lastMessage = _(msg`No messages yet`)
|
let lastMessage = _(msg`No messages yet`)
|
||||||
let lastMessageSentAt: string | null = null
|
let lastMessageSentAt: string | null = null
|
||||||
|
@ -258,15 +260,43 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
member => member.did !== currentAccount?.did,
|
member => member.did !== currentAccount?.did,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const navigation = useNavigation<NavigationProp>()
|
||||||
|
const [showActions, setShowActions] = React.useState(false)
|
||||||
|
|
||||||
|
const onMouseEnter = React.useCallback(() => {
|
||||||
|
setShowActions(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const onMouseLeave = React.useCallback(() => {
|
||||||
|
setShowActions(false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const onFocus = React.useCallback<React.FocusEventHandler>(e => {
|
||||||
|
if (e.nativeEvent.relatedTarget == null) return
|
||||||
|
setShowActions(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const onPress = React.useCallback(() => {
|
||||||
|
navigation.push('MessagesConversation', {
|
||||||
|
conversation: convo.id,
|
||||||
|
})
|
||||||
|
}, [convo.id, navigation])
|
||||||
|
|
||||||
if (!otherUser) {
|
if (!otherUser) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Button
|
||||||
to={`/messages/${convo.id}`}
|
label={otherUser.displayName || otherUser.handle}
|
||||||
|
onPress={onPress}
|
||||||
style={a.flex_1}
|
style={a.flex_1}
|
||||||
onLongPress={isNative ? menuControl.open : undefined}>
|
onLongPress={isNative ? menuControl.open : undefined}
|
||||||
|
// @ts-expect-error web only
|
||||||
|
onMouseEnter={onMouseEnter}
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
onFocus={onFocus}
|
||||||
|
onBlur={onMouseLeave}>
|
||||||
{({hovered, pressed}) => (
|
{({hovered, pressed}) => (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
|
@ -279,7 +309,7 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
(hovered || pressed) && t.atoms.bg_contrast_25,
|
(hovered || pressed) && t.atoms.bg_contrast_25,
|
||||||
]}>
|
]}>
|
||||||
<View pointerEvents="none">
|
<View pointerEvents="none">
|
||||||
<PreviewableUserAvatar profile={otherUser} size={42} />
|
<UserAvatar avatar={otherUser?.avatar} size={42} />
|
||||||
</View>
|
</View>
|
||||||
<View style={[a.flex_1]}>
|
<View style={[a.flex_1]}>
|
||||||
<Text
|
<Text
|
||||||
|
@ -336,15 +366,16 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
|
||||||
convo={convo}
|
convo={convo}
|
||||||
profile={otherUser}
|
profile={otherUser}
|
||||||
control={menuControl}
|
control={menuControl}
|
||||||
// TODO(sam) show on hover on web
|
|
||||||
// tricky because it captures the mouse event
|
|
||||||
hideTrigger
|
|
||||||
currentScreen="list"
|
currentScreen="list"
|
||||||
showMarkAsRead={convo.unreadCount > 0}
|
showMarkAsRead={convo.unreadCount > 0}
|
||||||
|
hideTrigger={isNative}
|
||||||
|
triggerOpacity={
|
||||||
|
!gtMobile || showActions || menuControl.isOpen ? 1 : 0
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue