feat(config): move switch language button into header

This commit is contained in:
kunish 2023-09-22 15:07:13 +08:00
parent dd0452dcd3
commit 9cc99ebb8e
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 18 additions and 18 deletions

View File

@ -28,7 +28,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
<div <div
class={twMerge( class={twMerge(
getCollapseClassName(), getCollapseClassName(),
'collapse collapse-arrow select-none overflow-visible border-secondary bg-base-200', 'collapse collapse-arrow select-none overflow-visible border-secondary bg-base-200 drop-shadow-md',
)} )}
> >
<div <div

View File

@ -4,6 +4,7 @@ import {
IconFileStack, IconFileStack,
IconGlobe, IconGlobe,
IconHome, IconHome,
IconLanguage,
IconMenu, IconMenu,
IconNetwork, IconNetwork,
IconPalette, IconPalette,
@ -11,8 +12,8 @@ import {
IconSettings, IconSettings,
} from '@tabler/icons-solidjs' } from '@tabler/icons-solidjs'
import { For, ParentComponent, Show, createSignal } from 'solid-js' import { For, ParentComponent, Show, createSignal } from 'solid-js'
import { LogoText } from '~/components' import { Button, LogoText } from '~/components'
import { ROUTES, themes } from '~/constants' import { LANG, ROUTES, themes } from '~/constants'
import { setCurTheme } from '~/signals' import { setCurTheme } from '~/signals'
const Nav: ParentComponent<{ href: string; tooltip: string }> = ({ const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
@ -61,7 +62,7 @@ const ThemeSwitcher = () => (
) )
export const Header = () => { export const Header = () => {
const [t] = useI18n() const [t, { locale }] = useI18n()
const navs = () => [ const navs = () => [
{ {
href: ROUTES.Overview, href: ROUTES.Overview,
@ -151,6 +152,17 @@ export const Header = () => {
<div class="navbar-end"> <div class="navbar-end">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Button
class="btn-circle btn-secondary btn-sm"
onClick={() => {
const curLocale = locale()
locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
}}
>
<IconLanguage />
</Button>
<ThemeSwitcher /> <ThemeSwitcher />
</div> </div>
</div> </div>

View File

@ -27,7 +27,7 @@ import {
upgradingBackend, upgradingBackend,
} from '~/apis' } from '~/apis'
import { Button, ConfigTitle } from '~/components' import { Button, ConfigTitle } from '~/components'
import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants' import { MODE_OPTIONS, ROUTES, themes } from '~/constants'
import { import {
autoSwitchTheme, autoSwitchTheme,
favDayTheme, favDayTheme,
@ -269,22 +269,10 @@ const ConfigForm = () => {
} }
const ConfigForXd = () => { const ConfigForXd = () => {
const [t, { locale }] = useI18n() const [t] = useI18n()
return ( return (
<div class="grid grid-cols-2 place-items-center gap-4"> <div class="grid grid-cols-2 place-items-center gap-4">
<div class="col-span-2">
<Button
onClick={() => {
const curLocale = locale()
locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
}}
>
{t('switchLanguage')}
</Button>
</div>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle> <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>