Fix: Remove padding on user profile.

Modals: Allow all modals to be closed by ESC (permitting).
Fix: Handle closing DMs properly. Stop propagation too.
This commit is contained in:
Paul 2021-06-24 16:57:12 +01:00
parent 3393795817
commit acadd8ab17
7 changed files with 27 additions and 22 deletions

View file

@ -12,6 +12,7 @@ import { attachContextMenu } from 'preact-context-menu';
import { Channels, Users } from "revolt.js/dist/api/objects"; import { Channels, Users } from "revolt.js/dist/api/objects";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from '../../../context/intermediate/Intermediate'; import { useIntermediate } from '../../../context/intermediate/Intermediate';
import { stopPropagation } from '../../../lib/stopPropagation';
interface CommonProps { interface CommonProps {
active?: boolean active?: boolean
@ -70,9 +71,8 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
)} )}
{alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>} {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
{ !isTouchscreenDevice && channel && { !isTouchscreenDevice && channel &&
<IconButton <IconButton className={styles.icon}
className={styles.icon} onClick={e => stopPropagation(e) && openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
<X size={24} /> <X size={24} />
</IconButton> </IconButton>
} }

View file

@ -117,8 +117,11 @@ function HomeSidebar(props: Props) {
{channelsArr.map(x => { {channelsArr.map(x => {
let user; let user;
if (x.channel_type === 'DirectMessage') { if (x.channel_type === 'DirectMessage') {
if (!x.active) return null;
let recipient = client.channels.getRecipient(x._id); let recipient = client.channels.getRecipient(x._id);
user = users.find(x => x?._id === recipient); user = users.find(x => x?._id === recipient);
if (!user) { if (!user) {
console.warn(`Skipped DM ${x._id} because user was missing.`); console.warn(`Skipped DM ${x._id} because user was missing.`);
return null; return null;

View file

@ -98,6 +98,7 @@ interface Props {
disallowClosing?: boolean; disallowClosing?: boolean;
noBackground?: boolean; noBackground?: boolean;
dontModal?: boolean; dontModal?: boolean;
padding?: boolean;
onClose: () => void; onClose: () => void;
actions?: Action[]; actions?: Action[];
@ -114,7 +115,7 @@ export default function Modal(props: Props) {
attachment={!!props.actions} attachment={!!props.actions}
noBackground={props.noBackground} noBackground={props.noBackground}
border={props.border} border={props.border}
padding={!props.dontModal}> padding={props.padding ?? !props.dontModal}>
{props.title && <h3>{props.title}</h3>} {props.title && <h3>{props.title}</h3>}
{props.children} {props.children}
</ModalContent> </ModalContent>
@ -124,6 +125,19 @@ export default function Modal(props: Props) {
return content; 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); let confirmationAction = props.actions?.find(action => action.confirmation);
useEffect(() => { useEffect(() => {
if (!confirmationAction) return; if (!confirmationAction) return;

View file

@ -22,17 +22,6 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
if (attachment && attachment.metadata.type !== "Image") return null; if (attachment && attachment.metadata.type !== "Image") return null;
const client = useContext(AppContext); 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 ( return (
<Modal visible={true} onClose={onClose} noBackground> <Modal visible={true} onClose={onClose} noBackground>
<div className={styles.viewer}> <div className={styles.viewer}>

View file

@ -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); const badges = (user.badges ?? 0) | (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
return ( return (
<Modal <Modal visible
visible
border={dummy} border={dummy}
padding={false}
onClose={onClose} onClose={onClose}
dontModal={dummy} dontModal={dummy}>
>
<div <div
className={styles.header} className={styles.header}
data-force={ data-force={

View file

@ -19,7 +19,6 @@ export function useForceUpdate(context?: HookContext): HookContext {
updateState = u; updateState = u;
} else { } else {
console.warn('Failed to construct using useState.'); console.warn('Failed to construct using useState.');
console.warn(H);
updateState = ()=>{}; updateState = ()=>{};
} }
@ -85,7 +84,7 @@ export function useDMs(context?: HookContext) {
function mutation(target: string) { function mutation(target: string) {
let channel = ctx.client.channels.get(target); let channel = ctx.client.channels.get(target);
if (channel) { if (channel) {
if ((channel.channel_type === 'DirectMessage' && channel.active) || channel.channel_type === 'Group') { if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') {
ctx.forceUpdate(); ctx.forceUpdate();
} }
} }
@ -99,7 +98,7 @@ export function useDMs(context?: HookContext) {
return map return map
.toArray() .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) { export function useUserPermission(id: string, context?: HookContext) {

View file

@ -1,4 +1,5 @@
export const stopPropagation = (ev: JSX.TargetedMouseEvent<HTMLDivElement>, _consume?: any) => { export const stopPropagation = (ev: JSX.TargetedMouseEvent<HTMLDivElement>, _consume?: any) => {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
return true;
}; };