nasso.dev
my fork of the bluesky client
Make composer min height conditional and align attachments (#5976)
* Make web composer min height condiitonal
* Fix alignment
* Fix alignment on mobile
authored by
GitHub
dcc5405e
5bce043e
-3
src/style.css
-3
src/style.css
+6
-2
src/view/com/composer/Composer.tsx
+6
-2
src/view/com/composer/Composer.tsx
···
565
565
const {_} = useLingui()
566
566
const {data: currentProfile} = useProfileQuery({did: currentDid})
567
567
const richtext = draft.richtext
568
+
const isTextOnly =
569
+
!draft.embed.link && !draft.embed.quote && !draft.embed.media
570
+
const forceMinHeight = isWeb && isTextOnly
568
571
const selectTextInputPlaceholder = isReply
569
572
? _(msg`Write your reply`)
570
573
: _(msg`What's up?`)
···
615
618
richtext={richtext}
616
619
placeholder={selectTextInputPlaceholder}
617
620
autoFocus
621
+
webForceMinHeight={forceMinHeight}
618
622
setRichText={rt => {
619
623
dispatch({type: 'update_richtext', richtext: rt})
620
624
}}
···
757
761
)}
758
762
759
763
{embed.media?.type === 'gif' && (
760
-
<View style={a.relative} key={embed.media.gif.url}>
764
+
<View style={[a.relative, a.mt_lg]} key={embed.media.gif.url}>
761
765
<ExternalEmbedGif
762
766
gif={embed.media.gif}
763
767
onRemove={() => dispatch({type: 'embed_remove_gif'})}
···
773
777
)}
774
778
775
779
{!embed.media && embed.link && (
776
-
<View style={a.relative} key={embed.link.uri}>
780
+
<View style={[a.relative, a.mt_lg]} key={embed.link.uri}>
777
781
<ExternalEmbedLink
778
782
uri={embed.link.uri}
779
783
hasQuote={!!embed.quote}
+3
-2
src/view/com/composer/text-input/TextInput.tsx
+3
-2
src/view/com/composer/text-input/TextInput.tsx
···
43
43
interface TextInputProps extends ComponentProps<typeof RNTextInput> {
44
44
richtext: RichText
45
45
placeholder: string
46
+
webForceMinHeight: boolean
46
47
setRichText: (v: RichText) => void
47
48
onPhotoPasted: (uri: string) => void
48
49
onPressPublish: (richtext: RichText) => void
···
230
231
}, [t, richtext, inputTextStyle])
231
232
232
233
return (
233
-
<View style={[a.flex_1, a.pl_md, a.pb_2xl]}>
234
+
<View style={[a.flex_1, a.pl_md]}>
234
235
<PasteInput
235
236
testID="composerTextInput"
236
237
ref={textInput}
···
244
245
allowFontScaling
245
246
multiline
246
247
scrollEnabled={false}
247
-
numberOfLines={4}
248
+
numberOfLines={2}
248
249
style={[
249
250
inputTextStyle,
250
251
a.w_full,
+9
src/view/com/composer/text-input/TextInput.web.tsx
+9
src/view/com/composer/text-input/TextInput.web.tsx
···
41
41
richtext: RichText
42
42
placeholder: string
43
43
suggestedLinks: Set<string>
44
+
webForceMinHeight: boolean
44
45
setRichText: (v: RichText | ((v: RichText) => RichText)) => void
45
46
onPhotoPasted: (uri: string) => void
46
47
onPressPublish: (richtext: RichText) => void
···
52
53
{
53
54
richtext,
54
55
placeholder,
56
+
webForceMinHeight,
55
57
setRichText,
56
58
onPhotoPasted,
57
59
onPressPublish,
···
270
272
: undefined
271
273
return style
272
274
}, [t, fonts])
275
+
276
+
React.useLayoutEffect(() => {
277
+
let node = editor?.view.dom
278
+
if (node) {
279
+
node.style.minHeight = webForceMinHeight ? '140px' : ''
280
+
}
281
+
}, [editor, webForceMinHeight])
273
282
274
283
return (
275
284
<>