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

fix: clarify map area toggle states

Browse Source
This commit is contained in:
Nico 2026-06-04 21:14:45 -07:00
parent 635347bea2
commit 691d27fe1b
3 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -167,7 +167,11 @@ export function SelectedMapObjectForm({
disabled={saving}
onClick={() => onObjectField("visible", selectedObject.visible === false)}
>
Visible
<span
className={`location-map-object-flag-state ${selectedObject.visible !== false ? "is-on" : ""}`}
aria-hidden="true"
/>
<span className="location-map-object-flag-label">Visible</span>
</button>
<button
type="button"
@ -176,7 +180,11 @@ export function SelectedMapObjectForm({
disabled={saving}
onClick={() => onObjectField("locked", !selectedObject.locked)}
>
Locked
<span
className={`location-map-object-flag-state ${selectedObject.locked ? "is-on" : ""}`}
aria-hidden="true"
/>
<span className="location-map-object-flag-label">Locked</span>
</button>
</div>
<div className="location-map-editor-actions">

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

@ -762,7 +762,8 @@
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.5rem;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
border: 1px solid var(--color-border-light);
border-radius: 999px;
background: rgba(15, 23, 34, 0.58);
@ -771,6 +772,28 @@
cursor: pointer;
}
.location-map-object-flag-state {
flex: 0 0 auto;
width: 0.85rem;
height: 0.85rem;
border: 1px solid rgba(148, 163, 184, 0.68);
border-radius: 999px;
background: rgba(2, 6, 23, 0.3);
}
.location-map-object-flag-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-object-flag-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.location-map-object-flags button.active {
border-color: rgba(96, 165, 250, 0.76);
background: rgba(59, 130, 246, 0.32);

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

@ -4118,8 +4118,13 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
const objectFlagButtons = page.locator(".location-map-object-flags").getByRole("button");
await expect(objectFlagButtons).toHaveCount(2);
await expect(page.locator(".location-map-object-flags input[type='checkbox']")).toHaveCount(0);
await expect(page.getByRole("button", { name: "Visible" })).toHaveAttribute("aria-pressed", "true");
await expect(page.getByRole("button", { name: "Locked" })).toHaveAttribute("aria-pressed", "false");
const visibleFlag = page.getByRole("button", { name: "Visible" });
const lockedFlag = page.getByRole("button", { name: "Locked" });
await expect(page.locator(".location-map-object-flag-state")).toHaveCount(2);
await expect(visibleFlag).toHaveAttribute("aria-pressed", "true");
await expect(visibleFlag.locator(".location-map-object-flag-state.is-on")).toHaveCount(1);
await expect(lockedFlag).toHaveAttribute("aria-pressed", "false");
await expect(lockedFlag.locator(".location-map-object-flag-state.is-on")).toHaveCount(0);
const selectedPrimaryActions = page.locator(".location-map-selected-primary-actions");
const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions");
await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toHaveCount(0);