Enlarge click targets for post controls and view header

zio/stable
Paul Frazee 2022-12-05 10:18:38 -06:00
parent 67c4dcff37
commit f3f3bfb335
3 changed files with 27 additions and 6 deletions

View File

@ -18,6 +18,8 @@ import {useStores} from '../../../state'
import {ConfirmModel} from '../../../state/models/shell-ui'
import {TABS_ENABLED} from '../../../build-flags'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
export interface DropdownItem {
icon?: IconProp
label: string
@ -61,7 +63,11 @@ export function DropdownBtn({
}
return (
<TouchableOpacity style={style} onPress={onPress} ref={ref}>
<TouchableOpacity
style={style}
onPress={onPress}
hitSlop={HITSLOP}
ref={ref}>
{children}
</TouchableOpacity>
)

View File

@ -25,6 +25,7 @@ interface PostCtrlsOpts {
const redgray = '#7A6161'
const sRedgray = {color: redgray}
const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10}
export function PostCtrls(opts: PostCtrlsOpts) {
const interp1 = useSharedValue<number>(0)
@ -59,7 +60,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
return (
<View style={styles.ctrls}>
<View style={s.flex1}>
<TouchableOpacity style={styles.ctrl} onPress={opts.onPressReply}>
<TouchableOpacity
style={styles.ctrl}
hitSlop={HITSLOP}
onPress={opts.onPressReply}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
@ -72,6 +76,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
</View>
<View style={s.flex1}>
<TouchableOpacity
hitSlop={HITSLOP}
onPress={onPressToggleRepostWrapper}
style={styles.ctrl}>
<Animated.View style={anim1Style}>
@ -98,6 +103,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<View style={s.flex1}>
<TouchableOpacity
style={styles.ctrl}
hitSlop={HITSLOP}
onPress={onPressToggleUpvoteWrapper}>
<Animated.View style={anim2Style}>
{opts.isUpvoted ? (
@ -137,7 +143,6 @@ const styles = StyleSheet.create({
ctrl: {
flexDirection: 'row',
alignItems: 'center',
paddingRight: 4,
},
ctrlIcon: {
color: redgray,

View File

@ -5,6 +5,9 @@ import {colors} from '../../lib/styles'
import {MagnifyingGlassIcon} from '../../lib/icons'
import {useStores} from '../../../state'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
export function ViewHeader({
title,
subtitle,
@ -27,11 +30,14 @@ export function ViewHeader({
return (
<View style={styles.header}>
{store.nav.tab.canGoBack ? (
<TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
<TouchableOpacity
onPress={onPressBack}
hitSlop={BACK_HITSLOP}
style={styles.backIcon}>
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
</TouchableOpacity>
) : undefined}
<View style={styles.titleContainer}>
<View style={styles.titleContainer} pointerEvents="none">
<Text style={styles.title}>{title}</Text>
{subtitle ? (
<Text style={styles.subtitle} numberOfLines={1}>
@ -39,11 +45,15 @@ export function ViewHeader({
</Text>
) : undefined}
</View>
<TouchableOpacity onPress={onPressCompose} style={styles.btn}>
<TouchableOpacity
onPress={onPressCompose}
hitSlop={HITSLOP}
style={styles.btn}>
<FontAwesomeIcon size={18} icon="plus" />
</TouchableOpacity>
<TouchableOpacity
onPress={onPressSearch}
hitSlop={HITSLOP}
style={[styles.btn, {marginLeft: 8}]}>
<MagnifyingGlassIcon
size={18}