cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 15:10:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: context menus are now bound by spread

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -135,7 +135,7 @@
"mobx": "^6.3.2", "mobx": "^6.3.2",
"mobx-react-lite": "^3.2.0", "mobx-react-lite": "^3.2.0",
"preact": "^10.5.14", "preact": "^10.5.14",
"preact-context-menu": "0.3.0-patch.1", "preact-context-menu": "0.4.0-patch.0",
"preact-i18n": "^2.4.0-preactx", "preact-i18n": "^2.4.0-preactx",
"prettier": "^2.3.1", "prettier": "^2.3.1",
"prismjs": "^1.23.0", "prismjs": "^1.23.0",

29
src/components/common/messaging/Message.tsx
View file

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

17
src/components/common/messaging/SystemMessage.tsx
View file

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

4
src/components/common/messaging/attachments/Attachment.tsx
View file

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

26
src/components/navigation/items/ButtonItem.tsx
View file

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

26
src/components/navigation/left/ServerListSidebar.tsx
View file

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

14
src/components/navigation/left/ServerSidebar.tsx
View file

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

11
src/pages/friends/Friend.tsx
View file

@ -8,9 +8,8 @@ import { User } from "revolt.js/dist/maps/Users";
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import classNames from "classnames"; import classNames from "classnames";
import { Ref } from "preact"; import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu"; import { useTriggerEvents } from "preact-context-menu";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { stopPropagation } from "../../lib/stopPropagation"; import { stopPropagation } from "../../lib/stopPropagation";
import { voiceState } from "../../lib/vortex/VoiceState"; import { voiceState } from "../../lib/vortex/VoiceState";
@ -133,11 +132,9 @@ export const Friend = observer(({ user }: Props) => {
<div <div
className={styles.friend} className={styles.friend}
onClick={() => openScreen({ id: "profile", user_id: user._id })} onClick={() => openScreen({ id: "profile", user_id: user._id })}
ref={ {...useTriggerEvents("Menu", {
refContextMenu("Menu", { user: user._id,
user: user._id, })}>
}) as Ref<HTMLDivElement>
}>
<UserIcon target={user} size={36} status /> <UserIcon target={user} size={36} status />
<div className={styles.name}> <div className={styles.name}>
<span>{user.username}</span> <span>{user.username}</span>

8
yarn.lock
View file

@ -3999,10 +3999,10 @@ postcss@^8.3.8:
picocolors "^1.0.0" picocolors "^1.0.0"
source-map-js "^0.6.2" source-map-js "^0.6.2"
preact-context-menu@0.3.0-patch.1: preact-context-menu@0.4.0-patch.0:
version "0.3.0-patch.1" version "0.4.0-patch.0"
resolved "https://registry.yarnpkg.com/preact-context-menu/-/preact-context-menu-0.3.0-patch.1.tgz#0dcaa794f30f83bf1e1a94e93403dc1cf80fe2ec" resolved "https://registry.yarnpkg.com/preact-context-menu/-/preact-context-menu-0.4.0-patch.0.tgz#6a4da06b2e304e7a1cb6e940bad7e15a428ff18c"
integrity sha512-K/Fe7/F2fZmuPw9farSyd/IDu0+ScM2fvopRHk681mMlVKBRVHRwJQWyDL1hEY3E7uTe7TwyyU09knsfu48ycw== integrity sha512-eYR4xjvZVlw2HZmPFZHi+PehCldUupsIZXYHkpc96Se9Y4QwkBkHs7YFy2PqTbWXAJwaDFdX+OA0VzXUtVXlyg==
dependencies: dependencies:
preact "^10.5.14" preact "^10.5.14"