first prototype of StackedRouter

This commit is contained in:
thislight 2024-11-16 20:04:55 +08:00
parent 607fa64c05
commit 0710aaf4f3
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
21 changed files with 442 additions and 109 deletions

View file

@ -24,10 +24,10 @@ import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores";
import { useNavigate } from "@solidjs/router";
import { useNavigator } from "../platform/StackedRouter";
const ChooseLang: Component = () => {
const navigate = useNavigate()
const { pop } = useNavigator();
const [t] = createTranslator(
() => import("./i18n/lang-names.json"),
(code) =>
@ -37,9 +37,9 @@ const ChooseLang: Component = () => {
};
}>,
);
const settings = useStore($settings)
const settings = useStore($settings);
const code = () => settings().language
const code = () => settings().language;
const unsupportedLangCodes = createMemo(() => {
return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
@ -48,8 +48,8 @@ const ChooseLang: Component = () => {
const matchedLangCode = createMemo(() => autoMatchLangTag());
const onCodeChange = (code?: string) => {
$settings.setKey("language", code)
}
$settings.setKey("language", code);
};
return (
<Scaffold
@ -59,7 +59,7 @@ const ChooseLang: Component = () => {
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
<ArrowBack />
</IconButton>
<Title>{t("Choose Language")}</Title>
@ -96,7 +96,10 @@ const ChooseLang: Component = () => {
<ListItemText>{t(`lang.${c}`)}</ListItemText>
<ListItemSecondaryAction>
<Radio
checked={code() === c || (code() === undefined && matchedLangCode() == c)}
checked={
code() === c ||
(code() === undefined && matchedLangCode() == c)
}
/>
</ListItemSecondaryAction>
</ListItemButton>

View file

@ -13,14 +13,14 @@ import {
Toolbar,
} from "@suid/material";
import { Title } from "../material/typography";
import { useNavigate } from "@solidjs/router";
import { ArrowBack } from "@suid/icons-material";
import { createTranslator } from "../platform/i18n";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores";
import { useNavigator } from "../platform/StackedRouter";
const Motions: Component = () => {
const navigate = useNavigate();
const {pop} = useNavigator();
const [t] = createTranslator(
(code) =>
import(`./i18n/${code}.json`) as Promise<{
@ -36,7 +36,7 @@ const Motions: Component = () => {
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
<ArrowBack />
</IconButton>
<Title>{t("motions")}</Title>

View file

@ -20,12 +20,12 @@ import {
} from "../platform/i18n";
import { Title } from "../material/typography";
import type { Template } from "@solid-primitives/i18n";
import { useNavigate } from "@solidjs/router";
import { $settings } from "./stores";
import { useStore } from "@nanostores/solid";
import { useNavigator } from "../platform/StackedRouter";
const ChooseRegion: Component = () => {
const navigate = useNavigate();
const {pop} = useNavigator();
const [t] = createTranslator(
() => import("./i18n/lang-names.json"),
(code) =>
@ -54,7 +54,7 @@ const ChooseRegion: Component = () => {
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
<ArrowBack />
</IconButton>
<Title>{t("Choose Region")}</Title>

View file

@ -30,7 +30,7 @@ import {
Refresh as RefreshIcon,
Translate as TranslateIcon,
} from "@suid/icons-material";
import { A, useNavigate } from "@solidjs/router";
import A from "../platform/A.js";
import { Title } from "../material/typography.jsx";
import { css } from "solid-styled";
import { signOut, type Account } from "../accounts/stores.js";
@ -47,6 +47,7 @@ import { type Template } from "@solid-primitives/i18n";
import BottomSheet from "../material/BottomSheet.jsx";
import { useServiceWorker } from "../platform/host.js";
import { useSessions } from "../masto/clients.js";
import { useNavigator } from "../platform/StackedRouter.jsx";
type Inset = {
top?: number;
@ -170,7 +171,7 @@ const Settings: ParentComponent = (props) => {
}>,
() => import(`./i18n/lang-names.json`),
);
const navigate = useNavigate();
const {pop} = useNavigator();
const settings$ = useStore($settings);
const { needRefresh, offlineReady } = useServiceWorker();
const dateFnLocale = useDateFnLocale();
@ -200,7 +201,7 @@ const Settings: ParentComponent = (props) => {
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<IconButton color="inherit" onClick={[pop, 11]} disableRipple>
<CloseIcon />
</IconButton>
<Title>{t("Settings")}</Title>
@ -208,7 +209,7 @@ const Settings: ParentComponent = (props) => {
</AppBar>
}
>
<BottomSheet open={!!subpage()} onClose={() => navigate(-1)}>
<BottomSheet open={!!subpage()} onClose={() => pop(1)}>
{subpage()}
</BottomSheet>