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:
parent
c00c5d9c48
commit
aa345c9e0c
9 changed files with 232 additions and 57 deletions
|
@ -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()});
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue