Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

BottomSheet: remove module css
All checks were successful
/ depoly (push) Successful in 1m19s
Details

Browse source
This commit is contained in:
thislight 2024-10-31 22:00:32 +08:00
parent 0267bffe87
commit 187ebdba33
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
2 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/material/BottomSheet.module.css → src/material/BottomSheet.css
View file

@ -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 @@
}
}
}
}
}

23
src/material/BottomSheet.tsx
View file

@ -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<BottomSheetProps> = (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<BottomSheetProps> = (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<BottomSheetProps> = (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<BottomSheetProps> = (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<BottomSheetProps> = (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<BottomSheetProps> = (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<BottomSheetProps> = (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<BottomSheetProps> = (props) => {
return (
<dialog
class={`BottomSheet ${material.surface}`}
classList={{
[styles.bottomSheet]: true,
[styles.bottom]: props.bottomUp,
["BottomSheet"]: true,
[material.surface]: true,
["bottom"]: props.bottomUp,
}}
onClick={onDialogClick}
ref={element!}