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

Update presentation of settings menus (#10425)

Browse Source
This commit is contained in:
DS Boyce
2026-05-07 12:00:21 -07:00
committed by GitHub
parent 2907ff0cd8
commit eddbf6ba9f
6 changed files with 56 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Menu/index.tsx
+17 -6
View File
@@ -120,7 +120,14 @@ export function Outer({
)
}
export function Item({children, label, style, onPress, ...rest}: ItemProps) {
export function Item({
children,
label,
style,
onPress,
destructive = false,
...rest
}: ItemProps) {
const t = useTheme()
const context = useMenuContext()
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
@@ -137,7 +144,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
accessibilityLabel={label}
onFocus={onFocus}
onBlur={onBlur}
onPress={async e => {
onPress={e => {
if (IS_ANDROID) {
/**
* Below fix for iOS doesn't work for Android, this does.
@@ -176,7 +183,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
style,
(focused || pressed) && !rest.disabled && [t.atoms.bg_contrast_50],
]}>
<ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
<ItemContext.Provider
value={{disabled: Boolean(rest.disabled), destructive}}>
{children}
</ItemContext.Provider>
</Pressable>
@@ -185,7 +193,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
export function ItemText({children, style}: ItemTextProps) {
const t = useTheme()
const {disabled} = useMenuItemContext()
const {disabled, destructive} = useMenuItemContext()
return (
<Text
numberOfLines={1}
@@ -196,6 +204,7 @@ export function ItemText({children, style}: ItemTextProps) {
a.font_semi_bold,
t.atoms.text_contrast_high,
style,
destructive && {color: t.palette.negative_500},
disabled && t.atoms.text_contrast_low,
]}>
{children}
@@ -205,7 +214,7 @@ export function ItemText({children, style}: ItemTextProps) {
export function ItemIcon({icon: Comp, fill}: ItemIconProps) {
const t = useTheme()
const {disabled} = useMenuItemContext()
const {disabled, destructive} = useMenuItemContext()
return (
<Comp
size="lg"
@@ -214,7 +223,9 @@ export function ItemIcon({icon: Comp, fill}: ItemIconProps) {
? fill({disabled})
: disabled
? t.atoms.text_contrast_low.color
: t.atoms.text_contrast_medium.color
: destructive
? t.palette.negative_500
: t.atoms.text_contrast_medium.color
}
/>
)
src/components/Menu/index.web.tsx
+17 -6
View File
@@ -107,7 +107,7 @@ const RadixTriggerPassThrough = forwardRef(
props: {
children: (
props: RadixPassThroughTriggerProps & {
ref: React.Ref<any>
ref: React.Ref<HTMLElement>
},
) => React.ReactNode
},
@@ -225,7 +225,14 @@ export function Outer({
)
}
export function Item({children, label, onPress, style, ...rest}: ItemProps) {
export function Item({
children,
label,
onPress,
style,
destructive = false,
...rest
}: ItemProps) {
const t = useTheme()
const {control} = useMenuContext()
const {
@@ -278,7 +285,8 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {
onMouseEnter,
onMouseLeave,
})}>
<ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
<ItemContext.Provider
value={{disabled: Boolean(rest.disabled), destructive}}>
{children}
</ItemContext.Provider>
</Pressable>
@@ -288,7 +296,7 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {
export function ItemText({children, style}: ItemTextProps) {
const t = useTheme()
const {disabled} = useMenuItemContext()
const {disabled, destructive} = useMenuItemContext()
return (
<Text
style={[
@@ -296,6 +304,7 @@ export function ItemText({children, style}: ItemTextProps) {
a.font_semi_bold,
t.atoms.text_contrast_high,
style,
destructive && {color: t.palette.negative_500},
disabled && t.atoms.text_contrast_low,
]}>
{children}
@@ -305,7 +314,7 @@ export function ItemText({children, style}: ItemTextProps) {
export function ItemIcon({icon: Comp, position = 'left', fill}: ItemIconProps) {
const t = useTheme()
const {disabled} = useMenuItemContext()
const {disabled, destructive} = useMenuItemContext()
return (
<View
style={[
@@ -324,7 +333,9 @@ export function ItemIcon({icon: Comp, position = 'left', fill}: ItemIconProps) {
? fill({disabled})
: disabled
? t.atoms.text_contrast_low.color
: t.atoms.text_contrast_medium.color
: destructive
? t.palette.negative_500
: t.atoms.text_contrast_medium.color
}
/>
</View>
src/components/Menu/types.ts
+2
View File
@@ -15,6 +15,7 @@ export type ContextType = {
export type ItemContextType = {
disabled: boolean
destructive: boolean
}
export type RadixPassThroughTriggerProps = {
@@ -99,6 +100,7 @@ export type ItemProps = React.PropsWithChildren<
ViewStyleProp & {
label: string
onPress: (e: GestureResponderEvent) => void
destructive?: boolean
}
>
src/screens/Messages/ConversationSettings/MemberMenu.tsx
+19 -13
View File
@@ -18,6 +18,7 @@ import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/i
import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message'
import {
Person_Stroke2_Corner2_Rounded as PersonIcon,
PersonCheck_Stroke2_Corner0_Rounded as PersonCheck,
PersonX_Stroke2_Corner0_Rounded as PersonXIcon,
} from '#/components/icons/Person'
import * as Menu from '#/components/Menu'
@@ -180,29 +181,30 @@ export function MemberMenu({
</Menu.Trigger>
<Menu.Outer>
<Menu.Group>
<Menu.Item
label={l`Message ${displayName}`}
onPress={handleMessageMember}>
<Menu.ItemIcon icon={MessageIcon} />
<Menu.ItemText>
<Trans context="action">Message</Trans>
</Menu.ItemText>
</Menu.Item>
<Menu.Item
label={l`View ${displayName}’s profile`}
onPress={() => {
navigation.navigate('Profile', {name: profile.did})
}}>
<Menu.ItemIcon icon={PersonIcon} />
<Menu.ItemText>
<Trans>Go to profile</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={PersonIcon} />
</Menu.Item>
<Menu.Item
label={l`Message ${displayName}`}
onPress={handleMessageMember}>
<Menu.ItemText>
<Trans context="action">Message</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={MessageIcon} />
</Menu.Item>
</Menu.Group>
<Menu.Divider />
<Menu.Group>
{canBlockMember ? (
<Menu.Item
destructive
label={
profile.viewer?.blocking
? l`Unblock ${displayName}`
@@ -213,31 +215,35 @@ export function MemberMenu({
? handleBlockMember
: blockMemberPrompt.open
}>
<Menu.ItemIcon
icon={profile.viewer?.blocking ? PersonCheck : PersonXIcon}
/>
<Menu.ItemText>
<Trans>Block</Trans>
{profile.viewer?.blocking ? l`Unblock` : l`Block`}
</Menu.ItemText>
<Menu.ItemIcon icon={PersonXIcon} />
</Menu.Item>
) : null}
{canRemoveMember ? (
<Menu.Item
destructive
label={l`Remove ${displayName} from this group chat`}
onPress={() => removeMembers({members: [profile.did]})}>
<Menu.ItemIcon icon={ArrowBoxLeftIcon} />
<Menu.ItemText>
<Trans>Remove from chat</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={ArrowBoxLeftIcon} />
</Menu.Item>
) : null}
{canUninviteMember ? (
<Menu.Item
destructive
label={l`Uninvite ${displayName} from this group chat`}
// TODO Need to wire up the uninvite flow. -dsb
onPress={() => {}}>
<Menu.ItemIcon icon={ArrowBoxLeftIcon} />
<Menu.ItemText>
<Trans>Uninvite</Trans>
</Menu.ItemText>
<Menu.ItemIcon icon={ArrowBoxLeftIcon} />
</Menu.Item>
) : null}
</Menu.Group>
src/screens/Messages/ConversationSettings/index.tsx
+1 -1
View File
@@ -595,7 +595,7 @@ function SettingsButton({
a.font_medium,
a.text_center,
a.pt_xs,
t.atoms.text_contrast_medium,
t.atoms.text,
]}>
{text}
</Text>