From 75c62054a633fc9ae25887f72da1ec2d08a31e90 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 24 Apr 2023 19:08:59 +0800 Subject: [PATCH] Improve some modal action buttons (#24289) Follow #24097 and #24285 And add a devtest page for modal action button testing. http://localhost:3000/devtest/fomantic-modal Now the `modal_actions_confirm.tmpl` could support: green / blue / yellow positive buttons, the negative button is "secondary". ps: this PR is only a small improvement, there are still a lot of buttons not having proper colors. In the future these buttons could be improved by this approach. These buttons could also be improved according to the conclusion of #24285 in the future. ![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png) And add GitHub-like single danger button (context: https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312) ![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png) --------- Co-authored-by: silverwind --- .../contributing/guidelines-frontend.en-us.md | 1 + templates/admin/auth/edit.tmpl | 2 +- templates/admin/emails/list.tmpl | 2 +- templates/admin/monitor.tmpl | 2 +- templates/admin/packages/list.tmpl | 2 +- templates/admin/queue.tmpl | 2 +- templates/admin/repo/list.tmpl | 2 +- templates/admin/repo/unadopted.tmpl | 26 ++-------- templates/admin/stacktrace.tmpl | 2 +- templates/admin/user/edit.tmpl | 2 +- templates/base/modal_actions_confirm.tmpl | 37 ++++++++++---- templates/devtest/fomantic-modal.tmpl | 49 +++++++++++++++++++ templates/org/member/members.tmpl | 4 +- templates/org/settings/delete.tmpl | 2 +- templates/org/team/members.tmpl | 2 +- templates/org/team/new.tmpl | 2 +- templates/org/team/repositories.tmpl | 4 +- templates/org/team/sidebar.tmpl | 2 +- templates/org/team/teams.tmpl | 2 +- templates/projects/list.tmpl | 2 +- templates/projects/view.tmpl | 10 ++-- templates/repo/branch/list.tmpl | 2 +- templates/repo/commit_page.tmpl | 2 +- templates/repo/editor/edit.tmpl | 6 +-- templates/repo/editor/patch.tmpl | 6 +-- .../repo/issue/labels/edit_delete_label.tmpl | 2 +- templates/repo/issue/milestones.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 2 +- .../repo/issue/view_content/sidebar.tmpl | 4 +- templates/repo/projects/list.tmpl | 2 +- templates/repo/projects/view.tmpl | 10 ++-- templates/repo/release/list.tmpl | 2 +- templates/repo/release/new.tmpl | 2 +- templates/repo/settings/branches.tmpl | 2 +- templates/repo/settings/collaboration.tmpl | 2 +- templates/repo/settings/deploy_keys.tmpl | 2 +- templates/repo/settings/lfs.tmpl | 8 +-- templates/repo/settings/options.tmpl | 2 +- .../repo/settings/webhook/delete_modal.tmpl | 2 +- templates/repo/wiki/view.tmpl | 2 +- templates/shared/actions/runner_edit.tmpl | 2 +- templates/shared/secrets/add_list.tmpl | 2 +- templates/status/500.tmpl | 2 +- templates/user/settings/account.tmpl | 4 +- templates/user/settings/applications.tmpl | 14 +----- .../settings/applications_oauth2_list.tmpl | 2 +- templates/user/settings/grants_oauth2.tmpl | 2 +- templates/user/settings/keys_gpg.tmpl | 2 +- templates/user/settings/keys_principal.tmpl | 2 +- templates/user/settings/keys_ssh.tmpl | 2 +- templates/user/settings/organization.tmpl | 2 +- templates/user/settings/repos.tmpl | 17 ++----- .../user/settings/security/accountlinks.tmpl | 2 +- templates/user/settings/security/openid.tmpl | 2 +- templates/user/settings/security/twofa.tmpl | 2 +- .../user/settings/security/webauthn.tmpl | 2 +- web_src/css/helpers.css | 4 ++ web_src/css/modules/modal.css | 16 +++++- 58 files changed, 173 insertions(+), 129 deletions(-) create mode 100644 templates/devtest/fomantic-modal.tmpl diff --git a/docs/content/doc/contributing/guidelines-frontend.en-us.md b/docs/content/doc/contributing/guidelines-frontend.en-us.md index 36c88739ec..bde7d31510 100644 --- a/docs/content/doc/contributing/guidelines-frontend.en-us.md +++ b/docs/content/doc/contributing/guidelines-frontend.en-us.md @@ -49,6 +49,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h 9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided. 10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event. 11. Custom event names are recommended to use `ce-` prefix. +12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`). ### Accessibility / ARIA diff --git a/templates/admin/auth/edit.tmpl b/templates/admin/auth/edit.tmpl index c39725699c..0aed59ffab 100644 --- a/templates/admin/auth/edit.tmpl +++ b/templates/admin/auth/edit.tmpl @@ -436,7 +436,7 @@ -
+
{{svg "octicon-trash"}} {{.locale.Tr "admin.auths.delete_auth_title"}} diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl index 05c6aa66b4..1da40cbf29 100644 --- a/templates/admin/emails/list.tmpl +++ b/templates/admin/emails/list.tmpl @@ -70,7 +70,7 @@ {{template "base/paginate" .}} -