cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-13 18:59:22 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix: Padding on message box.

Browse source 
Allow 20 max rows on message area.
This commit is contained in:
Paul 2021-07-05 21:07:04 +01:00
parent c246c2b77a
commit b8a4ada30c
1 changed files with 61 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/components/common/messaging/MessageBox.tsx
View file

@ -61,13 +61,18 @@ export type UploadState =
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
/*padding: 0 12px;*/ align-items: flex-start;
background: var(--message-box); background: var(--message-box);
textarea { textarea {
font-size: 0.875rem; font-size: 0.875rem;
background: transparent; background: transparent;
} }
.textarea {
flex-grow: 1;
padding: 12px 0;
}
`; `;
const Blocked = styled.div` const Blocked = styled.div`
@ -419,62 +424,64 @@ function MessageBox({ channel, draft }: Props) {
/> />
</Action> </Action>
) : undefined} ) : undefined}
<TextAreaAutoSize <div class="textarea">
autoFocus <TextAreaAutoSize
hideBorder autoFocus
maxRows={5} hideBorder
padding={14} maxRows={20}
id="message" padding={0}
value={draft ?? ""} id="message"
onKeyUp={onKeyUp} value={draft ?? ""}
onKeyDown={(e) => { onKeyUp={onKeyUp}
if (onKeyDown(e)) return; onKeyDown={(e) => {
if (onKeyDown(e)) return;
if ( if (
e.key === "ArrowUp" && e.key === "ArrowUp" &&
(!draft || draft.length === 0) (!draft || draft.length === 0)
) { ) {
e.preventDefault(); e.preventDefault();
internalEmit("MessageRenderer", "edit_last"); internalEmit("MessageRenderer", "edit_last");
return; return;
}
if (
!e.shiftKey &&
e.key === "Enter" &&
!isTouchscreenDevice
) {
e.preventDefault();
return send();
}
debouncedStopTyping(true);
}}
placeholder={
channel.channel_type === "DirectMessage"
? translate("app.main.channel.message_who", {
person: client.users.get(
client.channels.getRecipient(channel._id),
)?.username,
})
: channel.channel_type === "SavedMessages"
? translate("app.main.channel.message_saved")
: translate("app.main.channel.message_where", {
channel_name: channel.name,
})
} }
disabled={
if ( uploadState.type === "uploading" ||
!e.shiftKey && uploadState.type === "sending"
e.key === "Enter" &&
!isTouchscreenDevice
) {
e.preventDefault();
return send();
} }
onChange={(e) => {
debouncedStopTyping(true); setMessage(e.currentTarget.value);
}} startTyping();
placeholder={ onChange(e);
channel.channel_type === "DirectMessage" }}
? translate("app.main.channel.message_who", { onFocus={onFocus}
person: client.users.get( onBlur={onBlur}
client.channels.getRecipient(channel._id), />
)?.username, </div>
})
: channel.channel_type === "SavedMessages"
? translate("app.main.channel.message_saved")
: translate("app.main.channel.message_where", {
channel_name: channel.name,
})
}
disabled={
uploadState.type === "uploading" ||
uploadState.type === "sending"
}
onChange={(e) => {
setMessage(e.currentTarget.value);
startTyping();
onChange(e);
}}
onFocus={onFocus}
onBlur={onBlur}
/>
{isTouchscreenDevice && ( {isTouchscreenDevice && (
<Action> <Action>
<IconButton onClick={send}> <IconButton onClick={send}>