mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-10-20 19:52:04 +00:00
aa345c9e0c
- The current implementation for modals is provided by fomantic UI. - This patch introduces a new implementation that relies on the `<dialog>` element to provide modal, whereby the heavy lifting is done by the browser. - This implementation is considerably simpler, accessible (although untested) and lightweight. It is capable of replacing fomantic UI's modal implementation + our dimmer implementation (~2k lines of code and CSS).[^1] As a first step the empty content modal is migrated. - This brings in the CSS needed to display `<dialog>` and a helper function that hides some boilerplate code that's needed to show `<dialog>` as a modal. - Add a E2E test that shows the modal's cancel and approve button works. [^1]: The heavy work has already been done by me in a local branch, but reviewing that gigantic patch in one PR is not doable. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8859 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Gusted <postmaster@gusted.xyz> Co-committed-by: Gusted <postmaster@gusted.xyz>
45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
// @watch start
|
|
// templates/repo/editor/edit.tmpl
|
|
// templates/repo/editor/patch.tmpl
|
|
// web_src/js/features/repo-editor.js
|
|
// web_src/css/modules/dialog.ts
|
|
// web_src/css/modules/dialog.css
|
|
// @watch end
|
|
|
|
import {expect} from '@playwright/test';
|
|
import {save_visual, dynamic_id, test} from './utils_e2e.ts';
|
|
|
|
test.use({user: 'user2'});
|
|
|
|
test('Dialog modal', async ({page}, workerInfo) => {
|
|
test.skip(['Mobile Safari', 'webkit'].includes(workerInfo.project.name), 'keyboard shortcuts do not work');
|
|
let response = await page.goto('/user2/repo1/_new/master', {waitUntil: 'domcontentloaded'});
|
|
expect(response?.status()).toBe(200);
|
|
|
|
const filename = `${dynamic_id()}.md`;
|
|
|
|
await page.getByPlaceholder('Name your file…').fill(filename);
|
|
await page.locator('.monaco-editor').click();
|
|
await page.keyboard.type('Hi, nice to meet you. Can I talk about ');
|
|
|
|
await page.locator('.quick-pull-choice input[value="direct"]').click();
|
|
await page.getByRole('button', {name: 'Commit changes'}).click();
|
|
|
|
response = await page.goto(`/user2/repo1/_edit/master/${filename}`, {waitUntil: 'domcontentloaded'});
|
|
expect(response?.status()).toBe(200);
|
|
|
|
await page.locator('.monaco-editor-container').click();
|
|
await page.keyboard.press('ControlOrMeta+A');
|
|
await page.keyboard.press('Backspace');
|
|
|
|
await page.locator('#commit-button').click();
|
|
await save_visual(page);
|
|
await expect(page.locator('#edit-empty-content-modal')).toBeVisible();
|
|
|
|
await page.locator('#edit-empty-content-modal .cancel').click();
|
|
await expect(page.locator('#edit-empty-content-modal')).toBeHidden();
|
|
|
|
await page.locator('#commit-button').click();
|
|
await page.locator('#edit-empty-content-modal .ok').click();
|
|
await expect(page).toHaveURL(`/user2/repo1/src/branch/master/${filename}`);
|
|
});
|