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

fix: prioritize map draft actions

Browse Source
This commit is contained in:
Nico 2026-06-03 14:43:06 -07:00
parent 18b11edba9
commit eb89c1f6fc
3 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/maps/LocationMapBottomSheet.jsx
View File

@ -73,20 +73,24 @@ export default function LocationMapBottomSheet({
})); }));
}; };
const editorActions = showEditorControls ? ( const editorActions = showEditorControls ? (
<div className="location-map-editor-actions location-map-primary-actions"> <div className="location-map-editor-action-stack" role="group" aria-label="Map draft actions">
<button type="button" onClick={onAddObject}>Add Area</button> <div className="location-map-editor-actions location-map-primary-actions">
<button type="button" onClick={onPreviewDraft}>Preview Draft</button> <button type="button" className="primary" onClick={onSaveDraft} disabled={saving || !hasUnsavedChanges}>Save Draft</button>
<button type="button" className="primary" onClick={onSaveDraft} disabled={saving || !hasUnsavedChanges}>Save Draft</button> <button
<button type="button"
type="button" className="primary"
className="primary" onClick={onPublish}
onClick={onPublish} disabled={saving || (!mapState?.draft_map && !hasUnsavedChanges)}
disabled={saving || (!mapState?.draft_map && !hasUnsavedChanges)} >
> Publish
Publish </button>
</button> </div>
<button type="button" onClick={onUndo} disabled={history.length === 0}>Undo</button> <div className="location-map-editor-actions location-map-secondary-actions">
<button type="button" onClick={onRedo} disabled={future.length === 0}>Redo</button> <button type="button" onClick={onAddObject}>Add Area</button>
<button type="button" onClick={onPreviewDraft} aria-label="Preview Draft">Preview</button>
<button type="button" onClick={onUndo} disabled={history.length === 0}>Undo</button>
<button type="button" onClick={onRedo} disabled={future.length === 0}>Redo</button>
</div>
</div> </div>
) : canManage && mapState?.published_map ? ( ) : canManage && mapState?.published_map ? (
<div className="location-map-editor-actions"> <div className="location-map-editor-actions">

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

@ -396,11 +396,25 @@
.location-map-editor-actions { .location-map-editor-actions {
flex-wrap: wrap; flex-wrap: wrap;
}
.location-map-editor-action-stack {
display: grid;
gap: 0.45rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.location-map-primary-actions button { .location-map-primary-actions button {
flex: 1 1 96px; flex: 1 1 140px;
}
.location-map-secondary-actions button {
flex: 1 1 82px;
min-height: 38px;
padding: 0.45rem 0.58rem;
background: rgba(21, 40, 59, 0.78);
color: #dbeafe;
font-size: 0.86rem;
} }
.location-map-mobile-tool-switch { .location-map-mobile-tool-switch {

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

@ -882,6 +882,18 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
await expect(page.getByLabel("Map controls")).toBeVisible(); await expect(page.getByLabel("Map controls")).toBeVisible();
await expect(page.locator(".location-map-tool-buttons")).toBeHidden(); await expect(page.locator(".location-map-tool-buttons")).toBeHidden();
await expect(page.locator(".location-map-mobile-tool-switch")).toBeVisible(); await expect(page.locator(".location-map-mobile-tool-switch")).toBeVisible();
const primaryActions = page.locator(".location-map-primary-actions");
const secondaryActions = page.locator(".location-map-secondary-actions");
await expect(primaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible();
await expect(primaryActions.getByRole("button", { name: "Publish" })).toBeVisible();
await expect(secondaryActions.getByRole("button", { name: "Add Area" })).toBeVisible();
await expect(secondaryActions.getByRole("button", { name: "Preview Draft" })).toBeVisible();
const primaryActionBox = await primaryActions.boundingBox();
const secondaryActionBox = await secondaryActions.boundingBox();
expect(primaryActionBox).not.toBeNull();
expect(secondaryActionBox).not.toBeNull();
if (!primaryActionBox || !secondaryActionBox) throw new Error("Mobile action groups were not measurable");
expect(primaryActionBox.y).toBeLessThan(secondaryActionBox.y);
await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/active/); await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/active/);
await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/is-pan/); await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/is-pan/);
await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/is-edit/); await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/is-edit/);