From 3393795817e65ab952cb74eec2e2fd9802209066 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 24 Jun 2021 16:43:37 +0100
Subject: [PATCH] Fix: Emojis showing through spoilers. Fix: Copy ID copies
wrong ID. Messaging: Add context menu to avatar / username.
---
external/lang | 2 +-
src/components/common/messaging/Message.tsx | 10 +++++++---
src/components/common/messaging/MessageBase.tsx | 14 +++++++++++++-
src/components/common/user/UserShort.tsx | 4 ++--
src/components/markdown/Markdown.module.scss | 10 +++++++++-
src/components/navigation/items/ButtonItem.tsx | 3 +--
src/lib/ContextMenus.tsx | 2 +-
7 files changed, 34 insertions(+), 11 deletions(-)
diff --git a/external/lang b/external/lang
index 755f35f..099fb74 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 755f35fcdd769f15a68512403074a584441f3fc6
+Subproject commit 099fb74131c60955e8226ce0a290cb22e959d7d6
diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index 781c4e9..8c71ae6 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@@ -32,6 +32,8 @@ function Message({ attachContext, message, contrast, content: replacement, head:
const content = message.content as string;
const head = preferHead || (message.replies && message.replies.length > 0);
+ const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
+
return (
<>
{ message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
@@ -44,12 +46,14 @@ function Message({ attachContext, message, contrast, content: replacement, head:
onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
<MessageInfo>
{ head ?
- <UserIcon target={user} size={36} /> :
+ <UserIcon target={user} size={36} onContextMenu={userContext} /> :
<MessageDetail message={message} position="left" /> }
</MessageInfo>
<MessageContent>
- { head && <span className="author">
- <Username user={user} />
+ { head && <span className="detail">
+ <span className="author">
+ <Username user={user} onContextMenu={userContext} />
+ </span>
<MessageDetail message={message} position="top" />
</span> }
{ replacement ?? <Markdown content={content} /> }
diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx
index 435c2f1..de70edc 100644
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -53,11 +53,19 @@ export default styled.div<BaseMessageProps>`
color: var(--error);
` }
- .author {
+ .detail {
gap: 8px;
display: flex;
align-items: center;
}
+
+ .author {
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
.copy {
width: 0;
@@ -89,6 +97,10 @@ export const MessageInfo = styled.div`
color: var(--tertiary-foreground);
}
+ svg {
+ cursor: pointer;
+ }
+
time {
opacity: 0;
}
diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx
index 0dda8d3..69a15fd 100644
--- a/src/components/common/user/UserShort.tsx
+++ b/src/components/common/user/UserShort.tsx
@@ -2,8 +2,8 @@ import { User } from "revolt.js";
import UserIcon from "./UserIcon";
import { Text } from "preact-i18n";
-export function Username({ user }: { user?: User }) {
- return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
+export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
+ return <b {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
}
export default function UserShort({ user, size }: { user?: User, size?: number }) {
diff --git a/src/components/markdown/Markdown.module.scss b/src/components/markdown/Markdown.module.scss
index 2f13352..de439a3 100644
--- a/src/components/markdown/Markdown.module.scss
+++ b/src/components/markdown/Markdown.module.scss
@@ -115,15 +115,23 @@
padding: 0 2px;
cursor: pointer;
user-select: none;
- color: transparent;
border-radius: 4px;
+ color: transparent;
background: #151515;
+ > * {
+ opacity: 0;
+ }
+
&:global(.shown) {
cursor: auto;
user-select: all;
color: var(--foreground);
background: var(--secondary-background);
+
+ > * {
+ opacity: 1;
+ }
}
}
diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index 31c29fb..42792b7 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -97,8 +97,7 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
const { openScreen } = useIntermediate();
return (
- <div
- data-active={active}
+ <div data-active={active}
data-alert={typeof alert === 'string'}
className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx
index 358ed93..89bdf8f 100644
--- a/src/lib/ContextMenus.tsx
+++ b/src/lib/ContextMenus.tsx
@@ -562,7 +562,7 @@ function ContextMenus(props: WithDispatcher) {
}
}
- let id = server?._id ?? channel?._id ?? user?._id ?? message?._id;
+ let id = sid ?? cid ?? uid ?? message?._id;
if (id) {
pushDivider();
--
GitLab