From 0de078a794930b62b186ab1368639ab34db5a828 Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Fri, 21 Jan 2022 00:02:55 +0100 Subject: [PATCH] feat: new replies --- external/lang | 2 +- .../common/messaging/MessageBox.tsx | 1 + .../messaging/attachments/MessageReply.tsx | 38 ++--- .../common/messaging/bars/JumpToBottom.tsx | 2 +- .../common/messaging/bars/ReplyBar.tsx | 142 +++++++++++------- 5 files changed, 107 insertions(+), 78 deletions(-) diff --git a/external/lang b/external/lang index d6c59b46..699af07d 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit d6c59b4665ec9fd0b47797b3bf82e458bc65ff51 +Subproject commit 699af07d7b8806b4790b187a38987089ae99af25 diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index b6f28f3a..a65d43bd 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -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); diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 86185f19..4c89819b 100644 --- a/src/components/common/messaging/attachments/MessageReply.tsx +++ b/src/components/common/messaging/attachments/MessageReply.tsx @@ -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 ( - + {/**/} + {message.author?.relationship === RelationshipStatus.Blocked ? ( ) : ( @@ -195,7 +183,7 @@ export const MessageReply = observer( <>
` - z-index: 10; + z-index: 1; position: relative; ${(props) => diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx index 8d36b8d1..382980c7 100644 --- a/src/components/common/messaging/bars/ReplyBar.tsx +++ b/src/components/common/messaging/bars/ReplyBar.tsx @@ -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 ( - -
- +
+
-
- {message.attachments && ( - <> - - - {message.attachments.length > 1 ? ( - - ) : ( - - )} - - - )} - {message.author_id === - "00000000000000000000000000" ? ( - - ) : ( - +
+ - )} +
+
+ {message.attachments && ( + <> + + + {message.attachments.length > + 1 ? ( + + ) : ( + + )} + + + )} + {message.author_id === + "00000000000000000000000000" ? ( + + ) : ( + + )} +
@@ -189,16 +227,18 @@ export default observer(({ channel, replies, setReplies }: Props) => { false, ); }}> - - - - + + + + + + )}