Skip to content

Commit

Permalink
♻️ Refactored Layout components for settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spokeek
Spokeek committed Apr 19, 2024
1 parent 9dacf6f commit 54a84c8
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 88 deletions.
19 changes: 14 additions & 5 deletions vrc-get-gui/app/log/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import {Card, Typography} from "@material-tailwind/react";
import {HNavBar, VStack} from "@/components/layout";
import {HContent, HNavBar, HSection, HSectionText, VStack} from "@/components/layout";
import React, {useEffect} from "react";
import {LogEntry, utilGetLogEntries} from "@/lib/bindings";
import {notoSansMono} from "@/app/fonts";
Expand Down Expand Up @@ -41,15 +41,24 @@ export default function Page() {
return (
<VStack className={"m-4"}>
<HNavBar className={"flex-shrink-0"}>
<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
<Typography variant="h4" className="cursor-pointer py-1.5 font-bold flex-grow-0">
{tc("logs")}
</Typography>
</HNavBar>
<main className="flex-shrink overflow-hidden flex flex-grow">
<HContent>
<HSection className="overflow-x-auto">
{logEntries.map((entry, i) => (
<HSectionText className="text-nowrap" key={i}>
{logEntryToText(entry)}
</HSectionText>
))}
</HSection>
</HContent>
{/* <main className="flex-shrink overflow-hidden flex flex-grow">
<Card className={`w-full overflow-x-auto overflow-y-scroll p-2 whitespace-pre ${notoSansMono.className} shadow-none`}>
{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
</Card>
</main>
</main> */}
</VStack>
);
}
Expand Down
179 changes: 97 additions & 82 deletions vrc-get-gui/app/settings/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
environmentSetShowPrereleasePackages,
TauriEnvironmentSettings
} from "@/lib/bindings";
import {HNavBar, VStack} from "@/components/layout";
import {HNavBar, VStack, HContent, HSection, HSectionTitle, HSectionRow, HSectionSubTitle, HSectionText} from "@/components/layout";
import React from "react";
import {toastError, toastSuccess, toastThrownError} from "@/lib/toast";
import i18next, {languages, tc, tt} from "@/lib/i18n";
Expand All @@ -36,7 +36,7 @@ export default function Page() {
body = <Card className={"p-4"}>{tc("loading...")}</Card>;
break;
case "success":
body = <Settings settings={result.data} refetch={result.refetch}/>;
body = <Settings settings={result.data} refetch={result.refetch} />
break;
default:
const _exhaustiveCheck: never = result;
Expand All @@ -45,11 +45,13 @@ export default function Page() {
return (
<VStack className={"p-4"}>
<HNavBar className={"flex-shrink-0"}>
<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
<Typography variant="h4" className="cursor-pointer py-1.5 font-bold flex-grow-0">
{tc("settings")}
</Typography>
</HNavBar>
{body}
<HContent>
{body}
</HContent>
</VStack>
);
}
Expand Down Expand Up @@ -191,103 +193,116 @@ function Settings(
};

return (
<main className="flex flex-col gap-2 flex-shrink overflow-y-auto flex-grow">
<Card className={"flex-shrink-0 p-4"}>
<h2 className={"pb-2"}>{tc("unity hub")}</h2>
<div className={"flex gap-1"}>
{
settings.unity_hub
? <Input className="flex-auto" value={settings.unity_hub} disabled/>
: <Input value={"Unity Hub Not Found"} disabled className={"flex-auto text-red-900"}/>
}
<>
<HSection>
<HSectionTitle>{tc("unity hub")}</HSectionTitle>
<HSectionRow>
{
settings.unity_hub
? <Input className="flex-auto" value={settings.unity_hub} disabled/>
: <Input value={"Unity Hub Not Found"} disabled className={"flex-auto text-red-900"}/>
}
<Button className={"flex-none px-4"} onClick={selectUnityHub}>{tc("select")}</Button>
</div>
</Card>
<Card className={"flex-shrink-0 p-4"}>
<div className={"pb-2 flex align-middle"}>
<div className={"flex-grow flex items-center"}>
<h2>{tc("unity installations")}</h2>
</div>
</HSectionRow>
</HSection>
<HSection>
<HSectionRow>
<HSectionTitle className="flex-grow">{tc("unity installations")}</HSectionTitle>
<Button onClick={addUnity} size={"sm"} className={"m-1"}>{tc("add unity")}</Button>
</div>
<Card className="w-full overflow-x-auto overflow-y-scroll min-h-[20vh]">
<UnityTable unityPaths={settings.unity_paths}/>
</Card>
</Card>
<Card className={"flex-shrink-0 p-4"}>
<h2>{tc("default project path")}</h2>
<Typography className={"whitespace-normal"}>
</HSectionRow>
<HSectionRow>
<Card className="w-full overflow-x-auto overflow-y-scroll min-h-[20vh]">
<UnityTable unityPaths={settings.unity_paths}/>
</Card>
</HSectionRow>
</HSection>
<HSection>
<HSectionTitle>
{tc("default project path")}
</HSectionTitle>
<HSectionSubTitle>
{tc("the default project path is the directory where new projects are created in.")}
</Typography>
<div className={"flex gap-1"}>
</HSectionSubTitle>
<HSectionRow>
<Input className="flex-auto" value={settings.default_project_path} disabled/>
<Button className={"flex-none px-4"} onClick={selectProjectDefaultFolder}>{tc("select")}</Button>
</div>
</Card>
<Card className={"flex-shrink-0 p-4"}>
<h2>{tc("backup")}</h2>
<div className="mt-2">
<h3>{tc("backup path")}</h3>
<Typography className={"whitespace-normal"}>
{tc("the backup path is the directory where alcom will create backup zips of the projects.")}
</Typography>
<div className={"flex gap-1"}>
<Input className="flex-auto" value={settings.project_backup_path} disabled/>
<Button className={"flex-none px-4"} onClick={selectProjectBackupFolder}>{tc("select")}</Button>
</div>
</div>
<div className="mt-2">
<label className={"flex items-center"}>
<h3>{tc("backup archive format:")}</h3>
<VGSelect value={tc("backup_format:" + settings.backup_format)} onChange={setBackupFormat}>
<VGOption value={"default"}>{tc("backup_format:default")}</VGOption>
<VGOption value={"zip-store"}>{tc("backup_format:zip-store")}</VGOption>
<VGOption value={"zip-fast"}>{tc("backup_format:zip-fast")}</VGOption>
<VGOption value={"zip-best"}>{tc("backup_format:zip-best")}</VGOption>
</VGSelect>
</label>
</div>
</Card>
<Card className={"flex-shrink-0 p-4"}>
<Typography className={"whitespace-normal"}>
</HSectionRow>
</HSection>
<HSection>
<HSectionTitle>
{tc("backup")}
</HSectionTitle>
<HSectionSubTitle>
{tc("backup path")}
</HSectionSubTitle>
<HSectionText>
{tc("the backup path is the directory where alcom will create backup zips of the projects.")}
</HSectionText>
<HSectionRow>
<Input className="flex-auto" value={settings.project_backup_path} disabled/>
<Button className={"flex-none px-4"} onClick={selectProjectBackupFolder}>{tc("select")}</Button>
</HSectionRow>
<HSectionRow>
<HSectionSubTitle>
{tc("Backup archive format")} :
</HSectionSubTitle>
<VGSelect value={tc("backup_format:" + settings.backup_format)} onChange={setBackupFormat}>
<VGOption value={"default"}>{tc("backup_format:default")}</VGOption>
<VGOption value={"zip-store"}>{tc("backup_format:zip-store")}</VGOption>
<VGOption value={"zip-fast"}>{tc("backup_format:zip-fast")}</VGOption>
<VGOption value={"zip-best"}>{tc("backup_format:zip-best")}</VGOption>
</VGSelect>
</HSectionRow>
</HSection>
<HSection>
<HSectionTitle>
{tc("Prerelease packages")}
</HSectionTitle>
<HSectionText>
{tc("description for show prerelease packages")}
</Typography>
<label className={"flex items-center"}>
</HSectionText>
<HSectionRow>
<Checkbox checked={settings.show_prerelease_packages} onChange={toggleShowPrereleasePackages}/>
{tc("show prerelease packages")}
</label>
</Card>
<Card className={"flex-shrink-0 p-4"}>
<label className={"flex items-center"}>
<h2>{tc("language")}: </h2>
</HSectionRow>
</HSection>
<HSection>
<HSectionTitle>
{tc("language")}
</HSectionTitle>
<HSectionRow>
<VGSelect value={tc("langName")} onChange={changeLanguage} menuClassName={"w-96"}>
{
languages.map((lang) => (
<VGOption key={lang} value={lang}>{tc("langName", {lng: lang})}</VGOption>
))
}
</VGSelect>
</label>
</Card>
{unityDialog}
{unityHubDialog}
{projectDefaultDialog}
{projectBackupDialog}
<Card className={"flex-shrink-0 p-4"}>
<h2>{tc("check for updates")}</h2>
<div>
</HSectionRow>
</HSection>
<HSection>
<HSectionTitle>
{tc("check for updates")}
</HSectionTitle>
<HSectionRow>
<Button onClick={() => emit("tauri://update")}>{tc("check for updates")}</Button>
</div>
</Card>
<Card className={"flex-shrink-0 p-4"}>
<h2>{tc("licenses")}</h2>
<Typography className={"whitespace-normal"}>
</HSectionRow>
</HSection>
<HSection>
<HSectionTitle>
{tc("licenses")}
</HSectionTitle>
<HSectionText>
{tc("click <l>here</l> to view licenses of the projects used in alcom", {}, {
components: {l: <Link href={"/settings/licenses"} className={"underline"}/>}
})}
</Typography>
</Card>
</main>
</HSectionText>
</HSection>
{unityDialog}
{unityHubDialog}
{projectDefaultDialog}
{projectBackupDialog}
</>
)
}

