Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

feat(config): update page layout

Browse Source
This commit is contained in:
kunish 2023-09-16 23:55:42 +08:00
parent d059ea85b3
commit 2be357e73c
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
2 changed files with 63 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/pages/Config.tsx
View File

@ -36,7 +36,7 @@ import {
setFavDayTheme,
setFavNightTheme,
setSelectedEndpoint,
setTwemoji,
setUseTwemoji,
useRequest,
useTwemoji,
} from '~/signals'
@ -250,78 +250,69 @@ const ConfigForm = () => {
const ConfigForXd = () => {
const [t, { locale }] = useI18n()
const autoSwitchThemeSubChild = () => (
<Show when={autoSwitchTheme()}>
<div class="flex flex-col">
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => setFavDayTheme(e.target.value)}
>
<For each={themes}>
{(theme) => (
<option selected={favDayTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
<div class="flex flex-col">
<ConfigTitle>{t('favNightTheme')}</ConfigTitle>
<select
class="select select-bordered w-full max-w-xs"
onChange={(e) => setFavNightTheme(e.target.value)}
>
<For each={themes}>
{(theme) => (
<option selected={favNightTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
</Show>
)
const checkboxList = [
{
label: t('autoSwitchTheme'),
value: autoSwitchTheme,
onChange: (value: boolean) => setAutoSwitchTheme(value),
subChild: autoSwitchThemeSubChild,
},
{
label: t('useTwemoji'),
value: useTwemoji,
onChange: setTwemoji,
},
]
return (
<div class="grid gap-4">
<For each={checkboxList}>
{(checkbox) => (
<>
<div class="flex flex-col">
<ConfigTitle>{checkbox.label}</ConfigTitle>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-4">
<div>
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={checkbox.value()}
onChange={(e) => {
checkbox.onChange(e.target.checked)
}}
/>
<input
type="checkbox"
class="toggle"
checked={autoSwitchTheme()}
onChange={(e) => setAutoSwitchTheme(e.target.checked)}
/>
</div>
<Show when={autoSwitchTheme()}>
<div class="flex flex-col gap-4">
<div class="flex flex-col">
<ConfigTitle>{t('favDayTheme')}</ConfigTitle>
<select
class="select select-bordered"
onChange={(e) => setFavDayTheme(e.target.value)}
>
<For each={themes}>
{(theme) => (
<option selected={favDayTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
{checkbox.subChild?.()}
</>
)}
</For>
<div class="flex flex-col">
<ConfigTitle>{t('favNightTheme')}</ConfigTitle>
<select
class="select select-bordered"
onChange={(e) => setFavNightTheme(e.target.value)}
>
<For each={themes}>
{(theme) => (
<option selected={favNightTheme() === theme} value={theme}>
{theme}
</option>
)}
</For>
</select>
</div>
</div>
</Show>
</div>
<div>
<ConfigTitle>{t('useTwemoji')}</ConfigTitle>
<input
type="checkbox"
class="toggle"
checked={useTwemoji()}
onChange={(e) => setUseTwemoji(e.target.checked)}
/>
</div>
<div>
<Button
@ -357,7 +348,7 @@ const Versions = () => {
export default () => {
return (
<div class="mx-auto flex w-full max-w-screen-md flex-col gap-4">
<div class="mx-auto flex max-w-screen-md flex-col gap-4">
<DNSQueryForm />
<ConfigForm />
<ConfigForXd />

2
src/signals/config.ts
View File

@ -40,7 +40,7 @@ export const [autoCloseConns, setAutoCloseConns] = makePersisted(
createSignal(false),
{ name: 'autoCloseConns', storage: localStorage },
)
export const [useTwemoji, setTwemoji] = makePersisted(createSignal(true), {
export const [useTwemoji, setUseTwemoji] = makePersisted(createSignal(true), {
name: 'useTwemoji',
storage: localStorage,
})