feat: More settings
This commit is contained in:
parent
ff989fba41
commit
402d6d6041
8 changed files with 157 additions and 23 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
],
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
56
desktop/src/ui/pages/settings/about/SettingsDeveloper.tsx
Normal file
56
desktop/src/ui/pages/settings/about/SettingsDeveloper.tsx
Normal 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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue