mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Fix dialogs not being scrollable
This commit is contained in:
parent
4d7744b4db
commit
6d97f81c32
6 changed files with 46 additions and 15 deletions
|
@ -24,7 +24,7 @@ export interface DialogProps {
|
||||||
onAction?: () => void;
|
onAction?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DialogContent({
|
function AlertContent({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
children,
|
children,
|
||||||
|
@ -71,4 +71,4 @@ function DialogContent({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default React.memo(DialogContent);
|
export default React.memo(AlertContent);
|
||||||
|
|
|
@ -19,20 +19,27 @@ function DialogContent({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
children,
|
children,
|
||||||
|
closeButton,
|
||||||
}: React.PropsWithChildren<DialogProps>) {
|
}: React.PropsWithChildren<DialogProps>) {
|
||||||
return (
|
return (
|
||||||
<DialogPrimitive.Portal>
|
<DialogPrimitive.Portal>
|
||||||
<DialogOverlay />
|
<DialogOverlay />
|
||||||
<DialogContainer>
|
<DialogContainer>
|
||||||
{title && <DialogTitle>{title}</DialogTitle>}
|
{title && (
|
||||||
{description && <DialogDescription>{description}</DialogDescription>}
|
<DialogTitle>
|
||||||
{children}
|
{title}
|
||||||
|
|
||||||
|
{closeButton && (
|
||||||
<DialogPrimitive.DialogClose asChild>
|
<DialogPrimitive.DialogClose asChild>
|
||||||
<IconButton>
|
<IconButton>
|
||||||
<Cross2Icon />
|
<Cross2Icon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</DialogPrimitive.DialogClose>
|
</DialogPrimitive.DialogClose>
|
||||||
|
)}
|
||||||
|
</DialogTitle>
|
||||||
|
)}
|
||||||
|
{description && <DialogDescription>{description}</DialogDescription>}
|
||||||
|
{children}
|
||||||
</DialogContainer>
|
</DialogContainer>
|
||||||
</DialogPrimitive.Portal>
|
</DialogPrimitive.Portal>
|
||||||
);
|
);
|
||||||
|
|
|
@ -190,7 +190,10 @@ function CommandDialog({
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DialogContent title={t(`pages.botcommands.command-header-${kind}`)}>
|
<DialogContent
|
||||||
|
title={t(`pages.botcommands.command-header-${kind}`)}
|
||||||
|
closeButton={true}
|
||||||
|
>
|
||||||
<form
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
if (!(e.target as HTMLFormElement).checkValidity()) {
|
if (!(e.target as HTMLFormElement).checkValidity()) {
|
||||||
|
|
|
@ -201,7 +201,10 @@ function TimerDialog({
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DialogContent title={t(`pages.bottimers.timer-header-${kind}`)}>
|
<DialogContent
|
||||||
|
title={t(`pages.bottimers.timer-header-${kind}`)}
|
||||||
|
closeButton={true}
|
||||||
|
>
|
||||||
<form
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
if (!(e.target as HTMLFormElement).checkValidity()) {
|
if (!(e.target as HTMLFormElement).checkValidity()) {
|
||||||
|
|
|
@ -180,7 +180,10 @@ function UserList() {
|
||||||
setGivePointDialog({ ...givePointDialog, open: state })
|
setGivePointDialog({ ...givePointDialog, open: state })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<DialogContent title={t('pages.loyalty-queue.give-points-dialog')}>
|
<DialogContent
|
||||||
|
title={t('pages.loyalty-queue.give-points-dialog')}
|
||||||
|
closeButton={true}
|
||||||
|
>
|
||||||
<form
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -231,7 +234,12 @@ function UserList() {
|
||||||
<Button variation="primary" type="submit">
|
<Button variation="primary" type="submit">
|
||||||
{t('form-actions.save')}
|
{t('form-actions.save')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="button" onClick={() => setCurrentEntry(null)}>
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setGivePointDialog({ ...givePointDialog, open: false })
|
||||||
|
}
|
||||||
|
>
|
||||||
{t('form-actions.cancel')}
|
{t('form-actions.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
|
@ -242,7 +250,10 @@ function UserList() {
|
||||||
open={currentEntry !== null}
|
open={currentEntry !== null}
|
||||||
onOpenChange={(state) => setCurrentEntry(state ? currentEntry : null)}
|
onOpenChange={(state) => setCurrentEntry(state ? currentEntry : null)}
|
||||||
>
|
>
|
||||||
<DialogContent title={t('pages.loyalty-queue.modify-balance-dialog')}>
|
<DialogContent
|
||||||
|
title={t('pages.loyalty-queue.modify-balance-dialog')}
|
||||||
|
closeButton={true}
|
||||||
|
>
|
||||||
<form
|
<form
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
|
@ -38,6 +38,7 @@ export const DialogContainer = styled(DialogPrimitive.Content, {
|
||||||
maxWidth: '600px',
|
maxWidth: '600px',
|
||||||
maxHeight: '85vh',
|
maxHeight: '85vh',
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
|
overflow: 'auto',
|
||||||
'@media (prefers-reduced-motion: no-preference)': {
|
'@media (prefers-reduced-motion: no-preference)': {
|
||||||
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||||
},
|
},
|
||||||
|
@ -53,6 +54,9 @@ export const DialogTitle = styled(DialogPrimitive.Title, {
|
||||||
marginBottom: '1.5rem',
|
marginBottom: '1.5rem',
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
lineHeight: '1.25',
|
lineHeight: '1.25',
|
||||||
|
position: 'sticky',
|
||||||
|
top: '-1rem',
|
||||||
|
backgroundColor: '$gray2',
|
||||||
});
|
});
|
||||||
|
|
||||||
export const DialogDescription = styled(DialogPrimitive.Description, {
|
export const DialogDescription = styled(DialogPrimitive.Description, {
|
||||||
|
@ -68,8 +72,11 @@ export const DialogActions = styled('div', {
|
||||||
justifyContent: 'flex-end',
|
justifyContent: 'flex-end',
|
||||||
borderTop: '1px solid $gray6',
|
borderTop: '1px solid $gray6',
|
||||||
margin: '-1rem',
|
margin: '-1rem',
|
||||||
marginTop: '1.5rem',
|
marginTop: '2rem',
|
||||||
padding: '1rem 1.5rem',
|
padding: '1rem 1.5rem',
|
||||||
|
position: 'sticky',
|
||||||
|
backgroundColor: '$gray2',
|
||||||
|
bottom: '-1rem',
|
||||||
});
|
});
|
||||||
|
|
||||||
export const IconButton = styled('button', {
|
export const IconButton = styled('button', {
|
||||||
|
|
Loading…
Reference in a new issue