Skip to content

Commit

Permalink
feat(ui): make modals more responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@prostarz
prostarz committed Jan 7, 2025
1 parent 8ead156 commit 12fe9e9
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 155 deletions.
3 changes: 2 additions & 1 deletion ...ures/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/actions/edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@ const UpdateDialog = ({ fetchGames, updateGame, game }: UpdateDialogProps) => {
{t("update")}
</DropdownMenuItem>
</DialogTrigger>
<DialogContent>
<DialogContent className="h-[calc(100vh-10rem)] flex flex-col">
<DialogHeader>
<DialogTitle>{t("update_game")}</DialogTitle>
</DialogHeader>

<UpdateGameForm
onSubmit={(values) => {
updateGame(game.game_id, {
Expand Down
2 changes: 1 addition & 1 deletion src/features/library/components/modals/newGame/forms/metadata.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const NewGameMetadataForm = ({ form }: NewGameMetadataFormProps) => {
useFormActions(form);

return (
<div className="w-full min-h-[20rem] h-full overflow-y-auto gap-2 flex flex-col">
<div className="flex flex-col w-full h-full gap-4">
<FormField
control={form.control}
name="gameName"
Expand Down
2 changes: 1 addition & 1 deletion src/features/library/components/modals/newGame/forms/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const NewGameSettingsForm = ({ form }: NewGameMetadataFormProps) => {
const { handleWinePrefixButton } = useFormActions(form);

return (
<div className="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-1">
<div className="flex flex-col w-full h-full gap-4">
<FormField
control={form.control}
name="gameArgs"
Expand Down
68 changes: 36 additions & 32 deletions src/features/library/components/modals/newGame/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
} from "@/components/ui/dialog";
import { Form } from "@/components/ui/form";
import { Popover, PopoverTrigger } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useLanguageContext } from "@/contexts/I18N";
import { useGames } from "@/features/library/hooks/useGames";
Expand Down Expand Up @@ -69,12 +70,10 @@ const NewGameModal = () => {
};

return (
<DialogContent className="min-w-[20rem] min-h-[30rem] md:min-w-[30rem]">
<Tabs defaultValue="metadata" className="w-full">
<DialogHeader className="space-y-4">
<DialogTitle className="text-lg font-bold">
{t("new_game")}
</DialogTitle>
<Tabs defaultValue="metadata" className="w-full">
<DialogContent className="h-[calc(100vh-10rem)] flex flex-col">
<DialogHeader>
<DialogTitle>{t("new_game")}</DialogTitle>

<TabsList className="flex justify-between w-full">
<TabsTrigger value="metadata" className="flex-1">
Expand All @@ -87,34 +86,39 @@ const NewGameModal = () => {
</DialogHeader>

<Form {...form}>
<form
className="flex flex-col gap-4 mt-3"
autoComplete="off"
onSubmit={form.handleSubmit(handleAddGame)}
>
<TabsContent value="metadata">
<NewGameMetadataForm form={form} />
</TabsContent>
<TabsContent value="settings">
<NewGameSettingsForm form={form} />
</TabsContent>
<div className="flex-1 overflow-hidden">
<ScrollArea className="h-full">
<form
className="flex flex-col gap-4"
autoComplete="off"
onSubmit={form.handleSubmit(handleAddGame)}
>
<TabsContent value="metadata">
<NewGameMetadataForm form={form} />
</TabsContent>

<div className="flex items-center justify-between gap-2 mt-4">
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button>{t("import_from_igdb")}</Button>
</PopoverTrigger>
<NewGameImport form={form} setPopoverOpen={setPopoverOpen} />
</Popover>

<Button type="submit" onClick={form.handleSubmit(handleAddGame)}>
{t("add_game")}
</Button>
</div>
</form>
<TabsContent value="settings">
<NewGameSettingsForm form={form} />
</TabsContent>
</form>
</ScrollArea>
</div>
</Form>
</Tabs>
</DialogContent>

<div className="flex items-center justify-between gap-2">
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button>{t("import_from_igdb")}</Button>
</PopoverTrigger>
<NewGameImport form={form} setPopoverOpen={setPopoverOpen} />
</Popover>

<Button type="submit" onClick={form.handleSubmit(handleAddGame)}>
{t("add_game")}
</Button>
</div>
</DialogContent>
</Tabs>
);
};

Expand Down
241 changes: 121 additions & 120 deletions src/features/library/components/updateForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { P } from "@/components/typography/p";
import { Button } from "@/components/ui/button";
import { DialogClose, DialogFooter } from "@/components/ui/dialog";
import { Form, FormField } from "@/components/ui/form";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useLanguageContext } from "@/contexts/I18N";
import { zodResolver } from "@hookform/resolvers/zod";
import { FolderOpen } from "lucide-react";
Expand Down Expand Up @@ -83,136 +83,137 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {

return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
autoComplete="off"
>
<FormField
control={form.control}
name="gameName"
render={({ field }) => (
<GameFormInput
text={t("name")}
description={t("the_name_of_the_game")}
field={field}
required
<div className="flex-1 overflow-hidden">
<ScrollArea className="h-full">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
autoComplete="off"
>
<FormField
control={form.control}
name="gameName"
render={({ field }) => (
<GameFormInput
text={t("name")}
description={t("the_name_of_the_game")}
field={field}
required
/>
)}
/>

<FormField
control={form.control}
name="gamePath"
render={({ field }) => (
<GameFormInput
text={t("path")}
description={t("the_path_to_the_game")}
Button={
<Button size="icon" onClick={handlePathButton}>
<FolderOpen />
</Button>
}
required
field={field}
/>
)}
/>
)}
/>

<FormField
control={form.control}
name="gamePath"
render={({ field }) => (
<GameFormInput
text={t("path")}
description={t("the_path_to_the_game")}
Button={
<Button size="icon" onClick={handlePathButton}>
<FolderOpen />
</Button>
}
required
field={field}

<FormField
control={form.control}
name="gameIcon"
render={({ field }) => (
<GameFormInput
text={t("icon")}
description={t("the_path_or_url_of_the_icon")}
required
Button={
<Button size="icon" onClick={handleIconButton}>
<FolderOpen />
</Button>
}
field={field}
/>
)}
/>
)}
/>

<FormField
control={form.control}
name="gameIcon"
render={({ field }) => (
<GameFormInput
text={t("icon")}
description={t("the_path_or_url_of_the_icon")}
required
Button={
<Button size="icon" onClick={handleIconButton}>
<FolderOpen />
</Button>
}
field={field}

<FormField
control={form.control}
name="gameArgs"
render={({ field }) => (
<>
<GameFormInput
text={t("arguments")}
description={t("the_arguments_to_pass_to_the_game")}
field={field}
/>
{form.formState.errors.gameArgs && (
<P className="w-full text-right text-red-500">
{form.formState.errors.gameArgs.message}
</P>
)}
</>
)}
/>
)}
/>

<FormField
control={form.control}
name="gameArgs"
render={({ field }) => (
<>
<GameFormInput
text={t("arguments")}
description={t("the_arguments_to_pass_to_the_game")}
field={field}
/>
{form.formState.errors.gameArgs && (
<P className="w-full text-right text-red-500">
{form.formState.errors.gameArgs.message}
</P>

<FormField
control={form.control}
name="gameCommand"
render={({ field }) => (
<GameFormInput
text={t("command")}
description={t("the_command_to_run_the_game_e_g_wine")}
field={field}
/>
)}
</>
)}
/>

<FormField
control={form.control}
name="gameCommand"
render={({ field }) => (
<GameFormInput
text={t("command")}
description={t("the_command_to_run_the_game_e_g_wine")}
field={field}
/>
)}
/>

<FormField
control={form.control}
name="igdbId"
render={({ field }) => (
<GameFormInput
text={t("igdb_id")}
description={t("igdb_id")}
field={field}

<FormField
control={form.control}
name="igdbId"
render={({ field }) => (
<GameFormInput
text={t("igdb_id")}
description={t("igdb_id")}
field={field}
/>
)}
/>
)}
/>

<FormField
control={form.control}
name="steamId"
render={({ field }) => (
<GameFormInput
text={t("steam_id")}
description={t("steam_id")}
field={field}

<FormField
control={form.control}
name="steamId"
render={({ field }) => (
<GameFormInput
text={t("steam_id")}
description={t("steam_id")}
field={field}
/>
)}
/>
)}
/>

<FormField
control={form.control}
name="winePrefixFolder"
render={({ field }) => (
<GameFormInput
text={t("wine_prefix_folder")}
description={t("the_path_to_your_wine_prefix_folder")}
field={field}

<FormField
control={form.control}
name="winePrefixFolder"
render={({ field }) => (
<GameFormInput
text={t("wine_prefix_folder")}
description={t("the_path_to_your_wine_prefix_folder")}
field={field}
/>
)}
/>
)}
/>
</form>

<DialogFooter className="pt-2">
<DialogClose>
<Button variant="destructive">{t("cancel")}</Button>
</DialogClose>
</form>
</ScrollArea>
</div>

<div className="flex items-center justify-end gap-2">
<Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
{loading ? `${t("updating")}...` : t("update_game")}
</Button>
</DialogFooter>
</div>
{error && <P className="w-full text-right text-red-500">{error}</P>}
</Form>
);
Expand Down

0 comments on commit 12fe9e9

Please sign in to comment.