Skip to content

Commit

Permalink
fix(dialogs): fix height of dialogs for small screens (chartdb#440)
Browse files Browse the repository at this point in the history 
* fix(dialogs): fix height of dialogs on small screens

* fix type
  • Loading branch information
@guyb1
guyb1 authored Nov 24, 2024
1 parent 2940431 commit 667685e
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 221 deletions.
14 changes: 14 additions & 0 deletions src/components/dialog/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Cross2Icon } from '@radix-ui/react-icons';

import { cn } from '@/lib/utils';
import { ScrollArea } from '../scroll-area/scroll-area';

const Dialog = DialogPrimitive.Root;

Expand Down Expand Up @@ -110,6 +111,18 @@ const DialogDescription = React.forwardRef<
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;

const DialogInternalContent = React.forwardRef<
React.ElementRef<typeof ScrollArea>,
React.ComponentPropsWithoutRef<typeof ScrollArea>
>(({ className, ...props }, ref) => (
<ScrollArea
ref={ref}
className={cn('flex max-h-screen flex-col overflow-y-auto', className)}
{...props}
/>
));
DialogInternalContent.displayName = 'DialogInternalContent';

export {
Dialog,
DialogPortal,
Expand All @@ -121,4 +134,5 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
DialogInternalContent,
};
4 changes: 2 additions & 2 deletions src/components/scroll-area/scroll-area.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const ScrollArea = React.forwardRef<
className={cn('relative overflow-hidden', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="scrollable-flex size-full rounded-[inherit]">
<ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
Expand Down Expand Up @@ -40,7 +40,7 @@ const ScrollBar = React.forwardRef<
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
<ScrollAreaPrimitive.ScrollAreaThumb className="relative z-20 flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
Expand Down
344 changes: 179 additions & 165 deletions src/dialogs/common/import-database/import-database.tsx
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
}}
>
<DialogContent
className="flex w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
className="flex max-h-screen w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
showClose={hasExistingDiagram}
>
{step === CreateDiagramDialogStep.SELECT_DATABASE ? (
Expand Down
13 changes: 8 additions & 5 deletions src/dialogs/create-diagram-dialog/select-database/select-database.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
DialogDescription,
DialogFooter,
DialogHeader,
DialogInternalContent,
DialogTitle,
} from '@/components/dialog/dialog';
import { DatabaseType } from '@/lib/domain/database-type';
Expand Down Expand Up @@ -40,11 +41,13 @@ export const SelectDatabase: React.FC<SelectDatabaseProps> = ({
{t('new_diagram_dialog.database_selection.description')}
</DialogDescription>
</DialogHeader>
<SelectDatabaseContent
databaseType={databaseType}
onContinue={onContinue}
setDatabaseType={setDatabaseType}
/>
<DialogInternalContent>
<SelectDatabaseContent
databaseType={databaseType}
onContinue={onContinue}
setDatabaseType={setDatabaseType}
/>
</DialogInternalContent>
<DialogFooter className="mt-4 flex !justify-between gap-2">
{hasExistingDiagram ? (
<DialogClose asChild>
Expand Down
38 changes: 20 additions & 18 deletions src/dialogs/export-sql-dialog/export-sql-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
DialogDescription,
DialogFooter,
DialogHeader,
DialogInternalContent,
DialogTitle,
} from '@/components/dialog/dialog';
import { Label } from '@/components/label/label';
Expand Down Expand Up @@ -151,7 +152,7 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
}}
>
<DialogContent
className="flex max-h-[80vh] flex-col overflow-y-auto xl:min-w-[75vw]"
className="flex max-h-screen flex-col overflow-y-auto xl:min-w-[75vw]"
showClose
>
<DialogHeader>
Expand All @@ -167,23 +168,24 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
})}
</DialogDescription>
</DialogHeader>
<div className="flex flex-1 items-center justify-center">
{error ? (
renderError()
) : script === undefined ? (
renderLoader()
) : script.length === 0 ? (
renderError()
) : (
<CodeSnippet
className="h-96 w-full"
code={script!}
autoScroll={true}
isComplete={!isScriptLoading}
/>
)}
</div>

