acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fix composer char progress layout (#5620)

Browse Source 
* fix composer

* more fixes
This commit is contained in:
Hailey
2024-10-05 22:42:52 -07:00
committed by GitHub
parent 25e3c93e1e
commit b52f8ced56
2 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/composer/Composer.tsx
+50 -48
View File
@@ -867,48 +867,59 @@ export const ComposePost = ({
)} )}
<View <View
style={[ style={[
a.flex_row,
a.py_xs,
{paddingLeft: 7, paddingRight: 16},
a.align_center,
a.border_t,
t.atoms.bg, t.atoms.bg,
t.atoms.border_contrast_medium, t.atoms.border_contrast_medium,
styles.bottomBar, a.justify_between,
]}> ]}>
{videoState.status !== 'idle' && videoState.status !== 'done' ? ( <View style={[a.flex_row, a.align_center]}>
<VideoUploadToolbar state={videoState} /> {videoState.status !== 'idle' && videoState.status !== 'done' ? (
) : ( <VideoUploadToolbar state={videoState} />
<ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}> ) : (
<SelectPhotoBtn <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
size={images.length} <SelectPhotoBtn
disabled={!canSelectImages} size={images.length}
onAdd={onImageAdd} disabled={!canSelectImages}
/> onAdd={onImageAdd}
<SelectVideoBtn />
onSelectVideo={selectVideo} <SelectVideoBtn
disabled={!canSelectImages || images?.length > 0} onSelectVideo={selectVideo}
setError={setError} disabled={!canSelectImages || images?.length > 0}
/> setError={setError}
<OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} /> />
<SelectGifBtn <OpenCameraBtn
onClose={focusTextInput} disabled={!canSelectImages}
onSelectGif={onSelectGif} onAdd={onImageAdd}
disabled={hasMedia} />
Portal={Portal.Portal} <SelectGifBtn
/> onClose={focusTextInput}
{!isMobile ? ( onSelectGif={onSelectGif}
<Button disabled={hasMedia}
onPress={onEmojiButtonPress} Portal={Portal.Portal}
style={a.p_sm} />
label={_(msg`Open emoji picker`)} {!isMobile ? (
accessibilityHint={_(msg`Open emoji picker`)} <Button
variant="ghost" onPress={onEmojiButtonPress}
shape="round" style={a.p_sm}
color="primary"> label={_(msg`Open emoji picker`)}
<EmojiSmile size="lg" /> accessibilityHint={_(msg`Open emoji picker`)}
</Button> variant="ghost"
) : null} shape="round"
</ToolbarWrapper> color="primary">
)} <EmojiSmile size="lg" />
<View style={a.flex_1} /> </Button>
<SelectLangBtn /> ) : null}
<CharProgress count={graphemeLength} /> </ToolbarWrapper>
)}
</View>
<View style={[a.flex_row, a.align_center, a.justify_between]}>
<SelectLangBtn />
<CharProgress count={graphemeLength} style={{width: 65}} />
</View>
</View> </View>
</View> </View>
<Prompt.Basic <Prompt.Basic
@@ -1128,15 +1139,6 @@ const styles = StyleSheet.create({
marginHorizontal: 10, marginHorizontal: 10,
marginBottom: 4, 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({ function ErrorBanner({
src/view/com/composer/char-progress/CharProgress.tsx
+21 -22
View File
@@ -7,7 +7,7 @@ import ProgressPie from 'react-native-progress/Pie'
import {MAX_GRAPHEME_LENGTH} from '#/lib/constants' import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette' import {usePalette} from '#/lib/hooks/usePalette'
import {s} from '#/lib/styles' import {atoms as a} from '#/alf'
import {Text} from '../../util/text/Text' import {Text} from '../../util/text/Text'
export function CharProgress({ export function CharProgress({
@@ -28,29 +28,28 @@ export function CharProgress({
const textColor = count > maxLength ? '#e60000' : pal.colors.text const textColor = count > maxLength ? '#e60000' : pal.colors.text
const circleColor = count > maxLength ? '#e60000' : pal.colors.link const circleColor = count > maxLength ? '#e60000' : pal.colors.link
return ( return (
<View style={style}> <View
<Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}> 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} {maxLength - count}
</Text> </Text>
<View> {count > maxLength ? (
{count > maxLength ? ( <ProgressPie
<ProgressPie size={size ?? 30}
size={size ?? 30} borderWidth={4}
borderWidth={4} borderColor={circleColor}
borderColor={circleColor} color={circleColor}
color={circleColor} progress={Math.min((count - maxLength) / maxLength, 1)}
progress={Math.min((count - maxLength) / maxLength, 1)} />
/> ) : (
) : ( <ProgressCircle
<ProgressCircle size={size ?? 30}
size={size ?? 30} borderWidth={1}
borderWidth={1} borderColor={pal.colors.border}
borderColor={pal.colors.border} color={circleColor}
color={circleColor} progress={count / maxLength}
progress={count / maxLength} />
/> )}
)}
</View>
</View> </View>
) )
} }