Skip to content

Commit 54a84c8

Browse files
SpokeekSpokeek
committed
♻️ Refactored Layout components for settings page
1 parent 9dacf6f commit 54a84c8

File tree

3 files changed

+154
-88
lines changed

3 files changed

+154
-88
lines changed

‎vrc-get-gui/app/log/page.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import {Card, Typography} from "@material-tailwind/react";
4-
import {HNavBar, VStack} from "@/components/layout";
4+
import {HContent, HNavBar, HSection, HSectionText, VStack} from "@/components/layout";
55
import React, {useEffect} from "react";
66
import {LogEntry, utilGetLogEntries} from "@/lib/bindings";
77
import {notoSansMono} from "@/app/fonts";
@@ -41,15 +41,24 @@ export default function Page() {
4141
return (
4242
<VStack className={"m-4"}>
4343
<HNavBar className={"flex-shrink-0"}>
44-
<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
44+
<Typography variant="h4" className="cursor-pointer py-1.5 font-bold flex-grow-0">
4545
{tc("logs")}
4646
</Typography>
4747
</HNavBar>
48-
<main className="flex-shrink overflow-hidden flex flex-grow">
48+
<HContent>
49+
<HSection className="overflow-x-auto">
50+
{logEntries.map((entry, i) => (
51+
<HSectionText className="text-nowrap" key={i}>
52+
{logEntryToText(entry)}
53+
</HSectionText>
54+
))}
55+
</HSection>
56+
</HContent>
57+
{/* <main className="flex-shrink overflow-hidden flex flex-grow">
4958
<Card className={`w-full overflow-x-auto overflow-y-scroll p-2 whitespace-pre ${notoSansMono.className} shadow-none`}>
50-
{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
59+
{logEntries.map((entry) => logEntryToText(entry)).join("\n")}
5160
</Card>
52-
</main>
61+
</main> */}
5362
</VStack>
5463
);
5564
}

‎vrc-get-gui/app/settings/page.tsx

