feat: new replies

This commit is contained in:
trashtemp 2022-01-21 00:02:55 +01:00
parent 6e89e10461
commit 0de078a794
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
5 changed files with 107 additions and 78 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit d6c59b4665ec9fd0b47797b3bf82e458bc65ff51
Subproject commit 699af07d7b8806b4790b187a38987089ae99af25

View file

@ -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);

View file

@ -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!}

View file

@ -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) =>

View file

@ -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