From acadd8ab17b84c532f05143a8ac671b89db929ae Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 24 Jun 2021 16:57:12 +0100 Subject: [PATCH] Fix: Remove padding on user profile. Modals: Allow all modals to be closed by ESC (permitting). Fix: Handle closing DMs properly. Stop propagation too. --- src/components/navigation/items/ButtonItem.tsx | 6 +++--- src/components/navigation/left/HomeSidebar.tsx | 3 +++ src/components/ui/Modal.tsx | 16 +++++++++++++++- .../intermediate/popovers/ImageViewer.tsx | 11 ----------- .../intermediate/popovers/UserProfile.tsx | 7 +++---- src/context/revoltjs/hooks.ts | 5 ++--- src/lib/stopPropagation.ts | 1 + 7 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx index 42792b7b..d4e19820 100644 --- a/src/components/navigation/items/ButtonItem.tsx +++ b/src/components/navigation/items/ButtonItem.tsx @@ -12,6 +12,7 @@ import { attachContextMenu } from 'preact-context-menu'; import { Channels, Users } from "revolt.js/dist/api/objects"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { useIntermediate } from '../../../context/intermediate/Intermediate'; +import { stopPropagation } from '../../../lib/stopPropagation'; interface CommonProps { active?: boolean @@ -70,9 +71,8 @@ export function UserButton({ active, alert, alertCount, user, context, channel } )} {alert &&
{ alertCount }
} { !isTouchscreenDevice && channel && - openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}> + stopPropagation(e) && openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}> } diff --git a/src/components/navigation/left/HomeSidebar.tsx b/src/components/navigation/left/HomeSidebar.tsx index c0e657e0..d9ea7190 100644 --- a/src/components/navigation/left/HomeSidebar.tsx +++ b/src/components/navigation/left/HomeSidebar.tsx @@ -117,8 +117,11 @@ function HomeSidebar(props: Props) { {channelsArr.map(x => { let user; if (x.channel_type === 'DirectMessage') { + if (!x.active) return null; + let recipient = client.channels.getRecipient(x._id); user = users.find(x => x?._id === recipient); + if (!user) { console.warn(`Skipped DM ${x._id} because user was missing.`); return null; diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index 26197b2b..2faecdec 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -98,6 +98,7 @@ interface Props { disallowClosing?: boolean; noBackground?: boolean; dontModal?: boolean; + padding?: boolean; onClose: () => void; actions?: Action[]; @@ -114,7 +115,7 @@ export default function Modal(props: Props) { attachment={!!props.actions} noBackground={props.noBackground} border={props.border} - padding={!props.dontModal}> + padding={props.padding ?? !props.dontModal}> {props.title &&

{props.title}

} {props.children} @@ -124,6 +125,19 @@ export default function Modal(props: Props) { return content; } + useEffect(() => { + if (props.disallowClosing) return; + + function keyDown(e: KeyboardEvent) { + if (e.key === "Escape") { + props.onClose(); + } + } + + document.body.addEventListener("keydown", keyDown); + return () => document.body.removeEventListener("keydown", keyDown); + }, [ props.disallowClosing, props.onClose ]); + let confirmationAction = props.actions?.find(action => action.confirmation); useEffect(() => { if (!confirmationAction) return; diff --git a/src/context/intermediate/popovers/ImageViewer.tsx b/src/context/intermediate/popovers/ImageViewer.tsx index e42d6ca1..d0cf0cfc 100644 --- a/src/context/intermediate/popovers/ImageViewer.tsx +++ b/src/context/intermediate/popovers/ImageViewer.tsx @@ -22,17 +22,6 @@ export function ImageViewer({ attachment, embed, onClose }: Props) { if (attachment && attachment.metadata.type !== "Image") return null; const client = useContext(AppContext); - useEffect(() => { - function keyDown(e: KeyboardEvent) { - if (e.key === "Escape") { - onClose(); - } - } - - document.body.addEventListener("keydown", keyDown); - return () => document.body.removeEventListener("keydown", keyDown); - }, []); - return (
diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx index 385829a7..afcc8345 100644 --- a/src/context/intermediate/popovers/UserProfile.tsx +++ b/src/context/intermediate/popovers/UserProfile.tsx @@ -116,12 +116,11 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) { const badges = (user.badges ?? 0) | (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0); return ( - + dontModal={dummy}>
{}; } @@ -85,7 +84,7 @@ export function useDMs(context?: HookContext) { function mutation(target: string) { let channel = ctx.client.channels.get(target); if (channel) { - if ((channel.channel_type === 'DirectMessage' && channel.active) || channel.channel_type === 'Group') { + if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') { ctx.forceUpdate(); } } @@ -99,7 +98,7 @@ export function useDMs(context?: HookContext) { return map .toArray() - .filter(x => (x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[]; + .filter(x => x.channel_type === 'DirectMessage' || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[]; } export function useUserPermission(id: string, context?: HookContext) { diff --git a/src/lib/stopPropagation.ts b/src/lib/stopPropagation.ts index 98c9fa60..df4d9533 100644 --- a/src/lib/stopPropagation.ts +++ b/src/lib/stopPropagation.ts @@ -1,4 +1,5 @@ export const stopPropagation = (ev: JSX.TargetedMouseEvent, _consume?: any) => { ev.preventDefault(); ev.stopPropagation(); + return true; };