mirror of
https://github.com/go-gitea/gitea
synced 2025-07-22 18:28:37 +00:00
Refactor some frontend problems (#32646)
1. correct the modal usage on "admin email list" page (then `web_src/js/features/admin/emails.ts` is removed) 2. use `addDelegatedEventListener` instead of `jQuery().on` 3. more jQuery related changes and remove jQuery from `web_src/js/features/common-button.ts` 4. improve `confirmModal` to make it support header, and remove incorrect double-escaping 5. fix more typescript related types 6. fine tune devtest pages and add more tests
This commit is contained in:
wxiaoguang
GitHub
@@ -50,10 +50,10 @@
|
||||
<td>{{svg (Iif .IsPrimary "octicon-check" "octicon-x")}}</td>
|
||||
<td>
|
||||
{{if .CanChange}}
|
||||
<a class="link-email-action" href data-uid="{{.UID}}"
|
||||
data-email="{{.Email}}"
|
||||
data-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
|
||||
data-activate="{{if .IsActivated}}0{{else}}1{{end}}">
|
||||
<a class="show-modal" href data-modal="#change-email-modal" data-modal-uid="{{.UID}}"
|
||||
data-modal-email="{{.Email}}"
|
||||
data-modal-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
|
||||
data-modal-activate="{{if .IsActivated}}0{{else}}1{{end}}">
|
||||
{{svg (Iif .IsActivated "octicon-check" "octicon-x")}}
|
||||
</a>
|
||||
{{else}}
|
||||
@@ -61,9 +61,10 @@
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<div class="tw-flex tw-gap-2">
|
||||
<a class="delete-button" href="" data-url="{{$.Link}}/delete" data-id="{{.ID}}" data-data-uid="{{.UID}}">{{svg "octicon-trash"}}</a>
|
||||
</div>
|
||||
<a class="link-action negative" href data-url="{{$.Link}}/delete?id={{.ID}}&uid={{.UID}}"
|
||||
data-modal-confirm-header="{{ctx.Locale.Tr "admin.emails.delete"}}"
|
||||
data-modal-confirm-content="{{ctx.Locale.Tr "admin.emails.delete_desc"}}"
|
||||
>{{svg "octicon-trash"}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
@@ -77,40 +78,24 @@
|
||||
<div class="header">
|
||||
{{ctx.Locale.Tr "admin.emails.change_email_header"}}
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="content ui form" action="{{AppSubUrl}}/-/admin/emails/activate" method="post">
|
||||
<p class="center">{{ctx.Locale.Tr "admin.emails.change_email_text"}}</p>
|
||||
|
||||
<form class="ui form" id="email-action-form" action="{{AppSubUrl}}/-/admin/emails/activate" method="post">
|
||||
{{$.CsrfTokenHtml}}
|
||||
{{$.CsrfTokenHtml}}
|
||||
|
||||
<input type="hidden" id="query-sort" name="sort" value="{{.SortType}}">
|
||||
<input type="hidden" id="query-keyword" name="q" value="{{.Keyword}}">
|
||||
<input type="hidden" id="query-primary" name="is_primary" value="{{.IsPrimary}}" required>
|
||||
<input type="hidden" id="query-activated" name="is_activated" value="{{.IsActivated}}" required>
|
||||
<input type="hidden" name="sort" value="{{.SortType}}">
|
||||
<input type="hidden" name="q" value="{{.Keyword}}">
|
||||
<input type="hidden" name="is_primary" value="{{.IsPrimary}}">
|
||||
<input type="hidden" name="is_activated" value="{{.IsActivated}}">
|
||||
|
||||
<input type="hidden" id="form-uid" name="uid" value="" required>
|
||||
<input type="hidden" id="form-email" name="email" value="" required>
|
||||
<input type="hidden" id="form-primary" name="primary" value="" required>
|
||||
<input type="hidden" id="form-activate" name="activate" value="" required>
|
||||
<input type="hidden" name="uid">
|
||||
<input type="hidden" name="email">
|
||||
<input type="hidden" name="primary">
|
||||
<input type="hidden" name="activate">
|
||||
|
||||
<div class="center">
|
||||
{{template "base/modal_actions_confirm" .}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{template "base/modal_actions_confirm" .}}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ui g-modal-confirm delete modal">
|
||||
<div class="header">
|
||||
{{svg "octicon-trash"}}
|
||||
{{ctx.Locale.Tr "admin.emails.delete"}}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ctx.Locale.Tr "admin.emails.delete_desc"}}
|
||||
</div>
|
||||
{{template "base/modal_actions_confirm" .}}
|
||||
</div>
|
||||
|
||||
{{template "admin/layout_footer" .}}
|
||||
|
||||
3
templates/devtest/devtest-footer.tmpl
Normal file
3
templates/devtest/devtest-footer.tmpl
Normal file
@@ -0,0 +1,3 @@
|
||||
{{/* TODO: the devtest.js is isolated from index.js, so no module is shared and many index.js functions do not work in devtest.ts */}}
|
||||
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
|
||||
{{template "base/footer" dict}}
|
||||
2
templates/devtest/devtest-header.tmpl
Normal file
2
templates/devtest/devtest-header.tmpl
Normal file
@@ -0,0 +1,2 @@
|
||||
{{template "base/head" dict}}
|
||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
@@ -1,5 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
|
||||
{{template "devtest/devtest-header"}}
|
||||
<ul>
|
||||
{{range .SubNames}}
|
||||
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
|
||||
@@ -11,5 +10,4 @@ ul {
|
||||
line-height: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -1,4 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
{{template "base/alert" .}}
|
||||
<div>
|
||||
@@ -11,6 +11,7 @@
|
||||
<button class="link-action" data-url="fetch-action-test?k=1">test action</button>
|
||||
<button class="link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with confirm</button>
|
||||
<button class="ui red button link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with risky confirm</button>
|
||||
<button class="ui button link-action" data-url="fetch-action-test?k=1" data-modal-confirm-header="confirm header" data-modal-confirm-content="confirm content">test with confirm header</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -41,4 +42,4 @@
|
||||
border: 1px red dashed; /* show the border for demo purpose */
|
||||
}
|
||||
</style>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest">
|
||||
<div class="ui container">
|
||||
<h1>Flex List (standalone)</h1>
|
||||
@@ -112,4 +111,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h2>Dropdown</h2>
|
||||
@@ -128,4 +127,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{{template "base/head" .}}
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
{{template "base/alert" .}}
|
||||
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
|
||||
<script type="module">
|
||||
for (const el of $('.ui.modal')) {
|
||||
for (const el of $('.ui.modal:not([data-skip-button])')) {
|
||||
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
|
||||
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
|
||||
});
|
||||
@@ -69,5 +69,27 @@
|
||||
<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")}}
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<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>
|
||||
|
||||
<div id="test-modal-fill-values" class="ui mini modal" 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>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Link</h1>
|
||||
@@ -193,4 +192,4 @@
|
||||
<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
16
templates/devtest/global-button.tmpl
Normal file
16
templates/devtest/global-button.tmpl
Normal file
@@ -0,0 +1,16 @@
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Show/Hide panel</h1>
|
||||
<div>
|
||||
<!-- to test Space/Enter also works on non-button buttons with children -->
|
||||
<div tabindex="0" class="ui button show-panel toggle" data-panel="#devtest-panel-show-hide"><span>Toggle panel 1</span></div>
|
||||
<span tabindex="0" class="ui button show-panel" data-panel="#devtest-panel-show-hide"><span>Show panel 1</span></span>
|
||||
</div>
|
||||
<div id="devtest-panel-show-hide">
|
||||
<div>Panel 1 content</div>
|
||||
<div class="ui button hide-panel" data-panel-closest="div">Hide panel 1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "devtest/devtest-footer"}}
|
||||
@@ -1,5 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Label</h1>
|
||||
@@ -24,4 +23,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div class="page-content devtest">
|
||||
<div class="tw-flex">
|
||||
<div class="tw-w-4/5">
|
||||
@@ -9,4 +9,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{template "base/head" .}}
|
||||
|
||||
{{template "devtest/devtest-header"}}
|
||||
<div>
|
||||
<h1>Toast</h1>
|
||||
<div>
|
||||
@@ -9,7 +8,4 @@
|
||||
<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong message">Show Error Toast (long)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
|
||||
|
||||
{{template "base/footer" .}}
|
||||
{{template "devtest/devtest-footer"}}
|
||||
|
||||
Reference in New Issue
Block a user