feat: More settings

This commit is contained in:
LynithDev 2024-06-20 10:22:09 +02:00
parent ff989fba41
commit 402d6d6041
8 changed files with 157 additions and 23 deletions

View file

@ -73,7 +73,7 @@ h4 { @apply text-lg font-medium; }
transform: translateX(0);
}
body.reduce-motion * {
transition-duration: 0.0001ms !important;
animation-duration: 0.0001ms !important;
body.reduce-motion *, body.reduce-motion *::after, body.reduce-motion *::before {
transition-duration: 0.00001ms !important;
animation-duration: 0.00001ms !important;
}

View file

@ -1,17 +1,18 @@
import { type JSX, type ParentProps, createEffect } from 'solid-js';
import type { JSX, ParentProps } from 'solid-js';
type SettingsRowProps = ParentProps & {
title: string;
description: string;
title: JSX.Element;
description: JSX.Element;
icon: JSX.Element;
clickable?: () => any;
onClick?: () => any;
};
function SettingsRow(props: SettingsRowProps) {
const interactableClass = createEffect(() => props.clickable ? 'hover:bg-component-bg-hover active:bg-component-bg-pressed' : '');
return (
<div class={`flex flex-row bg-component-bg rounded-xl gap-3.5 p-4 ${interactableClass} items-center`}>
<div
class={`flex flex-row bg-component-bg rounded-xl gap-3.5 p-4 ${props.onClick ? 'hover:bg-component-bg-hover active:bg-component-bg-pressed' : ''} items-center`}
{...(props.onClick ? { onClick: props.onClick } : {})}
>
<div class="flex justify-center items-center h-8 w-8">
{props.icon}
</div>
@ -21,11 +22,15 @@ function SettingsRow(props: SettingsRowProps) {
<p class="text-wrap text-sm">{props.description}</p>
</div>
<div class="">
<div>
{props.children}
</div>
</div>
);
}
SettingsRow.Header = (props: JSX.HTMLAttributes<HTMLHeadingElement>) => {
return <h3 class={`mt-4 mb-1 ml-2 text-md text-fg-secondary uppercase ${props.class || ''}`} {...props} />;
};
export default SettingsRow;

View file

@ -1,5 +1,5 @@
import type { JSX } from 'solid-js';
import { createEffect, createSignal, createUniqueId, splitProps } from 'solid-js';
import { createSignal, createUniqueId, splitProps } from 'solid-js';
import styles from './TextField.module.scss';
type TextFieldProps = {

View file

@ -6,6 +6,7 @@ import SettingsGeneral from './launcher/SettingsGeneral';
import SettingsAppearance from './launcher/SettingsAppearance';
import SettingsAccounts from './game/SettingsAccounts';
import SettingsMinecraft from './game/SettingsMinecraft';
import SettingsDeveloper from './about/SettingsDeveloper';
import AnimatedRoutes from '~ui/components/AnimatedRoutes';
import ErrorBoundary from '~ui/components/ErrorBoundary';
@ -21,6 +22,7 @@ function SettingsRoutes() {
<Route path="/accounts" component={SettingsAccounts} />
{/* About */}
<Route path="/developer" component={SettingsDeveloper} />
</>
);
}
@ -44,9 +46,9 @@ function SettingsRoot(props: ParentProps) {
[<Users01Icon />, 'Accounts', '/accounts'],
],
'About': [
[<CodeSnippet02Icon />, 'Developer Options', '/developer'],
[<RefreshCcw02Icon />, 'Changelog', '/changelog'],
[<MessageTextSquare01Icon />, 'Feedback', '/feedback'],
[<CodeSnippet02Icon />, 'Developer Options', '/developer'],
],
}}
/>

View file

@ -0,0 +1,56 @@
import { CodeBrowserIcon, GitMergeIcon, LinkExternal01Icon, RefreshCcw05Icon } from '@untitled-theme/icons-solid';
import Button from '~ui/components/base/Button';
import Toggle from '~ui/components/base/Toggle';
import ScrollableContainer from '~ui/components/ScrollableContainer';
import SettingsRow from '~ui/components/SettingsRow';
import Sidebar from '~ui/components/Sidebar';
import useSettingsContext from '~ui/hooks/useSettings';
function SettingsDeveloper() {
const settings = useSettingsContext();
return (
<Sidebar.Page>
<h1>Developer Options</h1>
<p class="mb-2">You probably shouldn't mess with any of these if you don't know what you're doing!</p>
<ScrollableContainer>
<SettingsRow
title="Open Dev Tools"
description="Opens the browser developer tools."
icon={<CodeBrowserIcon />}
>
<Button
iconLeft={<LinkExternal01Icon />}
children="Open"
/>
</SettingsRow>
<SettingsRow
title="Debug mode"
description="Enables debug mode."
icon={<GitMergeIcon />}
>
<Toggle
defaultChecked={settings.debug_mode ?? false}
onChecked={value => settings.debug_mode = value}
/>
</SettingsRow>
<SettingsRow
title="Reload"
description="Reloads the launcher frontend."
icon={<RefreshCcw05Icon />}
>
<Button
iconLeft={<RefreshCcw05Icon />}
onClick={() => location.href = '/'}
children="Reload"
/>
</SettingsRow>
</ScrollableContainer>
</Sidebar.Page>
);
}
export default SettingsDeveloper;

