From cb4045d2bec73053c1f4ced17b611e0f5f127fc3 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 20 May 2024 19:51:34 -0700 Subject: [PATCH] Switch to a more visually obvious button for the threadgate (#4139) * Switch to a more visually obvious button for the threadgate * Move threadgate button into the keyboard-sticky area * Fix keyboard offset --- .../icons/earth_stroke2_corner0_rounded.svg | 1 + src/components/icons/Globe.tsx | 4 ++ src/view/com/composer/Composer.tsx | 11 ++- .../com/composer/threadgate/ThreadgateBtn.tsx | 71 ++++++++----------- 4 files changed, 40 insertions(+), 47 deletions(-) create mode 100644 assets/icons/earth_stroke2_corner0_rounded.svg diff --git a/assets/icons/earth_stroke2_corner0_rounded.svg b/assets/icons/earth_stroke2_corner0_rounded.svg new file mode 100644 index 00000000..02d2fe0b --- /dev/null +++ b/assets/icons/earth_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/icons/Globe.tsx b/src/components/icons/Globe.tsx index f81b3ff7..53ef84ee 100644 --- a/src/components/icons/Globe.tsx +++ b/src/components/icons/Globe.tsx @@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE' export const Globe_Stroke2_Corner0_Rounded = createSinglePathSVG({ path: 'M4.062 11h2.961c.103-2.204.545-4.218 1.235-5.77.06-.136.123-.269.188-.399A8.007 8.007 0 0 0 4.062 11ZM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 2c-.227 0-.518.1-.868.432-.354.337-.719.872-1.047 1.61-.561 1.263-.958 2.991-1.06 4.958h5.95c-.102-1.967-.499-3.695-1.06-4.958-.328-.738-.693-1.273-1.047-1.61C12.518 4.099 12.227 4 12 4Zm4.977 7c-.103-2.204-.545-4.218-1.235-5.77a9.78 9.78 0 0 0-.188-.399A8.006 8.006 0 0 1 19.938 11h-2.961Zm-2.003 2H9.026c.101 1.966.498 3.695 1.06 4.958.327.738.692 1.273 1.046 1.61.35.333.641.432.868.432.227 0 .518-.1.868-.432.354-.337.719-.872 1.047-1.61.561-1.263.958-2.991 1.06-4.958Zm.58 6.169c.065-.13.128-.263.188-.399.69-1.552 1.132-3.566 1.235-5.77h2.961a8.006 8.006 0 0 1-4.384 6.169Zm-7.108 0a9.877 9.877 0 0 1-.188-.399c-.69-1.552-1.132-3.566-1.235-5.77H4.062a8.006 8.006 0 0 0 4.384 6.169Z', }) + +export const Earth_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4.4 9.493C4.14 10.28 4 11.124 4 12a8 8 0 1 0 10.899-7.459l-.953 3.81a1 1 0 0 1-.726.727l-3.444.866-.772 1.533a1 1 0 0 1-1.493.35L4.4 9.493Zm.883-1.84L7.756 9.51l.44-.874a1 1 0 0 1 .649-.52l3.306-.832.807-3.227a7.993 7.993 0 0 0-7.676 3.597ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8.43.162a1 1 0 0 1 .77-.29l1.89.121a1 1 0 0 1 .494.168l2.869 1.928a1 1 0 0 1 .336 1.277l-.973 1.946a1 1 0 0 1-.894.553h-2.92a1 1 0 0 1-.831-.445L9.225 14.5a1 1 0 0 1 .126-1.262l1.08-1.076Zm.915 1.913.177-.177 1.171.074 1.914 1.286-.303.607h-1.766l-1.194-1.79Z', +}) diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index d85fca29..7b102c82 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -380,7 +380,7 @@ export const ComposePost = observer(function ComposePost({ testID="composePostView" behavior="padding" style={s.flex1} - keyboardVerticalOffset={60}> + keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}> - {replyTo ? null : ( - - )} {canPost ? ( + {replyTo ? null : ( + + )} diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx index ebbc613f..c43f0067 100644 --- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx +++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx @@ -1,17 +1,17 @@ import React from 'react' -import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {HITSLOP_10} from 'lib/constants' -import {useLingui} from '@lingui/react' +import {Keyboard, View} from 'react-native' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {isNative} from '#/platform/detection' import {useModalControls} from '#/state/modals' import {ThreadgateSetting} from '#/state/queries/threadgate' -import {isNative} from '#/platform/detection' +import {useAnalytics} from 'lib/analytics/analytics' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' +import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe' +import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' export function ThreadgateBtn({ threadgate, @@ -20,7 +20,6 @@ export function ThreadgateBtn({ threadgate: ThreadgateSetting[] onChange: (v: ThreadgateSetting[]) => void }) { - const pal = usePalette('default') const {track} = useAnalytics() const {_} = useLingui() const {openModal} = useModalControls() @@ -37,36 +36,28 @@ export function ThreadgateBtn({ }) } + const isEverybody = threadgate.length === 0 + const isNobody = !!threadgate.find(gate => gate.type === 'nobody') + const label = isEverybody + ? _(msg`Everybody can reply`) + : isNobody + ? _(msg`Nobody can reply`) + : _(msg`Some people can reply`) + return ( - - - {threadgate.length ? ( - + + ) } - -const styles = StyleSheet.create({ - button: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 6, - gap: 4, - }, -})