BottomSheet: set body overflow:hidden in animation

src/App.tsx

@@ -26,6 +26,8 @@ const TimelineHome = lazy(() => import("./timelines/Home.js"));
 const Settings = lazy(() => import("./settings/Settings.js"));
 const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
 const MotionSettings = lazy(() => import("./settings/Motions.js"));
+const LanguageSettings = lazy(() => import("./settings/Language.js"));
+const RegionSettings = lazy(() => import("./settings/Region.jsx"));
 
 const Routing: Component = () => {
   return (
@@ -34,6 +36,8 @@ const Routing: Component = () => {
         <Route path=""></Route>
         <Route path="/settings" component={Settings}>
           <Route path=""></Route>
+          <Route path="/language" component={LanguageSettings}></Route>
+          <Route path="/region" component={RegionSettings}></Route>
           <Route path="/motions" component={MotionSettings}></Route>
         </Route>
         <Route path="/:acct/:id" component={TootBottomSheet}></Route>

src/material/BottomSheet.module.css

@@ -43,7 +43,7 @@
 
   &.animated {
     position: absolute;
-    transform: none;
+    transform: translateY(-50%);
     overflow: hidden;
     will-change: width, height, top, left;
 
@@ -54,6 +54,12 @@
     & * {
       overflow: hidden;
     }
+
+    @media (max-width: 560px) {
+      & {
+        transform: none;
+      }
+    }
   }
 
   &.bottom {

src/material/BottomSheet.tsx

@@ -36,7 +36,7 @@ function composeAnimationFrame(
   };
 }
 
-const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than small papers
+const MOVE_SPEED = 1200;
 
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
@@ -62,13 +62,17 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   });
 
   const onClose = () => {
-    hero()!.style.visibility = 'unset'
+    const srcElement = hero();
+    if (srcElement) {
+      srcElement.style.visibility = "unset";
+    }
+
     element.close();
     setHero();
   };
 
   const animatedClose = () => {
-    const srcElement = hero()
+    const srcElement = hero();
     const endRect = srcElement?.getBoundingClientRect();
     if (endRect) {
       const startRect = element.getBoundingClientRect();
@@ -76,19 +80,94 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
-      element.close();
-      setHero();
+      if (window.innerWidth > 560 && !props.bottomUp) {
+        onClose();
+        return;
+      }
+      const animation = props.bottomUp
+        ? animateSlideInFromBottom(element, true)
+        : animateSlideInFromRight(element, true);
+      animation.addEventListener("finish", onClose);
+      animation.addEventListener("cancel", onClose);
     }
   };
 
   const animatedOpen = () => {
     element.showModal();
-    const srcElement = hero()
+    const srcElement = hero();
     const startRect = srcElement?.getBoundingClientRect();
-    if (!startRect) return;
-    srcElement!.style.visibility = 'hidden'
-    const endRect = element.getBoundingClientRect();
-    animateHero(startRect, endRect, element);
+    if (startRect) {
+      srcElement!.style.visibility = "hidden";
+      const endRect = element.getBoundingClientRect();
+      animateHero(startRect, endRect, element);
+    } else if (props.bottomUp) {
+      animateSlideInFromBottom(element);
+    } else if (window.innerWidth <= 560) {
+      animateSlideInFromRight(element);
+    }
+  };
+
+  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);
+    const oldOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const distance = Math.abs(rect.left - window.innerWidth);
+    const duration = (distance / MOVE_SPEED) * 1000;
+
+    animation = element.animate(
+      {
+        top: [rect.top, rect.top],
+        left: reserve
+          ? [`${rect.left}px`, `${window.innerWidth}px`]
+          : [`${window.innerWidth}px`, `${rect.left}px`],
+        width: [rect.width, rect.width],
+        height: [rect.height, rect.height],
+      },
+      { easing, duration },
+    );
+    const onAnimationEnd = () => {
+      element.classList.remove(styles.animated);
+      document.body.style.overflow = oldOverflow;
+      animation = undefined;
+    };
+    animation.addEventListener("cancel", onAnimationEnd);
+    animation.addEventListener("finish", onAnimationEnd);
+    return animation;
+  };
+
+  const animateSlideInFromBottom = (
+    element: HTMLElement,
+    reserve?: boolean,
+  ) => {
+    const rect = element.getBoundingClientRect();
+    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
+    element.classList.add(styles.animated);
+    const oldOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const distance = Math.abs(rect.top - window.innerHeight);
+    const duration = (distance / MOVE_SPEED) * 1000;
+
+    animation = element.animate(
+      {
+        left: [rect.left, rect.left],
+        top: reserve
+          ? [`${rect.top}px`, `${window.innerHeight}px`]
+          : [`${window.innerHeight}px`, `${rect.top}px`],
+        width: [rect.width, rect.width],
+        height: [rect.height, rect.height],
+      },
+      { easing, duration },
+    );
+    const onAnimationEnd = () => {
+      element.classList.remove(styles.animated);
+      document.body.style.overflow = oldOverflow;
+      animation = undefined;
+    };
+    animation.addEventListener("cancel", onAnimationEnd);
+    animation.addEventListener("finish", onAnimationEnd);
+    return animation;
   };
 
   const animateHero = (

src/settings/Language.tsx

@@ -13,7 +13,7 @@ import {
   Switch,
   Toolbar,
 } from "@suid/material";
-import { Close as CloseIcon } from "@suid/icons-material";
+import { ArrowBack } from "@suid/icons-material";
 import iso639_1 from "iso-639-1";
 import {
   autoMatchLangTag,
@@ -22,14 +22,12 @@ import {
 } from "../platform/i18n";
 import { Title } from "../material/typography";
 import type { Template } from "@solid-primitives/i18n";
+import { useStore } from "@nanostores/solid";
+import { $settings } from "./stores";
+import { useNavigate } from "@solidjs/router";
 
-type ChooseLangProps = {
-  code?: string;
-  onCodeChange: (ncode?: string) => void;
-  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
-};
-
-const ChooseLang: Component<ChooseLangProps> = (props) => {
+const ChooseLang: Component = () => {
+  const navigate = useNavigate()
   const [t] = createTranslator(
     () => import("./i18n/lang-names.json"),
     (code) =>
@@ -39,6 +37,9 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
         };
       }>,
   );
+  const settings = useStore($settings)
+
+  const code = () => settings().language
 
   const unsupportedLangCodes = createMemo(() => {
     return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
@@ -46,6 +47,10 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
 
   const matchedLangCode = createMemo(() => autoMatchLangTag());
 
+  const onCodeChange = (code?: string) => {
+    $settings.setKey("language", code)
+  }
+
   return (
     <Scaffold
       topbar={
@@ -54,8 +59,8 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
             variant="dense"
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
-            <IconButton color="inherit" onClick={props.onClose} disableRipple>
-              <CloseIcon />
+            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
+              <ArrowBack />
             </IconButton>
             <Title>{t("Choose Language")}</Title>
           </Toolbar>
@@ -69,7 +74,7 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
       >
         <ListItemButton
           onClick={() => {
-            props.onCodeChange(props.code ? undefined : matchedLangCode());
+            onCodeChange(code() ? undefined : matchedLangCode());
           }}
         >
           <ListItemText>
@@ -78,20 +83,20 @@ const ChooseLang: Component<ChooseLangProps> = (props) => {
             })}
           </ListItemText>
           <ListItemSecondaryAction>
-            <Switch checked={typeof props.code === "undefined"} />
+            <Switch checked={typeof code() === "undefined"} />
           </ListItemSecondaryAction>
         </ListItemButton>
         <List subheader={<ListSubheader>{t("Supported")}</ListSubheader>}>
           <For each={SUPPORTED_LANGS}>
-            {(code) => (
+            {(c) => (
               <ListItemButton
-                disabled={typeof props.code === "undefined"}
-                onClick={[props.onCodeChange, code]}
+                disabled={typeof code() === "undefined"}
+                onClick={[onCodeChange, c]}
               >
-                <ListItemText>{t(`lang.${code}`)}</ListItemText>
+                <ListItemText>{t(`lang.${c}`)}</ListItemText>
                 <ListItemSecondaryAction>
                   <Radio
-                    checked={props.code === code || (props.code === undefined && matchedLangCode() == code)}
+                    checked={code() === c || (code() === undefined && matchedLangCode() == c)}
                   />
                 </ListItemSecondaryAction>
               </ListItemButton>

src/settings/Motions.tsx

@@ -14,7 +14,7 @@ import {
 } from "@suid/material";
 import { Title } from "../material/typography";
 import { useNavigate } from "@solidjs/router";
-import { Close as CloseIcon } from "@suid/icons-material";
+import { ArrowBack } from "@suid/icons-material";
 import { createTranslator } from "../platform/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
@@ -37,7 +37,7 @@ const Motions: Component = () => {
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
-              <CloseIcon />
+              <ArrowBack />
             </IconButton>
             <Title>{t("motions")}</Title>
           </Toolbar>

src/settings/Region.tsx

@@ -12,8 +12,7 @@ import {
   Switch,
   Toolbar,
 } from "@suid/material";
-import { Close as CloseIcon } from "@suid/icons-material";
-import iso639_1 from "iso-639-1";
+import { ArrowBack } from "@suid/icons-material";
 import {
   autoMatchRegion,
   createTranslator,
@@ -21,14 +20,12 @@ import {
 } from "../platform/i18n";
 import { Title } from "../material/typography";
 import type { Template } from "@solid-primitives/i18n";
+import { useNavigate } from "@solidjs/router";
+import { $settings } from "./stores";
+import { useStore } from "@nanostores/solid";
 
-type ChooseRegionProps = {
-  code?: string;
-  onCodeChange: (ncode?: string) => void;
-  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
-};
-
-const ChooseRegion: Component<ChooseRegionProps> = (props) => {
+const ChooseRegion: Component = () => {
+  const navigate = useNavigate();
   const [t] = createTranslator(
     () => import("./i18n/lang-names.json"),
     (code) =>
@@ -39,12 +36,16 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
       }>,
   );
 
-  const unsupportedLangCodes = createMemo(() => {
-    return iso639_1.getAllCodes().filter((x) => !["zh", "en"].includes(x));
-  });
+  const settings = useStore($settings);
+
+  const region = () => settings().region;
 
   const matchedRegionCode = createMemo(() => autoMatchRegion());
 
+  const onCodeChange = (code?: string) => {
+    $settings.setKey("region", code);
+  };
+
   return (
     <Scaffold
       topbar={
@@ -53,8 +54,8 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
             variant="dense"
             sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
           >
-            <IconButton color="inherit" onClick={props.onClose} disableRipple>
-              <CloseIcon />
+            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
+              <ArrowBack />
             </IconButton>
             <Title>{t("Choose Language")}</Title>
           </Toolbar>
@@ -68,16 +69,17 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
       >
         <ListItemButton
           onClick={() => {
-            props.onCodeChange(props.code ? undefined : matchedRegionCode());
+            onCodeChange(region() ? undefined : matchedRegionCode());
           }}
         >
           <ListItemText>
             {t("region.auto", {
-              detected: t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
+              detected:
+                t(`region.${matchedRegionCode()}`) ?? matchedRegionCode(),
             })}
           </ListItemText>
           <ListItemSecondaryAction>
-            <Switch checked={typeof props.code === "undefined"} />
+            <Switch checked={typeof region() === "undefined"} />
           </ListItemSecondaryAction>
         </ListItemButton>
 
@@ -85,13 +87,16 @@ const ChooseRegion: Component<ChooseRegionProps> = (props) => {
           <For each={SUPPORTED_REGIONS}>
             {(code) => (
               <ListItemButton
-                disabled={typeof props.code === "undefined"}
-                onClick={[props.onCodeChange, code]}
+                disabled={typeof region() === "undefined"}
+                onClick={[onCodeChange, code]}
               >
                 <ListItemText>{t(`region.${code}`)}</ListItemText>
                 <ListItemSecondaryAction>
                   <Radio
-                    checked={props.code === code || (props.code === undefined && matchedRegionCode() == code)}
+                    checked={
+                      region() === code ||
+                      (region() === undefined && matchedRegionCode() == code)
+                    }
                   />
                 </ListItemSecondaryAction>
               </ListItemButton>

src/settings/Settings.tsx

@@ -41,15 +41,10 @@ import {
   autoMatchLangTag,
   autoMatchRegion,
   createTranslator,
-  SUPPORTED_LANGS,
-  SUPPORTED_REGIONS,
   useDateFnLocale,
 } from "../platform/i18n.jsx";
 import { type Template } from "@solid-primitives/i18n";
 import BottomSheet from "../material/BottomSheet.jsx";
-import ChooseLang from "./ChooseLang.jsx";
-import ChooseRegion from "./ChooseRegion.jsx";
-import { Portal } from "solid-js/web";
 
 type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
@@ -69,8 +64,6 @@ const Settings: ParentComponent = (props) => {
     needRefresh: [needRefresh],
   } = useRegisterSW();
   const dateFnLocale = useDateFnLocale();
-  const [langPickerOpen, setLangPickerOpen] = createSignal(false);
-  const [regionPickerOpen, setRegionPickerOpen] = createSignal(false);
 
   const [profiles] = useSignedInProfiles();
 
@@ -175,7 +168,7 @@ const Settings: ParentComponent = (props) => {
         </li>
         <li>
           <ListSubheader>{t("This Application")}</ListSubheader>
-          <ListItemButton onClick={[setLangPickerOpen, true]}>
+          <ListItemButton component={A} href="./language">
             <ListItemIcon>
               <TranslateIcon />
             </ListItemIcon>
@@ -192,15 +185,8 @@ const Settings: ParentComponent = (props) => {
               {t("Language")}
             </ListItemText>
           </ListItemButton>
-          <BottomSheet open={langPickerOpen()}>
-            <ChooseLang
-              code={settings$().language}
-              onCodeChange={(nval) => $settings.setKey("language", nval)}
-              onClose={[setLangPickerOpen, false]}
-            />
-          </BottomSheet>
           <Divider />
-          <ListItemButton onClick={[setRegionPickerOpen, true]}>
+          <ListItemButton component={A} href="./region">
             <ListItemIcon>
               <PublicIcon />
             </ListItemIcon>
@@ -217,13 +203,6 @@ const Settings: ParentComponent = (props) => {
               {t("Region")}
             </ListItemText>
           </ListItemButton>
-          <BottomSheet open={regionPickerOpen()}>
-            <ChooseRegion
-              code={settings$().region}
-              onCodeChange={(nval) => $settings.setKey("region", nval)}
-              onClose={[setRegionPickerOpen, false]}
-            />
-          </BottomSheet>
           <Divider />
           <ListItem>
             <ListItemText secondary={t("About Tutu.2nd")}>