nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: stabilize map toolbar controls

Browse Source
This commit is contained in:
Nico 2026-06-04 20:54:53 -07:00
parent 05c9577c71
commit 4c753579dd
4 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/maps/LocationMapBottomSheetSections.jsx
View File

@ -87,7 +87,11 @@ export function LocationMapLayerPanel({ filters, setFilters }) {
setFilters((current) => ({ ...current, [key]: !current[key] }))
}
>
{label}
<span
className={`location-map-layer-state ${filters[key] ? "is-on" : ""}`}
aria-hidden="true"
/>
<span className="location-map-layer-label">{label}</span>
</button>
))}
</div>

10
frontend/src/components/maps/LocationMapToolbar.jsx
View File

@ -66,12 +66,11 @@ export default function LocationMapToolbar({
}) {
const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
const showHistorySlot = canManage && hasAnyMap;
const canUseHistoryControls = mode === "edit" && showHistorySlot;
const canUseHistoryControls = mode === "edit" && canManage && hasAnyMap;
return (
<section
className={`location-map-toolbar ${showHistorySlot ? "has-history-slot" : ""}`}
className={`location-map-toolbar ${canUseHistoryControls ? "has-history-slot" : ""}`}
aria-label="Map controls"
>
<div className="location-map-mode-group">
@ -100,11 +99,10 @@ export default function LocationMapToolbar({
) : null}
</div>
</div>
{showHistorySlot ? (
{canUseHistoryControls ? (
<div
className={`location-map-history-buttons ${canUseHistoryControls ? "" : "is-inactive"}`}
className="location-map-history-buttons"
aria-label="Edit history"
aria-hidden={!canUseHistoryControls}
>
<button
type="button"

43
frontend/src/styles/pages/LocationMapManager.css
View File

@ -200,11 +200,6 @@
gap: 0.3rem;
}
.location-map-history-buttons.is-inactive {
visibility: hidden;
pointer-events: none;
}
.location-map-history-buttons button {
min-width: 40px;
padding-inline: 0.55rem;
@ -600,7 +595,7 @@
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
gap: 0.35rem;
padding: 0.35rem 0.45rem;
border: 1px solid var(--color-border-light);
@ -612,6 +607,31 @@
cursor: pointer;
}
.location-map-layer-state {
flex: 0 0 auto;
width: 0.85rem;
height: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.68);
border-radius: 999px;
background: rgba(2, 6, 23, 0.3);
}
.location-map-layer-state.is-on {
border-color: rgba(96, 165, 250, 0.95);
background: var(--color-primary);
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16);
}
.location-map-layer-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.location-map-display-controls button.active {
border-color: rgba(96, 165, 250, 0.76);
background: rgba(59, 130, 246, 0.32);
@ -1002,7 +1022,7 @@
@media (max-width: 839px) {
.location-map-toolbar {
--location-map-mode-slot: clamp(132px, 24vw, 188px);
--location-map-mode-slot: clamp(168px, 24vw, 188px);
--location-map-history-slot: 84px;
display: grid;
grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
@ -1150,7 +1170,7 @@
}
.location-map-toolbar {
--location-map-mode-slot: 132px;
--location-map-mode-slot: 168px;
--location-map-history-slot: 84px;
column-gap: 0.15rem;
row-gap: 0.35rem;
@ -1169,6 +1189,13 @@
min-width: 28px;
}
.location-map-toolbar.has-history-slot .location-map-zoom-controls {
grid-column: 1 / -1;
width: 100%;
justify-self: stretch;
justify-content: space-between;
}
.location-map-display-controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

45
frontend/tests/location-map-manager.spec.ts
View File

@ -1409,7 +1409,6 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
const toolbarBox = await toolbar.boundingBox();
const modeGroupBox = await modeGroup.boundingBox();
const modeBox = await modeButtons.boundingBox();
const reservedHistoryBox = await historyActions.boundingBox();
const zoomBox = await zoomControls.boundingBox();
expect(topbarBox).not.toBeNull();
expect(backButtonBox).not.toBeNull();
@ -1418,7 +1417,6 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
expect(toolbarBox).not.toBeNull();
expect(modeGroupBox).not.toBeNull();
expect(modeBox).not.toBeNull();
expect(reservedHistoryBox).not.toBeNull();
expect(zoomBox).not.toBeNull();
if (
!topbarBox ||
@ -1428,7 +1426,6 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
!toolbarBox ||
!modeGroupBox ||
!modeBox ||
!reservedHistoryBox ||
!zoomBox
) {
throw new Error("Mobile map controls layout was not measurable");
@ -1440,19 +1437,15 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
expect(statusBox.x).toBeGreaterThan(titleBox.x);
expect(toolbarBox.height).toBeLessThanOrEqual(64);
expect(modeBox.width).toBeGreaterThanOrEqual(130);
expect(modeBox.width).toBeLessThanOrEqual(136);
expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(82);
expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
await expect(historyActions).toHaveCSS("visibility", "hidden");
await expect(historyActions.locator('button[aria-label="Undo"]')).toBeDisabled();
await expect(historyActions.locator('button[aria-label="Redo"]')).toBeDisabled();
expect(modeBox.width).toBeGreaterThanOrEqual(166);
expect(modeBox.width).toBeLessThanOrEqual(172);
await expect(historyActions).toHaveCount(0);
expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
expect(zoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
expect(zoomBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
expect(zoomBox.x + zoomBox.width).toBeLessThanOrEqual(toolbarBox.x + toolbarBox.width + 1);
await page.getByRole("button", { name: "Edit Draft" }).click();
await expect(historyActions).toHaveCSS("visibility", "visible");
await expect(historyActions).toHaveCount(1);
await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
const editToolbarBox = await toolbar.boundingBox();
@ -1471,11 +1464,13 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
expect(Math.abs(editModeBox.x - modeBox.x)).toBeLessThanOrEqual(1);
expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
expect(Math.abs(editModeBox.width - modeBox.width)).toBeLessThanOrEqual(1);
expect(editModeBox.width).toBeGreaterThanOrEqual(130);
expect(editModeBox.width).toBeLessThanOrEqual(136);
expect(Math.abs(editHistoryBox.width - reservedHistoryBox.width)).toBeLessThanOrEqual(1);
expect(editModeBox.width).toBeGreaterThanOrEqual(166);
expect(editModeBox.width).toBeLessThanOrEqual(172);
expect(editHistoryBox.width).toBeGreaterThanOrEqual(82);
expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
expect(editHistoryBox.x + editHistoryBox.width).toBeLessThanOrEqual(editToolbarBox.x + editToolbarBox.width + 1);
expect(editZoomBox.y).toBeGreaterThan(editModeBox.y + editModeBox.height - 1);
expect(editZoomBox.x).toBeGreaterThanOrEqual(editToolbarBox.x);
expect(editZoomBox.x + editZoomBox.width).toBeLessThanOrEqual(editToolbarBox.x + editToolbarBox.width + 1);
});
@ -1531,8 +1526,8 @@ test("narrow mobile toolbar keeps map controls tappable without overflow", async
expect(toolbarBox.x).toBeGreaterThanOrEqual(0);
expect(toolbarBox.x + toolbarBox.width).toBeLessThanOrEqual(361);
expect(modeBox.width).toBeGreaterThanOrEqual(130);
expect(modeBox.width).toBeLessThanOrEqual(136);
expect(modeBox.width).toBeGreaterThanOrEqual(166);
expect(modeBox.width).toBeLessThanOrEqual(172);
expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);
@ -2708,11 +2703,14 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
await page.getByRole("button", { name: "Layers" }).click();
const labelsToggle = page.getByRole("button", { name: "Labels" });
await expect(page.locator(".location-map-display-controls .location-map-layer-state")).toHaveCount(8);
await expect(labelsToggle).toHaveAttribute("aria-pressed", "true");
await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(1);
await expect(page.getByRole("button", { name: "Bought" })).toBeVisible();
await expect(page.getByRole("button", { name: "Done" })).toHaveCount(0);
await labelsToggle.click();
await expect(labelsToggle).toHaveAttribute("aria-pressed", "false");
await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(0);
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toBeVisible();
await expect(produceArea.locator(".location-map-label")).toHaveCount(0);
await expect(produceArea.locator(".location-map-count")).toHaveText("2 items");
@ -3926,22 +3924,19 @@ test("compact tablet map starts fitted on first load", async ({ page }) => {
const historyActions = page.locator(".location-map-history-buttons");
const zoomControls = page.locator(".location-map-zoom-controls");
const viewModeBox = await modeButtons.boundingBox();
const reservedHistoryBox = await historyActions.boundingBox();
const viewZoomBox = await zoomControls.boundingBox();
expect(viewModeBox).not.toBeNull();
expect(reservedHistoryBox).not.toBeNull();
expect(viewZoomBox).not.toBeNull();
if (!viewModeBox || !reservedHistoryBox || !viewZoomBox) {
if (!viewModeBox || !viewZoomBox) {
throw new Error("Compact tablet toolbar layout was not measurable");
}
expect(viewModeBox.width).toBeGreaterThanOrEqual(180);
expect(viewModeBox.width).toBeLessThanOrEqual(190);
await expect(historyActions).toHaveCSS("visibility", "hidden");
expect(reservedHistoryBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
expect(viewZoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
await expect(historyActions).toHaveCount(0);
expect(viewZoomBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
await page.getByRole("button", { name: "Edit Draft" }).click();
await expect(historyActions).toHaveCSS("visibility", "visible");
await expect(historyActions).toHaveCount(1);
const toolbarBox = await toolbar.boundingBox();
const editModeBox = await modeButtons.boundingBox();
const editHistoryBox = await historyActions.boundingBox();