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