diff options
Diffstat (limited to 'src/view/com/composer/Composer.tsx')
| -rw-r--r-- | src/view/com/composer/Composer.tsx | 226 |
1 files changed, 117 insertions, 109 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index c8bb8d726..b1c020a10 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -181,12 +181,7 @@ export const ComposePost = observer(function ComposePost({ borderColor: interpolateColor( hasScrolled.value, [0, 1], - [ - 'transparent', - isWeb - ? t.atoms.border_contrast_low.borderColor - : t.atoms.border_contrast_high.borderColor, - ], + ['transparent', t.atoms.border_contrast_medium.borderColor], ), } }) @@ -405,106 +400,112 @@ export const ComposePost = observer(function ComposePost({ <KeyboardAvoidingView testID="composePostView" behavior="padding" - style={s.flex1} - keyboardVerticalOffset={replyTo ? 60 : isAndroid ? 120 : 100}> - <View style={[s.flex1, viewStyles]} aria-modal accessibilityViewIsModal> + style={a.flex_1} + keyboardVerticalOffset={replyTo ? 120 : isAndroid ? 180 : 150}> + <View + style={[a.flex_1, viewStyles]} + aria-modal + accessibilityViewIsModal> <Animated.View style={[ styles.topbar, topBarAnimatedStyle, isWeb && isTabletOrDesktop && styles.topbarDesktop, ]}> - <TouchableOpacity - testID="composerDiscardButton" - onPress={onPressCancel} - onAccessibilityEscape={onPressCancel} - accessibilityRole="button" - accessibilityLabel={_(msg`Cancel`)} - accessibilityHint={_( - msg`Closes post composer and discards post draft`, + <View style={styles.topbarInner}> + <TouchableOpacity + testID="composerDiscardButton" + onPress={onPressCancel} + onAccessibilityEscape={onPressCancel} + accessibilityRole="button" + accessibilityLabel={_(msg`Cancel`)} + accessibilityHint={_( + msg`Closes post composer and discards post draft`, + )} + hitSlop={HITSLOP_10}> + <Text style={[pal.link, s.f18]}> + <Trans>Cancel</Trans> + </Text> + </TouchableOpacity> + <View style={a.flex_1} /> + {isProcessing ? ( + <> + <Text style={pal.textLight}>{processingState}</Text> + <View style={styles.postBtn}> + <ActivityIndicator /> + </View> + </> + ) : ( + <> + <LabelsBtn + labels={labels} + onChange={setLabels} + hasMedia={hasMedia} + /> + {canPost ? ( + <TouchableOpacity + testID="composerPublishBtn" + onPress={onPressPublish} + accessibilityRole="button" + accessibilityLabel={ + replyTo ? _(msg`Publish reply`) : _(msg`Publish post`) + } + accessibilityHint=""> + <LinearGradient + colors={[ + gradients.blueLight.start, + gradients.blueLight.end, + ]} + start={{x: 0, y: 0}} + end={{x: 1, y: 1}} + style={styles.postBtn}> + <Text style={[s.white, s.f16, s.bold]}> + {replyTo ? ( + <Trans context="action">Reply</Trans> + ) : ( + <Trans context="action">Post</Trans> + )} + </Text> + </LinearGradient> + </TouchableOpacity> + ) : ( + <View style={[styles.postBtn, pal.btn]}> + <Text style={[pal.textLight, s.f16, s.bold]}> + <Trans context="action">Post</Trans> + </Text> + </View> + )} + </> )} - hitSlop={HITSLOP_10}> - <Text style={[pal.link, s.f18]}> - <Trans>Cancel</Trans> - </Text> - </TouchableOpacity> - <View style={s.flex1} /> - {isProcessing ? ( - <> - <Text style={pal.textLight}>{processingState}</Text> - <View style={styles.postBtn}> - <ActivityIndicator /> + </View> + + {isAltTextRequiredAndMissing && ( + <View style={[styles.reminderLine, pal.viewLight]}> + <View style={styles.errorIcon}> + <FontAwesomeIcon + icon="exclamation" + style={{color: colors.red4}} + size={10} + /> </View> - </> - ) : ( - <> - <LabelsBtn - labels={labels} - onChange={setLabels} - hasMedia={hasMedia} - /> - {canPost ? ( - <TouchableOpacity - testID="composerPublishBtn" - onPress={onPressPublish} - accessibilityRole="button" - accessibilityLabel={ - replyTo ? _(msg`Publish reply`) : _(msg`Publish post`) - } - accessibilityHint=""> - <LinearGradient - colors={[ - gradients.blueLight.start, - gradients.blueLight.end, - ]} - start={{x: 0, y: 0}} - end={{x: 1, y: 1}} - style={styles.postBtn}> - <Text style={[s.white, s.f16, s.bold]}> - {replyTo ? ( - <Trans context="action">Reply</Trans> - ) : ( - <Trans context="action">Post</Trans> - )} - </Text> - </LinearGradient> - </TouchableOpacity> - ) : ( - <View style={[styles.postBtn, pal.btn]}> - <Text style={[pal.textLight, s.f16, s.bold]}> - <Trans context="action">Post</Trans> - </Text> - </View> - )} - </> - )} - </Animated.View> - {isAltTextRequiredAndMissing && ( - <View style={[styles.reminderLine, pal.viewLight]}> - <View style={styles.errorIcon}> - <FontAwesomeIcon - icon="exclamation" - style={{color: colors.red4}} - size={10} - /> + <Text style={[pal.text, a.flex_1]}> + <Trans>One or more images is missing alt text.</Trans> + </Text> </View> - <Text style={[pal.text, s.flex1]}> - <Trans>One or more images is missing alt text.</Trans> - </Text> - </View> - )} - {error !== '' && ( - <View style={styles.errorLine}> - <View style={styles.errorIcon}> - <FontAwesomeIcon - icon="exclamation" - style={{color: colors.red4}} - size={10} - /> + )} + {error !== '' && ( + <View style={styles.errorLine}> + <View style={styles.errorIcon}> + <FontAwesomeIcon + icon="exclamation" + style={{color: colors.red4}} + size={10} + /> + </View> + <Text style={[s.red4, a.flex_1]}>{error}</Text> </View> - <Text style={[s.red4, s.flex1]}>{error}</Text> - </View> - )} + )} + </Animated.View> <Animated.ScrollView onScroll={scrollHandler} style={styles.scrollView} @@ -576,7 +577,12 @@ export const ComposePost = observer(function ComposePost({ {replyTo ? null : ( <ThreadgateBtn threadgate={threadgate} onChange={setThreadgate} /> )} - <View style={[pal.border, styles.bottomBar]}> + <View + style={[ + t.atoms.bg, + t.atoms.border_contrast_medium, + styles.bottomBar, + ]}> <View style={[a.flex_row, a.align_center, a.gap_xs]}> <SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} /> <OpenCameraBtn gallery={gallery} disabled={!canSelectImages} /> @@ -598,7 +604,7 @@ export const ComposePost = observer(function ComposePost({ </Button> ) : null} </View> - <View style={s.flex1} /> + <View style={a.flex_1} /> <SelectLangBtn /> <CharProgress count={graphemeLength} /> </View> @@ -621,11 +627,6 @@ export function useComposerCancelRef() { const styles = StyleSheet.create({ topbar: { - flexDirection: 'row', - alignItems: 'center', - marginHorizontal: 16, - height: 54, - gap: 4, borderBottomWidth: StyleSheet.hairlineWidth, }, topbarDesktop: { @@ -633,6 +634,13 @@ const styles = StyleSheet.create({ paddingBottom: 10, height: 50, }, + topbarInner: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + height: 54, + gap: 4, + }, postBtn: { borderRadius: 20, paddingHorizontal: 20, @@ -643,19 +651,19 @@ const styles = StyleSheet.create({ flexDirection: 'row', backgroundColor: colors.red1, borderRadius: 6, - marginHorizontal: 15, + marginHorizontal: 16, paddingHorizontal: 8, paddingVertical: 6, - marginVertical: 6, + marginBottom: 8, }, reminderLine: { flexDirection: 'row', alignItems: 'center', borderRadius: 6, - marginHorizontal: 15, + marginHorizontal: 16, paddingHorizontal: 8, paddingVertical: 6, - marginBottom: 6, + marginBottom: 8, }, errorIcon: { borderWidth: hairlineWidth, @@ -690,8 +698,8 @@ const styles = StyleSheet.create({ bottomBar: { flexDirection: 'row', paddingVertical: 4, - paddingLeft: 15, - paddingRight: 20, + paddingLeft: 8, + paddingRight: 16, alignItems: 'center', borderTopWidth: hairlineWidth, }, |