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

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

@ -1,7 +1,4 @@
.bottomSheet { .BottomSheet {
composes: surface from "./material.module.css";
composes: cardGutSkip from "./cards.module.css";
composes: cardNoPad from "./cards.module.css";
border: none; border: none;
position: fixed; position: fixed;
left: 50%; left: 50%;
@ -16,7 +13,7 @@
max-height: 100dvh; max-height: 100dvh;
height: 95%; height: 95%;
contain: strict; contain: strict;
contain-intrinsic-size: 100% 95%; contain-intrinsic-size: auto 560px auto 95vh;
&::backdrop { &::backdrop {
@ -25,8 +22,8 @@
box-shadow: var(--tutu-shadow-e16); box-shadow: var(--tutu-shadow-e16);
:global(.MuiToolbar-root) { .MuiToolbar-root {
> :global(.MuiButtonBase-root) { >.MuiButtonBase-root {
&:first-child { &:first-child {
margin-left: -0.5em; margin-left: -0.5em;

23
src/material/BottomSheet.tsx
View file

@ -7,8 +7,9 @@ import {
type ParentComponent, type ParentComponent,
type ResolvedChildren, type ResolvedChildren,
} from "solid-js"; } from "solid-js";
import styles from "./BottomSheet.module.css"; import "./BottomSheet.css";
import { useHeroSignal } from "../platform/anim"; import { useHeroSignal } from "../platform/anim";
import material from "./material.module.css";
export type BottomSheetProps = { export type BottomSheetProps = {
open?: boolean; open?: boolean;
@ -97,7 +98,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const srcElement = hero(); const srcElement = hero();
const startRect = srcElement?.getBoundingClientRect(); const startRect = srcElement?.getBoundingClientRect();
if (!startRect) { if (!startRect) {
console.debug("no source element") console.debug("no source element");
} }
if (startRect) { if (startRect) {
srcElement!.style.visibility = "hidden"; srcElement!.style.visibility = "hidden";
@ -113,7 +114,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const animateSlideInFromRight = (element: HTMLElement, reserve?: boolean) => { const animateSlideInFromRight = (element: HTMLElement, reserve?: boolean) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; 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; const oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
const distance = Math.abs(rect.left - window.innerWidth); const distance = Math.abs(rect.left - window.innerWidth);
@ -128,7 +129,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
{ easing, duration }, { easing, duration },
); );
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove(styles.animated); element.classList.remove("animated");
document.body.style.overflow = oldOverflow; document.body.style.overflow = oldOverflow;
animation = undefined; animation = undefined;
}; };
@ -143,7 +144,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
) => { ) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; 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; const oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
const distance = Math.abs(rect.top - window.innerHeight); const distance = Math.abs(rect.top - window.innerHeight);
@ -158,7 +159,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
{ easing, duration }, { easing, duration },
); );
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove(styles.animated); element.classList.remove("animated");
document.body.style.overflow = oldOverflow; document.body.style.overflow = oldOverflow;
animation = undefined; animation = undefined;
}; };
@ -174,7 +175,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
reserve?: boolean, reserve?: boolean,
) => { ) => {
const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
element.classList.add(styles.animated); element.classList.add("animated");
const distance = Math.sqrt( const distance = Math.sqrt(
Math.pow(Math.abs(startRect.top - endRect.top), 2) + Math.pow(Math.abs(startRect.top - endRect.top), 2) +
Math.pow(Math.abs(startRect.left - startRect.top), 2), Math.pow(Math.abs(startRect.left - startRect.top), 2),
@ -188,7 +189,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
{ easing, duration }, { easing, duration },
); );
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove(styles.animated); element.classList.remove("animated");
animation = undefined; animation = undefined;
}; };
animation.addEventListener("finish", onAnimationEnd); animation.addEventListener("finish", onAnimationEnd);
@ -218,9 +219,11 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
return ( return (
<dialog <dialog
class={`BottomSheet ${material.surface}`}
classList={{ classList={{
[styles.bottomSheet]: true, ["BottomSheet"]: true,
[styles.bottom]: props.bottomUp, [material.surface]: true,
["bottom"]: props.bottomUp,
}} }}
onClick={onDialogClick} onClick={onDialogClick}
ref={element!} ref={element!}