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