From 9dfcfa3868bebfa23c4766a69818761680711494 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 21:50:18 +0800 Subject: [PATCH 1/7] StackedRouter: add default open animation --- src/platform/StackedRouter.tsx | 46 +++++++++++++++++++++------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx index 8d489ae..25dd6e6 100644 --- a/src/platform/StackedRouter.tsx +++ b/src/platform/StackedRouter.tsx @@ -15,7 +15,7 @@ import { import { createStore, unwrap } from "solid-js/store"; import { insert, render } from "solid-js/web"; import "./StackedRouter.css"; -import { animateSlideInFromRight } from "./anim"; +import { animateSlideInFromRight, animateSlideOutToRight } from "./anim"; import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "../material/theme"; export type StackedRouterProps = Omit; @@ -102,6 +102,32 @@ function onDialogClick( } } +function animateClose(element: HTMLElement) { + if (window.innerWidth <= 560) { + return animateSlideOutToRight(element, { easing: ANIM_CURVE_DECELERATION }); + } else { + return element.animate( + { + opacity: [0.5, 0], + }, + { easing: ANIM_CURVE_STD, duration: 220 }, + ); + } +} + +function animateOpen(element: HTMLElement) { + if (window.innerWidth <= 560) { + animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION }); + } else { + element.animate( + { + opacity: [0.5, 1], + }, + { easing: ANIM_CURVE_STD, duration: 220 }, + ); + } +} + /** * The router that stacks the pages. */ @@ -130,12 +156,7 @@ const StackedRouter: Component = (oprops) => { const lastFrame = stack[stack.length - 1]; const element = document.getElementById(lastFrame.rootId)!; requestAnimationFrame(() => { - const animation = element.animate( - { - opacity: [0.5, 0], - }, - { easing: ANIM_CURVE_STD, duration: 220 }, - ); + const animation = animateClose(element); animation.addEventListener("finish", () => mutStack((o) => o.toSpliced(o.length - depth, depth)), ); @@ -162,16 +183,7 @@ const StackedRouter: Component = (oprops) => { createEffect(() => { requestAnimationFrame(() => { element.showModal(); - if (window.innerWidth <= 560) { - animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION }); - } else { - element.animate( - { - opacity: [0.5, 1], - }, - { easing: ANIM_CURVE_STD, duration: 220 }, - ); - } + animateOpen(element); }); }); }; From ab37a280e74519fc060712f7825d9f9a38a89f3d Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 22:26:16 +0800 Subject: [PATCH 2/7] ProfileMenuButton: fix open settings in new page --- src/timelines/ProfileMenuButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/timelines/ProfileMenuButton.tsx b/src/timelines/ProfileMenuButton.tsx index c33ba8e..b74386c 100644 --- a/src/timelines/ProfileMenuButton.tsx +++ b/src/timelines/ProfileMenuButton.tsx @@ -51,7 +51,7 @@ const ProfileMenuButton: ParentComponent<{ props.onClick?.(); }; - const inf = () => props.profile?.account.inf + const inf = () => props.profile?.account.inf; const onClose = () => { props.onClick?.(); @@ -130,7 +130,7 @@ const ProfileMenuButton: ParentComponent<{ {props.children} - + From 2da7bf134e91a5696e337a5d6ed82a5c08eb28dc Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 22:27:35 +0800 Subject: [PATCH 3/7] App: fix path for motion settings --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5fdb0c8..8f7ba44 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -46,10 +46,10 @@ const Routing: Component = () => { return ( - - + + From e3d9d0c4ba52830ad98a8e7a65b919315bd16199 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 22:37:05 +0800 Subject: [PATCH 4/7] StackedRouter: add default background --- src/platform/StackedRouter.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform/StackedRouter.css b/src/platform/StackedRouter.css index 714893c..5dae005 100644 --- a/src/platform/StackedRouter.css +++ b/src/platform/StackedRouter.css @@ -21,6 +21,7 @@ dialog.StackedPage { contain-intrinsic-size: auto 560px auto 100dvh; content-visibility: auto; + background: var(--tutu-color-surface); box-shadow: var(--tutu-shadow-e16); @media (min-width: 560px) { From 5be56bb80ec7cea2e5f0d7bc672375c082072ec1 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 22:37:22 +0800 Subject: [PATCH 5/7] A: fix missolved path --- src/platform/A.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/platform/A.tsx b/src/platform/A.tsx index b655dc9..3d0b33d 100644 --- a/src/platform/A.tsx +++ b/src/platform/A.tsx @@ -1,5 +1,6 @@ -import { type JSX } from "solid-js"; +import { splitProps, type JSX } from "solid-js"; import { useNavigator } from "./StackedRouter"; +import { useResolvedPath } from "@solidjs/router"; function handleClick( push: (name: string, state: unknown) => void, @@ -7,13 +8,14 @@ function handleClick( ) { const target = event.currentTarget; event.preventDefault(); - event.stopPropagation(); push(target.href, { state: target.getAttribute("state") || undefined }); } -const A = (oprops: JSX.HTMLElementTags["a"]) => { +const A = (oprops: Omit) => { + const [props, rest] = splitProps(oprops, ["href"]); + const resolvedPath = useResolvedPath(() => props.href || "#"); const { push } = useNavigator(); - return ; + return ; }; export default A; From 32dffaaa3df589b57dbde92ccc61ce89b64a5439 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 22:38:00 +0800 Subject: [PATCH 6/7] StackedRouter: intergrated with web history API --- src/platform/StackedRouter.tsx | 35 ++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx index 25dd6e6..7325d7e 100644 --- a/src/platform/StackedRouter.tsx +++ b/src/platform/StackedRouter.tsx @@ -6,17 +6,18 @@ import { createRenderEffect, createUniqueId, Index, - onMount, Show, untrack, useContext, type Accessor, } from "solid-js"; import { createStore, unwrap } from "solid-js/store"; -import { insert, render } from "solid-js/web"; import "./StackedRouter.css"; import { animateSlideInFromRight, animateSlideOutToRight } from "./anim"; import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "../material/theme"; +import { + makeEventListener, +} from "@solid-primitives/event-listener"; export type StackedRouterProps = Omit; @@ -24,7 +25,6 @@ export type StackFrame = { path: string; rootId: string; state: unknown; - beforeShow?: (element: HTMLElement) => void; }; export type NewFrameOptions = (T extends undefined @@ -141,10 +141,21 @@ const StackedRouter: Component = (oprops) => { state: opts?.state, rootId: createUniqueId(), }; + mutStack(opts?.replace ? stack.length - 1 : stack.length, frame); + if (opts?.replace) { + window.history.replaceState(unwrap(stack), "", path); + } else { + window.history.pushState(unwrap(stack), "", path); + } return frame; }); + const onlyPopFrame = (depth: number) => { + mutStack((o) => o.toSpliced(o.length - depth, depth)); + window.history.go(-depth); + }; + const popFrame = (depth: number = 1) => untrack(() => { if (import.meta.env.DEV) { @@ -157,14 +168,10 @@ const StackedRouter: Component = (oprops) => { const element = document.getElementById(lastFrame.rootId)!; requestAnimationFrame(() => { const animation = animateClose(element); - animation.addEventListener("finish", () => - mutStack((o) => o.toSpliced(o.length - depth, depth)), - ); + animation.addEventListener("finish", () => onlyPopFrame(depth)); }); } else { - mutStack((o) => { - return o.toSpliced(o.length - depth, depth); - }); + onlyPopFrame(depth); } }); @@ -175,10 +182,18 @@ const StackedRouter: Component = (oprops) => { createRenderEffect(() => { if (stack.length === 0) { - pushFrame("/", undefined); + pushFrame(window.location.pathname); } }); + createRenderEffect(() => { + makeEventListener(window, "popstate", (event) => { + if (event.state && stack.length !== event.state.length) { + mutStack(event.state); + } + }); + }); + const onBeforeDialogMount = (element: HTMLDialogElement) => { createEffect(() => { requestAnimationFrame(() => { From 63fe4acc98502ba1c722a0d6b0209adf08dc6f5e Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 16 Nov 2024 22:38:27 +0800 Subject: [PATCH 7/7] Settings: fix back button pop too much frames --- src/settings/Settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 0aec49c..2351f8d 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -201,7 +201,7 @@ const Settings: ParentComponent = (props) => { variant="dense" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }} > - + {t("Settings")}