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

fix(iOS): actually fix context menus

Browse source 
closes #138
This commit is contained in:
Paul Makles 2022-03-05 14:41:41 +00:00
parent 3e045cf8a8
commit 18761e2181
15 changed files with 90 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -127,7 +127,7 @@
} }
</style> </style>
</head> </head>
<body ontouchstart=""> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<noscript> <noscript>

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.2.2", "preact-context-menu": "0.3.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",

4
src/components/common/IconBase.tsx
View file

@ -1,6 +1,8 @@
import { Attachment } from "revolt-api/types/Autumn"; import { Attachment } from "revolt-api/types/Autumn";
import styled, { css } from "styled-components/macro"; import styled, { css } from "styled-components/macro";
import { Ref } from "preact";
export interface IconBaseProps<T> { export interface IconBaseProps<T> {
target?: T; target?: T;
url?: string; url?: string;
@ -9,6 +11,8 @@ export interface IconBaseProps<T> {
size: number; size: number;
hover?: boolean; hover?: boolean;
animate?: boolean; animate?: boolean;
innerRef?: Ref<any>;
} }
interface IconModifiers { interface IconModifiers {

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

@ -1,7 +1,8 @@
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 { attachContextMenu } from "preact-context-menu"; import { Ref } from "preact";
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";
@ -64,7 +65,7 @@ const Message = observer(
// ! TODO: tell fatal to make this type generic // ! TODO: tell fatal to make this type generic
// bree: Fatal please... // bree: Fatal please...
const userContext = attachContext const userContext = attachContext
? (attachContextMenu("Menu", { ? (refContextMenu("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
@ -119,13 +120,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"}
onContextMenu={ ref={
attachContext attachContext
? attachContextMenu("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)}
@ -137,7 +138,7 @@ const Message = observer(
url={message.generateMasqAvatarURL()} url={message.generateMasqAvatarURL()}
target={user} target={user}
size={36} size={36}
onContextMenu={userContext} innerRef={userContext}
onClick={handleUserClick} onClick={handleUserClick}
animate={mouseHovering} animate={mouseHovering}
showServerIdentity showServerIdentity
@ -154,7 +155,7 @@ const Message = observer(
className="author" className="author"
showServerIdentity showServerIdentity
onClick={handleUserClick} onClick={handleUserClick}
onContextMenu={userContext} innerRef={userContext}
masquerade={message.masquerade!} masquerade={message.masquerade!}
/> />
<MessageDetail <MessageDetail

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

@ -15,7 +15,8 @@ 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 { attachContextMenu } from "preact-context-menu"; import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { TextReact } from "../../../lib/i18n"; import { TextReact } from "../../../lib/i18n";
@ -138,12 +139,12 @@ export const SystemMessage = observer(
return ( return (
<MessageBase <MessageBase
highlight={highlight} highlight={highlight}
onContextMenu={ ref={
attachContext attachContext
? attachContextMenu("Menu", { ? (refContextMenu("Menu", {
message, message,
contextualChannel: message.channel, contextualChannel: message.channel,
}) }) as Ref<HTMLDivElement>)
: undefined : undefined
}> }>
{!hideInfo && ( {!hideInfo && (

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 { attachContextMenu } from "preact-context-menu"; import { refContextMenu } 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}
onContextMenu={attachContextMenu("Menu", { innerRef={refContextMenu("Menu", {
attachment, attachment,
})} })}
className={classNames({ className={classNames({

7
src/components/common/messaging/attachments/Grid.tsx
View file

@ -1,5 +1,7 @@
import styled from "styled-components/macro"; import styled from "styled-components/macro";
import { Ref } from "preact";
import { Children } from "../../../../types/Preact"; import { Children } from "../../../../types/Preact";
const Grid = styled.div<{ width: number; height: number }>` const Grid = styled.div<{ width: number; height: number }>`
@ -71,13 +73,14 @@ type Props = Omit<
children?: Children; children?: Children;
width: number; width: number;
height: number; height: number;
innerRef?: Ref<any>;
}; };
export function SizedGrid(props: Props) { export function SizedGrid(props: Props) {
const { width, height, children, ...divProps } = props; const { width, height, children, innerRef, ...divProps } = props;
return ( return (
<Grid {...divProps} width={width} height={height}> <Grid {...divProps} width={width} height={height} ref={innerRef}>
{children} {children}
</Grid> </Grid>
); );

2
src/components/common/user/UserIcon.tsx
View file

@ -70,6 +70,7 @@ export default observer(
hover, hover,
showServerIdentity, showServerIdentity,
masquerade, masquerade,
innerRef,
...svgProps ...svgProps
} = props; } = props;
@ -103,6 +104,7 @@ export default observer(
return ( return (
<IconBase <IconBase
{...svgProps} {...svgProps}
ref={innerRef}
width={size} width={size}
height={size} height={size}
hover={hover} hover={hover}

8
src/components/common/user/UserShort.tsx
View file

@ -5,6 +5,7 @@ import { User } from "revolt.js/dist/maps/Users";
import { Nullable } from "revolt.js/dist/util/null"; import { Nullable } from "revolt.js/dist/util/null";
import styled from "styled-components/macro"; import styled from "styled-components/macro";
import { Ref } from "preact";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { internalEmit } from "../../../lib/eventEmitter"; import { internalEmit } from "../../../lib/eventEmitter";
@ -33,6 +34,8 @@ type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
prefixAt?: boolean; prefixAt?: boolean;
masquerade?: Masquerade; masquerade?: Masquerade;
showServerIdentity?: boolean | "both"; showServerIdentity?: boolean | "both";
innerRef?: Ref<any>;
}; };
export const Username = observer( export const Username = observer(
@ -41,6 +44,7 @@ export const Username = observer(
prefixAt, prefixAt,
masquerade, masquerade,
showServerIdentity, showServerIdentity,
innerRef,
...otherProps ...otherProps
}: UsernameProps) => { }: UsernameProps) => {
let username = user?.username; let username = user?.username;
@ -83,7 +87,7 @@ export const Username = observer(
if (user?.bot) { if (user?.bot) {
return ( return (
<> <>
<span {...otherProps} style={{ color }}> <span {...otherProps} ref={innerRef} style={{ color }}>
{masquerade?.name ?? username ?? ( {masquerade?.name ?? username ?? (
<Text id="app.main.channel.unknown_user" /> <Text id="app.main.channel.unknown_user" />
)} )}
@ -96,7 +100,7 @@ export const Username = observer(
} }
return ( return (
<span {...otherProps} style={{ color }}> <span {...otherProps} ref={innerRef} style={{ color }}>
{prefixAt ? "@" : undefined} {prefixAt ? "@" : undefined}
{masquerade?.name ?? username ?? ( {masquerade?.name ?? username ?? (
<Text id="app.main.channel.unknown_user" /> <Text id="app.main.channel.unknown_user" />

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

@ -7,7 +7,8 @@ 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 { attachContextMenu } from "preact-context-menu"; import { Ref } from "preact";
import { refContextMenu } 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";
@ -66,12 +67,14 @@ 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)
} }
onContextMenu={attachContextMenu("Menu", { ref={
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}
@ -163,10 +166,12 @@ 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 })}
onContextMenu={attachContextMenu("Menu", { ref={
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}

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

@ -5,8 +5,8 @@ import { Link, useHistory, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users"; import { RelationshipStatus } from "revolt-api/types/Users";
import styled, { css } from "styled-components/macro"; import styled, { css } from "styled-components/macro";
import { attachContextMenu } from "preact-context-menu"; import { Ref } from "preact";
import { Text } from "preact-i18n"; import { refContextMenu } 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,7 +265,9 @@ export default observer(() => {
<ServerEntry home active={homeActive}> <ServerEntry home active={homeActive}>
<Swoosh /> <Swoosh />
<div <div
onContextMenu={attachContextMenu("Status")} ref={
refContextMenu("Status") as Ref<HTMLDivElement>
}
onClick={() => onClick={() =>
homeActive && history.push("/settings") homeActive && history.push("/settings")
}> }>
@ -301,10 +303,12 @@ export default observer(() => {
<ServerEntry <ServerEntry
home home
active={false} active={false}
onContextMenu={attachContextMenu("Menu", { ref={
refContextMenu("Menu", {
channel: x._id, channel: x._id,
unread: true, unread: true,
})}> }) as Ref<HTMLDivElement>
}>
<div> <div>
<Icon <Icon
size={42} size={42}
@ -350,10 +354,12 @@ export default observer(() => {
to={state.layout.getServerPath(server._id)}> to={state.layout.getServerPath(server._id)}>
<ServerEntry <ServerEntry
active={active} active={active}
onContextMenu={attachContextMenu("Menu", { ref={
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}

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

@ -3,7 +3,8 @@ import { Redirect, useParams } from "react-router";
import { Server } from "revolt.js/dist/maps/Servers"; import { Server } from "revolt.js/dist/maps/Servers";
import styled, { css } from "styled-components/macro"; import styled, { css } from "styled-components/macro";
import { attachContextMenu } from "preact-context-menu"; import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { useEffect } from "preact/hooks"; import { useEffect } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink"; import ConditionalLink from "../../../lib/ConditionalLink";
@ -145,9 +146,11 @@ export default observer(() => {
<ServerHeader server={server} /> <ServerHeader server={server} />
<ConnectionStatus /> <ConnectionStatus />
<ServerList <ServerList
onContextMenu={attachContextMenu("Menu", { ref={
refContextMenu("Menu", {
server_list: server._id, server_list: server._id,
})}> }) as Ref<HTMLDivElement>
}>
{elements} {elements}
</ServerList> </ServerList>
<PaintCounter small /> <PaintCounter small />

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

@ -7,7 +7,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 { attachContextMenu } from "preact-context-menu"; import { Ref } from "preact";
import { refContextMenu } from "preact-context-menu";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
@ -132,7 +133,11 @@ 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 })}
onContextMenu={attachContextMenu("Menu", { user: user._id })}> ref={
refContextMenu("Menu", {
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>

2
vite.config.ts
View file

@ -124,6 +124,6 @@ export default defineConfig({
}, },
}, },
optimizeDeps: { optimizeDeps: {
exclude: ["revolt.js"], exclude: ["revolt.js", "preact-context-menu"],
}, },
}); });

21
yarn.lock
View file

@ -2251,15 +2251,10 @@ camelize@^1.0.0:
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
caniuse-lite@^1.0.30001251: caniuse-lite@^1.0.30001251, caniuse-lite@^1.0.30001286:
version "1.0.30001252" version "1.0.30001313"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz#cb16e4e3dafe948fc4a9bb3307aea054b912019a" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz"
integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw== integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==
caniuse-lite@^1.0.30001286:
version "1.0.30001299"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
chalk@^2.0.0, chalk@^2.4.2: chalk@^2.0.0, chalk@^2.4.2:
version "2.4.2" version "2.4.2"
@ -4004,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.2.2: preact-context-menu@0.3.0-patch.0:
version "0.2.2" version "0.3.0-patch.0"
resolved "https://registry.yarnpkg.com/preact-context-menu/-/preact-context-menu-0.2.2.tgz#0092c3bbbdf7d4a958d2feecbaa47d97c3d552c8" resolved "https://registry.yarnpkg.com/preact-context-menu/-/preact-context-menu-0.3.0-patch.0.tgz#d24a415271d51aec2c66eae138584a9c456ee051"
integrity sha512-qFUUa5ygjYzta6F96NCGpwmoZU+AKHg3SYb8yOCkJGzr8Dqv13P5NY7aZp6eVztxjpJCpF4ILFr1nOcPupIpYQ== integrity sha512-Dm5eOMb/2yn3K66xtg+k9u1SR/DgNqDbDO89ZWprqXcAa8zQmd4jgWn4mWoglVlcarBqBYcMnwoBZArzoGfqxA==
dependencies: dependencies:
preact "^10.5.14" preact "^10.5.14"