diff --git a/src/material/AppTopBar.css b/src/material/AppTopBar.css index de3426d..27169b7 100644 --- a/src/material/AppTopBar.css +++ b/src/material/AppTopBar.css @@ -1,6 +1,5 @@ .AppTopBar { & > .toolbar { padding-top: var(--safe-area-inset-top, 0px); - gap: 8px; } } diff --git a/src/material/AppTopBar.tsx b/src/material/AppTopBar.tsx index a9ad382..dca5852 100644 --- a/src/material/AppTopBar.tsx +++ b/src/material/AppTopBar.tsx @@ -2,12 +2,11 @@ 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"]; -} & AppBarProps> = (oprops) => { +}> = (oprops) => { const [props, rest] = splitProps(oprops, ["children", "class"]); const windowSize = useWindowSize(); diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index 99bfbd0..73fd734 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -13,7 +13,6 @@ import { animateSlideInFromRight, animateSlideOutToRight, } from "~platform/anim"; -import { isPointNotInRect } from "~platform/dom"; export type BottomSheetProps = { open?: boolean; @@ -121,7 +120,12 @@ const BottomSheet: ParentComponent = (props) => { event.stopPropagation(); if (event.target !== event.currentTarget) return; const rect = event.currentTarget.getBoundingClientRect(); - if (isPointNotInRect(rect, event.clientX, event.clientY)) { + const isNotInDialog = + event.clientY < rect.top || + event.clientY > rect.bottom || + event.clientX < rect.left || + event.clientX > rect.right; + if (isNotInDialog) { props.onClose?.("backdrop"); } }; diff --git a/src/material/Scaffold.css b/src/material/Scaffold.css index 4dfe915..30e18e5 100644 --- a/src/material/Scaffold.css +++ b/src/material/Scaffold.css @@ -6,6 +6,19 @@ .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; + } + + } } } @@ -27,6 +40,5 @@ .Scaffold { height: 100%; width: 100%; - display: contents; background-color: var(--tutu-color-surface); } \ No newline at end of file diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx index 75e7594..975d66f 100644 --- a/src/platform/StackedRouter.tsx +++ b/src/platform/StackedRouter.tsx @@ -19,7 +19,6 @@ 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; @@ -174,7 +173,12 @@ function onDialogClick( ) { if (event.target !== event.currentTarget) return; const rect = event.currentTarget.getBoundingClientRect(); - if (isPointNotInRect(rect, event.clientX, event.clientY)) { + const isNotInDialog = + event.clientY < rect.top || + event.clientY > rect.bottom || + event.clientX < rect.left || + event.clientX > rect.right; + if (isNotInDialog) { onClose(); } } diff --git a/src/platform/dom.ts b/src/platform/dom.ts deleted file mode 100644 index cc3925c..0000000 --- a/src/platform/dom.ts +++ /dev/null @@ -1,5 +0,0 @@ -export function isPointNotInRect(rect: DOMRect, ptX: number, ptY: number) { - return ( - ptY < rect.top || ptY > rect.bottom || ptX < rect.left || ptX > rect.right - ); -} diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx index 6e24cbf..5e1ad0c 100644 --- a/src/profiles/Profile.tsx +++ b/src/profiles/Profile.tsx @@ -62,7 +62,6 @@ import { createSingluarItemSelection, default as ItemSelectionProvider, } from "../timelines/toots/ItemSelectionProvider"; -import AppTopBar from "~material/AppTopBar"; const Profile: Component = () => { const { pop } = useNavigator(); @@ -196,38 +195,44 @@ const Profile: Component = () => { return ( - - - - - - - - - + + + + + + + + + + } class="Profile" >