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

feat: Added custom scrollbar

Browse source
This commit is contained in:
LynithDev 2024-03-17 12:51:37 +01:00
parent 00bc9361fb
commit f699125c7c
13 changed files with 65 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
index.html
View file

@ -1,17 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
<title>Polyfrost Launcher</title>
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
<title>Polyfrost Launcher</title>
</head>
<body>
<noscript>JavaScript is disabled, please contact support at polyfrost.org/discord!</noscript>
<div id="root" />
<body>
<noscript>JavaScript is disabled, please contact support at polyfrost.org/discord!</noscript>
<div id="root" />
<script src="/src/index.tsx" type="module"></script>
</body>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

2
package.json
View file

@ -19,6 +19,8 @@
"@tauri-apps/api": "2.0.0-beta.5",
"@tauri-apps/plugin-shell": "2.0.0-beta.2",
"@untitled-theme/icons-solid": "^0.6.0",
"overlayscrollbars": "^2.6.1",
"overlayscrollbars-solid": "^0.5.3",
"solid-js": "^1.8.15",
"solid-transition-group": "^0.2.3",
"uuid": "^9.0.1"

20
pnpm-lock.yaml generated
View file

@ -20,6 +20,12 @@ dependencies:
'@untitled-theme/icons-solid':
specifier: ^0.6.0
version: 0.6.0(solid-js@1.8.15)
overlayscrollbars:
specifier: ^2.6.1
version: 2.6.1
overlayscrollbars-solid:
specifier: ^0.5.3
version: 0.5.3(overlayscrollbars@2.6.1)(solid-js@1.8.15)
solid-js:
specifier: ^1.8.15
version: 1.8.15
@ -3834,6 +3840,20 @@ packages:
type-check: 0.4.0
dev: true
/overlayscrollbars-solid@0.5.3(overlayscrollbars@2.6.1)(solid-js@1.8.15):
resolution: {integrity: sha512-KVTmdyeDctH6eAsagSw3c0LDG6cGmVxES6cBFQT6BxBP0zhWLccSZQaSIXAZP91JIcicWUxRxPmqaJf50SOugA==}
peerDependencies:
overlayscrollbars: ^2.0.0
solid-js: ^1.7.0
dependencies:
overlayscrollbars: 2.6.1
solid-js: 1.8.15
dev: false
/overlayscrollbars@2.6.1:
resolution: {integrity: sha512-V+ZAqWMYMyGBJNRDEcdRC7Ch+WT9RBx9hY8bfJSMyFObQeJoecs1Vqg7ZAzBVcpN6sCUXFAZldCbeySwmmD0RA==}
dev: false
/p-limit@2.3.0:
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
engines: {node: '>=6'}

3
src/fonts.ts → src/global_assets.ts
View file

@ -1,3 +1,6 @@
import '@fontsource/poppins/400.css';
import '@fontsource/poppins/500.css';
import '@fontsource/poppins/600.css';
import 'overlayscrollbars/overlayscrollbars.css';
import './globals.css';

8
src/globals.css
View file

@ -17,3 +17,11 @@ h1 { @apply text-2xl font-semibold; }
h2 { @apply text-xxl font-semibold; }
h3 { @apply text-xl font-medium; }
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]);
}

4
src/index.tsx
View file

@ -1,8 +1,8 @@
/* @refresh reload */
import { render } from 'solid-js/web';
import './globals.css';
import './fonts';
import './global_assets';
import { Route, Router } from '@solidjs/router';
import App from './ui/App';
import HomePage from './ui/pages/Home';

8
src/ui/App.tsx
View file

@ -1,5 +1,6 @@
import type { ParentProps } from 'solid-js';
import { Transition } from 'solid-transition-group';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
import environment from '../utils/environment';
import WindowFrame from './components/native/WindowFrame';
import Navbar from './components/Navbar';
@ -19,15 +20,18 @@ function App(props: ParentProps) {
<Navbar />
</div>
{/* This was a pain to do */}
<div class="relative h-full w-full overflow-hidden">
<div class="absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden">
<div class="absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden overflow-y-auto px-8">
<OverlayScrollbarsComponent class="absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden overflow-y-auto px-8">
<AnimatedRoutes>
{props.children}
</AnimatedRoutes>
</div>
<div class="pb-8" />
</OverlayScrollbarsComponent>
</div>
</div>
</main>
);
}

6
src/ui/components/base/Button.module.scss
View file

@ -7,7 +7,7 @@
}
&__secondary {
@apply border border-gray-.5;
@apply border border-gray-0.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-.5 active:bg-gray-.10;
@apply hover:bg-gray-0.05 active:bg-gray-0.10;
}
&__icon {
@apply p-1.5 hover:bg-gray-.5 active:bg-gray-.10 aspect-square box-border;
@apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border;
& > * {
@apply w-full h-full;

2
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-.5 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-0.05 text-fg-secondary text-sm font-medium backdrop-blur-md rounded-lg px-2.5 py-0.5;
}
.icon > * {

2
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-.5 text-fg-primary fill-fg-primary;
@apply border border-gray-0.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
src/ui/components/overlay/AccountPopup.tsx
View file

@ -10,7 +10,7 @@ interface AccountComponentProps {
function AccountComponent(props: AccountComponentProps) {
return (
<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-.5 active:bg-gray-.10 hover:text-fg-primary-hover'}`}>
<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-start flex-1 gap-x-3">
<img class="w-8 h-8 rounded-md" src={props.headSrc} alt="" />
<div class="flex flex-col items-center justify-center">
@ -32,17 +32,17 @@ function AccountComponent(props: AccountComponentProps) {
function AccountPopup(props: Popup.PopupProps) {
return (
<Popup {...props}>
<div class="bg-component-bg rounded-xl border border-gray-.10 w-72 p-2 shadow-lg shadow-black/50">
<div class="bg-component-bg rounded-xl border border-gray-0.10 w-72 p-2 shadow-lg shadow-black/50">
<div class="flex flex-col gap-y-2 text-fg-primary">
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" loggedIn />
<div class="w-full h-px bg-gray-.5 rounded-md" />
<div class="w-full h-px bg-gray-0.05 rounded-md" />
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" />
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" />
<AccountComponent username="Caledonian" headSrc="https://crafatar.com/avatars/f247be7c5b8241c69148793ded77e71f?size=100" />
<div class="w-full h-px bg-gray-.5 rounded-md" />
<div class="w-full h-px bg-gray-0.05 rounded-md" />
<div class="flex flex-row justify-between">
<div>

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

@ -68,7 +68,7 @@ interface InstanceCardProps {
function InstanceCard(props: InstanceCardProps) {
return (
<div class="h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-.5 overflow-hidden">
<div class="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 overflow-hidden">
<div class="flex-1 relative overflow-hidden">
<div
class="absolute h-full w-full group-hover:!scale-110 transition-transform"

4
tailwind.config.ts
View file

@ -23,8 +23,8 @@ const config: Config = {
black: '#000000',
gray: {
'.5': '#FFFFFF0D',
'.10': '#FFFFFF1A',
'0.05': '#FFFFFF0D',
'0.10': '#FFFFFF1A',
},
fg: {