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
GitHub
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 {PostEmbeds} from '../util/post-embeds'
|
||||
import {PostCtrls} from '../util/post-ctrls/PostCtrls'
|
||||
import {PostDropdownBtn} from '../util/forms/PostDropdownBtn'
|
||||
import {PostHider} from '../util/moderation/PostHider'
|
||||
import {ContentHider} from '../util/moderation/ContentHider'
|
||||
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 {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow'
|
||||
import {ThreadPost} from '#/state/queries/post-thread'
|
||||
import {useSession} from '#/state/session'
|
||||
import {WhoCanReply} from '../threadgate/WhoCanReply'
|
||||
|
||||
export function PostThreadItem({
|
||||
|
|
@ -162,7 +160,6 @@ let PostThreadItemLoaded = ({
|
|||
const {_} = useLingui()
|
||||
const langPrefs = useLanguagePrefs()
|
||||
const {openComposer} = useComposerControls()
|
||||
const {currentAccount} = useSession()
|
||||
const [limitLines, setLimitLines] = React.useState(
|
||||
() => countLines(richText?.text) >= MAX_POST_LINES,
|
||||
)
|
||||
|
|
@ -188,9 +185,6 @@ let PostThreadItemLoaded = ({
|
|||
return makeProfileLink(post.author, 'post', urip.rkey, 'reposted-by')
|
||||
}, [post.uri, post.author])
|
||||
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(
|
||||
record?.text || '',
|
||||
|
|
@ -331,23 +325,6 @@ let PostThreadItemLoaded = ({
|
|||
</Link>
|
||||
</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 style={[s.pl10, s.pr10, s.pb10]}>
|
||||
<ContentHider
|
||||
|
|
@ -437,7 +414,7 @@ let PostThreadItemLoaded = ({
|
|||
) : (
|
||||
<></>
|
||||
)}
|
||||
<View style={[s.pl10, s.pb5]}>
|
||||
<View style={[s.pl10, s.pr10, s.pb5]}>
|
||||
<PostCtrls
|
||||
big
|
||||
post={post}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
import {
|
||||
AppBskyFeedDefs,
|
||||
AppBskyFeedPost,
|
||||
AtUri,
|
||||
RichText as RichTextAPI,
|
||||
} from '@atproto/api'
|
||||
import {Text} from '../text/Text'
|
||||
|
|
@ -30,6 +31,10 @@ import {Shadow} from '#/state/cache/types'
|
|||
import {useRequireAuth} from '#/state/session'
|
||||
import {msg} from '@lingui/macro'
|
||||
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 = ({
|
||||
big,
|
||||
|
|
@ -116,11 +121,18 @@ let PostCtrls = ({
|
|||
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 (
|
||||
<View style={[styles.ctrls, style]}>
|
||||
<View
|
||||
style={[
|
||||
styles.ctrl,
|
||||
big ? styles.ctrlBig : styles.ctrl,
|
||||
post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
|
||||
]}>
|
||||
<TouchableOpacity
|
||||
|
|
@ -149,7 +161,7 @@ let PostCtrls = ({
|
|||
) : undefined}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.ctrl}>
|
||||
<View style={big ? styles.ctrlBig : styles.ctrl}>
|
||||
<RepostButton
|
||||
big={big}
|
||||
isReposted={!!post.viewer?.repost}
|
||||
|
|
@ -158,7 +170,7 @@ let PostCtrls = ({
|
|||
onQuote={onQuote}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.ctrl}>
|
||||
<View style={big ? styles.ctrlBig : styles.ctrl}>
|
||||
<TouchableOpacity
|
||||
testID="likeBtn"
|
||||
style={[styles.btn, !big && styles.btnPad]}
|
||||
|
|
@ -193,8 +205,23 @@ let PostCtrls = ({
|
|||
) : undefined}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{big ? undefined : (
|
||||
<View style={styles.ctrl}>
|
||||
{big && (
|
||||
<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
|
||||
testID="postDropdownBtn"
|
||||
postAuthor={post.author}
|
||||
|
|
@ -206,7 +233,6 @@ let PostCtrls = ({
|
|||
style={styles.btnPad}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -223,6 +249,9 @@ const styles = StyleSheet.create({
|
|||
flex: 1,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
ctrlBig: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
|
|
|
|||
Loading…
Reference in New Issue