oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

refactor: Cluster + Settings pages to use ScrollableContainer component

Browse source
This commit is contained in:
LynithDev 2024-05-17 09:25:32 +02:00
parent 99cecbdb43
commit 397b853475
4 changed files with 21 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
desktop/src/ui/components/overlay/Modal.tsx
View file

@ -62,7 +62,7 @@ function Modal(props: ModalProps) {
<div class="absolute w-full h-full" onClick={() => onBackdropClick()} />
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div class="bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-1">
<div class="bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-2">
<h2>{props.title}</h2>
<div class="flex flex-col">
{props.children}

23
desktop/src/ui/pages/cluster/ClusterMods.tsx
View file

@ -1,9 +1,9 @@
import { open } from '@tauri-apps/plugin-shell';
import { ArrowRightIcon, Edit02Icon, LinkExternal01Icon, Trash03Icon } from '@untitled-theme/icons-solid';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
import { For } from 'solid-js';
import * as uuid from 'uuid';
import Button from '~ui/components/base/Button';
import ScrollableContainer from '~ui/components/ScrollableContainer';
const mods = Array<ModEntryProps>(15).fill({
id: uuid.v4(),
@ -17,20 +17,13 @@ const mods = Array<ModEntryProps>(15).fill({
function ClusterMods() {
return (
<div class="flex flex-col flex-1">
<h1>Mods</h1>
<div class="flex flex-col flex-1 rounded-lg overflow-hidden w-[calc(100%+14px)]">
<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
<div class="flex flex-col absolute w-[calc(100%-14px)] gap-2">
<For each={mods}>
{mod => (
<ModEntry {...mod} />
)}
</For>
</div>
</OverlayScrollbarsComponent>
</div>
</div>
<ScrollableContainer title="Mods">
<For each={mods}>
{mod => (
<ModEntry {...mod} />
)}
</For>
</ScrollableContainer>
);
}

7
desktop/src/ui/pages/cluster/ClusterOverview.tsx
View file

@ -6,6 +6,7 @@ import ClusterCover from '../../components/game/ClusterCover';
import LoaderIcon from '../../components/game/LoaderIcon';
import Button from '../../components/base/Button';
import { launchCluster } from '../../../bridge/game';
import ScrollableContainer from '~ui/components/ScrollableContainer';
function ClusterOverview() {
const [params] = useSearchParams();
@ -14,13 +15,11 @@ function ClusterOverview() {
throw new Error('Cluster doesn\'t exist');
return (
<div class="flex flex-col flex-1">
<h1>Overview</h1>
<ScrollableContainer title="Overview">
<Show when={!cluster.loading}>
<Banner {...cluster()!} />
</Show>
</div>
</ScrollableContainer>
);
}

24
desktop/src/ui/pages/cluster/ClusterScreenshots.tsx
View file

@ -1,5 +1,5 @@
import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
import { For } from 'solid-js';
import ScrollableContainer from '~ui/components/ScrollableContainer';
const list = Array<Screenshot>(19).fill({
date_taken: Math.floor(Date.now() / 1000),
@ -14,21 +14,15 @@ interface Screenshot {
function ClusterScreenshots() {
return (
<div class="flex flex-col flex-1">
<h1>Screenshots</h1>
<div class="flex flex-col flex-1 rounded-lg overflow-hidden w-[calc(100%+14px)]">
<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
<div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] absolute w-[calc(100%-14px)] gap-2">
<For each={list}>
{screenshot => (
<ScreenshotEntry {...screenshot} />
)}
</For>
</div>
</OverlayScrollbarsComponent>
<ScrollableContainer title="Screenshots">
<div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] w-full gap-2">
<For each={list}>
{screenshot => (
<ScreenshotEntry {...screenshot} />
)}
</For>
</div>
</div>
</ScrollableContainer>
);
}