n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/composer: fix autocomplete not overflowing

Browse source
This commit is contained in:
Tulir Asokan 2024-10-30 23:04:30 +02:00
parent 39bfa7d084
commit 5d2cc354f3
4 changed files with 48 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/ui/RoomView.css
View file

@ -7,6 +7,7 @@ div.room-view {
grid-template: grid-template:
"header" 3rem "header" 3rem
"messageview" 1fr "messageview" 1fr
"autocomplete" 0
"input" auto "input" auto
/ 1fr; / 1fr;
} }

3
web/src/ui/composer/Autocompleter.css
View file

@ -1,10 +1,11 @@
div.autocompletions-wrapper { div.autocompletions-wrapper {
position: relative; position: relative;
grid-area: autocomplete;
} }
div.autocompletions { div.autocompletions {
position: absolute; position: absolute;
bottom: 1px; bottom: 0;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
background-color: var(--background-color); background-color: var(--background-color);

1
web/src/ui/composer/MessageComposer.css
View file

@ -1,6 +1,7 @@
div.message-composer { div.message-composer {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
grid-area: input;
blockquote.reply-body { blockquote.reply-body {
pre, a.hicli-matrix-uri { pre, a.hicli-matrix-uri {

86
web/src/ui/composer/MessageComposer.tsx
View file

@ -355,7 +355,7 @@ const MessageComposer = () => {
}) })
}) })
const Autocompleter = getAutocompleter(autocomplete) const Autocompleter = getAutocompleter(autocomplete)
return <div className="message-composer" ref={composerRef}> return <>
{Autocompleter && autocomplete && <div className="autocompletions-wrapper"><Autocompleter {Autocompleter && autocomplete && <div className="autocompletions-wrapper"><Autocompleter
params={autocomplete} params={autocomplete}
room={room} room={room}
@ -363,48 +363,50 @@ const MessageComposer = () => {
setState={setState} setState={setState}
setAutocomplete={setAutocomplete} setAutocomplete={setAutocomplete}
/></div>} /></div>}
{replyToEvt && <ReplyBody <div className="message-composer" ref={composerRef}>
room={room} {replyToEvt && <ReplyBody
event={replyToEvt} room={room}
onClose={closeReply} event={replyToEvt}
isThread={replyToEvt.content?.["m.relates_to"]?.rel_type === "m.thread"} onClose={closeReply}
/>} isThread={replyToEvt.content?.["m.relates_to"]?.rel_type === "m.thread"}
{editing && <ReplyBody />}
room={room} {editing && <ReplyBody
event={editing} room={room}
isEditing={true} event={editing}
isThread={false} isEditing={true}
onClose={stopEditing} isThread={false}
/>} onClose={stopEditing}
{loadingMedia && <div className="composer-media"><ScaleLoader/></div>} />}
{state.media && <ComposerMedia content={state.media} clearMedia={clearMedia}/>} {loadingMedia && <div className="composer-media"><ScaleLoader/></div>}
<div className="input-area"> {state.media && <ComposerMedia content={state.media} clearMedia={clearMedia}/>}
<textarea <div className="input-area">
autoFocus={!isMobileDevice} <textarea
ref={textInput} autoFocus={!isMobileDevice}
rows={textRows.current} ref={textInput}
value={state.text} rows={textRows.current}
onKeyDown={onComposerKeyDown} value={state.text}
onKeyUp={onComposerCaretChange} onKeyDown={onComposerKeyDown}
onClick={onComposerCaretChange} onKeyUp={onComposerCaretChange}
onPaste={onPaste} onClick={onComposerCaretChange}
onChange={onChange} onPaste={onPaste}
placeholder="Send a message" onChange={onChange}
id="message-composer" placeholder="Send a message"
/> id="message-composer"
<button onClick={openEmojiPicker}><EmojiIcon/></button> />
<button <button onClick={openEmojiPicker}><EmojiIcon/></button>
onClick={openFilePicker} <button
disabled={!!state.media || loadingMedia} onClick={openFilePicker}
title={state.media ? "You can only attach one file at a time" : ""} disabled={!!state.media || loadingMedia}
><AttachIcon/></button> title={state.media ? "You can only attach one file at a time" : ""}
<button ><AttachIcon/></button>
onClick={sendMessage} <button
disabled={(!state.text && !state.media) || loadingMedia} onClick={sendMessage}
><SendIcon/></button> disabled={(!state.text && !state.media) || loadingMedia}
<input ref={fileInput} onChange={onAttachFile} type="file" value="" style={{ display: "none" }}/> ><SendIcon/></button>
<input ref={fileInput} onChange={onAttachFile} type="file" value="" style={{ display: "none" }}/>
</div>
</div> </div>
</div> </>
} }
interface ComposerMediaProps { interface ComposerMediaProps {