Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-19 18:13:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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:
"header" 3rem
"messageview" 1fr
"autocomplete" 0
"input" auto
/ 1fr;
}

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

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

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

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

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

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