Lines changed: 97 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
environmentSetShowPrereleasePackages,
1414
TauriEnvironmentSettings
1515
} from "@/lib/bindings";
16-
import {HNavBar, VStack} from "@/components/layout";
16+
import {HNavBar, VStack, HContent, HSection, HSectionTitle, HSectionRow, HSectionSubTitle, HSectionText} from "@/components/layout";
1717
import React from "react";
1818
import {toastError, toastSuccess, toastThrownError} from "@/lib/toast";
1919
import i18next, {languages, tc, tt} from "@/lib/i18n";
@@ -36,7 +36,7 @@ export default function Page() {
3636
body = <Card className={"p-4"}>{tc("loading...")}</Card>;
3737
break;
3838
case "success":
39-
body = <Settings settings={result.data} refetch={result.refetch}/>;
39+
body = <Settings settings={result.data} refetch={result.refetch} />
4040
break;
4141
default:
4242
const _exhaustiveCheck: never = result;
@@ -45,11 +45,13 @@ export default function Page() {
4545
return (
4646
<VStack className={"p-4"}>
4747
<HNavBar className={"flex-shrink-0"}>
48-
<Typography className="cursor-pointer py-1.5 font-bold flex-grow-0">
48+
<Typography variant="h4" className="cursor-pointer py-1.5 font-bold flex-grow-0">
4949
{tc("settings")}
5050
</Typography>
5151
</HNavBar>
52-
{body}
52+
<HContent>
53+
{body}
54+
</HContent>
5355
</VStack>
5456
);
5557
}
@@ -191,103 +193,116 @@ function Settings(
191193
};
192194

193195
return (
194-
<main className="flex flex-col gap-2 flex-shrink overflow-y-auto flex-grow">
195-
<Card className={"flex-shrink-0 p-4"}>
196-
<h2 className={"pb-2"}>{tc("unity hub")}</h2>
197-
<div className={"flex gap-1"}>
198-
{
199-
settings.unity_hub
200-
? <Input className="flex-auto" value={settings.unity_hub} disabled/>
201-
: <Input value={"Unity Hub Not Found"} disabled className={"flex-auto text-red-900"}/>
202-
}
196+
<>
197+
<HSection>
198+
<HSectionTitle>{tc("unity hub")}</HSectionTitle>
199+
<HSectionRow>
200+
{
201+
settings.unity_hub
202+
? <Input className="flex-auto" value={settings.unity_hub} disabled/>
203+
: <Input value={"Unity Hub Not Found"} disabled className={"flex-auto text-red-900"}/>
204+
}
203205
<Button className={"flex-none px-4"} onClick={selectUnityHub}>{tc("select")}</Button>
204-
</div>
205-
</Card>
206-
<Card className={"flex-shrink-0 p-4"}>
207-
<div className={"pb-2 flex align-middle"}>
208-
<div className={"flex-grow flex items-center"}>
209-
<h2>{tc("unity installations")}</h2>
210-
</div>
206+
</HSectionRow>
207+
</HSection>
208+
<HSection>
209+
<HSectionRow>
210+
<HSectionTitle className="flex-grow">{tc("unity installations")}</HSectionTitle>
211211
<Button onClick={addUnity} size={"sm"} className={"m-1"}>{tc("add unity")}</Button>
212-
</div>
213-
<Card className="w-full overflow-x-auto overflow-y-scroll min-h-[20vh]">
214-
<UnityTable unityPaths={settings.unity_paths}/>
215-
</Card>
216-
</Card>
217-
<Card className={"flex-shrink-0 p-4"}>
218-
<h2>{tc("default project path")}</h2>
219-
<Typography className={"whitespace-normal"}>
212+
</HSectionRow>
213+
<HSectionRow>
214+
<Card className="w-full overflow-x-auto overflow-y-scroll min-h-[20vh]">
215+
<UnityTable unityPaths={settings.unity_paths}/>
216+
</Card>
217+
</HSectionRow>
218+
</HSection>
219+
<HSection>
220+
<HSectionTitle>
221+
{tc("default project path")}
222+
</HSectionTitle>
223+
<HSectionSubTitle>
220224
{tc("the default project path is the directory where new projects are created in.")}
221-
</Typography>
222-
<div className={"flex gap-1"}>
225+
</HSectionSubTitle>
226+
<HSectionRow>
223227
<Input className="flex-auto" value={settings.default_project_path} disabled/>
224228
<Button className={"flex-none px-4"} onClick={selectProjectDefaultFolder}>{tc("select")}</Button>
225-
</div>
226-
</Card>
227-
<Card className={"flex-shrink-0 p-4"}>
228-
<h2>{tc("backup")}</h2>
229-
<div className="mt-2">
230-
<h3>{tc("backup path")}</h3>
231-
<Typography className={"whitespace-normal"}>
232-
{tc("the backup path is the directory where alcom will create backup zips of the projects.")}
233-
</Typography>
234-
<div className={"flex gap-1"}>
235-
<Input className="flex-auto" value={settings.project_backup_path} disabled/>
236-
<Button className={"flex-none px-4"} onClick={selectProjectBackupFolder}>{tc("select")}</Button>
237-
</div>
238-
</div>
239-
<div className="mt-2">
240-
<label className={"flex items-center"}>
241-
<h3>{tc("backup archive format:")}</h3>
242-
<VGSelect value={tc("backup_format:" + settings.backup_format)} onChange={setBackupFormat}>
243-
<VGOption value={"default"}>{tc("backup_format:default")}</VGOption>
244-
<VGOption value={"zip-store"}>{tc("backup_format:zip-store")}</VGOption>
245-
<VGOption value={"zip-fast"}>{tc("backup_format:zip-fast")}</VGOption>
246-
<VGOption value={"zip-best"}>{tc("backup_format:zip-best")}</VGOption>
247-
</VGSelect>
248-
</label>
249-
</div>
250-
</Card>
251-
<Card className={"flex-shrink-0 p-4"}>
252-
<Typography className={"whitespace-normal"}>
229+
</HSectionRow>
230+
</HSection>
231+
<HSection>
232+
<HSectionTitle>
233+
{tc("backup")}
234+
</HSectionTitle>
235+
<HSectionSubTitle>
236+
{tc("backup path")}
237+
</HSectionSubTitle>
238+
<HSectionText>
239+
{tc("the backup path is the directory where alcom will create backup zips of the projects.")}
240+
</HSectionText>
241+
<HSectionRow>
242+
<Input className="flex-auto" value={settings.project_backup_path} disabled/>
243+
<Button className={"flex-none px-4"} onClick={selectProjectBackupFolder}>{tc("select")}</Button>
244+
</HSectionRow>
245+
<HSectionRow>
246+
<HSectionSubTitle>
247+
{tc("Backup archive format")} :
248+
</HSectionSubTitle>
249+
<VGSelect value={tc("backup_format:" + settings.backup_format)} onChange={setBackupFormat}>
250+
<VGOption value={"default"}>{tc("backup_format:default")}</VGOption>
251+
<VGOption value={"zip-store"}>{tc("backup_format:zip-store")}</VGOption>
252+
<VGOption value={"zip-fast"}>{tc("backup_format:zip-fast")}</VGOption>
253+
<VGOption value={"zip-best"}>{tc("backup_format:zip-best")}</VGOption>
254+
</VGSelect>
255+
</HSectionRow>
256+
</HSection>
257+
<HSection>
258+
<HSectionTitle>
259+
{tc("Prerelease packages")}
260+
</HSectionTitle>
261+
<HSectionText>
253262
{tc("description for show prerelease packages")}
254-
</Typography>
255-
<label className={"flex items-center"}>
263+
</HSectionText>
264+
<HSectionRow>
256265
<Checkbox checked={settings.show_prerelease_packages} onChange={toggleShowPrereleasePackages}/>
257266
{tc("show prerelease packages")}
258-
</label>
259-
</Card>
260-
<Card className={"flex-shrink-0 p-4"}>
261-
<label className={"flex items-center"}>
262-
<h2>{tc("language")}: </h2>
267+
</HSectionRow>
268+
</HSection>
269+
<HSection>
270+
<HSectionTitle>
271+
{tc("language")}
272+
</HSectionTitle>
273+
<HSectionRow>
263274
<VGSelect value={tc("langName")} onChange={changeLanguage} menuClassName={"w-96"}>
264275
{
265276
languages.map((lang) => (
266277
<VGOption key={lang} value={lang}>{tc("langName", {lng: lang})}</VGOption>
267278
))
268279
}
269280
</VGSelect>
270-
</label>
271-
</Card>
272-
{unityDialog}
273-
{unityHubDialog}
274-
{projectDefaultDialog}
275-
{projectBackupDialog}
276-
<Card className={"flex-shrink-0 p-4"}>
277-
<h2>{tc("check for updates")}</h2>
278-
<div>
281+
</HSectionRow>
282+
</HSection>
283+
<HSection>
284+
<HSectionTitle>
285+
{tc("check for updates")}
286+
</HSectionTitle>
287+
<HSectionRow>
279288
<Button onClick={() => emit("tauri://update")}>{tc("check for updates")}</Button>
280-
</div>
281-
</Card>
282-
<Card className={"flex-shrink-0 p-4"}>
283-
<h2>{tc("licenses")}</h2>
284-
<Typography className={"whitespace-normal"}>
289+
</HSectionRow>
290+
</HSection>
291+
<HSection>
292+
<HSectionTitle>
293+
{tc("licenses")}
294+
</HSectionTitle>
295+
<HSectionText>
285296
{tc("click <l>here</l> to view licenses of the projects used in alcom", {}, {
286297
components: {l: <Link href={"/settings/licenses"} className={"underline"}/>}
287298
})}
288-
</Typography>
289-
</Card>
290-
</main>
299+
</HSectionText>
300+
</HSection>
301+
{unityDialog}
302+
{unityHubDialog}
303+
{projectDefaultDialog}
304+
{projectBackupDialog}
305+
</>
291306
)
292307
}
293308

