starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-19 15:31:19 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Tweak workspace settings dialog and Markdown editor

Browse Source
This commit is contained in:
Gregory Schier
2025-01-08 08:54:40 -08:00
parent eeb66ca28a
commit 95266a9177
11 changed files with 233 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src-web/components/core/Dialog.tsx
View File

@@ -53,72 +53,74 @@ export function Dialog({
return (
<Overlay open={open} onClose={onClose} portalName="dialog">
<div
role="dialog"
className={classNames(
'x-theme-dialog absolute inset-0 flex flex-col items-center pointer-events-none',
'x-theme-dialog absolute inset-0 pointer-events-none',
'h-full flex flex-col items-center justify-center',
vAlign === 'top' && 'justify-start',
vAlign === 'center' && 'justify-center',
)}
aria-labelledby={titleId}
aria-describedby={descriptionId}
>
<div role="dialog" aria-labelledby={titleId} aria-describedby={descriptionId}>
<motion.div
initial={{ top: 5, scale: 0.97 }}
animate={{ top: 0, scale: 1 }}
<motion.div
initial={{ top: 5, scale: 0.97 }}
animate={{ top: 0, scale: 1 }}
className={classNames(
className,
'grid grid-rows-[auto_auto_minmax(0,1fr)]',
'grid-cols-1', // must be here for inline code blocks to correctly break words
'relative bg-surface pointer-events-auto',
'rounded-lg',
'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]',
size === 'sm' && 'w-[28rem]',
size === 'md' && 'w-[45rem]',
size === 'lg' && 'w-[65rem]',
size === 'full' && 'w-[100vw] h-[100vh]',
size === 'dynamic' && 'min-w-[20rem] max-w-[100vw] w-full',
)}
>
{title ? (
<Heading className="px-6 mt-4 mb-2" size={1} id={titleId}>
{title}
</Heading>
) : (
<span />
)}
{description ? (
<div className="px-6 text-text-subtle" id={descriptionId}>
{description}
</div>
) : (
<span />
)}
<div
className={classNames(
className,
'grid grid-rows-[auto_auto_minmax(0,1fr)]',
'grid-cols-1', // must be here for inline code blocks to correctly break words
'relative bg-surface pointer-events-auto',
'rounded-lg',
'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-4rem)]',
size === 'sm' && 'w-[28rem] max-h-[80vh]',
size === 'md' && 'w-[45rem] max-h-[80vh]',
size === 'lg' && 'w-[65rem] max-h-[80vh]',
size === 'full' && 'w-[100vw] h-[100vh]',
size === 'dynamic' && 'min-w-[20rem] max-w-[100vw] w-full mt-8',
'h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1',
!noPadding && 'px-6 py-2',
!noScroll && 'overflow-y-auto overflow-x-hidden',
)}
>
{title ? (
<Heading className="px-6 mt-4 mb-2" size={1} id={titleId}>
{title}
</Heading>
) : (
<span />
)}
{children}
</div>
{description ? (
<div className="px-6 text-text-subtle" id={descriptionId}>
{description}
</div>
) : (
<span />
)}
<div
className={classNames(
'h-full w-full grid grid-cols-[minmax(0,1fr)] grid-rows-1',
!noPadding && 'px-6 py-2',
!noScroll && 'overflow-y-auto overflow-x-hidden',
)}
>
{children}
{/*Put close at the end so that it's the last thing to be tabbed to*/}
{!hideX && (
<div className="ml-auto absolute right-1 top-1">
<IconButton
className="opacity-70 hover:opacity-100"
onClick={onClose}
title="Close dialog (Esc)"
aria-label="Close"
size="sm"
icon="x"
/>
</div>
{/*Put close at the end so that it's the last thing to be tabbed to*/}
{!hideX && (
<div className="ml-auto absolute right-1 top-1">
<IconButton
className="opacity-70 hover:opacity-100"
onClick={onClose}
title="Close dialog (Esc)"
aria-label="Close"
size="sm"
icon="x"
/>
</div>
)}
</motion.div>
</div>
)}
</motion.div>
</div>
</Overlay>
);