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, setFavDayTheme,
setFavNightTheme, setFavNightTheme,
setSelectedEndpoint, setSelectedEndpoint,
setTwemoji, setUseTwemoji,
useRequest, useRequest,
useTwemoji, useTwemoji,
} from '~/signals' } from '~/signals'
@ -250,78 +250,69 @@ const ConfigForm = () => {
const ConfigForXd = () => { const ConfigForXd = () => {
const [t, { locale }] = useI18n() 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 ( return (
<div class="grid gap-4"> <div class="grid grid-cols-2 gap-4">
<For each={checkboxList}> <div class="flex flex-col gap-4">
{(checkbox) => ( <div>
<> <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
<div class="flex flex-col">
<ConfigTitle>{checkbox.label}</ConfigTitle>
<input <input
type="checkbox" type="checkbox"
class="toggle" class="toggle"
checked={checkbox.value()} checked={autoSwitchTheme()}
onChange={(e) => { onChange={(e) => setAutoSwitchTheme(e.target.checked)}
checkbox.onChange(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> </div>
{checkbox.subChild?.()}
</> <div class="flex flex-col">
)} <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
</For>
<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> <div>
<Button <Button
@ -357,7 +348,7 @@ const Versions = () => {
export default () => { export default () => {
return ( 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 /> <DNSQueryForm />
<ConfigForm /> <ConfigForm />
<ConfigForXd /> <ConfigForXd />

2
src/signals/config.ts
View File

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