cphipps/jellyseerr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(ui): updated modal design with backdrops

Browse Source
This commit is contained in:
sct
2021-05-06 21:24:36 +09:00
parent f48312e833
commit c4775e05fe
6 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Common/Modal/index.tsx
View File

@@ -6,6 +6,7 @@ import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
import globalMessages from '../../../i18n/globalMessages';
import Transition from '../../Transition';
import Button, { ButtonType } from '../Button';
import CachedImage from '../CachedImage';
import LoadingSpinner from '../LoadingSpinner';
interface ModalProps {
@@ -29,6 +30,7 @@ interface ModalProps {
backgroundClickable?: boolean;
iconSvg?: ReactNode;
loading?: boolean;
backdrop?: string;
}
const Modal: React.FC<ModalProps> = ({
@@ -53,6 +55,7 @@ const Modal: React.FC<ModalProps> = ({
tertiaryDisabled = false,
tertiaryText,
onTertiary,
backdrop,
}) => {
const intl = useIntl();
const modalRef = useRef<HTMLDivElement>(null);
@@ -66,7 +69,7 @@ const Modal: React.FC<ModalProps> = ({
return ReactDOM.createPortal(
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className="fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center w-full h-full bg-gray-800 bg-opacity-50"
className="fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center w-full h-full bg-gray-800 bg-opacity-70"
onKeyDown={(e) => {
if (e.key === 'Escape') {
typeof onCancel === 'function' && backgroundClickable
@@ -98,7 +101,7 @@ const Modal: React.FC<ModalProps> = ({
show={!loading}
>
<div
className="relative inline-block w-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
className="relative inline-block w-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl ring-1 ring-gray-500 sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
@@ -107,7 +110,25 @@ const Modal: React.FC<ModalProps> = ({
maxHeight: 'calc(100% - env(safe-area-inset-top) * 2)',
}}
>
<div className="sm:flex sm:items-center">
{backdrop && (
<div className="absolute top-0 left-0 right-0 z-0 w-full h-64">
<CachedImage
alt=""
src={backdrop}
layout="fill"
objectFit="cover"
priority
/>
<div
className="absolute inset-0"
style={{
backgroundImage:
'linear-gradient(180deg, rgba(55, 65, 81, 0.85) 0%, rgba(55, 65, 81, 1) 100%)',
}}
/>
</div>
)}
<div className="relative sm:flex sm:items-center">
{iconSvg && <div className="modal-icon">{iconSvg}</div>}
<div
className={`mt-3 text-center sm:mt-0 sm:text-left ${
@@ -125,12 +146,12 @@ const Modal: React.FC<ModalProps> = ({
</div>
</div>
{children && (
<div className="mt-4 text-sm leading-5 text-gray-300">
<div className="relative mt-4 text-sm leading-5 text-gray-300">
{children}
</div>
)}
{(onCancel || onOk || onSecondary || onTertiary) && (
<div className="flex flex-row-reverse justify-center mt-5 sm:mt-4 sm:justify-start">
<div className="relative flex flex-row-reverse justify-center mt-5 sm:mt-4 sm:justify-start">
{typeof onOk === 'function' && (
<Button
buttonType={okButtonType}