chahine/rebreak-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(social/compose): Bild-Upload + Teilen-Button auf Apple-HIG 44pt Tap-Target

Browse Source 
Vorher: 30/32pt Touch-Areas mit hitSlop-Kruecken (asymmetrisch, schwer zu treffen).
Nachher: explizite height: 44 im style-Callback, Icons 22pt, Padding angepasst.

Konsistent mit PostCard-Like/Comment-Pattern. Funktionalitaet (pickImage,
submit) unveraendert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-07 20:45:00 +02:00
parent e9a9bd8880
commit e53911e844
1 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/rebreak-native/components/ComposeCard.tsx
View File

@ -126,7 +126,6 @@ export function ComposeCard({ onPosted }: Props) {
style={{ height: 160 }} style={{ height: 160 }}
resizeMode="cover" resizeMode="cover"
/> />
{/* HitSlop +9pt rundum → 28pt visual + 18pt slop ≈ 46pt effektive Tap-Area (HIG ≥44pt). */}
<Pressable <Pressable
onPress={() => setImageUri(null)} onPress={() => setImageUri(null)}
hitSlop={{ top: 9, bottom: 9, left: 9, right: 9 }} hitSlop={{ top: 9, bottom: 9, left: 9, right: 9 }}
@ -143,20 +142,17 @@ export function ComposeCard({ onPosted }: Props) {
{showActions && ( {showActions && (
<View className="flex-row items-center justify-between mt-3 pt-3 border-t border-neutral-100"> <View className="flex-row items-center justify-between mt-3 pt-3 border-t border-neutral-100">
{/* Image-Picker: visuell klein (icon 18pt + label), aber hitSlop +12 → effektive Tap-Area ~46pt (HIG-Min 44pt). */}
<Pressable <Pressable
onPress={pickImage} onPress={pickImage}
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
android_ripple={{ color: 'rgba(0,0,0,0.08)', borderless: true, radius: 22 }} android_ripple={{ color: 'rgba(0,0,0,0.08)', borderless: true, radius: 22 }}
className="flex-row items-center gap-1.5 py-1.5 pr-1.5" className="flex-row items-center gap-1.5 px-2"
style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })} style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1, height: 44, alignItems: 'center', justifyContent: 'center' })}
> >
<Ionicons name="image-outline" size={18} color="#737373" /> <Ionicons name="image-outline" size={22} color="#737373" />
<Text className="text-sm text-neutral-500" style={{ fontFamily: 'Nunito_400Regular' }}>{t('community.image')}</Text> <Text className="text-sm text-neutral-500" style={{ fontFamily: 'Nunito_400Regular' }}>{t('community.image')}</Text>
</Pressable> </Pressable>
<View className="flex-row items-center gap-2"> <View className="flex-row items-center gap-2">
{/* Cancel-Label: hitSlop sichert ≥44pt Tap-Area trotz nackter Text-Höhe. */}
<Pressable <Pressable
onPress={cancel} onPress={cancel}
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
@ -164,13 +160,12 @@ export function ComposeCard({ onPosted }: Props) {
> >
<Text className="text-sm text-neutral-400" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('common.cancel')}</Text> <Text className="text-sm text-neutral-400" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('common.cancel')}</Text>
</Pressable> </Pressable>
{/* Share-Pill: visuell h-8 (32pt) bleibt erhalten — hitSlop +6 vertikal hebt Tap-Area auf 44pt. */}
<Pressable <Pressable
onPress={submit} onPress={submit}
disabled={!content.trim() || posting} disabled={!content.trim() || posting}
hitSlop={{ top: 6, bottom: 6, left: 8, right: 8 }} className="px-5 rounded-full bg-rebreak-500 items-center justify-center flex-row gap-1.5"
className="h-8 px-4 rounded-full bg-rebreak-500 items-center justify-center flex-row gap-1.5"
style={({ pressed }) => ({ style={({ pressed }) => ({
height: 44,
opacity: pressed || !content.trim() || posting ? 0.5 : 1, opacity: pressed || !content.trim() || posting ? 0.5 : 1,
})} })}
> >