julian.kiedaisch/mdg-filius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(editor): the left bar folds away, and the device sheet takes the whole editor on a phone

Browse Source 
A button at the top of the palette and the documentation's bar folds it to a
slim column, as the dashboard's own bar does; one state for both, kept in the
browser. Up to 639 px the device sheet covers the whole editor, over the bar
and the mode buttons, instead of sharing half the height below the surface.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
julian.kiedaisch
2026-10-10 19:59:47 +00:00
co-authored by Claude Opus 5.5
parent 9fae9e59b2
commit 317c0d9602
12 changed files with 247 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor/browser/design.spec.ts
+40
View File
@@ -245,3 +245,43 @@ test('by touch: a long press opens the menu, a finger drags a device', async ({
await expect(page.getByRole('menu')).toBeHidden();
await context.close();
});
test('folds the palette to a slim column with its button in the same place, kept for the next visit and for the documentation', async ({ page }) => {
await openEditor(page, server.base, 'new');
const palette = page.getByRole('navigation', { name: 'Komponenten' });
const fold = palette.getByRole('button', { name: 'Leiste einklappen' });
const before = { fold: (await fold.boundingBox())!, bar: (await palette.boundingBox())!, surface: (await page.locator('svg.filius-canvas').boundingBox())! };
// The button stands at the top, over the cable.
expect(before.fold.y + before.fold.height).toBeLessThanOrEqual((await paletteCentre(page, 'cable')).y);
await expect(fold).toHaveAttribute('aria-expanded', 'true');
await fold.click();
const unfold = palette.getByRole('button', { name: 'Leiste ausklappen' });
await expect(unfold).toHaveAttribute('aria-expanded', 'false');
await expect(palette.locator('[data-palette]')).toHaveCount(0);
const folded = { fold: (await unfold.boundingBox())!, bar: (await palette.boundingBox())!, surface: (await page.locator('svg.filius-canvas').boundingBox())! };
expect([folded.fold.x, folded.fold.y, folded.fold.width, folded.fold.height]).toEqual([before.fold.x, before.fold.y, 44, 44]);
expect(folded.bar.width).toBe(57);
expect(folded.surface.x).toBe(before.surface.x - (before.bar.width - 57));
expect(folded.surface.width).toBe(before.surface.width + (before.bar.width - 57));
// Folded on the next visit, and the documentation's bar with it; unfolded there, the palette is back.
await openEditor(page, server.base, 'new');
await expect(palette.getByRole('button', { name: 'Leiste ausklappen' })).toBeVisible();
await expect(palette.locator('[data-palette]')).toHaveCount(0);
await page.getByRole('button', { name: 'Wechselt in den Dokumentationsmodus' }).click();
const sidebar = page.getByRole('navigation', { name: 'Dokumentation' });
await expect(sidebar.locator('[data-docu]')).toHaveCount(0);
await sidebar.getByRole('button', { name: 'Leiste ausklappen' }).click();
await expect(sidebar.locator('[data-docu]')).toHaveCount(2);
await page.getByRole('button', { name: 'Wechselt in den Entwurfsmodus' }).click();
await expect(palette.locator('[data-palette]')).toHaveCount(7);
expect((await palette.boundingBox())!.width).toBe(before.bar.width);
});
test('names the fold button in English when asked', async ({ page }) => {
await openEditor(page, server.base, 'new', '&lang=en');
const palette = page.getByRole('navigation', { name: 'Components' });
await palette.getByRole('button', { name: 'Collapse the bar' }).click();
await expect(palette.getByRole('button', { name: 'Expand the bar' })).toHaveAttribute('title', 'Expand the bar');
});