abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases 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 fdaadfb428
commit 72792566da
15 changed files with 90 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,7 +1,8 @@
import { observer } from "mobx-react-lite";
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 { useEffect, useState } from "preact/hooks";
@@ -64,7 +65,7 @@ const Message = observer(
// ! TODO: tell fatal to make this type generic
// bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
? (refContextMenu("Menu", {
user: message.author_id,
contextualChannel: message.channel_id,
// eslint-disable-next-line
@@ -119,13 +120,13 @@ const Message = observer(
sending={typeof queued !== "undefined"}
mention={message.mention_ids?.includes(client.user!._id)}
failed={typeof queued?.error !== "undefined"}
onContextMenu={
ref={
attachContext
? attachContextMenu("Menu", {
? (refContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
}) as Ref<HTMLDivElement>)
: undefined
}
onMouseEnter={() => setAnimate(true)}
@@ -137,7 +138,7 @@ const Message = observer(
url={message.generateMasqAvatarURL()}
target={user}
size={36}
onContextMenu={userContext}
innerRef={userContext}
onClick={handleUserClick}
animate={mouseHovering}
showServerIdentity
@@ -154,7 +155,7 @@ const Message = observer(
className="author"
showServerIdentity
onClick={handleUserClick}
onContextMenu={userContext}
innerRef={userContext}
masquerade={message.masquerade!}
/>
<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 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";
@@ -138,12 +139,12 @@ export const SystemMessage = observer(
return (
<MessageBase
highlight={highlight}
onContextMenu={
ref={
attachContext
? attachContextMenu("Menu", {
? (refContextMenu("Menu", {
message,
contextualChannel: message.channel,
})
}) as Ref<HTMLDivElement>)
: undefined
}>
{!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 classNames from "classnames";
import { attachContextMenu } from "preact-context-menu";
import { refContextMenu } 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}
onContextMenu={attachContextMenu("Menu", {
innerRef={refContextMenu("Menu", {
attachment,
})}
className={classNames({

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

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

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

@@ -70,6 +70,7 @@ export default observer(
hover,
showServerIdentity,
masquerade,
innerRef,
...svgProps
} = props;
@@ -103,6 +104,7 @@ export default observer(
return (
<IconBase
{...svgProps}
ref={innerRef}
width={size}
height={size}
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 styled from "styled-components/macro";
import { Ref } from "preact";
import { Text } from "preact-i18n";
import { internalEmit } from "../../../lib/eventEmitter";
@@ -33,6 +34,8 @@ type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
prefixAt?: boolean;
masquerade?: Masquerade;
showServerIdentity?: boolean | "both";
innerRef?: Ref<any>;
};
export const Username = observer(
@@ -41,6 +44,7 @@ export const Username = observer(
prefixAt,
masquerade,
showServerIdentity,
innerRef,
...otherProps
}: UsernameProps) => {
let username = user?.username;
@@ -83,7 +87,7 @@ export const Username = observer(
if (user?.bot) {
return (
<>
<span {...otherProps} style={{ color }}>
<span {...otherProps} ref={innerRef} style={{ color }}>
{masquerade?.name ?? username ?? (
<Text id="app.main.channel.unknown_user" />
)}
@@ -96,7 +100,7 @@ export const Username = observer(
}
return (
<span {...otherProps} style={{ color }}>
<span {...otherProps} ref={innerRef} style={{ color }}>
{prefixAt ? "@" : undefined}
{masquerade?.name ?? username ?? (
<Text id="app.main.channel.unknown_user" />

27
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 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 { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -66,12 +67,14 @@ export const UserButton = observer((props: UserProps) => {
typeof channel !== "undefined" ||
(user.online && user.status?.presence !== Presence.Invisible)
}
onContextMenu={attachContextMenu("Menu", {
user: user._id,
channel: channel?._id,
unread: alert,
contextualChannel: context?._id,
})}>
ref={
refContextMenu("Menu", {
user: user._id,
channel: channel?._id,
unread: alert,
contextualChannel: context?._id,
}) as Ref<HTMLDivElement>
}>
<UserIcon
className={styles.avatar}
target={user}
@@ -163,10 +166,12 @@ export const ChannelButton = observer((props: ChannelProps) => {
data-muted={muted}
aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu("Menu", {
channel: channel._id,
unread: !!alert,
})}>
ref={
refContextMenu("Menu", {
channel: channel._id,
unread: !!alert,
}) as Ref<HTMLDivElement>
}>
<ChannelIcon
className={styles.avatar}
target={channel}

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

11
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 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 ConditionalLink from "../../../lib/ConditionalLink";
@@ -145,9 +146,11 @@ export default observer(() => {
<ServerHeader server={server} />
<ConnectionStatus />
<ServerList
onContextMenu={attachContextMenu("Menu", {
server_list: server._id,
})}>
ref={
refContextMenu("Menu", {
server_list: server._id,
}) as Ref<HTMLDivElement>
}>
{elements}
</ServerList>
<PaintCounter small />