mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-25 08:30:58 -05:00
feat: new replies
This commit is contained in:
trashtemp
parent
6e89e10461
commit
0de078a794
5 changed files with 107 additions and 78 deletions
2
external/lang
vendored
2
external/lang
vendored
|
|
@ -1 +1 @@
|
|||
Subproject commit d6c59b4665ec9fd0b47797b3bf82e458bc65ff51
|
||||
Subproject commit 699af07d7b8806b4790b187a38987089ae99af25
|
||||
|
|
@ -56,6 +56,7 @@ export type UploadState =
|
|||
| { type: "failed"; files: File[]; error: string };
|
||||
|
||||
const Base = styled.div`
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background: var(--message-box);
|
||||
|
|
|
|||
|
|
@ -28,30 +28,24 @@ export const ReplyBase = styled.div<{
|
|||
fail?: boolean;
|
||||
preview?: boolean;
|
||||
}>`
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
margin-inline-start: 30px;
|
||||
margin-inline-end: 12px;
|
||||
font-size: 0.8em;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
align-items: end;
|
||||
color: var(--secondary-foreground);
|
||||
|
||||
/* nizune's Discord replies,
|
||||
does not scale properly with messages,
|
||||
reverted temporarily
|
||||
&::before {
|
||||
content: "";
|
||||
width: 22px;
|
||||
height: 10px;
|
||||
width: 28px;
|
||||
margin-inline-end: 2px;
|
||||
border-inline-start: 3px solid #4f515d;
|
||||
border-top: 3px solid #4f515d;
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
border-top: 2.2px solid var(--tertiary-foreground);
|
||||
border-inline-start: 2.2px solid var(--tertiary-foreground);
|
||||
border-start-start-radius: 6px;
|
||||
}*/
|
||||
}
|
||||
|
||||
* {
|
||||
overflow: hidden;
|
||||
|
|
@ -75,13 +69,6 @@ export const ReplyBase = styled.div<{
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/*&::before {
|
||||
position:relative;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background: red;
|
||||
}*/
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -120,10 +107,6 @@ export const ReplyBase = styled.div<{
|
|||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*> span > p {
|
||||
display: flex;
|
||||
}*/
|
||||
}
|
||||
|
||||
> svg:first-child {
|
||||
|
|
@ -142,6 +125,10 @@ export const ReplyBase = styled.div<{
|
|||
props.head &&
|
||||
css`
|
||||
margin-top: 12px;
|
||||
|
||||
&::before {
|
||||
border-start-start-radius: 4px;
|
||||
}
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
|
|
@ -184,7 +171,8 @@ export const MessageReply = observer(
|
|||
|
||||
return (
|
||||
<ReplyBase head={index === 0}>
|
||||
<Reply size={16} />
|
||||
{/*<Reply size={16} />*/}
|
||||
|
||||
{message.author?.relationship === RelationshipStatus.Blocked ? (
|
||||
<Text id="app.main.channel.misc.blocked_user" />
|
||||
) : (
|
||||
|
|
@ -195,7 +183,7 @@ export const MessageReply = observer(
|
|||
<>
|
||||
<div className="user">
|
||||
<UserShort
|
||||
size={16}
|
||||
size={14}
|
||||
showServerIdentity
|
||||
user={message.author}
|
||||
masquerade={message.masquerade!}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
|
|||
import { getRenderer } from "../../../../lib/renderer/Singleton";
|
||||
|
||||
export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
||||
z-index: 10;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
${(props) =>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { useApplicationState } from "../../../../mobx/State";
|
|||
import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
|
||||
import { Reply } from "../../../../mobx/stores/MessageQueue";
|
||||
|
||||
import Tooltip from "../../../common/Tooltip";
|
||||
import IconButton from "../../../ui/IconButton";
|
||||
|
||||
import Markdown from "../../../markdown/Markdown";
|
||||
|
|
@ -28,12 +29,30 @@ interface Props {
|
|||
}
|
||||
|
||||
const Base = styled.div`
|
||||
@keyframes bounce-from-bottom {
|
||||
0% {
|
||||
transform: translateY(33px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
padding: 0 20px;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
background: var(--message-box);
|
||||
/*background: var(--message-box);*/
|
||||
background: var(--secondary-background);
|
||||
|
||||
/*animation: fadeIn 5s;*/
|
||||
|
||||
animation-name: bounce-from-bottom;
|
||||
animation-duration: 340ms;
|
||||
animation-delay: 0ms;
|
||||
animation-timing-function: cubic-bezier(0.2, 0.9, 0.5, 1.16);
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
|
|
@ -49,21 +68,32 @@ const Base = styled.div`
|
|||
display: flex;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
min-width: 6ch;
|
||||
}
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
.replyto {
|
||||
align-self: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message {
|
||||
.content {
|
||||
display: flex;
|
||||
max-height: 26px;
|
||||
pointer-events: none;
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
max-height: 26px;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
@ -129,39 +159,47 @@ export default observer(({ channel, replies, setReplies }: Props) => {
|
|||
return (
|
||||
<Base key={reply.id}>
|
||||
<ReplyBase preview>
|
||||
<ReplyIcon size={22} />
|
||||
<div class="username">
|
||||
<UserShort
|
||||
size={16}
|
||||
showServerIdentity
|
||||
user={message.author}
|
||||
masquerade={message.masquerade!}
|
||||
/>
|
||||
<div class="replyto">
|
||||
<Text id="app.main.channel.replying" />
|
||||
</div>
|
||||
<div class="message">
|
||||
{message.attachments && (
|
||||
<>
|
||||
<File size={16} />
|
||||
<em>
|
||||
{message.attachments.length > 1 ? (
|
||||
<Text id="app.main.channel.misc.sent_multiple_files" />
|
||||
) : (
|
||||
<Text id="app.main.channel.misc.sent_file" />
|
||||
)}
|
||||
</em>
|
||||
</>
|
||||
)}
|
||||
{message.author_id ===
|
||||
"00000000000000000000000000" ? (
|
||||
<SystemMessage message={message} hideInfo />
|
||||
) : (
|
||||
<Markdown
|
||||
disallowBigEmoji
|
||||
content={(
|
||||
message.content as string
|
||||
).replace(/\n/g, " ")}
|
||||
<div class="content">
|
||||
<div class="username">
|
||||
<UserShort
|
||||
size={16}
|
||||
showServerIdentity
|
||||
user={message.author}
|
||||
masquerade={message.masquerade!}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div class="message">
|
||||
{message.attachments && (
|
||||
<>
|
||||
<File size={16} />
|
||||
<em>
|
||||
{message.attachments.length >
|
||||
1 ? (
|
||||
<Text id="app.main.channel.misc.sent_multiple_files" />
|
||||
) : (
|
||||
<Text id="app.main.channel.misc.sent_file" />
|
||||
)}
|
||||
</em>
|
||||
</>
|
||||
)}
|
||||
{message.author_id ===
|
||||
"00000000000000000000000000" ? (
|
||||
<SystemMessage
|
||||
message={message}
|
||||
hideInfo
|
||||
/>
|
||||
) : (
|
||||
<Markdown
|
||||
disallowBigEmoji
|
||||
content={(
|
||||
message.content as string
|
||||
).replace(/\n/g, " ")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ReplyBase>
|
||||
<span class="actions">
|
||||
|
|
@ -189,16 +227,18 @@ export default observer(({ channel, replies, setReplies }: Props) => {
|
|||
false,
|
||||
);
|
||||
}}>
|
||||
<span class="toggle">
|
||||
<At size={15} />
|
||||
<Text
|
||||
id={
|
||||
reply.mention
|
||||
? "general.on"
|
||||
: "general.off"
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
<Tooltip content="Toggle author ping">
|
||||
<span class="toggle">
|
||||
<At size={15} />
|
||||
<Text
|
||||
id={
|
||||
reply.mention
|
||||
? "general.on"
|
||||
: "general.off"
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
<IconButton
|
||||
|
|
|
|||
Loading…
Reference in a new issue