Expand Down
44 changes: 43 additions & 1 deletion vrc-get-gui/components/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client"

import React from "react";
import {Navbar} from "@material-tailwind/react";
import {Navbar, Card, Typography} from "@material-tailwind/react";

export function VStack({className, children}: { className?: string, children: React.ReactNode }) {
return (
Expand All @@ -20,3 +20,45 @@ export function HNavBar({className, children}: { className?: string, children: R
</Navbar>
)
}

export function HContent({className, children}: { className?: string, children: React.ReactNode }) {
return (
<div className={"flex flex-col gap-2 flex-shrink overflow-y-auto flex-grow " + className}>
{children}
</div>
)
}

export function HSection({className, children}: { className?: string, children: React.ReactNode }) {
return (
<Card className={"p-4 flex flex-col gap-2 " + className}>
{children}
</Card>
)
}

export function HSectionRow({className, children}: { className?: string, children: React.ReactNode }) {
return (
<div className={"flex gap-1 items-center " + className}>
{children}
</div>
)
}

export function HSectionTitle({className, children}: { className?: string, children: React.ReactNode }) {
return (
<Typography variant="h4" className={"block text-wrap " + className}>{children}</Typography>
)
}

export function HSectionSubTitle({className, children}: { className?: string, children: React.ReactNode }) {
return (
<Typography variant="h5" className={"block font-normal text-wrap " + className}>{children}</Typography>
)
}

export function HSectionText({className, children}: { className?: string, children: React.ReactNode }) {
return (
<Typography variant="paragraph" className={"block text-wrap " + className}>{children}</Typography>
)
}

0 comments on commit 54a84c8

Please sign in to comment.