cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-02-23 00:31:13 -05:00
Code Issues Projects Releases Packages Wiki Activity

Changed Reply bar structure

Browse source
This commit is contained in:
nizune 2021-08-04 14:01:24 +02:00
parent 184663a3ac
commit 1504f307fc
1 changed files with 44 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/common/messaging/bars/ReplyBar.tsx
View file

@ -1,9 +1,5 @@
import { import { At, Reply as ReplyIcon } from "@styled-icons/boxicons-regular";
At, import { File, XCircle } from "@styled-icons/boxicons-solid";
Reply as ReplyIcon,
File,
XCircle,
} from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { SYSTEM_USER_ID } from "revolt.js"; import { SYSTEM_USER_ID } from "revolt.js";
import styled from "styled-components"; import styled from "styled-components";
@ -31,13 +27,23 @@ interface Props {
const Base = styled.div` const Base = styled.div`
display: flex; display: flex;
padding: 0 22px; height: 30px;
padding: 0 12px;
user-select: none; user-select: none;
align-items: center; align-items: center;
background: var(--message-box); background: var(--message-box);
div { .username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
}
> div {
flex-grow: 1; flex-grow: 1;
margin-bottom: 0;
} }
.actions { .actions {
@ -48,9 +54,16 @@ const Base = styled.div`
.toggle { .toggle {
gap: 4px; gap: 4px;
display: flex; display: flex;
font-size: 0.7em; font-size: 12px;
align-items: center; align-items: center;
font-weight: 600;
} }
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
}
}*/
`; `;
// ! FIXME: Move to global config // ! FIXME: Move to global config
@ -92,10 +105,17 @@ export default observer(({ channel, replies, setReplies }: Props) => {
<Base key={reply.id}> <Base key={reply.id}>
<ReplyBase preview> <ReplyBase preview>
<ReplyIcon size={22} /> <ReplyIcon size={22} />
<div class="username">
<UserShort user={message.author} size={16} /> <UserShort user={message.author} size={16} />
{message.attachments && </div>
message.attachments.length > 0 && ( <div class="message">
{message.attachments && (
<>
<File size={16} /> <File size={16} />
<em>{message.attachments.length > 1 ?
"Sent multiple attachments" :
"Sent an attachment"}</em>
</>
)} )}
{message.author_id === SYSTEM_USER_ID ? ( {message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} /> <SystemMessage message={message} />
@ -107,6 +127,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
).replace(/\n/g, " ")} ).replace(/\n/g, " ")}
/> />
)} )}
</div>
</ReplyBase> </ReplyBase>
<span class="actions"> <span class="actions">
<IconButton <IconButton