fix: context menus are now bound by spread

This commit is contained in:
Paul Makles
2022-03-06 19:13:12 +00:00
parent 6a465c1c08
commit f65c9bdd5e
9 changed files with 55 additions and 82 deletions

View File

@@ -1,8 +1,7 @@
import { observer } from "mobx-react-lite";
import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { useTriggerEvents } from "preact-context-menu";
import { memo } from "preact/compat";
import { useEffect, useState } from "preact/hooks";
@@ -62,14 +61,12 @@ const Message = observer(
const head =
preferHead || (message.reply_ids && message.reply_ids.length > 0);
// ! TODO: tell fatal to make this type generic
// bree: Fatal please...
const userContext = attachContext
? (refContextMenu("Menu", {
? useTriggerEvents("Menu", {
user: message.author_id,
contextualChannel: message.channel_id,
// eslint-disable-next-line
}) as any)
})
: undefined;
const openProfile = () =>
@@ -120,15 +117,13 @@ const Message = observer(
sending={typeof queued !== "undefined"}
mention={message.mention_ids?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
ref={
attachContext
? (refContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
}) as Ref<HTMLDivElement>)
: undefined
}
{...(attachContext
? useTriggerEvents("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
: undefined)}
onMouseEnter={() => setAnimate(true)}
onMouseLeave={() => setAnimate(false)}>
<MessageInfo click={typeof head !== "undefined"}>
@@ -138,9 +133,9 @@ const Message = observer(
url={message.generateMasqAvatarURL()}
target={user}
size={36}
innerRef={userContext}
onClick={handleUserClick}
animate={mouseHovering}
{...(userContext as any)}
showServerIdentity
/>
) : (
@@ -155,8 +150,8 @@ const Message = observer(
className="author"
showServerIdentity
onClick={handleUserClick}
innerRef={userContext}
masquerade={message.masquerade!}
{...userContext}
/>
<MessageDetail
message={message}

View File

@@ -15,8 +15,7 @@ import { SystemMessage as SystemMessageI } from "revolt-api/types/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import styled from "styled-components/macro";
import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { useTriggerEvents } from "preact-context-menu";
import { TextReact } from "../../../lib/i18n";
@@ -139,14 +138,12 @@ export const SystemMessage = observer(
return (
<MessageBase
highlight={highlight}
ref={
attachContext
? (refContextMenu("Menu", {
message,
contextualChannel: message.channel,
}) as Ref<HTMLDivElement>)
: undefined
}>
{...(attachContext
? useTriggerEvents("Menu", {
message,
contextualChannel: message.channel,
})
: undefined)}>
{!hideInfo && (
<MessageInfo click={false}>
<MessageDetail message={message} position="left" />

View File

@@ -2,7 +2,7 @@ import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
import styles from "./Attachment.module.scss";
import classNames from "classnames";
import { refContextMenu } from "preact-context-menu";
import { useTriggerEvents } from "preact-context-menu";
import { useContext, useState } from "preact/hooks";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
@@ -37,7 +37,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
<SizedGrid
width={metadata.width}
height={metadata.height}
innerRef={refContextMenu("Menu", {
{...useTriggerEvents("Menu", {
attachment,
})}
className={classNames({

View File

@@ -8,7 +8,7 @@ import { User } from "revolt.js/dist/maps/Users";
import styles from "./Item.module.scss";
import classNames from "classnames";
import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { useTriggerEvents } from "preact-context-menu";
import { Localizer, Text } from "preact-i18n";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -67,14 +67,12 @@ export const UserButton = observer((props: UserProps) => {
typeof channel !== "undefined" ||
(user.online && user.status?.presence !== Presence.Invisible)
}
ref={
refContextMenu("Menu", {
user: user._id,
channel: channel?._id,
unread: alert,
contextualChannel: context?._id,
}) as Ref<HTMLDivElement>
}>
{...useTriggerEvents("Menu", {
user: user._id,
channel: channel?._id,
unread: alert,
contextualChannel: context?._id,
})}>
<UserIcon
className={styles.avatar}
target={user}
@@ -166,12 +164,10 @@ export const ChannelButton = observer((props: ChannelProps) => {
data-muted={muted}
aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })}
ref={
refContextMenu("Menu", {
channel: channel._id,
unread: !!alert,
}) as Ref<HTMLDivElement>
}>
{...useTriggerEvents("Menu", {
channel: channel._id,
unread: !!alert,
})}>
<ChannelIcon
className={styles.avatar}
target={channel}

View File

@@ -6,7 +6,7 @@ import { RelationshipStatus } from "revolt-api/types/Users";
import styled, { css } from "styled-components/macro";
import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { useTriggerEvents } from "preact-context-menu";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
@@ -265,9 +265,7 @@ export default observer(() => {
<ServerEntry home active={homeActive}>
<Swoosh />
<div
ref={
refContextMenu("Status") as Ref<HTMLDivElement>
}
{...useTriggerEvents("Status")}
onClick={() =>
homeActive && history.push("/settings")
}>
@@ -303,12 +301,10 @@ export default observer(() => {
<ServerEntry
home
active={false}
ref={
refContextMenu("Menu", {
channel: x._id,
unread: true,
}) as Ref<HTMLDivElement>
}>
{...useTriggerEvents("Menu", {
channel: x._id,
unread: true,
})}>
<div>
<Icon
size={42}
@@ -354,12 +350,10 @@ export default observer(() => {
to={state.layout.getServerPath(server._id)}>
<ServerEntry
active={active}
ref={
refContextMenu("Menu", {
server: server._id,
unread: isUnread,
}) as Ref<HTMLDivElement>
}>
{...useTriggerEvents("Menu", {
server: server._id,
unread: isUnread,
})}>
<Swoosh />
<Tooltip
content={server.name}

View File

@@ -4,7 +4,7 @@ import { Server } from "revolt.js/dist/maps/Servers";
import styled, { css } from "styled-components/macro";
import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { useTriggerEvents } from "preact-context-menu";
import { useEffect } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink";
@@ -50,10 +50,6 @@ const ServerList = styled.div`
}
`;
interface Props {
server: Server;
}
export default observer(() => {
const client = useClient();
const state = useApplicationState();
@@ -146,11 +142,9 @@ export default observer(() => {
<ServerHeader server={server} />
<ConnectionStatus />
<ServerList
ref={
refContextMenu("Menu", {
server_list: server._id,
}) as Ref<HTMLDivElement>
}>
{...useTriggerEvents("Menu", {
server_list: server._id,
})}>
{elements}
</ServerList>
<PaintCounter small />