forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix composer char progress layout (#5620)
* fix composer
* more fixes
+71
-70
+50
-48
src/view/com/composer/Composer.tsx
+50
-48
src/view/com/composer/Composer.tsx
···
867
867
)}
868
868
<View
869
869
style={[
870
+
a.flex_row,
871
+
a.py_xs,
872
+
{paddingLeft: 7, paddingRight: 16},
873
+
a.align_center,
874
+
a.border_t,
870
875
t.atoms.bg,
871
876
t.atoms.border_contrast_medium,
872
-
styles.bottomBar,
877
+
a.justify_between,
873
878
]}>
874
-
{videoState.status !== 'idle' && videoState.status !== 'done' ? (
875
-
<VideoUploadToolbar state={videoState} />
876
-
) : (
877
-
<ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
878
-
<SelectPhotoBtn
879
-
size={images.length}
880
-
disabled={!canSelectImages}
881
-
onAdd={onImageAdd}
882
-
/>
883
-
<SelectVideoBtn
884
-
onSelectVideo={selectVideo}
885
-
disabled={!canSelectImages || images?.length > 0}
886
-
setError={setError}
887
-
/>
888
-
<OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} />
889
-
<SelectGifBtn
890
-
onClose={focusTextInput}
891
-
onSelectGif={onSelectGif}
892
-
disabled={hasMedia}
893
-
Portal={Portal.Portal}
894
-
/>
895
-
{!isMobile ? (
896
-
<Button
897
-
onPress={onEmojiButtonPress}
898
-
style={a.p_sm}
899
-
label={_(msg`Open emoji picker`)}
900
-
accessibilityHint={_(msg`Open emoji picker`)}
901
-
variant="ghost"
902
-
shape="round"
903
-
color="primary">
904
-
<EmojiSmile size="lg" />
905
-
</Button>
906
-
) : null}
907
-
</ToolbarWrapper>
908
-
)}
909
-
<View style={a.flex_1} />
910
-
<SelectLangBtn />
911
-
<CharProgress count={graphemeLength} />
879
+
<View style={[a.flex_row, a.align_center]}>
880
+
{videoState.status !== 'idle' && videoState.status !== 'done' ? (
881
+
<VideoUploadToolbar state={videoState} />
882
+
) : (
883
+
<ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
884
+
<SelectPhotoBtn
885
+
size={images.length}
886
+
disabled={!canSelectImages}
887
+
onAdd={onImageAdd}
888
+
/>
889
+
<SelectVideoBtn
890
+
onSelectVideo={selectVideo}
891
+
disabled={!canSelectImages || images?.length > 0}
892
+
setError={setError}
893
+
/>
894
+
<OpenCameraBtn
895
+
disabled={!canSelectImages}
896
+
onAdd={onImageAdd}
897
+
/>
898
+
<SelectGifBtn
899
+
onClose={focusTextInput}
900
+
onSelectGif={onSelectGif}
901
+
disabled={hasMedia}
902
+
Portal={Portal.Portal}
903
+
/>
904
+
{!isMobile ? (
905
+
<Button
906
+
onPress={onEmojiButtonPress}
907
+
style={a.p_sm}
908
+
label={_(msg`Open emoji picker`)}
909
+
accessibilityHint={_(msg`Open emoji picker`)}
910
+
variant="ghost"
911
+
shape="round"
912
+
color="primary">
913
+
<EmojiSmile size="lg" />
914
+
</Button>
915
+
) : null}
916
+
</ToolbarWrapper>
917
+
)}
918
+
</View>
919
+
<View style={[a.flex_row, a.align_center, a.justify_between]}>
920
+
<SelectLangBtn />
921
+
<CharProgress count={graphemeLength} style={{width: 65}} />
922
+
</View>
912
923
</View>
913
924
</View>
914
925
<Prompt.Basic
···
1127
1138
paddingVertical: 12,
1128
1139
marginHorizontal: 10,
1129
1140
marginBottom: 4,
1130
-
},
1131
-
bottomBar: {
1132
-
flexDirection: 'row',
1133
-
paddingVertical: 4,
1134
-
// should be 8 but due to visual alignment we have to fudge it
1135
-
paddingLeft: 7,
1136
-
paddingRight: 16,
1137
-
alignItems: 'center',
1138
-
borderTopWidth: StyleSheet.hairlineWidth,
1139
1141
},
1140
1142
})
1141
1143
+21
-22
src/view/com/composer/char-progress/CharProgress.tsx
+21
-22
src/view/com/composer/char-progress/CharProgress.tsx
···
7
7
8
8
import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
9
9
import {usePalette} from '#/lib/hooks/usePalette'
10
-
import {s} from '#/lib/styles'
10
+
import {atoms as a} from '#/alf'
11
11
import {Text} from '../../util/text/Text'
12
12
13
13
export function CharProgress({
···
28
28
const textColor = count > maxLength ? '#e60000' : pal.colors.text
29
29
const circleColor = count > maxLength ? '#e60000' : pal.colors.link
30
30
return (
31
-
<View style={style}>
32
-
<Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}>
31
+
<View
32
+
style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}>
33
+
<Text style={[{color: textColor}, a.flex_grow, a.text_right, textStyle]}>
33
34
{maxLength - count}
34
35
</Text>
35
-
<View>
36
-
{count > maxLength ? (
37
-
<ProgressPie
38
-
size={size ?? 30}
39
-
borderWidth={4}
40
-
borderColor={circleColor}
41
-
color={circleColor}
42
-
progress={Math.min((count - maxLength) / maxLength, 1)}
43
-
/>
44
-
) : (
45
-
<ProgressCircle
46
-
size={size ?? 30}
47
-
borderWidth={1}
48
-
borderColor={pal.colors.border}
49
-
color={circleColor}
50
-
progress={count / maxLength}
51
-
/>
52
-
)}
53
-
</View>
36
+
{count > maxLength ? (
37
+
<ProgressPie
38
+
size={size ?? 30}
39
+
borderWidth={4}
40
+
borderColor={circleColor}
41
+
color={circleColor}
42
+
progress={Math.min((count - maxLength) / maxLength, 1)}
43
+
/>
44
+
) : (
45
+
<ProgressCircle
46
+
size={size ?? 30}
47
+
borderWidth={1}
48
+
borderColor={pal.colors.border}
49
+
color={circleColor}
50
+
progress={count / maxLength}
51
+
/>
52
+
)}
54
53
</View>
55
54
)
56
55
}