From 0267bffe8733ce06f940c430a8a7ba70bbfb3417 Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 31 Oct 2024 21:50:36 +0800 Subject: [PATCH 1/2] adjust shadow of BottomSheet and Menu --- src/material/BottomSheet.module.css | 16 ++------------ src/material/Menu.css | 14 ++++++++++++ src/material/Menu.tsx | 9 ++------ src/material/theme.css | 34 +++++++++++++++++++---------- 4 files changed, 41 insertions(+), 32 deletions(-) create mode 100644 src/material/Menu.css diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index 0b80c42..6eca0ca 100644 --- a/src/material/BottomSheet.module.css +++ b/src/material/BottomSheet.module.css @@ -18,16 +18,9 @@ contain: strict; contain-intrinsic-size: 100% 95%; - &::backdrop { - transition-property: background-color, opacity; - transition-duration: 120ms; - transition-timing-function: var(--tutu-anim-curve-std); - transition-behavior: allow-discrete; - } - &[open]::backdrop { - background-color: black; - opacity: 0.5; + &::backdrop { + background: none; } box-shadow: var(--tutu-shadow-e16); @@ -67,11 +60,6 @@ overflow: hidden; will-change: width, height, top, left; - &::backdrop { - opacity: 0; - background-color: transparent; - } - & * { overflow: hidden; } diff --git a/src/material/Menu.css b/src/material/Menu.css new file mode 100644 index 0000000..2be4bcf --- /dev/null +++ b/src/material/Menu.css @@ -0,0 +1,14 @@ +.Menu { + position: fixed; + border: 1px solid var(--tutu-color-surface-d); + border-radius: 2px; + padding: 0; + max-width: 560px; + width: max-content; + box-shadow: var(--tutu-shadow-e8); + contain: content; +} + +dialog.Menu::backdrop { + background: none; +} \ No newline at end of file diff --git a/src/material/Menu.tsx b/src/material/Menu.tsx index 6c08dad..9e23f62 100644 --- a/src/material/Menu.tsx +++ b/src/material/Menu.tsx @@ -7,6 +7,7 @@ import { type ParentComponent, } from "solid-js"; import { ANIM_CURVE_STD } from "./theme"; +import "./Menu.css"; type Props = { open?: boolean; @@ -156,17 +157,11 @@ const Menu: ParentComponent = (props) => { e.stopPropagation(); } }} + class="Menu" style={{ - position: "fixed", left: px(anchorPos().left), top: px(anchorPos().top), - border: "none", - "border-radius": "2px", - padding: 0, - "max-width": "560px", - width: "max-content", /* FIXME: the content may be overflow */ - "box-shadow": "var(--tutu-shadow-e8)", }} >
Date: Thu, 31 Oct 2024 22:00:32 +0800 Subject: [PATCH 2/2] BottomSheet: remove module css --- ...BottomSheet.module.css => BottomSheet.css} | 13 ++++------- src/material/BottomSheet.tsx | 23 +++++++++++-------- 2 files changed, 18 insertions(+), 18 deletions(-) rename src/material/{BottomSheet.module.css => BottomSheet.css} (81%) diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.css similarity index 81% rename from src/material/BottomSheet.module.css rename to src/material/BottomSheet.css index 6eca0ca..1d5a937 100644 --- a/src/material/BottomSheet.module.css +++ b/src/material/BottomSheet.css @@ -1,7 +1,4 @@ -.bottomSheet { - composes: surface from "./material.module.css"; - composes: cardGutSkip from "./cards.module.css"; - composes: cardNoPad from "./cards.module.css"; +.BottomSheet { border: none; position: fixed; left: 50%; @@ -16,7 +13,7 @@ max-height: 100dvh; height: 95%; contain: strict; - contain-intrinsic-size: 100% 95%; + contain-intrinsic-size: auto 560px auto 95vh; &::backdrop { @@ -25,8 +22,8 @@ box-shadow: var(--tutu-shadow-e16); - :global(.MuiToolbar-root) { - > :global(.MuiButtonBase-root) { + .MuiToolbar-root { + >.MuiButtonBase-root { &:first-child { margin-left: -0.5em; @@ -81,4 +78,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index 4e00868..cd38df7 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -7,8 +7,9 @@ import { type ParentComponent, type ResolvedChildren, } from "solid-js"; -import styles from "./BottomSheet.module.css"; +import "./BottomSheet.css"; import { useHeroSignal } from "../platform/anim"; +import material from "./material.module.css"; export type BottomSheetProps = { open?: boolean; @@ -97,7 +98,7 @@ const BottomSheet: ParentComponent = (props) => { const srcElement = hero(); const startRect = srcElement?.getBoundingClientRect(); if (!startRect) { - console.debug("no source element") + console.debug("no source element"); } if (startRect) { srcElement!.style.visibility = "hidden"; @@ -113,7 +114,7 @@ const BottomSheet: ParentComponent = (props) => { const animateSlideInFromRight = (element: HTMLElement, reserve?: boolean) => { const rect = element.getBoundingClientRect(); const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; - element.classList.add(styles.animated); + element.classList.add("animated"); const oldOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; const distance = Math.abs(rect.left - window.innerWidth); @@ -128,7 +129,7 @@ const BottomSheet: ParentComponent = (props) => { { easing, duration }, ); const onAnimationEnd = () => { - element.classList.remove(styles.animated); + element.classList.remove("animated"); document.body.style.overflow = oldOverflow; animation = undefined; }; @@ -143,7 +144,7 @@ const BottomSheet: ParentComponent = (props) => { ) => { const rect = element.getBoundingClientRect(); const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; - element.classList.add(styles.animated); + element.classList.add("animated"); const oldOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; const distance = Math.abs(rect.top - window.innerHeight); @@ -158,7 +159,7 @@ const BottomSheet: ParentComponent = (props) => { { easing, duration }, ); const onAnimationEnd = () => { - element.classList.remove(styles.animated); + element.classList.remove("animated"); document.body.style.overflow = oldOverflow; animation = undefined; }; @@ -174,7 +175,7 @@ const BottomSheet: ParentComponent = (props) => { reserve?: boolean, ) => { const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; - element.classList.add(styles.animated); + element.classList.add("animated"); const distance = Math.sqrt( Math.pow(Math.abs(startRect.top - endRect.top), 2) + Math.pow(Math.abs(startRect.left - startRect.top), 2), @@ -188,7 +189,7 @@ const BottomSheet: ParentComponent = (props) => { { easing, duration }, ); const onAnimationEnd = () => { - element.classList.remove(styles.animated); + element.classList.remove("animated"); animation = undefined; }; animation.addEventListener("finish", onAnimationEnd); @@ -218,9 +219,11 @@ const BottomSheet: ParentComponent = (props) => { return (