Enlarge click targets for post controls and view header
parent
67c4dcff37
commit
f3f3bfb335
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue