Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Added backDropClick param. to modals in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3351
This commit is contained in:
Peter Zimon 2023-06-06 09:49:10 +02:00
parent 5c209abdc0
commit f5415a25ad
2 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
View file

@ -2,6 +2,7 @@ import Button, {IButton} from './Button';
import ButtonGroup from './ButtonGroup'; import ButtonGroup from './ButtonGroup';
import Heading from './Heading'; import Heading from './Heading';
import React from 'react'; import React from 'react';
import clsx from 'clsx';
import {useModal} from '@ebay/nice-modal-react'; import {useModal} from '@ebay/nice-modal-react';
export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed' | number; export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed' | number;
@ -24,6 +25,7 @@ export interface ModalProps {
onCancel?: () => void; onCancel?: () => void;
children?: React.ReactNode; children?: React.ReactNode;
backDrop?: boolean; backDrop?: boolean;
backDropClick?: boolean;
} }
const Modal: React.FC<ModalProps> = ({ const Modal: React.FC<ModalProps> = ({
@ -38,7 +40,8 @@ const Modal: React.FC<ModalProps> = ({
okColor = 'black', okColor = 'black',
onCancel, onCancel,
children, children,
backDrop = true backDrop = true,
backDropClick = true
}) => { }) => {
const modal = useModal(); const modal = useModal();
@ -102,7 +105,7 @@ const Modal: React.FC<ModalProps> = ({
} }
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => { const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget && backDrop) { if (e.target === e.currentTarget && backDropClick) {
modal.remove(); modal.remove();
} }
}; };
@ -113,7 +116,10 @@ const Modal: React.FC<ModalProps> = ({
return ( return (
<div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}> <div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
<div className={`pointer-events-none fixed inset-0 z-0 bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]`}></div> <div className={clsx(
'pointer-events-none fixed inset-0 z-0',
backDrop && 'bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]'
)}></div>
<section className={modalClasses} style={modalStyles}> <section className={modalClasses} style={modalStyles}>
<div className='h-full'> <div className='h-full'>
{title && <Heading level={4}>{title}</Heading>} {title && <Heading level={4}>{title}</Heading>}

1
ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
View file

@ -589,6 +589,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
return ( return (
<Modal <Modal
backDropClick={false}
okColor='green' okColor='green'
okLabel={okLabel} okLabel={okLabel}
size='lg' size='lg'