diff options
| -rw-r--r-- | assets/icons/arrowOutOfBox_stroke2_corner0_rounded.svg | 1 | ||||
| -rw-r--r-- | src/components/icons/ArrowOutOfBox.tsx | 5 | ||||
| -rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 25 | ||||
| -rw-r--r-- | src/view/com/util/post-ctrls/PostCtrls.tsx | 59 |
4 files changed, 51 insertions, 39 deletions
diff --git a/assets/icons/arrowOutOfBox_stroke2_corner0_rounded.svg b/assets/icons/arrowOutOfBox_stroke2_corner0_rounded.svg new file mode 100644 index 000000000..2312ccd55 --- /dev/null +++ b/assets/icons/arrowOutOfBox_stroke2_corner0_rounded.svg @@ -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> diff --git a/src/components/icons/ArrowOutOfBox.tsx b/src/components/icons/ArrowOutOfBox.tsx new file mode 100644 index 000000000..8b395016b --- /dev/null +++ b/src/components/icons/ArrowOutOfBox.tsx @@ -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', +}) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index d11c2781b..d3ca6f356 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -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} diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 249111a04..cc12467cf 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -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,20 +205,34 @@ let PostCtrls = ({ ) : undefined} </TouchableOpacity> </View> - {big ? undefined : ( - <View style={styles.ctrl}> - <PostDropdownBtn - testID="postDropdownBtn" - postAuthor={post.author} - postCid={post.cid} - postUri={post.uri} - record={record} - richText={richText} - showAppealLabelItem={showAppealLabelItem} - style={styles.btnPad} - /> + {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} + postCid={post.cid} + postUri={post.uri} + record={record} + richText={richText} + showAppealLabelItem={showAppealLabelItem} + 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', |