View file

@ -1,4 +1,5 @@
import { LayoutTopIcon, Maximize01Icon, XIcon } from '@untitled-theme/icons-solid';
import { EyeIcon, LayoutTopIcon, Maximize01Icon, XIcon } from '@untitled-theme/icons-solid';
import Dropdown from '~ui/components/base/Dropdown';
import TextField from '~ui/components/base/TextField';
import Toggle from '~ui/components/base/Toggle';
import ScrollableContainer from '~ui/components/ScrollableContainer';
@ -11,12 +12,12 @@ function SettingsMinecraft() {
return (
<Sidebar.Page>
<h1>Global Game Settings</h1>
<h1>Global Minecraft Settings</h1>
<ScrollableContainer>
<SettingsRow
title="Force Fullscreen"
description="Force Minecraft to start in fullscreen mode"
description="Force Minecraft to start in fullscreen mode."
icon={<Maximize01Icon />}
>
<Toggle
@ -27,18 +28,21 @@ function SettingsMinecraft() {
<SettingsRow
title="Resolution"
description="The game window resolution"
description="The game window resolution in pixels."
icon={<LayoutTopIcon />}
>
<div class="grid grid-justify-center grid-items-center grid-cols-[70px_24px_70px]">
<div class="grid grid-justify-center grid-items-center gap-2 grid-cols-[70px_16px_70px]">
<TextField.Number
class="text-center"
value={settings.resolution[0]}
onValidSubmit={(value) => {
settings.resolution = [Number.parseInt(value), settings.resolution[1]];
}}
/>
<XIcon />
<XIcon class="w-4 h-4" />
<TextField.Number
class="text-center"
value={settings.resolution[1]}
onValidSubmit={(value) => {
settings.resolution = [settings.resolution[0], Number.parseInt(value)];
}}
@ -46,6 +50,32 @@ function SettingsMinecraft() {
</div>
</SettingsRow>
<SettingsRow
title="Launcher Visibility"
description="Set the launcher visibility whenever you start a game."
icon={<EyeIcon />}
>
<Dropdown
class="w-32!"
onChange={(selected) => {
switch (selected) {
case 0:
settings.hide_on_launch = false;
break;
case 1:
settings.hide_on_launch = true;
break;
case 2:
break;
}
}}
>
<Dropdown.Row>Visible</Dropdown.Row>
<Dropdown.Row>Hide</Dropdown.Row>
<Dropdown.Row>Close (// TODO)</Dropdown.Row>
</Dropdown>
</SettingsRow>
</ScrollableContainer>
</Sidebar.Page>
);

View file

@ -26,8 +26,8 @@ function SettingsAppearance() {
</SettingsRow>
<SettingsRow
title="Animations"
description="Toggle all animations in the launcher."
title="Disable Animations"
description="Disables all animations in the launcher."
icon={<Speedometer04Icon />}
>
<Toggle

View file

@ -1,9 +1,11 @@
import { XIcon } from '@untitled-theme/icons-solid';
import { AlertSquareIcon, FolderIcon, LinkExternal01Icon, XIcon } from '@untitled-theme/icons-solid';
import { open } from '@tauri-apps/plugin-shell';
import SettingsRow from '../../../components/SettingsRow';
import ScrollableContainer from '~ui/components/ScrollableContainer';
import Toggle from '~ui/components/base/Toggle';
import Sidebar from '~ui/components/Sidebar';
import useSettingsContext from '~ui/hooks/useSettings';
import Button from '~ui/components/base/Button';
function SettingsGeneral() {
const settings = useSettingsContext();
@ -13,9 +15,20 @@ function SettingsGeneral() {
<h1>General</h1>
<ScrollableContainer>
<SettingsRow
title="Discord RPC"
description="Enable Discord Rich Presence."
icon={<XIcon />}
>
<Toggle
defaultChecked={!(settings.disable_discord ?? false)}
onChecked={value => settings.disable_discord = !value}
/>
</SettingsRow>
<SettingsRow
title="Hide Close Dialog"
description="Hide the close confirmation dialog when closing the launcher."
description="Hide the confirmation dialog when closing the launcher."
icon={<XIcon />}
>
<Toggle
@ -24,6 +37,34 @@ function SettingsGeneral() {
/>
</SettingsRow>
<SettingsRow
title="Error Analytics"
description="Sends errors and crash logs using Sentry to help developers fix issues. (// TODO)"
icon={<AlertSquareIcon />}
>
<Toggle
defaultChecked={!(settings.disable_analytics ?? false)}
onChecked={value => settings.disable_analytics = !value}
/>
</SettingsRow>
<SettingsRow.Header>Folders and Files</SettingsRow.Header>
<SettingsRow
title="Launcher Directory"
description={settings.config_dir || 'UNKNOWN'}
icon={<FolderIcon />}
>
<Button
iconLeft={<LinkExternal01Icon />}
children="Open"
onClick={() => {
if (settings.config_dir)
open(settings.config_dir);
}}
/>
</SettingsRow>
</ScrollableContainer>
</Sidebar.Page>
);