diff options
Diffstat (limited to 'src/view/com/util')
| -rw-r--r-- | src/view/com/util/forms/NativeDropdown.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/util/forms/PostDropdownBtn.tsx | 14 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/PostCtrls.tsx | 80 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.web.tsx | 4 |
5 files changed, 28 insertions, 83 deletions
diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx index 9e6fcaa44..082285064 100644 --- a/src/view/com/util/forms/NativeDropdown.tsx +++ b/src/view/com/util/forms/NativeDropdown.tsx @@ -60,7 +60,6 @@ export const DropdownMenuTrigger = DropdownMenu.create( icon="ellipsis" size={20} color={defaultCtrlColor} - style={styles.ellipsis} /> )} </View> @@ -252,9 +251,6 @@ const styles = StyleSheet.create({ height: 1, marginVertical: 4, }, - ellipsis: { - padding: isWeb ? 0 : 10, - }, content: { backgroundColor: '#f0f0f0', borderRadius: 8, diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index 65050d8c0..969deb3ac 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -1,6 +1,9 @@ import React from 'react' +import {StyleProp, View, ViewStyle} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {toShareUrl} from 'lib/strings/url-helpers' import {useStores} from 'state/index' +import {useTheme} from 'lib/ThemeContext' import {shareUrl} from 'lib/sharing' import { NativeDropdown, @@ -19,6 +22,7 @@ export function PostDropdownBtn({ onOpenTranslate, onToggleThreadMute, onDeletePost, + style, }: { testID: string itemUri: string @@ -31,8 +35,11 @@ export function PostDropdownBtn({ onOpenTranslate: () => void onToggleThreadMute: () => void onDeletePost: () => void + style?: StyleProp<ViewStyle> }) { const store = useStores() + const theme = useTheme() + const defaultCtrlColor = theme.palette.default.postCtrl const dropdownItems: NativeDropdownItem[] = [ { @@ -146,8 +153,11 @@ export function PostDropdownBtn({ testID={testID} items={dropdownItems} accessibilityLabel="More post options" - accessibilityHint="" - /> + accessibilityHint=""> + <View style={style}> + <FontAwesomeIcon icon="ellipsis" size={20} color={defaultCtrlColor} /> + </View> + </NativeDropdown> </EventStopper> ) } diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 672e02693..c71100df0 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -6,11 +6,6 @@ import { View, ViewStyle, } from 'react-native' -// DISABLED see #135 -// import { -// TriggerableAnimated, -// TriggerableAnimatedRef, -// } from './anim/TriggerableAnimated' import {Text} from '../text/Text' import {PostDropdownBtn} from '../forms/PostDropdownBtn' import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons' @@ -20,7 +15,6 @@ import {useTheme} from 'lib/ThemeContext' import {useStores} from 'state/index' import {RepostButton} from './RepostButton' import {Haptics} from 'lib/haptics' -import {createHitslop} from 'lib/constants' interface PostCtrlsOpts { itemUri: string @@ -53,44 +47,6 @@ interface PostCtrlsOpts { onDeletePost: () => void } -const HITSLOP = createHitslop(5) - -// DISABLED see #135 -/* -function ctrlAnimStart(interp: Animated.Value) { - return Animated.sequence([ - Animated.timing(interp, { - toValue: 1, - duration: 250, - useNativeDriver: true, - }), - Animated.delay(50), - Animated.timing(interp, { - toValue: 0, - duration: 20, - useNativeDriver: true, - }), - ]) -} - -function ctrlAnimStyle(interp: Animated.Value) { - return { - transform: [ - { - scale: interp.interpolate({ - inputRange: [0, 1.0], - outputRange: [1.0, 4.0], - }), - }, - ], - opacity: interp.interpolate({ - inputRange: [0, 1.0], - outputRange: [1.0, 0.0], - }), - } -} -*/ - export function PostCtrls(opts: PostCtrlsOpts) { const store = useStores() const theme = useTheme() @@ -100,22 +56,11 @@ export function PostCtrls(opts: PostCtrlsOpts) { }), [theme], ) as StyleProp<ViewStyle> - // DISABLED see #135 - // const repostRef = React.useRef<TriggerableAnimatedRef | null>(null) - // const likeRef = React.useRef<TriggerableAnimatedRef | null>(null) const onRepost = useCallback(() => { store.shell.closeModal() if (!opts.isReposted) { Haptics.default() opts.onPressToggleRepost().catch(_e => undefined) - // DISABLED see #135 - // repostRef.current?.trigger( - // {start: ctrlAnimStart, style: ctrlAnimStyle}, - // async () => { - // await opts.onPressToggleRepost().catch(_e => undefined) - // setRepostMod(0) - // }, - // ) } else { opts.onPressToggleRepost().catch(_e => undefined) } @@ -146,18 +91,8 @@ export function PostCtrls(opts: PostCtrlsOpts) { if (!opts.isLiked) { Haptics.default() await opts.onPressToggleLike().catch(_e => undefined) - // DISABLED see #135 - // likeRef.current?.trigger( - // {start: ctrlAnimStart, style: ctrlAnimStyle}, - // async () => { - // await opts.onPressToggleLike().catch(_e => undefined) - // setLikeMod(0) - // }, - // ) - // setIsLikedPressed(false) } else { await opts.onPressToggleLike().catch(_e => undefined) - // setIsLikedPressed(false) } } @@ -165,8 +100,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { <View style={[styles.ctrls, opts.style]}> <TouchableOpacity testID="replyBtn" - style={styles.ctrl} - hitSlop={HITSLOP} + style={[styles.ctrl, !opts.big && styles.ctrlPad, {paddingLeft: 0}]} onPress={opts.onPressReply} accessibilityRole="button" accessibilityLabel={`Reply (${opts.replyCount} ${ @@ -187,8 +121,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { <RepostButton {...opts} onRepost={onRepost} onQuote={onQuote} /> <TouchableOpacity testID="likeBtn" - style={styles.ctrl} - hitSlop={HITSLOP} + style={[styles.ctrl, !opts.big && styles.ctrlPad]} onPress={onPressToggleLikeWrapper} accessibilityRole="button" accessibilityLabel={`${opts.isLiked ? 'Unlike' : 'Like'} (${ @@ -232,6 +165,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { onOpenTranslate={opts.onOpenTranslate} onToggleThreadMute={opts.onToggleThreadMute} onDeletePost={opts.onDeletePost} + style={styles.ctrlPad} /> )} {/* used for adding pad to the right side */} @@ -248,8 +182,12 @@ const styles = StyleSheet.create({ ctrl: { flexDirection: 'row', alignItems: 'center', - padding: 5, - margin: -5, + }, + ctrlPad: { + paddingTop: 5, + paddingBottom: 5, + paddingLeft: 5, + paddingRight: 5, }, ctrlIconLiked: { color: colors.like, diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index 5fe62aefe..374d06515 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -6,9 +6,6 @@ import {useTheme} from 'lib/ThemeContext' import {Text} from '../text/Text' import {pluralize} from 'lib/strings/helpers' import {useStores} from 'state/index' -import {createHitslop} from 'lib/constants' - -const HITSLOP = createHitslop(5) interface Props { isReposted: boolean @@ -47,9 +44,8 @@ export const RepostButton = ({ return ( <TouchableOpacity testID="repostBtn" - hitSlop={HITSLOP} onPress={onPressToggleRepostWrapper} - style={styles.control} + style={[styles.control, !big && styles.controlPad]} accessibilityRole="button" accessibilityLabel={`${ isReposted ? 'Undo repost' : 'Repost' @@ -83,8 +79,9 @@ const styles = StyleSheet.create({ control: { flexDirection: 'row', alignItems: 'center', + }, + controlPad: { padding: 5, - margin: -5, }, reposted: { color: colors.green3, diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index 4d2a3fcdd..eab6e2fef 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -52,6 +52,7 @@ export const RepostButton = ({ <View style={[ styles.control, + !big && styles.controlPad, (isReposted ? styles.reposted : defaultControlColor) as StyleProp<ViewStyle>, @@ -77,6 +78,9 @@ const styles = StyleSheet.create({ alignItems: 'center', gap: 4, }, + controlPad: { + padding: 5, + }, reposted: { color: colors.green3, }, |