mirror of https://github.com/mifi/lossless-cut
ui improvements
Mikael Finstad
1 year ago
parent
250507d8f4
commit
e8bb18c6be
@ -1,50 +1,16 @@
|
||||
.sheet {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: var(--white-a11);
|
||||
color: var(--gray-12);
|
||||
backdrop-filter: blur(30px);
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
table.options {
|
||||
table.options {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
table.options td:nth-child(2) {
|
||||
table.options td:nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
table.options td:last-child {
|
||||
table.options td:last-child {
|
||||
text-align: center;
|
||||
width: 1.7em;
|
||||
}
|
||||
|
||||
table.options td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark-theme) .sheet {
|
||||
background: var(--black-a11);
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 15px 15px 50px 15px;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
min-height: 500px;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width: 50em;
|
||||
background: var(--white-a11);
|
||||
}
|
||||
|
||||
:global(.dark-theme) .box {
|
||||
background: var(--black-a11);
|
||||
table.options td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
.sheet {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: var(--white-a11);
|
||||
color: var(--gray-12);
|
||||
backdrop-filter: blur(30px);
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
:global(.dark-theme) .sheet {
|
||||
background: var(--black-a11);
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 15px 15px 50px 15px;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
min-height: 500px;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
background: var(--white-a11);
|
||||
}
|
||||
|
||||
:global(.dark-theme) .box {
|
||||
background: var(--black-a11);
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
import { CSSProperties, ReactNode } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
import styles from './ExportDialog.module.css';
|
||||
import CloseButton from './CloseButton';
|
||||
|
||||
function ExportDialog({
|
||||
visible,
|
||||
children,
|
||||
renderBottom,
|
||||
renderButton,
|
||||
onClosePress,
|
||||
title,
|
||||
width,
|
||||
} : {
|
||||
visible: boolean,
|
||||
renderBottom?: (() => ReactNode | null) | undefined,
|
||||
renderButton?: (() => ReactNode | null) | undefined,
|
||||
children: ReactNode,
|
||||
onClosePress: () => void,
|
||||
title: string,
|
||||
width: CSSProperties['width'],
|
||||
}) {
|
||||
// https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{visible && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className={styles['sheet']}
|
||||
transition={{ duration: 0.3, easings: ['easeOut'] }}
|
||||
>
|
||||
<div className={styles['box']} style={{ width }}>
|
||||
<h1 style={{ textTransform: 'uppercase', fontSize: '1.4em', marginTop: 0, marginBottom: '.5em' }}>{title}</h1>
|
||||
|
||||
<CloseButton type="submit" style={{ top: 0, right: 0 }} onClick={onClosePress} />
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div style={{ position: 'fixed', right: 0, bottom: 0, display: 'flex', alignItems: 'center', margin: 5 }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, translateX: 50 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 50 }}
|
||||
transition={{ duration: 0.4, easings: ['easeOut'] }}
|
||||
style={{ display: 'flex', alignItems: 'flex-end', background: 'var(--gray-2)', borderRadius: '.5em', padding: '.3em' }}
|
||||
>
|
||||
{renderBottom?.()}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
style={{ transformOrigin: 'bottom right' }}
|
||||
initial={{ scale: 0.7, opacity: 1 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.7, opacity: 0 }}
|
||||
transition={{ duration: 0.4, easings: ['easeOut'] }}
|
||||
>
|
||||
{renderButton?.()}
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExportDialog;
|
||||
Loading…
Reference in New Issue