‎vrc-get-gui/components/layout.tsx

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client"
22

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

66
export function VStack({className, children}: { className?: string, children: React.ReactNode }) {
77
return (
@@ -20,3 +20,45 @@ export function HNavBar({className, children}: { className?: string, children: R
2020
</Navbar>
2121
)
2222
}
23+
24+
export function HContent({className, children}: { className?: string, children: React.ReactNode }) {
25+
return (
26+
<div className={"flex flex-col gap-2 flex-shrink overflow-y-auto flex-grow " + className}>
27+
{children}
28+
</div>
29+
)
30+
}
31+
32+
export function HSection({className, children}: { className?: string, children: React.ReactNode }) {
33+
return (
34+
<Card className={"p-4 flex flex-col gap-2 " + className}>
35+
{children}
36+
</Card>
37+
)
38+
}
39+
40+
export function HSectionRow({className, children}: { className?: string, children: React.ReactNode }) {
41+
return (
42+
<div className={"flex gap-1 items-center " + className}>
43+
{children}
44+
</div>
45+
)
46+
}
47+
48+
export function HSectionTitle({className, children}: { className?: string, children: React.ReactNode }) {
49+
return (
50+
<Typography variant="h4" className={"block text-wrap " + className}>{children}</Typography>
51+
)
52+
}
53+
54+
export function HSectionSubTitle({className, children}: { className?: string, children: React.ReactNode }) {
55+
return (
56+
<Typography variant="h5" className={"block font-normal text-wrap " + className}>{children}</Typography>
57+
)
58+
}
59+
60+
export function HSectionText({className, children}: { className?: string, children: React.ReactNode }) {
61+
return (
62+
<Typography variant="paragraph" className={"block text-wrap " + className}>{children}</Typography>
63+
)
64+
}

0 commit comments

Comments
 (0)