mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-09-26 12:45:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: first native dialog for modal (#8859)

Browse source 
- 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>
This commit is contained in:
Gusted 2025-09-20 20:09:17 +02:00 • committed by Gusted
commit aa345c9e0c
9 changed files with 232 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

40
templates/repo/editor/edit.tmpl
View file

@ -51,24 +51,26 @@
{{template "repo/editor/commit_form" .}}
</form>
</div>
<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
<div class="header">
{{svg "octicon-file"}}
{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}
</div>
<div class="center content">
<p>{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui primary ok button">
{{svg "fontawesome-save"}}
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
</button>
</div>
</div>
<dialog id="edit-empty-content-modal">
<article>
<header>
{{svg "octicon-file"}}
{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}
</header>
<div class="content">
<p>{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui primary ok button">
{{svg "fontawesome-save"}}
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
</button>
</div>
</article>
</dialog>
</div>
{{template "base/footer" .}}

40
templates/repo/editor/patch.tmpl
View file

@ -34,24 +34,26 @@
</form>
</div>
<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
<div class="header">
{{svg "octicon-file"}}
{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}
</div>
<div class="center content">
<p>{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui primary ok button">
{{svg "fontawesome-save"}}
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
</button>
</div>
</div>
<dialog id="edit-empty-content-modal">
<article>
<header>
{{svg "octicon-file"}}
{{ctx.Locale.Tr "repo.editor.commit_empty_file_header"}}
</header>
<div class="content">
<p>{{ctx.Locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui primary ok button">
{{svg "fontawesome-save"}}
{{ctx.Locale.Tr "repo.editor.commit_changes"}}
</button>
</div>
</article>
</dialog>
</div>
{{template "base/footer" .}}

21
tests/e2e/dimmer.test.e2e.ts
View file

@ -56,19 +56,16 @@ test('Dimmed overflow', async ({page}, workerInfo) => {
await page.locator('#commit-button').click();
// Expect a 'are you sure, this file is empty' modal.
await expect(page.locator('.ui.dimmer')).toBeVisible();
await expect(page.locator('.ui.dimmer .header')).toContainText('Commit an empty file');
await expect(page.locator('#edit-empty-content-modal')).toBeVisible();
await expect(page.locator('#edit-empty-content-modal header')).toContainText('Commit an empty file');
await save_visual(page);
// Trickery to check that the dimmer covers the whole page.
const viewport = page.viewportSize();
const box = await page.locator('.ui.dimmer').boundingBox();
expect(box.x).toBe(0);
expect(box.y).toBe(0);
expect(box.width).toBe(viewport.width);
expect(box.height).toBe(viewport.height);
// Trickery to check the page cannot be scrolled.
const {scrollHeight, clientHeight} = await page.evaluate(() => document.body);
expect(scrollHeight).toBe(clientHeight);
const {overflow} = await page.evaluate(() => {
const s = getComputedStyle(document.body);
return {
overflow: s.overflow,
};
});
expect(overflow).toBe('hidden');
});

45
tests/e2e/modal.test.e2e.ts Normal file
View file

@ -0,0 +1,45 @@
// @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}`);
});

1
web_src/css/index.css
View file

@ -18,6 +18,7 @@
@import "./modules/checkbox.css";
@import "./modules/modal.css";
@import "./modules/dimmer.css";
@import "./modules/dialog.css";
@import "./modules/switch.css";
@import "./modules/dropdown.css";

98
web_src/css/modules/dialog.css Normal file
View file

@ -0,0 +1,98 @@
body:has(dialog[open]) {
overflow: hidden;
}
dialog {
align-items: center;
justify-content: center;
position: fixed;
text-align: left;
border: none;
background: var(--color-body);
box-shadow:
1px 3px 3px 0 var(--color-shadow),
1px 3px 15px 2px var(--color-shadow);
border-radius: 0.28571429rem;
outline: none;
padding: 0;
max-width: min(800px, 90vw);
width: fit-content;
z-index: 1001;
pointer-events: auto;
touch-action: auto;
}
dialog[open],
dialog:target {
display: flex;
}
dialog::backdrop {
background-color: var(--color-overlay-backdrop);
will-change: opacity;
opacity: 0;
animation-name: fadein;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
}
dialog[open]::backdrop {
opacity: 1;
}
dialog header {
font-size: 1.42857143rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--fonts-regular);
color: var(--color-text-dark);
margin: 0;
padding: 1.25rem 1.5rem;
box-shadow: none;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom: 1px solid var(--color-secondary);
}
dialog article {
display: block;
width: 100%;
font-size: 1em;
line-height: 1.4;
}
dialog .content {
padding: 1.5em;
background: var(--color-body);
color: var(--color-text);
}
dialog .actions {
background: var(--color-secondary-bg);
border-color: var(--color-secondary);
display: flex;
gap: 1em;
justify-content: flex-end;
padding: 1rem;
}
/* positive/negative action buttons */
dialog .actions .ui.button {
display: inline-flex;
align-items: center;
padding: 10px 12px;
margin-right: 0;
}
dialog .actions .ui.button.danger {
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
dialog .actions .ui.button .svg {
margin-right: 5px;
}

9
web_src/js/features/repo-editor.js
View file

@ -6,6 +6,7 @@ import {initMarkupContent} from '../markup/content.js';
import {attachRefIssueContextPopup} from './contextpopup.js';
import {POST} from '../modules/fetch.js';
import {initTab} from '../modules/tab.ts';
import {showModal} from '../modules/modal.ts';
function initEditPreviewTab($form) {
const $tabMenu = $form.find('.tabular.menu');
@ -183,14 +184,8 @@ export function initRepoEditor() {
commitButton?.addEventListener('click', (e) => {
// A modal which asks if an empty file should be committed
if (!$editArea.val()) {
$('#edit-empty-content-modal')
.modal({
onApprove() {
document.querySelector('.edit.form').requestSubmit();
},
})
.modal('show');
e.preventDefault();
showModal('edit-empty-content-modal', () => { document.querySelector('.edit.form').requestSubmit()});
}
});
})();

2
web_src/js/index.js
View file

@ -86,6 +86,7 @@ import {initDirAuto} from './modules/dirauto.js';
import {initRepositorySearch} from './features/repo-search.js';
import {initColorPickers} from './features/colorpicker.js';
import {initRepoMilestoneEditor} from './features/repo-milestone.js';
import {initModalClose} from './modules/modal.ts';
// Init Gitea's Fomantic settings
initGiteaFomantic();
@ -189,6 +190,7 @@ onDomReady(() => {
initRepoDiffView();
initScopedAccessTokenCategories();
initColorPickers();
initModalClose();
// Deactivate CSS-only noJS usability supplements
document.body.classList.remove('no-js');

33
web_src/js/modules/modal.ts Normal file
View file

@ -0,0 +1,33 @@
// Copyright 2025 The Forgejo Authors. All rights reserved.
// SPDX-License-Identifier: MIT
// showModal will show the given modal and run `onApprove` if the approve/ok/yes
// button is pressed.
export function showModal(modalID: string, onApprove: () => void) {
const modal = document.getElementById(modalID) as HTMLDialogElement;
// Move the modal to `<body>`, to avoid inheriting any bad CSS or if the
// parent becomes `display: hidden`.
document.body.append(modal);
// Close the modal if the cancel button is pressed.
modal.querySelector('.cancel')?.addEventListener('click', () => {
modal.close();
}, {once: true, passive: true});
modal.querySelector('.ok')?.addEventListener('click', onApprove, {once: true, passive: true});
// The modal is ready to be shown.
modal.showModal();
}
// NOTE: Can be replaced in late 2026 with `closedBy` attribute on `<dialog>` element.
export function initModalClose() {
document.addEventListener('click', (event) => {
const dialog = document.querySelector<HTMLDialogElement>('dialog[open]');
// No open dialogs on page, nothing to do.
if (dialog === null) return;
const target = event.target as HTMLElement;
// User clicked dialog itself (not it's content), likely ::backdrop, so close it.
if (dialog === target) dialog.close();
});
}