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
dan 2024-02-09 20:00:21 +00:00 committed by GitHub
parent 7f4dbe9454
commit ad8f9e560d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 39 deletions

View File

@ -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

View File

@ -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',
})

View File

@ -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}

View File

@ -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,20 +205,34 @@ let PostCtrls = ({
) : undefined} ) : undefined}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{big ? undefined : ( {big && (
<View style={styles.ctrl}> <View style={styles.ctrlBig}>
<PostDropdownBtn <TouchableOpacity
testID="postDropdownBtn" testID="likeBtn"
postAuthor={post.author} style={[styles.btn]}
postCid={post.cid} onPress={onShare}
postUri={post.uri} accessibilityRole="button"
record={record} accessibilityLabel={`${
richText={richText} post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
showAppealLabelItem={showAppealLabelItem} } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
style={styles.btnPad} accessibilityHint=""
/> hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
<ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} />
</TouchableOpacity>
</View> </View>
)} )}
<View style={big ? styles.ctrlBig : styles.ctrl}>
<PostDropdownBtn
testID="postDropdownBtn"
postAuthor={post.author}
postCid={post.cid}
postUri={post.uri}
record={record}
richText={richText}
showAppealLabelItem={showAppealLabelItem}
style={styles.btnPad}
/>
</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',