mirror of https://github.com/mifi/lossless-cut
improve dark mode #1969
Mikael Finstad
1 year ago
parent
25050414ca
commit
010f2ad3fe
@ -0,0 +1,62 @@
|
||||
dialog::backdrop {
|
||||
background-color: var(--black-a7);
|
||||
animation: overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: .1em solid var(--black-a3);
|
||||
background: var(--white-a8);
|
||||
color: var(--gray-12);
|
||||
backdrop-filter: blur(2em);
|
||||
border-radius: .5em;
|
||||
padding: 1.7em;
|
||||
animation: contentShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
:global(.dark-theme) dialog {
|
||||
border: .1em solid var(--white-a2);
|
||||
background: var(--black-a4);
|
||||
}
|
||||
|
||||
.close {
|
||||
all: unset;
|
||||
border-radius: 100%;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-12);
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
background-color: var(--gray-3);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
background-color: var(--gray-4);
|
||||
}
|
||||
|
||||
.close:focus {
|
||||
box-shadow: 0 0 0 .1em var(--gray-7);
|
||||
}
|
||||
|
||||
@keyframes overlayShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes contentShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(0, -5%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { DetailedHTMLProps, DialogHTMLAttributes, useCallback, useEffect, forwardRef } from 'react';
|
||||
|
||||
import styles from './Dialog.module.css';
|
||||
import Button, { ButtonProps } from './Button';
|
||||
import i18n from '../i18n';
|
||||
|
||||
|
||||
type Props = Omit<DetailedHTMLProps<DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, 'open'> & {
|
||||
autoOpen?: boolean | undefined,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const Dialog = forwardRef<HTMLDialogElement, Props>(({ children, autoOpen, onClose, onClick, ...props }, ref) => {
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
if (autoOpen) (ref as React.RefObject<HTMLDialogElement>).current?.showModal();
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
else (ref as React.RefObject<HTMLDialogElement>).current?.close();
|
||||
}, [autoOpen, ref]);
|
||||
|
||||
const handleClick = useCallback((e: React.MouseEvent<HTMLDialogElement>) => {
|
||||
if (!(ref != null && 'current' in ref && ref.current != null)) return;
|
||||
const dialogDimensions = ref.current.getBoundingClientRect();
|
||||
if (e.clientX < dialogDimensions.left
|
||||
|| e.clientX > dialogDimensions.right
|
||||
|| e.clientY < dialogDimensions.top
|
||||
|| e.clientY > dialogDimensions.bottom) {
|
||||
onClose?.(e);
|
||||
}
|
||||
onClick?.(e);
|
||||
}, [onClick, onClose, ref]);
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, react/jsx-props-no-spreading
|
||||
<dialog {...props} ref={ref} onClose={onClose} onClick={handleClick}>
|
||||
{children}
|
||||
|
||||
<form method="dialog">
|
||||
<Button type="submit" className={styles['close']} aria-label={i18n.t('Close')}>
|
||||
<FaTimes />
|
||||
</Button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
});
|
||||
|
||||
export const ConfirmButton = ({ style, ...props }: ButtonProps) => (
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<Button style={{ fontSize: '1.2em', ...style }} {...props} />
|
||||
);
|
||||
|
||||
|
||||
export default Dialog;
|
||||
Loading…
Reference in New Issue