this repo has no description
Move self-label button (#5780)
* move self label button?
* rm
* make sure its usable on large font sizes
* tweak wording
* update icon
* tweaks
* change button label and change opacity when no media (#5794)
* Tweak it moar (#5807)
* Tweak it moar
* Pluralize
* Labels
---------
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>
authored by
Hailey
Samuel Newman
Eric Bailey
and committed by
GitHub
c3e51078
59f9cd91
+106
-95
+56
-58
src/view/com/composer/Composer.tsx
+56
-58
src/view/com/composer/Composer.tsx
···
13
13
Keyboard,
14
14
KeyboardAvoidingView,
15
15
LayoutChangeEvent,
16
+
ScrollView,
16
17
StyleProp,
17
18
StyleSheet,
18
19
View,
···
559
560
<ActivityIndicator />
560
561
</View>
561
562
</>
563
+
) : canPost ? (
564
+
<Button
565
+
testID="composerPublishBtn"
566
+
label={replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)}
567
+
variant="solid"
568
+
color="primary"
569
+
shape="default"
570
+
size="small"
571
+
style={[a.rounded_full, a.py_sm]}
572
+
onPress={() => onPressPublish()}
573
+
disabled={videoState.status !== 'idle' && publishOnUpload}>
574
+
<ButtonText style={[a.text_md]}>
575
+
{replyTo ? (
576
+
<Trans context="action">Reply</Trans>
577
+
) : (
578
+
<Trans context="action">Post</Trans>
579
+
)}
580
+
</ButtonText>
581
+
</Button>
562
582
) : (
563
-
<View style={[styles.postBtnWrapper]}>
564
-
<LabelsBtn
565
-
labels={draft.labels}
566
-
onChange={nextLabels => {
567
-
dispatch({type: 'update_labels', labels: nextLabels})
568
-
}}
569
-
hasMedia={hasMedia || Boolean(extLink)}
570
-
/>
571
-
{canPost ? (
572
-
<Button
573
-
testID="composerPublishBtn"
574
-
label={
575
-
replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)
576
-
}
577
-
variant="solid"
578
-
color="primary"
579
-
shape="default"
580
-
size="small"
581
-
style={[a.rounded_full, a.py_sm]}
582
-
onPress={() => onPressPublish()}
583
-
disabled={
584
-
videoState.status !== 'idle' && publishOnUpload
585
-
}>
586
-
<ButtonText style={[a.text_md]}>
587
-
{replyTo ? (
588
-
<Trans context="action">Reply</Trans>
589
-
) : (
590
-
<Trans context="action">Post</Trans>
591
-
)}
592
-
</ButtonText>
593
-
</Button>
594
-
) : (
595
-
<View style={[styles.postBtn, pal.btn]}>
596
-
<Text style={[pal.textLight, s.f16, s.bold]}>
597
-
<Trans context="action">Post</Trans>
598
-
</Text>
599
-
</View>
600
-
)}
583
+
<View style={[styles.postBtn, pal.btn]}>
584
+
<Text style={[pal.textLight, s.f16, s.bold]}>
585
+
<Trans context="action">Post</Trans>
586
+
</Text>
601
587
</View>
602
588
)}
603
589
</View>
···
758
744
</Animated.ScrollView>
759
745
<SuggestedLanguage text={richtext.text} />
760
746
761
-
{replyTo ? null : (
762
-
<ThreadgateBtn
763
-
postgate={draft.postgate}
764
-
onChangePostgate={nextPostgate => {
765
-
dispatch({type: 'update_postgate', postgate: nextPostgate})
766
-
}}
767
-
threadgateAllowUISettings={draft.threadgate}
768
-
onChangeThreadgateAllowUISettings={nextThreadgate => {
769
-
dispatch({
770
-
type: 'update_threadgate',
771
-
threadgate: nextThreadgate,
772
-
})
773
-
}}
774
-
style={bottomBarAnimatedStyle}
775
-
/>
776
-
)}
747
+
<Animated.View
748
+
style={[a.flex_row, a.p_sm, t.atoms.bg, bottomBarAnimatedStyle]}>
749
+
<ScrollView
750
+
contentContainerStyle={[a.gap_sm]}
751
+
horizontal={true}
752
+
bounces={false}
753
+
showsHorizontalScrollIndicator={false}>
754
+
{replyTo ? null : (
755
+
<ThreadgateBtn
756
+
postgate={draft.postgate}
757
+
onChangePostgate={nextPostgate => {
758
+
dispatch({type: 'update_postgate', postgate: nextPostgate})
759
+
}}
760
+
threadgateAllowUISettings={draft.threadgate}
761
+
onChangeThreadgateAllowUISettings={nextThreadgate => {
762
+
dispatch({
763
+
type: 'update_threadgate',
764
+
threadgate: nextThreadgate,
765
+
})
766
+
}}
767
+
style={bottomBarAnimatedStyle}
768
+
/>
769
+
)}
770
+
<LabelsBtn
771
+
labels={draft.labels}
772
+
onChange={nextLabels => {
773
+
dispatch({type: 'update_labels', labels: nextLabels})
774
+
}}
775
+
hasMedia={hasMedia || Boolean(extLink)}
776
+
/>
777
+
</ScrollView>
778
+
</Animated.View>
777
779
<View
778
780
style={[
779
781
a.flex_row,
···
987
989
paddingHorizontal: 20,
988
990
paddingVertical: 6,
989
991
marginLeft: 12,
990
-
},
991
-
postBtnWrapper: {
992
-
flexDirection: 'row',
993
-
gap: 14,
994
992
},
995
993
errorLine: {
996
994
flexDirection: 'row',
+29
-15
src/view/com/composer/labels/LabelsBtn.tsx
+29
-15
src/view/com/composer/labels/LabelsBtn.tsx
···
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
6
-
import {ShieldExclamation} from '#/lib/icons'
7
6
import {
8
7
ADULT_CONTENT_LABELS,
9
8
AdultSelfLabel,
···
12
11
SelfLabel,
13
12
} from '#/lib/moderation'
14
13
import {isWeb} from '#/platform/detection'
15
-
import {atoms as a, useTheme} from '#/alf'
16
-
import {Button, ButtonText} from '#/components/Button'
14
+
import {atoms as a, native, useTheme, web} from '#/alf'
15
+
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
17
16
import * as Dialog from '#/components/Dialog'
18
17
import * as Toggle from '#/components/forms/Toggle'
19
18
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
19
+
import {Shield_Stroke2_Corner0_Rounded} from '#/components/icons/Shield'
20
20
import {Text} from '#/components/Typography'
21
+
21
22
export function LabelsBtn({
22
23
labels,
23
24
hasMedia,
···
28
29
onChange: (v: SelfLabel[]) => void
29
30
}) {
30
31
const control = Dialog.useDialogControl()
31
-
const t = useTheme()
32
32
const {_} = useLingui()
33
33
34
34
const hasLabel = labels.length > 0
···
52
52
return (
53
53
<>
54
54
<Button
55
+
variant="solid"
56
+
color="secondary"
57
+
size="small"
55
58
testID="labelsBtn"
56
-
style={!hasMedia && {opacity: 0.4}}
59
+
onPress={() => {
60
+
Keyboard.dismiss()
61
+
control.open()
62
+
}}
57
63
label={_(msg`Content warnings`)}
58
64
accessibilityHint={_(
59
65
msg`Opens a dialog to add a content warning to your post`,
60
66
)}
61
-
onPress={() => {
62
-
Keyboard.dismiss()
63
-
control.open()
64
-
}}>
65
-
<ShieldExclamation style={{color: t.palette.primary_500}} size={24} />
66
-
{labels.length > 0 ? (
67
-
<Check size="sm" fill={t.palette.primary_500} />
68
-
) : null}
67
+
style={[
68
+
!hasMedia && {opacity: 0.5},
69
+
native({
70
+
paddingHorizontal: 8,
71
+
paddingVertical: 6,
72
+
}),
73
+
]}>
74
+
<ButtonIcon icon={hasLabel ? Check : Shield_Stroke2_Corner0_Rounded} />
75
+
<ButtonText numberOfLines={1}>
76
+
{labels.length > 0 ? (
77
+
<Trans>Labels added</Trans>
78
+
) : (
79
+
<Trans>Labels</Trans>
80
+
)}
81
+
</ButtonText>
69
82
</Button>
70
83
71
84
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
···
114
127
</Trans>
115
128
) : (
116
129
<Trans>
117
-
There are no self-labels that can be applied to this post.
130
+
No self-labels can be applied to this post because it contains
131
+
no media.
118
132
</Trans>
119
133
)}
120
134
</Text>
···
235
249
</View>
236
250
</View>
237
251
238
-
<View style={[a.mt_sm]}>
252
+
<View style={[a.mt_sm, web([a.flex_row, a.ml_auto])]}>
239
253
<Button
240
254
label={_(msg`Done`)}
241
255
onPress={() => control.close()}
+21
-22
src/view/com/composer/threadgate/ThreadgateBtn.tsx
+21
-22
src/view/com/composer/threadgate/ThreadgateBtn.tsx
···
1
1
import React from 'react'
2
2
import {Keyboard, StyleProp, ViewStyle} from 'react-native'
3
-
import Animated, {AnimatedStyle} from 'react-native-reanimated'
3
+
import {AnimatedStyle} from 'react-native-reanimated'
4
4
import {AppBskyFeedPostgate} from '@atproto/api'
5
5
import {msg} from '@lingui/macro'
6
6
import {useLingui} from '@lingui/react'
7
7
8
8
import {isNative} from '#/platform/detection'
9
9
import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
10
-
import {atoms as a, useTheme} from '#/alf'
10
+
import {native} from '#/alf'
11
11
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
12
12
import * as Dialog from '#/components/Dialog'
13
13
import {PostInteractionSettingsControlledDialog} from '#/components/dialogs/PostInteractionSettingsDialog'
···
19
19
onChangePostgate,
20
20
threadgateAllowUISettings,
21
21
onChangeThreadgateAllowUISettings,
22
-
style,
23
22
}: {
24
23
postgate: AppBskyFeedPostgate.Record
25
24
onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
···
30
29
style?: StyleProp<AnimatedStyle<ViewStyle>>
31
30
}) {
32
31
const {_} = useLingui()
33
-
const t = useTheme()
34
32
const control = Dialog.useDialogControl()
35
33
36
34
const onPress = () => {
···
53
51
54
52
return (
55
53
<>
56
-
<Animated.View style={[a.flex_row, a.p_sm, t.atoms.bg, style]}>
57
-
<Button
58
-
variant="solid"
59
-
color="secondary"
60
-
size="small"
61
-
testID="openReplyGateButton"
62
-
onPress={onPress}
63
-
label={label}
64
-
accessibilityHint={_(
65
-
msg`Opens a dialog to choose who can reply to this thread`,
66
-
)}
67
-
style={
68
-
!isNative ? {paddingVertical: 6, paddingHorizontal: 8} : undefined
69
-
}>
70
-
<ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
71
-
<ButtonText numberOfLines={1}>{label}</ButtonText>
72
-
</Button>
73
-
</Animated.View>
54
+
<Button
55
+
variant="solid"
56
+
color="secondary"
57
+
size="small"
58
+
testID="openReplyGateButton"
59
+
onPress={onPress}
60
+
label={label}
61
+
accessibilityHint={_(
62
+
msg`Opens a dialog to choose who can reply to this thread`,
63
+
)}
64
+
style={[
65
+
native({
66
+
paddingHorizontal: 8,
67
+
paddingVertical: 6,
68
+
}),
69
+
]}>
70
+
<ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
71
+
<ButtonText numberOfLines={1}>{label}</ButtonText>
72
+
</Button>
74
73
<PostInteractionSettingsControlledDialog
75
74
control={control}
76
75
onSave={() => {