diff options
| -rw-r--r-- | src/view/com/util/DropdownBtn.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/util/LoadingPlaceholder.tsx | 51 | ||||
| -rw-r--r-- | src/view/com/util/PostCtrls.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/ViewHeader.tsx | 16 | ||||
| -rw-r--r-- | src/view/shell/mobile/index.tsx | 5 |
5 files changed, 36 insertions, 53 deletions
diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx index ea4e19503..98e2f3f2b 100644 --- a/src/view/com/util/DropdownBtn.tsx +++ b/src/view/com/util/DropdownBtn.tsx @@ -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> ) diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 3fcb07b51..9c2d0398f 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -1,13 +1,5 @@ -import React, {useEffect, useMemo} from 'react' -import { - Animated, - StyleSheet, - StyleProp, - useWindowDimensions, - View, - ViewStyle, -} from 'react-native' -import LinearGradient from 'react-native-linear-gradient' +import React from 'react' +import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {UpIcon} from '../../lib/icons' import {s, colors} from '../../lib/styles' @@ -21,31 +13,6 @@ export function LoadingPlaceholder({ height: string | number style?: StyleProp<ViewStyle> }) { - const dim = useWindowDimensions() - const elWidth = typeof width === 'string' ? dim.width : width - const offset = useMemo(() => new Animated.Value(elWidth * -1), []) - useEffect(() => { - const anim = Animated.loop( - Animated.sequence([ - Animated.timing(offset, { - toValue: elWidth, - duration: 1e3, - useNativeDriver: true, - isInteraction: false, - }), - Animated.timing(offset, { - toValue: elWidth * -1, - duration: 0, - delay: 500, - useNativeDriver: true, - isInteraction: false, - }), - ]), - ) - anim.start() - return () => anim.stop() - }, []) - return ( <View style={[ @@ -58,19 +25,13 @@ export function LoadingPlaceholder({ }, style, ]}> - <Animated.View + <View style={{ width, height, - transform: [{translateX: offset}], - }}> - <LinearGradient - colors={['#e7e9ea', '#e2e2e2', '#e7e9ea']} - start={{x: 0, y: 0}} - end={{x: 1, y: 0}} - style={{width: '100%', height: '100%'}} - /> - </Animated.View> + backgroundColor: '#e7e9ea', + }} + /> </View> ) } diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index 10b54be3f..f2a66d100 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -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, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 50b7e6532..5d0ec2995 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -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} diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 27524bcae..d653944d1 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -47,8 +47,8 @@ import { BellIconSolid, } from '../../lib/icons' -const SWIPE_GESTURE_DIST_TRIGGER = 0.4 -const SWIPE_GESTURE_VEL_TRIGGER = 2500 +const SWIPE_GESTURE_DIST_TRIGGER = 0.3 +const SWIPE_GESTURE_VEL_TRIGGER = 2000 const Btn = ({ icon, @@ -195,6 +195,7 @@ export const MobileShell: React.FC = observer(() => { // = const goBack = () => store.nav.tab.goBack() const swipeGesture = Gesture.Pan() + .enabled(store.nav.tab.canGoBack) .onUpdate(e => { if (store.nav.tab.canGoBack) { swipeGestureInterp.value = Math.max(e.translationX / winDim.width, 0) |