diff options
Diffstat (limited to 'src/view/com/util')
| -rw-r--r-- | src/view/com/util/DropdownBtn.tsx | 17 | ||||
| -rw-r--r-- | src/view/com/util/LoadingPlaceholder.tsx | 12 | ||||
| -rw-r--r-- | src/view/com/util/PostCtrls.tsx | 63 | ||||
| -rw-r--r-- | src/view/com/util/ViewHeader.tsx | 43 |
4 files changed, 50 insertions, 85 deletions
diff --git a/src/view/com/util/DropdownBtn.tsx b/src/view/com/util/DropdownBtn.tsx index 99cc00bd2..01c9259a2 100644 --- a/src/view/com/util/DropdownBtn.tsx +++ b/src/view/com/util/DropdownBtn.tsx @@ -16,6 +16,7 @@ import {colors} from '../../lib/styles' import {toShareUrl} from '../../lib/strings' import {useStores} from '../../../state' import {ConfirmModel} from '../../../state/models/shell-ui' +import {TABS_ENABLED} from '../../../build-flags' export interface DropdownItem { icon?: IconProp @@ -84,13 +85,15 @@ export function PostDropdownBtn({ const store = useStores() const dropdownItems: DropdownItem[] = [ - { - icon: ['far', 'clone'], - label: 'Open in new tab', - onPress() { - store.nav.newTab(itemHref) - }, - }, + TABS_ENABLED + ? { + icon: ['far', 'clone'], + label: 'Open in new tab', + onPress() { + store.nav.newTab(itemHref) + }, + } + : undefined, { icon: 'share', label: 'Share...', diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index c198407de..5ccd1bd14 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -9,7 +9,7 @@ import { } from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon, DownIcon} from '../../lib/icons' +import {UpIcon} from '../../lib/icons' import {s, colors} from '../../lib/styles' export function LoadingPlaceholder({ @@ -93,18 +93,16 @@ export function PostLoadingPlaceholder({ <FontAwesomeIcon style={s.gray3} icon={['far', 'comment']} - size={14} + size={16} /> </View> <View style={s.flex1}> - <FontAwesomeIcon style={s.gray3} icon="retweet" size={18} /> + <FontAwesomeIcon style={s.gray3} icon="retweet" size={20} /> </View> <View style={s.flex1}> - <UpIcon style={s.gray3} size={18} /> - </View> - <View style={s.flex1}> - <DownIcon style={s.gray3} size={18} /> + <UpIcon style={s.gray3} size={19} strokeWidth={1.7} /> </View> + <View style={s.flex1}></View> </View> </View> </View> diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index a3d2085e9..144351d85 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -8,27 +8,23 @@ import Animated, { interpolate, } from 'react-native-reanimated' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons' +import {UpIcon, UpIconSolid} from '../../lib/icons' import {s, colors} from '../../lib/styles' interface PostCtrlsOpts { replyCount: number repostCount: number upvoteCount: number - downvoteCount: number isReposted: boolean isUpvoted: boolean - isDownvoted: boolean onPressReply: () => void onPressToggleRepost: () => void onPressToggleUpvote: () => void - onPressToggleDownvote: () => void } export function PostCtrls(opts: PostCtrlsOpts) { const interp1 = useSharedValue<number>(0) const interp2 = useSharedValue<number>(0) - const interp3 = useSharedValue<number>(0) const anim1Style = useAnimatedStyle(() => ({ transform: [{scale: interpolate(interp1.value, [0, 1.0], [1.0, 3.0])}], @@ -38,10 +34,6 @@ export function PostCtrls(opts: PostCtrlsOpts) { transform: [{scale: interpolate(interp2.value, [0, 1.0], [1.0, 3.0])}], opacity: interpolate(interp2.value, [0, 1.0], [1.0, 0.0]), })) - const anim3Style = useAnimatedStyle(() => ({ - transform: [{scale: interpolate(interp3.value, [0, 1.0], [1.0, 3.0])}], - opacity: interpolate(interp3.value, [0, 1.0], [1.0, 0.0]), - })) const onPressToggleRepostWrapper = () => { if (!opts.isReposted) { @@ -59,14 +51,6 @@ export function PostCtrls(opts: PostCtrlsOpts) { } opts.onPressToggleUpvote() } - const onPressToggleDownvoteWrapper = () => { - if (!opts.isDownvoted) { - interp3.value = withTiming(1, {duration: 300}, () => { - interp3.value = withDelay(100, withTiming(0, {duration: 20})) - }) - } - opts.onPressToggleDownvote() - } return ( <View style={styles.ctrls}> @@ -75,9 +59,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { <FontAwesomeIcon style={styles.ctrlIcon} icon={['far', 'comment']} - size={14} + size={16} /> - <Text style={[s.gray5, s.ml5, s.f13]}>{opts.replyCount}</Text> + <Text style={[s.gray5, s.ml5, s.f17]}>{opts.replyCount}</Text> </TouchableOpacity> </View> <View style={s.flex1}> @@ -90,14 +74,14 @@ export function PostCtrls(opts: PostCtrlsOpts) { opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon } icon="retweet" - size={18} + size={20} /> </Animated.View> <Text style={ opts.isReposted - ? [s.bold, s.green3, s.f13, s.ml5] - : [s.gray5, s.f13, s.ml5] + ? [s.bold, s.green3, s.f17, s.ml5] + : [s.gray5, s.f17, s.ml5] }> {opts.repostCount} </Text> @@ -109,42 +93,22 @@ export function PostCtrls(opts: PostCtrlsOpts) { onPress={onPressToggleUpvoteWrapper}> <Animated.View style={anim2Style}> {opts.isUpvoted ? ( - <UpIconSolid style={styles.ctrlIconUpvoted} size={18} /> + <UpIconSolid style={[styles.ctrlIconUpvoted]} size={19} /> ) : ( - <UpIcon style={styles.ctrlIcon} size={18} /> + <UpIcon style={[styles.ctrlIcon]} size={20} strokeWidth={1.5} /> )} </Animated.View> <Text style={ opts.isUpvoted - ? [s.bold, s.red3, s.f13, s.ml5] - : [s.gray5, s.f13, s.ml5] + ? [s.bold, s.red3, s.f17, s.ml5] + : [s.gray5, s.f17, s.ml5] }> {opts.upvoteCount} </Text> </TouchableOpacity> </View> - <View style={s.flex1}> - <TouchableOpacity - style={styles.ctrl} - onPress={onPressToggleDownvoteWrapper}> - <Animated.View style={anim3Style}> - {opts.isDownvoted ? ( - <DownIconSolid style={styles.ctrlIconDownvoted} size={18} /> - ) : ( - <DownIcon style={styles.ctrlIcon} size={18} /> - )} - </Animated.View> - <Text - style={ - opts.isDownvoted - ? [s.bold, s.blue3, s.f13, s.ml5] - : [s.gray5, s.f13, s.ml5] - }> - {opts.downvoteCount} - </Text> - </TouchableOpacity> - </View> + <View style={s.flex1}></View> </View> ) } @@ -152,12 +116,10 @@ export function PostCtrls(opts: PostCtrlsOpts) { const styles = StyleSheet.create({ ctrls: { flexDirection: 'row', - paddingRight: 20, }, ctrl: { flexDirection: 'row', alignItems: 'center', - paddingLeft: 4, paddingRight: 4, }, ctrlIcon: { @@ -169,7 +131,4 @@ const styles = StyleSheet.create({ ctrlIconUpvoted: { color: colors.red3, }, - ctrlIconDownvoted: { - color: colors.blue3, - }, }) diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 7e68bcd15..55a71ea26 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -3,6 +3,7 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {UserAvatar} from './UserAvatar' import {colors} from '../../lib/styles' +import {MagnifyingGlassIcon} from '../../lib/icons' import {useStores} from '../../../state' export function ViewHeader({ @@ -16,16 +17,14 @@ export function ViewHeader({ const onPressBack = () => { store.nav.tab.goBack() } - const onPressAvatar = () => { - if (store.me.handle) { - store.nav.navigate(`/profile/${store.me.handle}`) - } + const onPressSearch = () => { + store.nav.navigate(`/search`) } return ( <View style={styles.header}> {store.nav.tab.canGoBack ? ( <TouchableOpacity onPress={onPressBack} style={styles.backIcon}> - <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 3}} /> + <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} /> </TouchableOpacity> ) : ( <View style={styles.cornerPlaceholder} /> @@ -38,17 +37,9 @@ export function ViewHeader({ </Text> ) : undefined} </View> - {store.me.did ? ( - <TouchableOpacity onPress={onPressAvatar}> - <UserAvatar - size={24} - handle={store.me.handle || ''} - displayName={store.me.displayName} - /> - </TouchableOpacity> - ) : ( - <View style={styles.cornerPlaceholder} /> - )} + <TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}> + <MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} /> + </TouchableOpacity> </View> ) } @@ -83,8 +74,22 @@ const styles = StyleSheet.create({ }, cornerPlaceholder: { - width: 24, - height: 24, + width: 30, + height: 30, + }, + backIcon: {width: 30, height: 30}, + searchBtn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.gray1, + width: 30, + height: 30, + borderRadius: 15, + }, + searchBtnIcon: { + color: colors.black, + position: 'relative', + top: -1, }, - backIcon: {width: 24, height: 24}, }) |