From 41470e2cd5cbfea0175bbe89a3760c529d756988 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 26 Jun 2021 09:45:07 +0100
Subject: [PATCH] Support replying to files, show icon in reply.
---
src/components/common/messaging/Message.tsx | 6 +++---
.../common/messaging/attachments/MessageReply.tsx | 10 ++++++++--
src/components/common/messaging/bars/ReplyBar.tsx | 14 ++++++++++----
src/lib/ContextMenus.tsx | 10 +++++-----
4 files changed, 26 insertions(+), 14 deletions(-)
diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index d504f96..0c53694 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@@ -35,9 +35,9 @@ function Message({ attachContext, message, contrast, content: replacement, head:
const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
return (
- <>
+ <div id={message._id}>
{ message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
- <MessageBase id={message._id}
+ <MessageBase
head={head && !(message.replies && message.replies.length > 0)}
contrast={contrast}
sending={typeof queued !== 'undefined'}
@@ -64,7 +64,7 @@ function Message({ attachContext, message, contrast, content: replacement, head:
<Embed key={index} embed={embed} />) }
</MessageContent>
</MessageBase>
- </>
+ </div>
)
}
diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 0d7c069..74952ea 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
import UserShort from "../../user/UserShort";
import styled, { css } from "styled-components";
import Markdown from "../../../markdown/Markdown";
-import { CornerUpRight } from "@styled-icons/feather";
+import { CornerUpRight, File } from "@styled-icons/feather";
import { useUser } from "../../../../context/revoltjs/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton";
@@ -22,7 +22,12 @@ export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?:
align-items: center;
color: var(--secondary-foreground);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
svg {
+ flex-shrink: 0;
color: var(--tertiary-foreground);
}
@@ -59,7 +64,8 @@ export function MessageReply({ index, channel, id }: Props) {
<ReplyBase head={index === 0}>
<CornerUpRight size={16} />
<UserShort user={user} size={16} />
- <Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
+ { message.attachments && message.attachments.length > 0 && <File size={16} /> }
+ <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
</ReplyBase>
)
}
diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index 33a2da4..bfc550e 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -1,14 +1,15 @@
+import { Text } from "preact-i18n";
import styled from "styled-components";
import UserShort from "../../user/UserShort";
+import IconButton from "../../../ui/IconButton";
import Markdown from "../../../markdown/Markdown";
-import { AtSign, CornerUpRight, XCircle } from "@styled-icons/feather";
import { StateUpdater, useEffect } from "preact/hooks";
import { ReplyBase } from "../attachments/MessageReply";
import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton";
-import IconButton from "../../../ui/IconButton";
+import { AtSign, CornerUpRight, File, XCircle } from "@styled-icons/feather";
interface Props {
channel: string,
@@ -58,7 +59,11 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
<div>
{ replies.map((reply, index) => {
let message = messages.find(x => reply.id === x._id);
- if (!message) return;
+ // ! FIXME: better solution would be to
+ // ! have a hook for resolving messages from
+ // ! render state along with relevant users
+ // -> which then fetches any unknown messages
+ if (!message) return <span><Text id="app.main.channel.misc.failed_load" /></span>;
let user = users.find(x => message!.author === x?._id);
if (!user) return;
@@ -68,7 +73,8 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
<ReplyBase preview>
<CornerUpRight size={22} />
<UserShort user={user} size={16} />
- <Markdown disallowBigEmoji content={(message.content as string).split('\n').shift()} />
+ { message.attachments && message.attachments.length > 0 && <File size={16} /> }
+ <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
</ReplyBase>
<span class="actions">
<IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx
index 875e9a4..3636bdf 100644
--- a/src/lib/ContextMenus.tsx
+++ b/src/lib/ContextMenus.tsx
@@ -502,15 +502,15 @@ function ContextMenus(props: Props) {
}
if (message && !queued) {
+ generateAction({
+ action: "reply_message",
+ id: message._id
+ });
+
if (
typeof message.content === "string" &&
message.content.length > 0
) {
- generateAction({
- action: "reply_message",
- id: message._id
- });
-
generateAction({
action: "quote_message",
content: message.content
--
GitLab