Add store location map manager #20
@ -31,8 +31,10 @@ export default function LocationMapToolbar({
|
|||||||
disabled={!hasAnyMap}
|
disabled={!hasAnyMap}
|
||||||
onClick={onEdit}
|
onClick={onEdit}
|
||||||
aria-pressed={mode === "edit"}
|
aria-pressed={mode === "edit"}
|
||||||
|
aria-label="Edit Draft"
|
||||||
>
|
>
|
||||||
Edit Draft
|
<span className="location-map-label-full">Edit Draft</span>
|
||||||
|
<span className="location-map-label-short">Edit</span>
|
||||||
</button>
|
</button>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -188,6 +188,10 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.location-map-label-short {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.location-map-canvas-shell {
|
.location-map-canvas-shell {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@ -616,21 +620,45 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.location-map-toolbar {
|
.location-map-toolbar {
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
align-items: stretch;
|
flex-wrap: nowrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem 0.65rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-map-mode-group,
|
.location-map-mode-group,
|
||||||
.location-map-mode-buttons,
|
.location-map-mode-buttons {
|
||||||
.location-map-tool-buttons,
|
|
||||||
.location-map-zoom-controls {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-map-mode-buttons button,
|
.location-map-mode-buttons button {
|
||||||
.location-map-tool-buttons button,
|
|
||||||
.location-map-zoom-controls button {
|
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
padding-inline: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-map-label-full {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-map-label-short {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-map-zoom-controls {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-map-zoom-controls button {
|
||||||
|
min-width: 40px;
|
||||||
|
padding-inline: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-map-zoom-controls span {
|
||||||
|
min-width: 42px;
|
||||||
|
font-size: 0.82rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-map-tool-buttons {
|
.location-map-tool-buttons {
|
||||||
|
|||||||
@ -505,18 +505,31 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
|
|||||||
|
|
||||||
const topbar = page.locator(".location-map-topbar");
|
const topbar = page.locator(".location-map-topbar");
|
||||||
const status = page.locator(".location-map-status");
|
const status = page.locator(".location-map-status");
|
||||||
|
const toolbar = page.locator(".location-map-toolbar");
|
||||||
|
const modeButtons = page.locator(".location-map-mode-buttons");
|
||||||
|
const zoomControls = page.locator(".location-map-zoom-controls");
|
||||||
await expect(status).toHaveText("Draft Preview");
|
await expect(status).toHaveText("Draft Preview");
|
||||||
|
|
||||||
const topbarBox = await topbar.boundingBox();
|
const topbarBox = await topbar.boundingBox();
|
||||||
const titleBox = await page.locator(".location-map-title").boundingBox();
|
const titleBox = await page.locator(".location-map-title").boundingBox();
|
||||||
const statusBox = await status.boundingBox();
|
const statusBox = await status.boundingBox();
|
||||||
|
const toolbarBox = await toolbar.boundingBox();
|
||||||
|
const modeBox = await modeButtons.boundingBox();
|
||||||
|
const zoomBox = await zoomControls.boundingBox();
|
||||||
expect(topbarBox).not.toBeNull();
|
expect(topbarBox).not.toBeNull();
|
||||||
expect(titleBox).not.toBeNull();
|
expect(titleBox).not.toBeNull();
|
||||||
expect(statusBox).not.toBeNull();
|
expect(statusBox).not.toBeNull();
|
||||||
if (!topbarBox || !titleBox || !statusBox) throw new Error("Mobile topbar layout was not measurable");
|
expect(toolbarBox).not.toBeNull();
|
||||||
|
expect(modeBox).not.toBeNull();
|
||||||
|
expect(zoomBox).not.toBeNull();
|
||||||
|
if (!topbarBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
|
||||||
|
throw new Error("Mobile map controls layout was not measurable");
|
||||||
|
}
|
||||||
expect(topbarBox.height).toBeLessThanOrEqual(66);
|
expect(topbarBox.height).toBeLessThanOrEqual(66);
|
||||||
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
|
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
|
||||||
expect(statusBox.x).toBeGreaterThan(titleBox.x);
|
expect(statusBox.x).toBeGreaterThan(titleBox.x);
|
||||||
|
expect(toolbarBox.height).toBeLessThanOrEqual(64);
|
||||||
|
expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {
|
test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user