abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 09:25:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: new replies

Browse Source
This commit is contained in:
trashtemp
2022-01-21 00:02:55 +01:00
parent 6e89e10461
commit 0de078a794
5 changed files with 107 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/messaging/bars/JumpToBottom.tsx
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) =>

142
src/components/common/messaging/bars/ReplyBar.tsx
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