zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Refer to upvotes as 'likes' in the UI (will change in the protocol soon)

zio/stable
Paul Frazee 2023-01-17 12:35:47 -06:00
parent ee8d311795
commit 798622b307
7 changed files with 69 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/view/com/notifications/FeedItem.tsx
View File

@ -8,7 +8,7 @@ import {NotificationsViewItemModel} from '../../../state/models/notifications-vi
import {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {s, colors} from '../../lib/styles'
import {ago, pluralize} from '../../../lib/strings'
import {UpIconSolid} from '../../lib/icons'
import {HeartIconSolid} from '../../lib/icons'
import {Text} from '../util/text/Text'
import {UserAvatar} from '../util/UserAvatar'
import {ImageHorzList} from '../util/images/ImageHorzList'
@ -72,11 +72,11 @@ export const FeedItem = observer(function FeedItem({
}
let action = ''
let icon: Props['icon'] | 'UpIconSolid'
let icon: Props['icon'] | 'HeartIconSolid'
let iconStyle: Props['style'] = []
if (item.isUpvote) {
action = 'upvoted your post'
icon = 'UpIconSolid'
action = 'liked your post'
icon = 'HeartIconSolid'
iconStyle = [s.red3, {position: 'relative', top: -4}]
} else if (item.isRepost) {
action = 'reposted your post'
@ -132,8 +132,8 @@ export const FeedItem = observer(function FeedItem({
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutIcon}>
{icon === 'UpIconSolid' ? (
<UpIconSolid size={26} style={[styles.icon, ...iconStyle]} />
{icon === 'HeartIconSolid' ? (
<HeartIconSolid size={26} style={[styles.icon, ...iconStyle]} />
) : (
<FontAwesomeIcon
icon={icon}

4
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -47,7 +47,7 @@ export const PostThreadItem = observer(function PostThreadItem({
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}/upvoted-by`
}, [item.post.uri, item.post.author.handle])
const upvotesTitle = 'Upvotes on this post'
const upvotesTitle = 'Likes on this post'
const repostsHref = useMemo(() => {
const urip = new AtUri(item.post.uri)
return `/profile/${item.post.author.handle}/post/${urip.rkey}/reposted-by`
@ -209,7 +209,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<Text type="h5" style={pal.text}>
{item.post.upvoteCount}
</Text>{' '}
{pluralize(item.post.upvoteCount, 'upvote')}
{pluralize(item.post.upvoteCount, 'like')}
</Text>
</Link>
) : (

4
src/view/com/util/LoadingPlaceholder.tsx
View File

@ -1,7 +1,7 @@
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 {HeartIcon} from '../../lib/icons'
import {s} from '../../lib/styles'
import {useTheme} from '../../lib/ThemeContext'
import {usePalette} from '../../lib/hooks/usePalette'
@ -70,7 +70,7 @@ export function PostLoadingPlaceholder({
/>
</View>
<View style={s.flex1}>
<UpIcon
<HeartIcon
style={{color: theme.palette.default.icon}}
size={17}
strokeWidth={1.7}

22
src/view/com/util/PostCtrls.tsx
View File

@ -11,7 +11,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
import {Text} from './text/Text'
import {PostDropdownBtn} from './forms/DropdownButton'
import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons'
import {HeartIcon, HeartIconSolid, CommentBottomArrow} from '../../lib/icons'
import {s, colors} from '../../lib/styles'
import {useTheme} from '../../lib/ThemeContext'
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
@ -123,7 +123,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
hitSlop={HITSLOP}
onPress={opts.onPressReply}>
<CommentBottomArrow
style={defaultCtrlColor}
style={[
defaultCtrlColor,
opts.big ? {marginTop: 2} : {marginTop: 1},
]}
strokeWidth={3}
size={opts.big ? 20 : 15}
/>
@ -167,15 +170,18 @@ export function PostCtrls(opts: PostCtrlsOpts) {
onPress={onPressToggleUpvoteWrapper}>
<Animated.View style={anim2Style}>
{opts.isUpvoted ? (
<UpIconSolid
<HeartIconSolid
style={[styles.ctrlIconUpvoted]}
size={opts.big ? 22 : 19}
size={opts.big ? 22 : 16}
/>
) : (
<UpIcon
style={defaultCtrlColor}
size={opts.big ? 22 : 19}
strokeWidth={1.5}
<HeartIcon
style={[
defaultCtrlColor,
opts.big ? {marginTop: 1} : undefined,
]}
strokeWidth={3}
size={opts.big ? 20 : 16}
/>
)}
</Animated.View>

42
src/view/lib/icons.tsx
View File

@ -225,6 +225,48 @@ export function UserGroupIcon({
)
}
// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
export function HeartIcon({
style,
size = 24,
strokeWidth = 1.5,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
strokeWidth: number
}) {
return (
<Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
<Path
strokeWidth={strokeWidth}
stroke="currentColor"
fill="none"
d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z"
/>
</Svg>
)
}
// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
export function HeartIconSolid({
style,
size = 24,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
<Path
fill="currentColor"
stroke="currentColor"
strokeWidth={1}
d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z"
/>
</Svg>
)
}
export function UpIcon({
style,
size,

2
src/view/routes.ts
View File

@ -55,7 +55,7 @@ export const routes: Route[] = [
],
[
PostUpvotedBy,
'Upvoted by',
'Liked by',
'heart',
r('/profile/(?<name>[^/]+)/post/(?<rkey>[^/]+)/upvoted-by'),
],

4
src/view/screens/PostUpvotedBy.tsx
View File

@ -13,13 +13,13 @@ export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
useEffect(() => {
if (visible) {
store.nav.setTitle(navIdx, 'Upvoted by')
store.nav.setTitle(navIdx, 'Liked by')
}
}, [store, visible])
return (
<View>
<ViewHeader title="Upvoted by" />
<ViewHeader title="Liked by" />
<PostLikedByComponent uri={uri} direction="up" />
</View>
)