Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

Settings: added lang and region picker dialog

Browse source
This commit is contained in:
thislight 2024-09-27 14:15:34 +08:00
parent 55705b0a6d
commit e56dc4bf7b
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
10 changed files with 316 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/settings/Settings.tsx
View file

@ -1,4 +1,4 @@
import { For, Show, type ParentComponent } from "solid-js";
import { createSignal, For, Show, type ParentComponent } from "solid-js";
import Scaffold from "../material/Scaffold.js";
import {
AppBar,
@ -40,10 +40,13 @@ import {
useDateFnLocale,
} from "../platform/i18n.jsx";
import { type Template } from "@solid-primitives/i18n";
import BottomSheet from "../material/BottomSheet.jsx";
import ChooseLang from "./ChooseLang.jsx";
import ChooseRegion from "./ChooseRegion.jsx";
type Strings = {
["lang.auto"]: Template<{detected: string}>
} & Record<string, string | undefined>
["lang.auto"]: Template<{ detected: string }>;
} & Record<string, string | undefined>;
const Settings: ParentComponent = () => {
const [t] = createTranslator(
@ -51,7 +54,7 @@ const Settings: ParentComponent = () => {
import(`./i18n/${code}.json`) as Promise<{
default: Strings;
}>,
() => import(`./i18n/lang-names.json`)
() => import(`./i18n/lang-names.json`),
);
const navigate = useNavigate();
const settings$ = useStore($settings);
@ -59,6 +62,8 @@ const Settings: ParentComponent = () => {
needRefresh: [needRefresh],
} = useRegisterSW();
const dateFnLocale = useDateFnLocale();
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);
const [profiles] = useSignedInProfiles();
@ -98,7 +103,7 @@ const Settings: ParentComponent = () => {
<ListItemButton disabled>
<ListItemText>{t("All Notifications")}</ListItemText>
<ListItemSecondaryAction>
<Switch value={false} disabled/>
<Switch value={false} disabled />
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
@ -114,13 +119,13 @@ const Settings: ParentComponent = () => {
<ListItemButton disabled>
<ListItemText>{t("Notifications")}</ListItemText>
<ListItemSecondaryAction>
<Switch value={false} disabled/>
<Switch value={false} disabled />
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
<ListItemButton onClick={[doSignOut, acct]}>
<ListItemIcon>
<Logout/>
<Logout />
</ListItemIcon>
<ListItemText>{t("Sign out")}</ListItemText>
</ListItemButton>
@ -150,65 +155,55 @@ const Settings: ParentComponent = () => {
</li>
<li>
<ListSubheader>{t("This Application")}</ListSubheader>
<ListItem>
<ListItemButton onClick={[setLangPickerOpen, true]}>
<ListItemIcon>
<TranslateIcon />
</ListItemIcon>
<ListItemText>{t("Language")}</ListItemText>
<ListItemSecondaryAction>
<NativeSelect
value={settings$().language || "xauto"}
onChange={(e) => {
$settings.setKey(
"language",
e.currentTarget.value === "xauto"
? undefined
: e.currentTarget.value,
);
}}
>
<option value={"xauto"}>
{t("lang.auto", {
detected: t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
})}
</option>
<For each={SUPPORTED_LANGS}>
{(code) => <option value={code}>{t("lang." + code)}</option>}
</For>
</NativeSelect>
</ListItemSecondaryAction>
</ListItem>
<ListItemText
secondary={
settings$().language === undefined
? t("lang.auto", {
detected:
t("lang." + autoMatchLangTag()) ?? autoMatchLangTag(),
})
: t("lang." + settings$().language)
}
>
{t("Language")}
</ListItemText>
</ListItemButton>
<BottomSheet open={langPickerOpen()}>
<ChooseLang
code={settings$().language}
onCodeChange={(nval) => $settings.setKey("language", nval)}
onClose={[setLangPickerOpen, false]}
/>
</BottomSheet>
<Divider />
<ListItem>
<ListItemButton onClick={[setRegionPickerOpen, true]}>
<ListItemIcon>
<PublicIcon />
</ListItemIcon>
<ListItemText>{t("Region")}</ListItemText>
<ListItemSecondaryAction>
<NativeSelect
value={settings$().region}
onChange={(e) => {
$settings.setKey(
"region",
e.currentTarget.value === "xauto"
? undefined
: e.currentTarget.value,
);
}}
>
<option value={"xauto"}>
{t("region.auto", {
detected: t("region." + autoMatchRegion()) ?? autoMatchRegion(),
})}
</option>
<For each={SUPPORTED_REGIONS}>
{(code) => (
<option value={code}>{t("region." + code)}</option>
)}
</For>
</NativeSelect>
</ListItemSecondaryAction>
</ListItem>
<ListItemText
secondary={
settings$().region === undefined
? t("region.auto", {
detected:
t("region." + autoMatchRegion()) ?? autoMatchRegion(),
})
: t("region." + settings$().region)
}
>
{t("Region")}
</ListItemText>
</ListItemButton>
<BottomSheet open={regionPickerOpen()}>
<ChooseRegion
code={settings$().region}
onCodeChange={(nval) => $settings.setKey("region", nval)}
onClose={[setRegionPickerOpen, false]}
/>
</BottomSheet>
<Divider />
<ListItem>
<ListItemText secondary={t("About Tutu.2nd")}>