mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 22:02:16 +00:00
Open the capture sheet from the dashboard's add button on phones
On the phone shell the header's 'Add' opened a dropdown while the plus in the bottom nav, one thumb below, opened the capture sheet. The header button now opens the same sheet there; the desktop rail keeps the dropdown. The onboarding tour anchors on whichever of the two is laid out.
This commit is contained in:
1 parent
b53782810f
commit
6ca33882f1
3 files changed
+51
-14
No files matched your search
@@ -102,12 +102,26 @@ interface SpotlightRect {
|
||||
* not in the DOM or has zero dimensions — caller renders a centred
|
||||
* tooltip in that case.
|
||||
*/
|
||||
/**
|
||||
* The rendered element carrying a tour id. A control can exist twice with the
|
||||
* same id, one per shell (the dashboard's add button is a dropdown on the
|
||||
* desktop rail and a sheet trigger on the phone shell), with the other one
|
||||
* hidden; the stop anchors on the one that is actually laid out.
|
||||
*/
|
||||
function findTourTarget(targetId: string): HTMLElement | null {
|
||||
const all = document.querySelectorAll<HTMLElement>(
|
||||
`[data-tour-id="${CSS.escape(targetId)}"]`,
|
||||
);
|
||||
for (const el of all) {
|
||||
if (el.getClientRects().length > 0) return el;
|
||||
}
|
||||
return all[0] ?? null;
|
||||
}
|
||||
|
||||
function measureTarget(targetId: string | null): SpotlightRect | null {
|
||||
if (!targetId) return null;
|
||||
if (typeof document === "undefined") return null;
|
||||
const el = document.querySelector<HTMLElement>(
|
||||
`[data-tour-id="${CSS.escape(targetId)}"]`,
|
||||
);
|
||||
const el = findTourTarget(targetId);
|
||||
if (!el) return null;
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width === 0 || rect.height === 0) return null;
|
||||
@@ -356,11 +370,7 @@ export function OnboardingTour({
|
||||
const MAX_ATTEMPTS = 40;
|
||||
const settleAndMeasure = () => {
|
||||
if (cancelled) return;
|
||||
const el = stop.targetId
|
||||
? document.querySelector<HTMLElement>(
|
||||
`[data-tour-id="${CSS.escape(stop.targetId)}"]`,
|
||||
)
|
||||
: null;
|
||||
const el = stop.targetId ? findTourTarget(stop.targetId) : null;
|
||||
if (el) {
|
||||
// Bring the anchor into view BEFORE measuring — anchors below the
|
||||
// fold positioned the popover under the viewport bottom otherwise.
|
||||
|
||||
Reference in new issue
Block a user