Compare commits

...

2 commits

Author SHA1 Message Date
thislight
187ebdba33
BottomSheet: remove module css
All checks were successful
/ depoly (push) Successful in 1m19s
2024-10-31 22:00:32 +08:00
thislight
0267bffe87
adjust shadow of BottomSheet and Menu 2024-10-31 21:50:36 +08:00
5 changed files with 59 additions and 50 deletions

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,24 +13,17 @@
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 {
transition-property: background-color, opacity; background: none;
transition-duration: 120ms;
transition-timing-function: var(--tutu-anim-curve-std);
transition-behavior: allow-discrete;
}
&[open]::backdrop {
background-color: black;
opacity: 0.5;
} }
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;
@ -67,11 +57,6 @@
overflow: hidden; overflow: hidden;
will-change: width, height, top, left; will-change: width, height, top, left;
&::backdrop {
opacity: 0;
background-color: transparent;
}
& * { & * {
overflow: hidden; overflow: hidden;
} }
@ -93,4 +78,4 @@
} }
} }
} }
} }

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

14
src/material/Menu.css Normal file
View file

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

View file

@ -7,6 +7,7 @@ import {
type ParentComponent, type ParentComponent,
} from "solid-js"; } from "solid-js";
import { ANIM_CURVE_STD } from "./theme"; import { ANIM_CURVE_STD } from "./theme";
import "./Menu.css";
type Props = { type Props = {
open?: boolean; open?: boolean;
@ -156,17 +157,11 @@ const Menu: ParentComponent<Props> = (props) => {
e.stopPropagation(); e.stopPropagation();
} }
}} }}
class="Menu"
style={{ style={{
position: "fixed",
left: px(anchorPos().left), left: px(anchorPos().left),
top: px(anchorPos().top), top: px(anchorPos().top),
border: "none",
"border-radius": "2px",
padding: 0,
"max-width": "560px",
width: "max-content",
/* FIXME: the content may be overflow */ /* FIXME: the content may be overflow */
"box-shadow": "var(--tutu-shadow-e8)",
}} }}
> >
<div <div

View file

@ -82,28 +82,40 @@
--tutu-color-error-on-surface: #d32f2f; --tutu-color-error-on-surface: #d32f2f;
--tutu-color-inactive-on-surface: #757575; --tutu-color-inactive-on-surface: #757575;
--tutu-color-shadow: rgba(0, 0, 0, 0.15); --tutu-color-shadow: rgba(0, 0, 0, 0.45);
--tutu-color-shadow-l1: rgba(0, 0, 0, 0.4);
--tutu-color-shadow-l2: rgba(0, 0, 0, 0.35);
--tutu-shadow-e1: 0px 1px 2px 0px var(--tutu-color-shadow);
/* Switch */ /* Switch */
--tutu-shadow-e2: 0px 2px 4px 0px var(--tutu-color-shadow); --tutu-shadow-e1: 0px 1px 2px 0px var(--tutu-color-shadow);
/* (Resting) cards, raised button, quick entry / search bar */ /* (Resting) cards, raised button, quick entry / search bar */
--tutu-shadow-e3: 0px 3px 6px 0px var(--tutu-color-shadow); --tutu-shadow-e2: 0px 2px 4px 0px var(--tutu-color-shadow);
/* Refresh indicator, quick entry / search bar (scrolled) */ /* Refresh indicator, quick entry / search bar (scrolled) */
--tutu-shadow-e4: 0px 4px 8px 0px var(--tutu-color-shadow); --tutu-shadow-e3: 0px 3px 6px 0px var(--tutu-color-shadow);
/* App bar */ /* App bar */
--tutu-shadow-e6: 0px 6px 12px 0px var(--tutu-color-shadow); --tutu-shadow-e4: 0px 4px 8px 0px var(--tutu-color-shadow);
/* Snack bar, FAB (resting) */ /* Snack bar, FAB (resting) */
--tutu-shadow-e8: 0px 8px 16px 0px var(--tutu-color-shadow); --tutu-shadow-e6: 0px 6px 12px 0px var(--tutu-color-shadow);
/* Menu, (picked-up) cards, (pressed) raise button */ /* Menu, (picked-up) cards, (pressed) raise button */
--tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow); --tutu-shadow-e8: 0px 8px 16px 0px var(--tutu-color-shadow);
/* Submenu (+1dp for each submenu) */ /* Submenu (+1dp for each submenu) */
--tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow); --tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow);
/* (pressed) FAB */ /* (pressed) FAB */
--tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow); --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow-l1);
/* Nav drawer, right drawer, modal bottom sheet */ /* Nav drawer, right drawer, modal bottom sheet */
--tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow); --tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow-l1);
/* Dialog, picker */ /* Dialog, picker */
--tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow-l2);
--tutu-anim-curve-std: cubic-bezier(0.4, 0, 0.2, 1); --tutu-anim-curve-std: cubic-bezier(0.4, 0, 0.2, 1);
--tutu-anim-curve-deceleration: cubic-bezier(0, 0, 0.2, 1); --tutu-anim-curve-deceleration: cubic-bezier(0, 0, 0.2, 1);