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
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({
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 {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>
)
}