Always show post dropdown button at the bottom of the post, add share button to highlighted post (#2646)
* Always show post dropdown at the bottom * Rm useless view (no longer needed) * space icons evenly in big, add equal padding * add share icon * add onShare * confirmed figma noob. figured it out. * use our svg naming strat * Update icon --------- Co-authored-by: Hailey <me@haileyok.com> Co-authored-by: Eric Bailey <git@esb.lol>zio/stable
parent
7f4dbe9454
commit
ad8f9e560d
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.707 3.293a1 1 0 0 0-1.414 0l-4.5 4.5a1 1 0 0 0 1.414 1.414L11 6.414v8.836a1 1 0 1 0 2 0V6.414l2.793 2.793a1 1 0 1 0 1.414-1.414l-4.5-4.5ZM5 12.75a1 1 0 1 0-2 0V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.25a1 1 0 1 0-2 0V19H5v-6.25Z" clip-rule="evenodd"/></svg>
|
After Width: | Height: | Size: 372 B |
|
@ -0,0 +1,5 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const ArrowOutOfBox_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12.707 3.293a1 1 0 0 0-1.414 0l-4.5 4.5a1 1 0 0 0 1.414 1.414L11 6.414v8.836a1 1 0 1 0 2 0V6.414l2.793 2.793a1 1 0 1 0 1.414-1.414l-4.5-4.5ZM5 12.75a1 1 0 1 0-2 0V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.25a1 1 0 1 0-2 0V19H5v-6.25Z',
|
||||||
|
})
|
|
@ -23,7 +23,6 @@ import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
|
||||||
import {PostMeta} from '../util/PostMeta'
|
import {PostMeta} from '../util/PostMeta'
|
||||||
import {PostEmbeds} from '../util/post-embeds'
|
import {PostEmbeds} from '../util/post-embeds'
|
||||||
import {PostCtrls} from '../util/post-ctrls/PostCtrls'
|
import {PostCtrls} from '../util/post-ctrls/PostCtrls'
|
||||||
import {PostDropdownBtn} from '../util/forms/PostDropdownBtn'
|
|
||||||
import {PostHider} from '../util/moderation/PostHider'
|
import {PostHider} from '../util/moderation/PostHider'
|
||||||
import {ContentHider} from '../util/moderation/ContentHider'
|
import {ContentHider} from '../util/moderation/ContentHider'
|
||||||
import {PostAlerts} from '../util/moderation/PostAlerts'
|
import {PostAlerts} from '../util/moderation/PostAlerts'
|
||||||
|
@ -43,7 +42,6 @@ import {useModerationOpts} from '#/state/queries/preferences'
|
||||||
import {useOpenLink} from '#/state/preferences/in-app-browser'
|
import {useOpenLink} from '#/state/preferences/in-app-browser'
|
||||||
import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow'
|
import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow'
|
||||||
import {ThreadPost} from '#/state/queries/post-thread'
|
import {ThreadPost} from '#/state/queries/post-thread'
|
||||||
import {useSession} from '#/state/session'
|
|
||||||
import {WhoCanReply} from '../threadgate/WhoCanReply'
|
import {WhoCanReply} from '../threadgate/WhoCanReply'
|
||||||
|
|
||||||
export function PostThreadItem({
|
export function PostThreadItem({
|
||||||
|
@ -162,7 +160,6 @@ let PostThreadItemLoaded = ({
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const langPrefs = useLanguagePrefs()
|
const langPrefs = useLanguagePrefs()
|
||||||
const {openComposer} = useComposerControls()
|
const {openComposer} = useComposerControls()
|
||||||
const {currentAccount} = useSession()
|
|
||||||
const [limitLines, setLimitLines] = React.useState(
|
const [limitLines, setLimitLines] = React.useState(
|
||||||
() => countLines(richText?.text) >= MAX_POST_LINES,
|
() => countLines(richText?.text) >= MAX_POST_LINES,
|
||||||
)
|
)
|
||||||
|
@ -188,9 +185,6 @@ let PostThreadItemLoaded = ({
|
||||||
return makeProfileLink(post.author, 'post', urip.rkey, 'reposted-by')
|
return makeProfileLink(post.author, 'post', urip.rkey, 'reposted-by')
|
||||||
}, [post.uri, post.author])
|
}, [post.uri, post.author])
|
||||||
const repostsTitle = _(msg`Reposts of this post`)
|
const repostsTitle = _(msg`Reposts of this post`)
|
||||||
const isModeratedPost =
|
|
||||||
moderation.decisions.post.cause?.type === 'label' &&
|
|
||||||
moderation.decisions.post.cause.label.src !== currentAccount?.did
|
|
||||||
|
|
||||||
const translatorUrl = getTranslatorLink(
|
const translatorUrl = getTranslatorLink(
|
||||||
record?.text || '',
|
record?.text || '',
|
||||||
|
@ -331,23 +325,6 @@ let PostThreadItemLoaded = ({
|
||||||
</Link>
|
</Link>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<PostDropdownBtn
|
|
||||||
testID="postDropdownBtn"
|
|
||||||
postAuthor={post.author}
|
|
||||||
postCid={post.cid}
|
|
||||||
postUri={post.uri}
|
|
||||||
record={record}
|
|
||||||
richText={richText}
|
|
||||||
showAppealLabelItem={
|
|
||||||
post.author.did === currentAccount?.did && isModeratedPost
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
paddingVertical: 6,
|
|
||||||
paddingHorizontal: 10,
|
|
||||||
marginLeft: 'auto',
|
|
||||||
width: 40,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
<View style={[s.pl10, s.pr10, s.pb10]}>
|
<View style={[s.pl10, s.pr10, s.pb10]}>
|
||||||
<ContentHider
|
<ContentHider
|
||||||
|
@ -437,7 +414,7 @@ let PostThreadItemLoaded = ({
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
<View style={[s.pl10, s.pb5]}>
|
<View style={[s.pl10, s.pr10, s.pb5]}>
|
||||||
<PostCtrls
|
<PostCtrls
|
||||||
big
|
big
|
||||||
post={post}
|
post={post}
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
import {
|
import {
|
||||||
AppBskyFeedDefs,
|
AppBskyFeedDefs,
|
||||||
AppBskyFeedPost,
|
AppBskyFeedPost,
|
||||||
|
AtUri,
|
||||||
RichText as RichTextAPI,
|
RichText as RichTextAPI,
|
||||||
} from '@atproto/api'
|
} from '@atproto/api'
|
||||||
import {Text} from '../text/Text'
|
import {Text} from '../text/Text'
|
||||||
|
@ -30,6 +31,10 @@ import {Shadow} from '#/state/cache/types'
|
||||||
import {useRequireAuth} from '#/state/session'
|
import {useRequireAuth} from '#/state/session'
|
||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
|
||||||
|
import {toShareUrl} from 'lib/strings/url-helpers'
|
||||||
|
import {shareUrl} from 'lib/sharing'
|
||||||
|
import {makeProfileLink} from 'lib/routes/links'
|
||||||
|
|
||||||
let PostCtrls = ({
|
let PostCtrls = ({
|
||||||
big,
|
big,
|
||||||
|
@ -116,11 +121,18 @@ let PostCtrls = ({
|
||||||
closeModal,
|
closeModal,
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const onShare = useCallback(() => {
|
||||||
|
const urip = new AtUri(post.uri)
|
||||||
|
const href = makeProfileLink(post.author, 'post', urip.rkey)
|
||||||
|
const url = toShareUrl(href)
|
||||||
|
shareUrl(url)
|
||||||
|
}, [post.uri, post.author])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.ctrls, style]}>
|
<View style={[styles.ctrls, style]}>
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
styles.ctrl,
|
big ? styles.ctrlBig : styles.ctrl,
|
||||||
post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
|
post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
|
||||||
]}>
|
]}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
@ -149,7 +161,7 @@ let PostCtrls = ({
|
||||||
) : undefined}
|
) : undefined}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.ctrl}>
|
<View style={big ? styles.ctrlBig : styles.ctrl}>
|
||||||
<RepostButton
|
<RepostButton
|
||||||
big={big}
|
big={big}
|
||||||
isReposted={!!post.viewer?.repost}
|
isReposted={!!post.viewer?.repost}
|
||||||
|
@ -158,7 +170,7 @@ let PostCtrls = ({
|
||||||
onQuote={onQuote}
|
onQuote={onQuote}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.ctrl}>
|
<View style={big ? styles.ctrlBig : styles.ctrl}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
testID="likeBtn"
|
testID="likeBtn"
|
||||||
style={[styles.btn, !big && styles.btnPad]}
|
style={[styles.btn, !big && styles.btnPad]}
|
||||||
|
@ -193,8 +205,23 @@ let PostCtrls = ({
|
||||||
) : undefined}
|
) : undefined}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
{big ? undefined : (
|
{big && (
|
||||||
<View style={styles.ctrl}>
|
<View style={styles.ctrlBig}>
|
||||||
|
<TouchableOpacity
|
||||||
|
testID="likeBtn"
|
||||||
|
style={[styles.btn]}
|
||||||
|
onPress={onShare}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={`${
|
||||||
|
post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
|
||||||
|
} (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
|
||||||
|
accessibilityHint=""
|
||||||
|
hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
|
||||||
|
<ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
<View style={big ? styles.ctrlBig : styles.ctrl}>
|
||||||
<PostDropdownBtn
|
<PostDropdownBtn
|
||||||
testID="postDropdownBtn"
|
testID="postDropdownBtn"
|
||||||
postAuthor={post.author}
|
postAuthor={post.author}
|
||||||
|
@ -206,7 +233,6 @@ let PostCtrls = ({
|
||||||
style={styles.btnPad}
|
style={styles.btnPad}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)}
|
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -223,6 +249,9 @@ const styles = StyleSheet.create({
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'flex-start',
|
alignItems: 'flex-start',
|
||||||
},
|
},
|
||||||
|
ctrlBig: {
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
btn: {
|
btn: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
|
Loading…
Reference in New Issue