starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-17 23:13:51 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Try new layout and a bunch of editor fixes

Browse Source
This commit is contained in:
Gregory Schier
2023-03-04 19:06:12 -08:00
parent 030ba26c5e
commit 1f5e7dbaa9
28 changed files with 661 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src-web/components/Dialog.tsx
View File

@@ -29,25 +29,27 @@ export function Dialog({
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" />
<D.Content className={classnames(className, 'dialog-content', 'fixed inset-0')}>
<div
className={classnames(
className,
'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
wide && 'w-[80vw] max-w-[50rem]',
)}
>
<D.Close asChild className="ml-auto absolute right-1 top-1">
<IconButton aria-label="Close" icon="x" size="sm" />
</D.Close>
<VStack space={3}>
<HStack items="center" className="pb-3">
<D.Title className="text-xl font-semibold">{title}</D.Title>
</HStack>
{description && <D.Description>{description}</D.Description>}
<div>{children}</div>
</VStack>
<D.Content>
<div className={classnames(className, 'fixed inset-0 pointer-events-none')}>
<div
className={classnames(
className,
'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
wide && 'w-[80vw] max-w-[50rem]',
)}
>
<D.Close asChild className="ml-auto absolute right-1 top-1">
<IconButton aria-label="Close" icon="x" size="sm" />
</D.Close>
<VStack space={3}>
<HStack items="center" className="pb-3">
<D.Title className="text-xl font-semibold">{title}</D.Title>
</HStack>
{description && <D.Description>{description}</D.Description>}
<div>{children}</div>
</VStack>
</div>
</div>
</D.Content>
</motion.div>