From 7e698ebe4c8758226dfbf6365d4c258595e8b0d2 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 10 Nov 2024 16:56:41 +0800 Subject: [PATCH 1/4] bump to v1.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b9c3e21..6e1fdb9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "$schema": "https://json.schemastore.org/package", "name": "tutu", - "version": "1.0.8", + "version": "1.1.0", "description": "", "private": true, "type": "module", From 34dd95e9599a484c99c514c9f55f4616a3f7acb8 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 10 Nov 2024 21:23:03 +0800 Subject: [PATCH 2/4] Settings: fix safe area insets emulation --- src/settings/Settings.tsx | 44 ++++++++++++++++++++++++++++----------- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 8806ff5..50ec67d 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -98,7 +98,14 @@ const safeAreaInsets: Record = { let screenOrientationCallback: (() => void) | undefined; +function removeSafeAreaEmulation(root: HTMLElement) { + for (const name of ["top", "right", "bottom", "left"]) { + root.style.removeProperty(`--safe-area-inset-${name}`); + } +} + function applySafeAreaEmulation(root: HTMLElement, insets: Inset) { + removeSafeAreaEmulation(root); for (const key of Object.keys(insets) as (keyof Inset)[]) { const value = insets[key]; if (!value || value === 0) continue; @@ -109,19 +116,22 @@ function applySafeAreaEmulation(root: HTMLElement, insets: Inset) { function setupSafeAreaEmulation(name: string) { const insets = safeAreaInsets[name]; const root = document.querySelector(":root")! as HTMLElement; - if (!insets) { - if (screenOrientationCallback) { - window.screen.orientation.removeEventListener( - "change", - screenOrientationCallback, - ); - screenOrientationCallback = undefined; - } - for (const name of ["top", "right", "bottom", "left"]) { - root.style.removeProperty(`--safe-area-inset-${name}`); - } - } else { + + if (screenOrientationCallback) { + window.screen.orientation.removeEventListener( + "change", + screenOrientationCallback, + ); + screenOrientationCallback = undefined; + } + + removeSafeAreaEmulation(root); + + if (insets) { screenOrientationCallback = () => { + console.debug( + `safe area emulation target: ${window.screen.orientation.type}`, + ); if (window.screen.orientation.type === "portrait-primary") { console.debug("safe area emulation: protrait"); applySafeAreaEmulation(root, insets.protrait); @@ -138,6 +148,16 @@ function setupSafeAreaEmulation(name: string) { } } +if (import.meta.hot) { + import.meta.hot.accept((mod) => { + if (!mod) return; + if (screenOrientationCallback) { + mod["screenOrientationCallback"] = screenOrientationCallback; + setTimeout(screenOrientationCallback, 0); + } + }); +} + type Strings = { ["lang.auto"]: Template<{ detected: string }>; } & Record; From 8066f699bd625f8aab8010ca9e6c242878780539 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 10 Nov 2024 21:39:10 +0800 Subject: [PATCH 3/4] TootBottomSheet: test scrollable --- src/timelines/TootBottomSheet.css | 18 +++++ src/timelines/TootBottomSheet.tsx | 113 +++++++++++++++--------------- 2 files changed, 74 insertions(+), 57 deletions(-) create mode 100644 src/timelines/TootBottomSheet.css diff --git a/src/timelines/TootBottomSheet.css b/src/timelines/TootBottomSheet.css new file mode 100644 index 0000000..afe2e5d --- /dev/null +++ b/src/timelines/TootBottomSheet.css @@ -0,0 +1,18 @@ +.TootBottomSheet { + overflow: hidden; + + .Scrollable { + padding-bottom: var(--safe-area-inset-bottom, 0); + overflow-y: auto; + overscroll-behavior-y: contain; + max-height: calc(100vh - var(--scaffold-topbar-height, 0px)); + max-height: calc(100dvh - var(--scaffold-topbar-height, 0px)); + } + + .progress-line { + display: flex; + justify-content: center; + margin-top: 12px; + margin-bottom: 12px; + } +} \ No newline at end of file diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index 92a44c3..1c6b111 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -11,9 +11,7 @@ import { import Scaffold from "../material/Scaffold"; import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material"; import { Title } from "../material/typography"; -import { - Close as CloseIcon, -} from "@suid/icons-material"; +import { Close as CloseIcon } from "@suid/icons-material"; import { useSessionForAcctStr } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; import RegularToot, { findElementActionable } from "./RegularToot"; @@ -26,6 +24,7 @@ import TootComposer from "./TootComposer"; import { useDocumentTitle } from "../utils"; import { createTimelineControlsForArray } from "../masto/timelines"; import TootList from "./TootList"; +import "./TootBottomSheet.css"; let cachedEntry: [string, mastodon.v1.Status] | undefined; @@ -245,64 +244,64 @@ const TootBottomSheet: Component = (props) => { } + class="TootBottomSheet" > - - - -
- - - -
- - - refetchContext()} - inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id} +
+ + - - -
- -
- +
+ + + +
- - -
+ + refetchContext()} + inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id} + /> + + + +
+ +
+ + + + +
); }; From 85cb7ad08118778fc693916a65c4ea15af382128 Mon Sep 17 00:00:00 2001 From: thislight Date: Sun, 10 Nov 2024 22:29:49 +0800 Subject: [PATCH 4/4] App: try fix gap at bottom on iOS standalone --- src/App.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/App.css b/src/App.css index 0e083fc..880ecd9 100644 --- a/src/App.css +++ b/src/App.css @@ -10,6 +10,11 @@ overscroll-behavior-block: none; } +body, #root { + min-height: 100vh; + min-height: 100dvh; +} + .custom-emoji { width: 1em; }