diff options
| -rw-r--r-- | src/view/com/composer/Composer.tsx | 98 | ||||
| -rw-r--r-- | src/view/com/composer/char-progress/CharProgress.tsx | 43 |
2 files changed, 71 insertions, 70 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index e03c64a42..94c02767e 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -867,48 +867,59 @@ export const ComposePost = ({ )} <View style={[ + a.flex_row, + a.py_xs, + {paddingLeft: 7, paddingRight: 16}, + a.align_center, + a.border_t, t.atoms.bg, t.atoms.border_contrast_medium, - styles.bottomBar, + a.justify_between, ]}> - {videoState.status !== 'idle' && videoState.status !== 'done' ? ( - <VideoUploadToolbar state={videoState} /> - ) : ( - <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}> - <SelectPhotoBtn - size={images.length} - disabled={!canSelectImages} - onAdd={onImageAdd} - /> - <SelectVideoBtn - onSelectVideo={selectVideo} - disabled={!canSelectImages || images?.length > 0} - setError={setError} - /> - <OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} /> - <SelectGifBtn - onClose={focusTextInput} - onSelectGif={onSelectGif} - disabled={hasMedia} - Portal={Portal.Portal} - /> - {!isMobile ? ( - <Button - onPress={onEmojiButtonPress} - style={a.p_sm} - label={_(msg`Open emoji picker`)} - accessibilityHint={_(msg`Open emoji picker`)} - variant="ghost" - shape="round" - color="primary"> - <EmojiSmile size="lg" /> - </Button> - ) : null} - </ToolbarWrapper> - )} - <View style={a.flex_1} /> - <SelectLangBtn /> - <CharProgress count={graphemeLength} /> + <View style={[a.flex_row, a.align_center]}> + {videoState.status !== 'idle' && videoState.status !== 'done' ? ( + <VideoUploadToolbar state={videoState} /> + ) : ( + <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}> + <SelectPhotoBtn + size={images.length} + disabled={!canSelectImages} + onAdd={onImageAdd} + /> + <SelectVideoBtn + onSelectVideo={selectVideo} + disabled={!canSelectImages || images?.length > 0} + setError={setError} + /> + <OpenCameraBtn + disabled={!canSelectImages} + onAdd={onImageAdd} + /> + <SelectGifBtn + onClose={focusTextInput} + onSelectGif={onSelectGif} + disabled={hasMedia} + Portal={Portal.Portal} + /> + {!isMobile ? ( + <Button + onPress={onEmojiButtonPress} + style={a.p_sm} + label={_(msg`Open emoji picker`)} + accessibilityHint={_(msg`Open emoji picker`)} + variant="ghost" + shape="round" + color="primary"> + <EmojiSmile size="lg" /> + </Button> + ) : null} + </ToolbarWrapper> + )} + </View> + <View style={[a.flex_row, a.align_center, a.justify_between]}> + <SelectLangBtn /> + <CharProgress count={graphemeLength} style={{width: 65}} /> + </View> </View> </View> <Prompt.Basic @@ -1128,15 +1139,6 @@ const styles = StyleSheet.create({ marginHorizontal: 10, marginBottom: 4, }, - bottomBar: { - flexDirection: 'row', - paddingVertical: 4, - // should be 8 but due to visual alignment we have to fudge it - paddingLeft: 7, - paddingRight: 16, - alignItems: 'center', - borderTopWidth: StyleSheet.hairlineWidth, - }, }) function ErrorBanner({ diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx index c61f753f2..1c9327410 100644 --- a/src/view/com/composer/char-progress/CharProgress.tsx +++ b/src/view/com/composer/char-progress/CharProgress.tsx @@ -7,7 +7,7 @@ import ProgressPie from 'react-native-progress/Pie' import {MAX_GRAPHEME_LENGTH} from '#/lib/constants' import {usePalette} from '#/lib/hooks/usePalette' -import {s} from '#/lib/styles' +import {atoms as a} from '#/alf' import {Text} from '../../util/text/Text' export function CharProgress({ @@ -28,29 +28,28 @@ export function CharProgress({ const textColor = count > maxLength ? '#e60000' : pal.colors.text const circleColor = count > maxLength ? '#e60000' : pal.colors.link return ( - <View style={style}> - <Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}> + <View + style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}> + <Text style={[{color: textColor}, a.flex_grow, a.text_right, textStyle]}> {maxLength - count} </Text> - <View> - {count > maxLength ? ( - <ProgressPie - size={size ?? 30} - borderWidth={4} - borderColor={circleColor} - color={circleColor} - progress={Math.min((count - maxLength) / maxLength, 1)} - /> - ) : ( - <ProgressCircle - size={size ?? 30} - borderWidth={1} - borderColor={pal.colors.border} - color={circleColor} - progress={count / maxLength} - /> - )} - </View> + {count > maxLength ? ( + <ProgressPie + size={size ?? 30} + borderWidth={4} + borderColor={circleColor} + color={circleColor} + progress={Math.min((count - maxLength) / maxLength, 1)} + /> + ) : ( + <ProgressCircle + size={size ?? 30} + borderWidth={1} + borderColor={pal.colors.border} + color={circleColor} + progress={count / maxLength} + /> + )} </View> ) } |