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

feat: Cluster mods list

Browse source
This commit is contained in:
LynithDev 2024-05-13 21:25:45 +02:00
parent 9105590e27
commit d4f1b8c70e
16 changed files with 135 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
desktop/src-tauri/capabilities/default.json
View file

@ -12,6 +12,7 @@
"window:allow-destroy",
"window:allow-start-dragging",
"window:allow-minimize",
"event:default"
"event:default",
"shell:allow-open"
]
}

15
desktop/src/globals.css
View file

@ -27,9 +27,16 @@ h4 { @apply text-lg font-medium; }
.os-scrollbar {
--os-size: 10px;
--os-track-border-radius: theme(borderRadius.lg);
/* --os-handle-bg: theme("colors.gray[0.05]");
--os-handle-bg-hover: theme(colors.gray[0.10]); */
/* --os-handle-bg-active: theme(colors.gray[0.05]); */
--os-handle-bg: rgba(255, 255, 255, 0.05);
--os-handle-bg-hover: rgba(255, 255, 255, 0.10);
--os-handle-bg-active: rgba(255, 255, 255, 0.07);
--os-handle-perpendicular-size-hover: 140%;
--os-handle-perpendicular-size-active: 140%;
--os-handle-interactive-area-offset: 1;
}
.os-scrollbar-offset-right {
--os-padding-axis: 10;
}
.os-hide-horizontal-scrollbar > .os-scrollbar-horizontal {
@ -37,7 +44,7 @@ h4 { @apply text-lg font-medium; }
}
.page-animation-enter-active, .page-animation-leave-active {
transition: opacity 200ms, transform 250ms;
transition: opacity 160ms, transform 175ms;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

4
desktop/src/ui/App.tsx
View file

@ -14,7 +14,7 @@ function App(props: ParentProps) {
}
return (
<main class="flex flex-col bg-primary w-full min-h-screen overflow-hidden h-screen max-h-screen text-fg-primary">
<main class="flex flex-col bg-primary w-full min-h-screen overflow-hidden h-screen max-h-screen text-fg-primary">
<ErrorBoundary><WindowFrame /></ErrorBoundary>
<div class="flex flex-col px-8">
<Navbar />
@ -35,4 +35,4 @@ function App(props: ParentProps) {
);
}
export default App;
export default App;

2
desktop/src/ui/components/Sidebar.tsx
View file

@ -48,7 +48,7 @@ function Sidebar(props: SidebarProps) {
<a
onClick={() => goto(link[2])}
class={
`px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-0.05' : ''}`
`px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
}
>
<span class="flex flex-row items-center gap-x-3 *:w-5">

10
desktop/src/ui/components/base/Button.module.scss
View file

@ -6,8 +6,8 @@
@apply bg-brand hover:bg-brand-hover active:bg-brand-pressed disabled:bg-brand-disabled;
}
&__secondary {
@apply border border-gray-0.05;
&__secondary, &__iconSecondary {
@apply border border-gray-05;
@apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
@apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
}
@ -17,11 +17,11 @@
}
&__ghost {
@apply hover:bg-gray-0.05 active:bg-gray-0.10;
@apply hover:bg-gray-05 active:bg-gray-10;
}
&__icon {
@apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border w-8 h-8;
&__icon, &__iconSecondary {
@apply p-1.5 hover:bg-gray-05 active:bg-gray-10 aspect-square box-border w-8 h-8;
&.large {
@apply w-9 h-9;

2
desktop/src/ui/components/base/Button.tsx
View file

@ -5,7 +5,7 @@ import styles from './Button.module.scss';
type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & ParentProps & {
iconLeft?: JSX.Element;
iconRight?: JSX.Element;
buttonStyle?: 'primary' | 'secondary' | 'danger' | 'icon' | 'ghost';
buttonStyle?: 'primary' | 'secondary' | 'danger' | 'icon' | 'iconSecondary' | 'ghost';
large?: boolean;
};

2
desktop/src/ui/components/base/Tag.module.scss
View file

@ -1,6 +1,6 @@
.tag {
@apply flex flex-row justify-center items-center gap-x-2;
@apply bg-component-bg/60 border border-gray-0.05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
@apply bg-component-bg/60 border border-gray-05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
}
.icon > * {

2
desktop/src/ui/components/base/TextField.module.scss
View file

@ -1,6 +1,6 @@
.textfield {
@apply bg-component-bg [&:not(:focus-within)]:hover:bg-component-bg-hover focus-within:bg-component-bg-pressed disabled:bg-component-bg-disabled;
@apply border border-gray-0.05 text-fg-primary fill-fg-primary;
@apply border border-gray-05 text-fg-primary fill-fg-primary;
@apply rounded-lg px-2.5 py-1.5;
@apply flex flex-row gap-x-1.5;

8
desktop/src/ui/components/overlay/AccountPopup.tsx
View file

@ -12,7 +12,7 @@ interface AccountComponentProps {
function AccountComponent(props: AccountComponentProps) {
return (
<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-0.05 active:bg-gray-0.10 hover:text-fg-primary-hover'}`}>
<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-05 active:bg-gray-10 hover:text-fg-primary-hover'}`}>
<div class="flex flex-row justify-start flex-1 gap-x-3">
<PlayerHead class="w-8 h-8 rounded-md" uuid={props.uuid} />
<div class="flex flex-col items-center justify-center">
@ -36,17 +36,17 @@ function AccountPopup(props: Popup.PopupProps) {
return (
<Popup {...props}>
<div class="bg-secondary rounded-xl border border-gray-0.10 w-72 p-2 shadow-lg shadow-black/50">
<div class="bg-secondary rounded-xl border border-gray-10 w-72 p-2 shadow-lg shadow-black/50">
<div class="flex flex-col gap-y-2 text-fg-primary">
<AccountComponent username={loggedInAccount.username} uuid={loggedInAccount.uuid} loggedIn />
<div class="w-full h-px bg-gray-0.05 rounded-md" />
<div class="w-full h-px bg-gray-05 rounded-md" />
<AccountComponent username="Caledonian" uuid="f247be7c5b8241c69148793ded77e71f" />
<AccountComponent username="Caledonian" uuid="069a79f4-44e9-4726-a5be-fca90e38aaf5" />
<AccountComponent username="Caledonian" uuid="f247be7c5b8241c69148793ded77e71f" />
<div class="w-full h-px bg-gray-0.05 rounded-md" />
<div class="w-full h-px bg-gray-05 rounded-md" />
<div class="flex flex-row justify-between">
<div>

6
desktop/src/ui/components/overlay/ContextMenu.tsx
View file

@ -36,7 +36,7 @@ function ContextMenu(props: ContextMenuProps) {
visible={props.visible}
setVisible={props.setVisible}
>
<div ref={setRef} class="bg-secondary rounded-xl border border-gray-0.10 p-1 shadow-lg shadow-black/50">
<div ref={setRef} class="bg-secondary rounded-xl border border-gray-10 p-1 shadow-lg shadow-black/50">
<div class="flex flex-col gap-y-1 text-fg-primary">
{props.children}
</div>
@ -46,7 +46,7 @@ function ContextMenu(props: ContextMenuProps) {
}
ContextMenu.Seperator = function () {
return <div class="border-b mx-1 border-gray-0.05" />;
return <div class="border-b mx-1 border-gray-05" />;
};
interface ContextMenuRowProps {
@ -59,7 +59,7 @@ ContextMenu.Row = function (props: ContextMenuRowProps) {
return (
<div
onClick={e => props.onClick?.(e)}
class="flex items-center gap-x-2 m-px px-1.5 py-0.5 rounded-lg hover:bg-gray-0.05 active:bg-gray-0.10 [&>svg]:w-[18px]"
class="flex items-center gap-x-2 m-px px-1.5 py-0.5 rounded-lg hover:bg-gray-05 active:bg-gray-10 [&>svg]:w-[18px]"
>
{props.icon}
{props.text}

6
desktop/src/ui/components/overlay/notifications/NotificationPopup.tsx
View file

@ -46,7 +46,7 @@ function NotificationPopup(props: Popup.PopupProps) {
return (
<Popup {...props}>
<div class="bg-secondary rounded-xl border border-gray-0.10 w-96 p-2 shadow-lg shadow-black/50">
<div class="bg-secondary rounded-xl border border-gray-10 w-96 p-2 shadow-lg shadow-black/50">
<div class="overflow-hidden transition-[height]" ref={parent}>
<div class="flex flex-col justify-start items-stretch text-start gap-2" ref={inner}>
<p class="text-2lg px-2 pt-1">Notifications</p>
@ -59,7 +59,7 @@ function NotificationPopup(props: Popup.PopupProps) {
{noti => (
<div class="flex flex-col w-full">
<NotificationComponent data={noti} overlay={false} />
<span class="bg-gray-0.05 h-px w-full" />
<span class="bg-gray-05 h-px w-full" />
</div>
)}
</For>
@ -68,7 +68,7 @@ function NotificationPopup(props: Popup.PopupProps) {
</Match>
<Match when={notifications().length === 0}>
<span class="px-2">You have no notifications</span>
<span class="bg-gray-0.05 h-px" />
<span class="bg-gray-05 h-px" />
</Match>
</Switch>

2
desktop/src/ui/pages/Home.tsx
View file

@ -135,7 +135,7 @@ function ClusterCard(props: Core.ClusterWithManifest) {
onMouseDown={e => onMouseDown(e)}
onContextMenu={e => openContextMenu(e)}
ref={ref}
class="relative h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-0.05"
class="relative h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-05"
>
<div class="flex-1 relative overflow-hidden rounded-t-xl">
<div

2
desktop/src/ui/pages/cluster/ClusterLogs.tsx
View file

@ -36,7 +36,7 @@ function ClusterLogs() {
const pretty = log.split('/').pop();
return (
<button
class={`border border-gray-0.10 rounded-md px-2 py-1 ${activeLogFile() === log ? 'bg-gray-0.10' : ''}`}
class={`border border-gray-10 rounded-md px-2 py-1 ${activeLogFile() === log ? 'bg-gray-10' : ''}`}
onClick={() => setActiveLogFile(log)}
children={pretty}
/>

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

@ -1,9 +1,94 @@
import { open } from '@tauri-apps/plugin-shell';
import { ArrowRightIcon, Edit02Icon, LinkExternal01Icon, Trash03Icon } from '@untitled-theme/icons-solid';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
import { For, Show } from 'solid-js';
import * as uuid from 'uuid';
import Button from '~ui/components/base/Button';
const mods = Array<ModEntryProps>(15).fill({
id: uuid.v4(),
name: 'Mod Name',
author: 'Author Name',
version: '1.0.0',
description: 'This is a mod description',
provider: 'curseforge',
thumbnail: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
});
function ClusterMods() {
return (
<div>
<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>
);
}
export default ClusterMods;
// TODO: Mod
interface ModEntryProps {
id: string;
thumbnail: string;
name: string;
author: string;
version: string;
description: string;
provider: 'curseforge' | 'modrinth' | 'polyfrost';
};
function ModEntry(props: ModEntryProps) {
return (
<div class="bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed p-3 gap-3 rounded-xl flex flex-row items-center">
<div>
<img src={props.thumbnail} alt={props.name} class="aspect-ratio-square h-10 rounded-lg" />
</div>
<div class="flex flex-col flex-1">
<div class="flex flex-row justify-between items-center">
<div class="flex flex-col items-start justify-center">
<div class="flex flex-row items-center">
<h3>{props.name}</h3>
<span class="flex flex-row items-center text-sm font-600 text-fg-secondary/50 ml-2">
{props.version}
{/* TODO: Add version checker */}
{/* <Show when={props.version.includes()}> */}
<ArrowRightIcon class="w-4 stroke-success" />
<span class="text-success">1.0.1</span>
{/* </Show> */}
</span>
</div>
<span class="flex flex-row text-xs -mb-1 gap-1 items-center text-fg-secondary opacity-50">
by
{/* TODO: Implement prompt */}
<a onClick={() => open('https://google.com/')} class="text-fg-primary hover:opacity-70 flex flex-row gap-1 items-center">
{props.author}
<LinkExternal01Icon class="w-3" />
</a>
</span>
</div>
<div class="flex flex-row gap-2 items-end justify-center">
<Button buttonStyle="iconSecondary">
<Edit02Icon />
</Button>
<Button buttonStyle="iconSecondary">
<Trash03Icon class="!stroke-danger" />
</Button>
</div>
</div>
</div>
</div>
);
}

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

@ -28,7 +28,7 @@ function ClusterOverview() {
function Banner({ cluster, manifest }: Core.ClusterWithManifest) {
return (
<div class="flex flex-row bg-component-bg rounded-xl p-2.5 gap-x-2.5">
<div class="w-48 rounded-lg overflow-hidden border border-gray-0.10">
<div class="w-48 rounded-lg overflow-hidden border border-gray-10">
<ClusterCover cluster={cluster} />
</div>
@ -50,10 +50,10 @@ function Banner({ cluster, manifest }: Core.ClusterWithManifest) {
</span>
</div>
<div class="flex flex-row items-end gap-x-2.5 *:h-8 *:w-8">
<div class="flex flex-row items-end gap-x-2.5 *:h-8">
<Button
buttonStyle="secondary"
iconLeft={<Share07Icon />}
buttonStyle="iconSecondary"
children={<Share07Icon />}
/>
<Button
buttonStyle="primary"

11
desktop/uno.config.ts
View file

@ -43,8 +43,8 @@ export default defineConfig({
black: '#000000',
gray: {
'0.05': '#FFFFFF0D',
'0.10': '#FFFFFF1A',
'05': '#FFFFFF0D',
'10': '#FFFFFF1A',
},
fg: {
@ -83,6 +83,13 @@ export default defineConfig({
disabled: '#FF444480',
},
success: {
DEFAULT: '#239A60',
hover: '#1A8752',
pressed: '#2CAC6E',
disabled: '#239A6080',
},
component: {
bg: {
DEFAULT: '#1A2229',