mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-26 06:16:56 +09:00
silverwindandwxiaoguang
e645afbb3f
Replace Fomantic's hard-forked jQuery modal with native `<dialog>` elements, advancing https://github.com/go-gitea/gitea/issues/29849. The UI is visually unchanged. Dialogs open with `show()` over an `inert` page, so tooltips, popups and toasts mounted on `<body>` stay usable above them, unlike with `showModal()` (https://github.com/whatwg/html/issues/9936). - Remove the Fomantic modal and dimmer, add `showModal` and `hideModal` - Declare modals as `<dialog class="modal-dialog">`, shown inside a `.modal-backdrop`, instead of `ui modal` with its unused size classes - Remove two modals that could never be opened - Block the page while a modal is open, close the topmost one on Escape and restore focus to its opener - Allow stacked modals, use a confirm modal instead of `window.confirm` for deleting content history - Hide popups and toasts when a modal opens or closes - Keep the release notes modal open when generating notes fails Fixes: https://github.com/go-gitea/gitea/issues/39643 Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
95 lines
3.7 KiB
Handlebars
95 lines
3.7 KiB
Handlebars
{{template "devtest/devtest-header"}}
|
|
<div class="page-content devtest ui container">
|
|
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
|
|
<dialog id="test-modal-form-1" class="modal-dialog">
|
|
<div class="header">Form dialog (layout 1)</div>
|
|
<form class="content" method="post" action="?mock_response_delay=1">
|
|
<div class="ui input tw-w-full"><input name="user_input"></div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="test-modal-form-2" class="modal-dialog">
|
|
<div class="header">Form dialog (layout 2)</div>
|
|
<form method="post" action="?mock_response_delay=1">
|
|
<div class="content">
|
|
<div class="ui input tw-w-full"><input name="user_input"></div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="test-modal-form-3" class="modal-dialog">
|
|
<div class="header">Form dialog (layout 3)</div>
|
|
<form method="post" action="?mock_response_delay=1">
|
|
<div class="content">
|
|
<div class="ui input tw-w-full"><input name="user_input"></div>
|
|
</div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="test-modal-form-4" class="modal-dialog">
|
|
<div class="header">Form dialog (layout 4)</div>
|
|
<div class="content">
|
|
<div class="ui input tw-w-full"><input name="user_input"></div>
|
|
</div>
|
|
<form method="post" action="?mock_response_delay=1">
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="test-modal-form-5" class="modal-dialog">
|
|
<div class="header">Form dialog (layout 5)</div>
|
|
<div class="content">
|
|
<form method="post" action="?mock_response_delay=1">
|
|
<div class="ui input tw-w-full"><input name="user_input"></div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<dialog class="modal-dialog" id="test-modal-default">
|
|
<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
|
|
<div class="content">
|
|
very long aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
|
|
</div>
|
|
{{template "base/modal_actions_confirm"}}
|
|
</dialog>
|
|
|
|
<dialog class="modal-dialog" id="test-modal-confirm">
|
|
<div class="header">Confirm dialog</div>
|
|
<div class="content">hello, this is the modal dialog content</div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
|
|
</dialog>
|
|
|
|
<dialog class="modal-dialog" id="test-modal-danger">
|
|
<div class="header">dangerous action dialog <button type="button" class="close-modal"></button></div>
|
|
<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
|
|
{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
|
|
</dialog>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<button type="button" class="show-modal" data-modal="#test-modal-fill-values"
|
|
data-modal-fill-by-id="value for id"
|
|
data-modal-fill-by-name="value for name"
|
|
data-modal-fill-by-class="value for class"
|
|
data-modal-p="value for tag"
|
|
data-modal-a.text-content="fill with attr"
|
|
>test-modal-fill-values</button>
|
|
|
|
<dialog id="test-modal-fill-values" class="modal-dialog" data-skip-button>
|
|
<div class="header">Modal dialog (fill values)</div>
|
|
<form class="content">
|
|
<div id="fill-by-id"></div>
|
|
<input name="fill-by-name">
|
|
<div class="fill-by-class"></div>
|
|
<p></p>
|
|
<a href="#">link</a>
|
|
{{template "base/modal_actions_confirm" dict}}
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
{{template "devtest/devtest-footer"}}
|