1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-09-30 19:22:08 +00:00

feat: first native dialog for modal (#8859)

- 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
parent c00c5d9c48
commit aa345c9e0c
9 changed files with 232 additions and 57 deletions

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()});
}
});
})();