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

Add store location map manager #20

Open
nalalangan wants to merge 206 commits from feature/location-map-manager into feature/store-selector-modal
pull from: feature/location-map-manager
merge into: nalalangan:feature/store-selector-modal
Conversation 0 Commits 206 Files Changed 47 +41 -5
3 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 691d27fe1b - Show all commits

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

@ -167,7 +167,11 @@ export function SelectedMapObjectForm({
disabled={saving} disabled={saving}
onClick={() => onObjectField("visible", selectedObject.visible === false)} 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>
<button <button
type="button" type="button"
@ -176,7 +180,11 @@ export function SelectedMapObjectForm({
disabled={saving} disabled={saving}
onClick={() => onObjectField("locked", !selectedObject.locked)} 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> </button>
</div> </div>
<div className="location-map-editor-actions"> <div className="location-map-editor-actions">

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

@ -762,7 +762,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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: 1px solid var(--color-border-light);
border-radius: 999px; border-radius: 999px;
background: rgba(15, 23, 34, 0.58); background: rgba(15, 23, 34, 0.58);
@ -771,6 +772,28 @@
cursor: pointer; 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 { .location-map-object-flags button.active {
border-color: rgba(96, 165, 250, 0.76); border-color: rgba(96, 165, 250, 0.76);
background: rgba(59, 130, 246, 0.32); 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"); const objectFlagButtons = page.locator(".location-map-object-flags").getByRole("button");
await expect(objectFlagButtons).toHaveCount(2); await expect(objectFlagButtons).toHaveCount(2);
await expect(page.locator(".location-map-object-flags input[type='checkbox']")).toHaveCount(0); await expect(page.locator(".location-map-object-flags input[type='checkbox']")).toHaveCount(0);
await expect(page.getByRole("button", { name: "Visible" })).toHaveAttribute("aria-pressed", "true"); const visibleFlag = page.getByRole("button", { name: "Visible" });
await expect(page.getByRole("button", { name: "Locked" })).toHaveAttribute("aria-pressed", "false"); 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 selectedPrimaryActions = page.locator(".location-map-selected-primary-actions");
const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions"); const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions");
await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toHaveCount(0); await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toHaveCount(0);