From c260027c9c01104ceef38a473ac3383824adf09b Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 1 Dec 2024 22:50:29 +0800 Subject: [PATCH 1/5] add isPointNotInRect --- src/material/BottomSheet.tsx | 8 ++------ src/platform/StackedRouter.tsx | 8 ++------ src/platform/dom.ts | 5 +++++ 3 files changed, 9 insertions(+), 12 deletions(-) create mode 100644 src/platform/dom.ts diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index 73fd734..99bfbd0 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -13,6 +13,7 @@ import { animateSlideInFromRight, animateSlideOutToRight, } from "~platform/anim"; +import { isPointNotInRect } from "~platform/dom"; export type BottomSheetProps = { open?: boolean; @@ -120,12 +121,7 @@ const BottomSheet: ParentComponent = (props) => { event.stopPropagation(); if (event.target !== event.currentTarget) return; const rect = event.currentTarget.getBoundingClientRect(); - const isNotInDialog = - event.clientY < rect.top || - event.clientY > rect.bottom || - event.clientX < rect.left || - event.clientX > rect.right; - if (isNotInDialog) { + if (isPointNotInRect(rect, event.clientX, event.clientY)) { props.onClose?.("backdrop"); } }; diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx index 975d66f..75e7594 100644 --- a/src/platform/StackedRouter.tsx +++ b/src/platform/StackedRouter.tsx @@ -19,6 +19,7 @@ import { animateSlideInFromRight, animateSlideOutToRight } from "./anim"; import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "~material/theme"; import { makeEventListener } from "@solid-primitives/event-listener"; import { useWindowSize } from "@solid-primitives/resize-observer"; +import { isPointNotInRect } from "./dom"; export type StackedRouterProps = Omit; @@ -173,12 +174,7 @@ function onDialogClick( ) { if (event.target !== event.currentTarget) return; const rect = event.currentTarget.getBoundingClientRect(); - const isNotInDialog = - event.clientY < rect.top || - event.clientY > rect.bottom || - event.clientX < rect.left || - event.clientX > rect.right; - if (isNotInDialog) { + if (isPointNotInRect(rect, event.clientX, event.clientY)) { onClose(); } } diff --git a/src/platform/dom.ts b/src/platform/dom.ts new file mode 100644 index 0000000..cc3925c --- /dev/null +++ b/src/platform/dom.ts @@ -0,0 +1,5 @@ +export function isPointNotInRect(rect: DOMRect, ptX: number, ptY: number) { + return ( + ptY < rect.top || ptY > rect.bottom || ptX < rect.left || ptX > rect.right + ); +} From 12718930dbc19a8ff8ceab76f77e96f7dcf09c33 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 1 Dec 2024 23:27:16 +0800 Subject: [PATCH 2/5] Scaffold: remove toolbar button hack --- src/material/Scaffold.css | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/material/Scaffold.css b/src/material/Scaffold.css index 30e18e5..4dfe915 100644 --- a/src/material/Scaffold.css +++ b/src/material/Scaffold.css @@ -6,19 +6,6 @@ .MuiToolbar-root { margin-left: var(--safe-area-inset-left); margin-right: var(--safe-area-inset-right); - - >.MuiButtonBase-root { - &:first-child { - margin-left: -0.5em; - margin-right: 24px; - } - - &:last-child { - margin-right: -0.5em; - margin-left: 24px; - } - - } } } @@ -40,5 +27,6 @@ .Scaffold { height: 100%; width: 100%; + display: contents; background-color: var(--tutu-color-surface); } \ No newline at end of file From 5d1cf347a4001095eb8400511b28d5220b096b10 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 1 Dec 2024 23:27:49 +0800 Subject: [PATCH 3/5] AppTopBar: support app bar props --- src/material/AppTopBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/material/AppTopBar.tsx b/src/material/AppTopBar.tsx index dca5852..a9ad382 100644 --- a/src/material/AppTopBar.tsx +++ b/src/material/AppTopBar.tsx @@ -2,11 +2,12 @@ import { AppBar, Toolbar } from "@suid/material"; import { splitProps, type JSX, type ParentComponent } from "solid-js"; import "./AppTopBar.css"; import { useWindowSize } from "@solid-primitives/resize-observer"; +import type { AppBarProps } from "@suid/material/AppBar"; const AppTopBar: ParentComponent<{ class?: string; style?: JSX.HTMLAttributes["style"]; -}> = (oprops) => { +} & AppBarProps> = (oprops) => { const [props, rest] = splitProps(oprops, ["children", "class"]); const windowSize = useWindowSize(); From cf985f05ca92b0a039db5b1e4c4432f66c2282be Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 1 Dec 2024 23:28:13 +0800 Subject: [PATCH 4/5] AppTopBar: add gap --- src/material/AppTopBar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/material/AppTopBar.css b/src/material/AppTopBar.css index 27169b7..de3426d 100644 --- a/src/material/AppTopBar.css +++ b/src/material/AppTopBar.css @@ -1,5 +1,6 @@ .AppTopBar { & > .toolbar { padding-top: var(--safe-area-inset-top, 0px); + gap: 8px; } } From 530a89755c649bda189cb170bb74dc41a0590a59 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 1 Dec 2024 23:28:23 +0800 Subject: [PATCH 5/5] Profile: use AppTopBar --- src/profiles/Profile.tsx | 57 ++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx index 5e1ad0c..6e24cbf 100644 --- a/src/profiles/Profile.tsx +++ b/src/profiles/Profile.tsx @@ -62,6 +62,7 @@ import { createSingluarItemSelection, default as ItemSelectionProvider, } from "../timelines/toots/ItemSelectionProvider"; +import AppTopBar from "~material/AppTopBar"; const Profile: Component = () => { const { pop } = useNavigator(); @@ -195,44 +196,38 @@ const Profile: Component = () => { return ( - + + + - <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close"> - <Close /> - </IconButton> - <Title - class="Profile__page-title" - style={{ - visibility: scrolledPastBanner() ? undefined : "hidden", - }} - innerHTML={displayName()} - > + innerHTML={displayName()} + > - - - - - + + + + } class="Profile" >