<DialogInternalContent>
<div className="flex flex-1 items-center justify-center">
{error ? (
renderError()
) : script === undefined ? (
renderLoader()
) : script.length === 0 ? (
renderError()
) : (
<CodeSnippet
className="h-96 w-full"
code={script!}
autoScroll={true}
isComplete={!isScriptLoading}
/>
)}
</div>
</DialogInternalContent>
<DialogFooter className="flex !justify-between gap-2">
<div />
<DialogClose asChild>
Expand Down
2 changes: 1 addition & 1 deletion src/dialogs/import-database-dialog/import-database-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
}}
>
<DialogContent
className="flex w-[90vw] flex-col overflow-y-auto md:overflow-visible xl:min-w-[45vw]"
className="flex max-h-screen w-[90vw] flex-col overflow-y-auto md:overflow-visible xl:min-w-[45vw]"
showClose
>
<ImportDatabase
Expand Down
41 changes: 23 additions & 18 deletions src/dialogs/import-diagram-dialog/import-diagram-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
DialogDescription,
DialogFooter,
DialogHeader,
DialogInternalContent,
DialogTitle,
} from '@/components/dialog/dialog';
import { Button } from '@/components/button/button';
Expand Down Expand Up @@ -87,7 +88,7 @@ export const ImportDiagramDialog: React.FC<ImportDiagramDialogProps> = ({
}
}}
>
<DialogContent className="flex flex-col" showClose>
<DialogContent className="flex max-h-screen flex-col" showClose>
<DialogHeader>
<DialogTitle>
{t('import_diagram_dialog.title')}
Expand All @@ -96,23 +97,27 @@ export const ImportDiagramDialog: React.FC<ImportDiagramDialogProps> = ({
{t('import_diagram_dialog.description')}
</DialogDescription>
</DialogHeader>
<div className="flex flex-col p-1">
<FileUploader
supportedExtensions={['.json']}
onFilesChange={onFileChange}
/>
{error ? (
<Alert variant="destructive" className="mt-2">
<AlertCircle className="size-4" />
<AlertTitle>
{t('import_diagram_dialog.error.title')}
</AlertTitle>
<AlertDescription>
{t('import_diagram_dialog.error.description')}
</AlertDescription>
</Alert>
) : null}
</div>
<DialogInternalContent>
<div className="flex flex-col p-1">
<FileUploader
supportedExtensions={['.json']}
onFilesChange={onFileChange}
/>
{error ? (
<Alert variant="destructive" className="mt-2">
<AlertCircle className="size-4" />
<AlertTitle>
{t('import_diagram_dialog.error.title')}
</AlertTitle>
<AlertDescription>
{t(
'import_diagram_dialog.error.description'
)}
</AlertDescription>
</Alert>
) : null}
</div>
</DialogInternalContent>
<DialogFooter className="flex gap-1 md:justify-between">
<DialogClose asChild>
<Button variant="secondary">
Expand Down
14 changes: 7 additions & 7 deletions src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import {
DialogDescription,
DialogFooter,
DialogHeader,
DialogInternalContent,
DialogTitle,
} from '@/components/dialog/dialog';
import { ScrollArea } from '@/components/scroll-area/scroll-area';
import {
Table,
TableBody,
Expand Down Expand Up @@ -74,7 +74,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
}}
>
<DialogContent
className="flex w-[90vw] flex-col overflow-y-auto md:w-screen xl:min-w-[55vw]"
className="flex h-[30rem] max-h-screen w-[90vw] flex-col overflow-y-auto md:w-screen xl:min-w-[55vw]"
showClose
>
<DialogHeader>
Expand All @@ -83,9 +83,9 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
{t('open_diagram_dialog.description')}
</DialogDescription>
</DialogHeader>
<div className="flex flex-1 items-center justify-center">
<ScrollArea className="h-80 w-full">
<Table className="h-fit">
<DialogInternalContent>
<div className="flex flex-1 items-center justify-center">
<Table>
<TableHeader className="sticky top-0 bg-background">
<TableRow>
<TableHead />
Expand Down Expand Up @@ -155,8 +155,8 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
))}
</TableBody>
</Table>
</ScrollArea>
</div>
</div>
</DialogInternalContent>

<DialogFooter className="flex !justify-between gap-2">
<DialogClose asChild>
Expand Down
4 changes: 0 additions & 4 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@
@apply hidden !important;
}

.scrollable-flex > div {
@apply !flex;
}

.marker-definitions {
}
}

0 comments on commit 667685e

Please sign in to comment.