mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
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:
parent
3393795817
commit
acadd8ab17
7 changed files with 27 additions and 22 deletions
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
|
@ -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={
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue