TudbuT/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Improve some modal action buttons (#24289)

Browse source 
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 <me@silverwind.io>
This commit is contained in:
wxiaoguang 2023-04-24 19:08:59 +08:00 committed by GitHub
parent 47748df9b3
commit 75c62054a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
58 changed files with 173 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/content/doc/contributing/guidelines-frontend.en-us.md
View file

@ -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

2
templates/admin/auth/edit.tmpl
View file

@ -436,7 +436,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "admin.auths.delete_auth_title"}}

2
templates/admin/emails/list.tmpl
View file

@ -70,7 +70,7 @@
{{template "base/paginate" .}}
<div class="ui gitea-confirm-modal modal" id="change-email-modal">
<div class="ui g-modal-confirm modal" id="change-email-modal">
<div class="header">
{{.locale.Tr "admin.emails.change_email_header"}}
</div>

2
templates/admin/monitor.tmpl
View file

@ -34,7 +34,7 @@
{{template "admin/process" .}}
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{.locale.Tr "admin.monitor.process.cancel"}}
</div>

2
templates/admin/packages/list.tmpl
View file

@ -76,7 +76,7 @@
{{template "base/paginate" .}}
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "packages.settings.delete"}}

2
templates/admin/queue.tmpl
View file

@ -178,7 +178,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{.locale.Tr "admin.monitor.queue.pool.cancel"}}
</div>

2
templates/admin/repo/list.tmpl
View file

@ -91,7 +91,7 @@
{{template "base/paginate" .}}
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.delete"}}

26
templates/admin/repo/unadopted.tmpl
View file

@ -26,7 +26,7 @@
<span class="name">{{$dir}}</span>
<div class="right floated content">
<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
<div class="ui gitea-confirm-modal modal" id="adopt-unadopted-modal-{{$dirI}}">
<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
<div class="header">
<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
</div>
@ -39,20 +39,11 @@
<input type="hidden" name="action" value="adopt">
<input type="hidden" name="q" value="{{$.Keyword}}">
<input type="hidden" name="page" value="{{$.CurrentPage}}">
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
<button class="ui red basic inverted cancel button">
{{svg "octicon-trash" 16 "gt-mr-2"}}
{{$.locale.Tr "modal.no"}}
</button>
<button class="ui green basic inverted ok button">
{{svg "octicon-check" 16 "gt-mr-2"}}
{{$.locale.Tr "modal.yes"}}
</button>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
</form>
</div>
<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
<div class="ui gitea-confirm-modal modal" id="delete-unadopted-modal-{{$dirI}}">
<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
<div class="header">
<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
</div>
@ -65,16 +56,7 @@
<input type="hidden" name="action" value="delete">
<input type="hidden" name="q" value="{{$.Keyword}}">
<input type="hidden" name="page" value="{{$.CurrentPage}}">
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
<button class="ui red basic inverted cancel button">
{{svg "octicon-trash" 16 "gt-mr-2"}}
{{$.locale.Tr "modal.no"}}
</button>
<button class="ui green basic inverted ok button">
{{svg "octicon-check" 16 "gt-mr-2"}}
{{$.locale.Tr "modal.yes"}}
</button>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
</form>
</div>
</div>

2
templates/admin/stacktrace.tmpl
View file

@ -15,7 +15,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{.locale.Tr "admin.monitor.process.cancel"}}
</div>

2
templates/admin/user/edit.tmpl
View file

@ -192,7 +192,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-user-modal">
<div class="ui g-modal-confirm delete modal" id="delete-user-modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.delete_account_title"}}

37
templates/base/modal_actions_confirm.tmpl
View file

@ -1,21 +1,38 @@
{{/*
Template Attributes:
* locale
* ModalButtonStyle: "yes" (default) or "confirm"
Two buttons (negative, positive):
* ModalButtonTypes: "yes" (default) or "confirm"
* ModalButtonColors: "green" (default) / "blue" / "yellow"
* ModalButtonCancelText
* ModalButtonOkText
Single danger button (GitHub-like):
* ModalButtonDangerText "This action will destroy your data"
The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal internally
*/}}
<div class="actions">
{{$textNegitive := .locale.Tr "modal.no"}}
{{$textPositive := .locale.Tr "modal.yes"}}
{{if eq .ModalButtonStyle "confirm"}}
{{$textNegitive = .locale.Tr "modal.cancel"}}
{{$textPositive = .locale.Tr "modal.confirm"}}
{{if .ModalButtonDangerText}}
<button class="ui danger red ok button">{{.ModalButtonDangerText}}</button>
{{else}}
{{$textNegitive := .locale.Tr "modal.no"}}
{{$textPositive := .locale.Tr "modal.yes"}}
{{if eq .ModalButtonTypes "confirm"}}
{{$textNegitive = .locale.Tr "modal.cancel"}}
{{$textPositive = .locale.Tr "modal.confirm"}}
{{end}}
{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
{{$stylePositive := "green"}}
{{if eq .ModalButtonColors "blue"}}
{{$stylePositive = "blue"}}
{{else if eq .ModalButtonColors "yellow"}}
{{$stylePositive = "yellow"}}
{{end}}
<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
{{end}}
{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
<button class="ui red cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
<button class="ui green ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
</div>

49
templates/devtest/fomantic-modal.tmpl Normal file
View file

@ -0,0 +1,49 @@
{{template "base/head" .}}
<div class="page-content devtest ui container">
<div class="ui g-modal-confirm modal" 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" (dict "locale" $.locale)}}
</div>
<div class="ui g-modal-confirm modal" 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 "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
<div class="ui g-modal-confirm modal" id="test-modal-blue">
<div class="header">Blue dialog</div>
<div class="content">hello, this is the modal dialog content</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "blue")}}
</div>
<div class="ui g-modal-confirm modal" id="test-modal-yellow">
<div class="header">yellow dialog</div>
<div class="content">hello, this is the modal dialog content</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
</div>
<div class="ui g-modal-confirm modal" id="test-modal-danger">
{{svg "octicon-x" 16 "inside close"}}
<div class="header">dangerous action dialog</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")}}
</div>
<div class="modal-buttons"></div>
<script type="module">
for (const el of $('.ui.modal')) {
const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
});
$('.modal-buttons').append($btn);
}
</script>
<style>
.modal-buttons button { margin: 5px; }
</style>
</div>
{{template "base/footer" .}}

4
templates/org/member/members.tmpl
View file

@ -81,7 +81,7 @@
{{template "base/paginate" .}}
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="leave-organization">
<div class="ui g-modal-confirm delete modal" id="leave-organization">
<div class="header">
{{$.locale.Tr "org.members.leave"}}
</div>
@ -90,7 +90,7 @@
</div>
{{template "base/modal_actions_confirm" .}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="remove-organization-member">
<div class="ui g-modal-confirm delete modal" id="remove-organization-member">
<div class="header">
{{$.locale.Tr "org.members.remove"}}
</div>

2
templates/org/settings/delete.tmpl
View file

@ -21,7 +21,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "org.settings.delete_org_title"}}

2
templates/org/team/members.tmpl
View file

@ -64,7 +64,7 @@
</div>
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="remove-team-member">
<div class="ui g-modal-confirm delete modal" id="remove-team-member">
<div class="header">
{{$.locale.Tr "org.members.remove"}}
</div>

2
templates/org/team/new.tmpl
View file

@ -148,7 +148,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "org.teams.delete_team_title"}}

4
templates/org/team/repositories.tmpl
View file

@ -64,7 +64,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="org-team-remove-all-repo">
<div class="ui g-modal-confirm delete modal" id="org-team-remove-all-repo">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "org.teams.remove_all_repos_title"}}
@ -75,7 +75,7 @@
{{template "base/modal_actions_confirm" .}}
</div>
<div class="ui gitea-confirm-modal addall modal" id="org-team-add-all-repo">
<div class="ui g-modal-confirm addall modal" id="org-team-add-all-repo">
<div class="header">
{{svg "octicon-globe"}}
{{.locale.Tr "org.teams.add_all_repos_title"}}

2
templates/org/team/sidebar.tmpl
View file

@ -83,7 +83,7 @@
</div>
{{end}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="leave-team-sidebar">
<div class="ui g-modal-confirm delete modal" id="leave-team-sidebar">
<div class="header">
{{$.locale.Tr "org.teams.leave"}}
</div>

2
templates/org/team/teams.tmpl
View file

@ -43,7 +43,7 @@
</div>
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="leave-team">
<div class="ui g-modal-confirm delete modal" id="leave-team">
<div class="header">
{{$.locale.Tr "org.teams.leave"}}
</div>

2
templates/projects/list.tmpl
View file

@ -76,7 +76,7 @@
</div>
{{if $.CanWriteProjects}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}}

10
templates/projects/view.tmpl
View file

@ -150,17 +150,17 @@
</div>
</div>
<div class="ui gitea-confirm-modal modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
<div class="header">
<span id="default-project-board-header"></span>
</div>
<div class="content">
<label id="default-project-board-content"></label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
<div class="ui gitea-confirm-modal modal" id="delete-board-modal-{{.ID}}">
<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
<div class="header">
{{$.locale.Tr "repo.projects.column.delete"}}
</div>
@ -169,7 +169,7 @@
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
</label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
</div>
</div>
@ -272,7 +272,7 @@
</div>
{{if .CanWriteProjects}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}}

2
templates/repo/branch/list.tmpl
View file

@ -147,7 +147,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.branch.delete_html"}} <span class="name"></span>

2
templates/repo/commit_page.tmpl
View file

@ -59,7 +59,7 @@
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.cherry-pick-header" (ShortSha .CommitID)}}"
data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.cherry-pick-content"}}"
data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.cherry-pick"}}">{{.locale.Tr "repo.commit.cherry-pick"}}</div>
<div class="ui gitea-confirm-modal modal" id="cherry-pick-modal">
<div class="ui g-modal-confirm modal" id="cherry-pick-modal">
<div class="header">
<span id="cherry-pick-header"></span>
</div>

6
templates/repo/editor/edit.tmpl
View file

@ -56,7 +56,7 @@
</div>
<div class="ui gitea-confirm-modal modal" id="edit-empty-content-modal">
<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
<div class="header">
{{svg "octicon-file"}}
{{.locale.Tr "repo.editor.commit_empty_file_header"}}
@ -65,11 +65,11 @@
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui red basic cancel inverted button">
<button class="ui red cancel button">
{{svg "octicon-x"}}
{{.locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui green basic ok inverted button">
<button class="ui green ok button">
{{svg "fontawesome-save"}}
{{.locale.Tr "repo.editor.commit_changes"}}
</button>

6
templates/repo/editor/patch.tmpl
View file

@ -36,7 +36,7 @@
</form>
</div>
<div class="ui gitea-confirm-modal modal" id="edit-empty-content-modal">
<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
<div class="header">
{{svg "octicon-file"}}
{{.locale.Tr "repo.editor.commit_empty_file_header"}}
@ -45,11 +45,11 @@
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div>
<div class="actions">
<button class="ui red basic inverted cancel button">
<button class="ui red cancel button">
{{svg "octicon-x"}}
{{.locale.Tr "repo.editor.cancel"}}
</button>
<button class="ui green basic inverted ok button">
<button class="ui green ok button">
{{svg "fontawesome-save"}}
{{.locale.Tr "repo.editor.commit_changes"}}
</button>

2
templates/repo/issue/labels/edit_delete_label.tmpl
View file

@ -1,4 +1,4 @@
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.issues.label_deletion"}}

2
templates/repo/issue/milestones.tmpl
View file

@ -116,7 +116,7 @@
</div>
{{if or .CanWriteIssues .CanWritePulls}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.milestones.deletion"}}

2
templates/repo/issue/view_content.tmpl
View file

@ -197,7 +197,7 @@
<span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.branch.delete" .HeadTarget}}

4
templates/repo/issue/view_content/sidebar.tmpl
View file

@ -542,7 +542,7 @@
{{if and .CanCreateIssueDependencies (not .Repository.IsArchived)}}
<input type="hidden" id="crossRepoSearch" value="{{.AllowCrossRepositoryDependencies}}">
<div class="ui gitea-confirm-modal modal remove-dependency">
<div class="ui g-modal-confirm modal remove-dependency">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.issues.dependency.remove_header"}}
@ -656,7 +656,7 @@
{{svg "octicon-trash"}}
{{.locale.Tr "repo.issues.delete"}}
</button>
<div class="ui gitea-confirm-modal modal" id="delete">
<div class="ui g-modal-confirm modal" id="delete">
<div class="header">
{{if .Issue.IsPull}}
{{.locale.Tr "repo.pulls.delete.title"}}

2
templates/repo/projects/list.tmpl
View file

@ -78,7 +78,7 @@
</div>
{{if .CanWriteProjects}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}}

10
templates/repo/projects/view.tmpl
View file

@ -156,17 +156,17 @@
</div>
</div>
<div class="ui gitea-confirm-modal modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
<div class="header">
<span id="default-project-board-header"></span>
</div>
<div class="content">
<label id="default-project-board-content"></label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
<div class="ui gitea-confirm-modal modal" id="delete-board-modal-{{.ID}}">
<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
<div class="header">
{{$.locale.Tr "repo.projects.column.delete"}}
</div>
@ -175,7 +175,7 @@
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
</label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
</div>
</div>
@ -278,7 +278,7 @@
</div>
{{if .CanWriteProjects}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}}

2
templates/repo/release/list.tmpl
View file

@ -184,7 +184,7 @@
</div>
{{if (and ($.Permission.CanWrite $.UnitTypeCode) .PageIsTagList)}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.release.delete_tag"}}

2
templates/repo/release/new.tmpl
View file

@ -138,7 +138,7 @@
</div>
{{if .PageIsEditRelease}}
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.release.deletion"}}

2
templates/repo/settings/branches.tmpl
View file

@ -91,7 +91,7 @@
{{end}}
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.protected_branch_deletion"}}

2
templates/repo/settings/collaboration.tmpl
View file

@ -107,7 +107,7 @@
{{end}}
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.collaborator_deletion"}}

2
templates/repo/settings/deploy_keys.tmpl
View file

@ -72,7 +72,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.deploy_key_deletion"}}

8
templates/repo/settings/lfs.tmpl
View file

@ -36,7 +36,7 @@
</table>
{{template "base/paginate" .}}
{{range .LFSFiles}}
<div class="ui gitea-confirm-modal modal" id="delete-{{.Oid}}">
<div class="ui g-modal-confirm modal" id="delete-{{.Oid}}">
<div class="header">
{{$.locale.Tr "repo.settings.lfs_delete" .Oid}}
</div>
@ -46,14 +46,10 @@
</p>
<form class="ui form" action="{{$.Link}}/delete/{{.Oid}}" method="post">
{{$.CsrfTokenHtml}}
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
<button class="ui basic cancel inverted button">{{$.locale.Tr "settings.cancel"}}</button>
<button class="ui basic inverted yellow button">{{$.locale.Tr "modal.yes"}}</button>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
</form>
</div>
</div>
{{end}}
</div>
</div>
{{template "repo/settings/layout_footer" .}}

2
templates/repo/settings/options.tmpl
View file

@ -963,7 +963,7 @@
{{end}}
{{if not .Repository.IsMirror}}
<div class="ui gitea-confirm-modal modal" id="archive-repo-modal">
<div class="ui g-modal-confirm modal" id="archive-repo-modal">
<div class="header">
{{if .Repository.IsArchived}}
{{.locale.Tr "repo.settings.unarchive.header"}}

2
templates/repo/settings/webhook/delete_modal.tmpl
View file

@ -1,4 +1,4 @@
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.webhook_deletion"}}

2
templates/repo/wiki/view.tmpl
View file

@ -99,7 +99,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.wiki.delete_page_button"}}

2
templates/shared/actions/runner_edit.tmpl
View file

@ -88,7 +88,7 @@
</table>
{{template "base/paginate" .}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="runner-delete-modal">
<div class="ui g-modal-confirm delete modal" id="runner-delete-modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "actions.runners.delete_runner_header"}}

2
templates/shared/secrets/add_list.tmpl
View file

@ -56,7 +56,7 @@
{{.locale.Tr "secrets.none"}}
{{end}}
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "secrets.deletion"}}

2
templates/status/500.tmpl
View file

@ -1,5 +1,5 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content gt-w-screen status-page-500">
<div role="main" aria-label="{{.Title}}" class="page-content status-page-500">
<p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
<div class="ui divider"></div>

4
templates/user/settings/account.tmpl
View file

@ -157,7 +157,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-email">
<div class="ui g-modal-confirm delete modal" id="delete-email">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.email_deletion"}}
@ -168,7 +168,7 @@
{{template "base/modal_actions_confirm" .}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-account">
<div class="ui g-modal-confirm delete modal" id="delete-account">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.delete_account_title"}}

14
templates/user/settings/applications.tmpl
View file

@ -264,7 +264,7 @@
{{end}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-token">
<div class="ui g-modal-confirm delete modal" id="delete-token">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.access_token_deletion"}}
@ -272,17 +272,7 @@
<div class="content">
<p>{{.locale.Tr "settings.access_token_deletion_desc"}}</p>
</div>
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm.tmpl */}}
<button class="ui green basic inverted cancel button">
{{svg "octicon-x"}}
{{.locale.Tr "settings.access_token_deletion_cancel_action"}}
</button>
<button class="ui red basic inverted ok button">
{{svg "octicon-check"}}
{{.locale.Tr "settings.access_token_deletion_confirm_action"}}
</button>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
</div>
{{template "user/settings/layout_footer" .}}

2
templates/user/settings/applications_oauth2_list.tmpl
View file

@ -47,7 +47,7 @@
</form>
</div>
<div class="ui gitea-confirm-modal delete modal" id="remove-gitea-oauth2-application">
<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.remove_oauth2_application"}}

2
templates/user/settings/grants_oauth2.tmpl
View file

@ -28,7 +28,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="revoke-gitea-oauth2-grant">
<div class="ui g-modal-confirm delete modal" id="revoke-gitea-oauth2-grant">
<div class="header">
{{svg "octicon-shield" 16 "gt-mr-2"}}
{{.locale.Tr "settings.revoke_oauth2_grant"}}

2
templates/user/settings/keys_gpg.tmpl
View file

@ -111,7 +111,7 @@
<br>
<p>{{.locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification" | Str2html}}</p>
<div class="ui gitea-confirm-modal delete modal" id="delete-gpg">
<div class="ui g-modal-confirm delete modal" id="delete-gpg">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.gpg_key_deletion"}}

2
templates/user/settings/keys_principal.tmpl
View file

@ -54,7 +54,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-principal">
<div class="ui g-modal-confirm delete modal" id="delete-principal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.ssh_principal_deletion"}}

2
templates/user/settings/keys_ssh.tmpl
View file

@ -100,7 +100,7 @@
<br>
<p>{{.locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh" | Str2html}}</p>
<div class="ui gitea-confirm-modal delete modal" id="delete-ssh">
<div class="ui g-modal-confirm delete modal" id="delete-ssh">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.ssh_key_deletion"}}

2
templates/user/settings/organization.tmpl
View file

@ -37,7 +37,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="leave-organization">
<div class="ui g-modal-confirm delete modal" id="leave-organization">
<div class="header">
{{$.locale.Tr "org.members.leave"}}
</div>

17
templates/user/settings/repos.tmpl
View file

@ -35,7 +35,7 @@
<div class="right floated content">
{{if $.allowAdopt}}
<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
<div class="ui gitea-confirm-modal modal" id="adopt-unadopted-modal-{{$dirI}}">
<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
<div class="header">
<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
</div>
@ -46,22 +46,13 @@
{{$.CsrfTokenHtml}}
<input type="hidden" name="id" value="{{$dir}}">
<input type="hidden" name="action" value="adopt">
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
<button class="ui red basic inverted cancel button">
{{svg "octicon-x"}}
{{$.locale.Tr "modal.no"}}
</button>
<button class="ui green basic inverted ok button">
{{svg "octicon-check"}}
{{$.locale.Tr "modal.yes"}}
</button>
</div>
{{template "base/modal_actions_confirm" .}}
</form>
</div>
{{end}}
{{if $.allowDelete}}
<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.locale.Tr "repo.delete_preexisting_label"}}</span></button>
<div class="ui gitea-confirm-modal modal" id="delete-unadopted-modal-{{$dirI}}">
<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
<div class="header">
<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
</div>
@ -125,7 +116,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal">
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.remove_account_link"}}

2
templates/user/settings/security/accountlinks.tmpl
View file

@ -41,7 +41,7 @@
</div>
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-account-link">
<div class="ui g-modal-confirm delete modal" id="delete-account-link">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.remove_account_link"}}

2
templates/user/settings/security/openid.tmpl
View file

@ -51,7 +51,7 @@
</form>
</div>
<div class="ui gitea-confirm-modal delete modal" id="delete-openid">
<div class="ui g-modal-confirm delete modal" id="delete-openid">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.openid_deletion"}}

2
templates/user/settings/security/twofa.tmpl
View file

@ -23,7 +23,7 @@
{{end}}
</div>
<div class="ui gitea-confirm-modal delete modal" id="disable-twofa">
<div class="ui g-modal-confirm delete modal" id="disable-twofa">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.twofa_disable"}}

2
templates/user/settings/security/webauthn.tmpl
View file

@ -30,7 +30,7 @@
{{template "user/auth/webauthn_error" .}}
<div class="ui gitea-confirm-modal delete modal" id="delete-registration">
<div class="ui g-modal-confirm delete modal" id="delete-registration">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.webauthn_delete_key"}}

4
web_src/css/helpers.css
View file

@ -1,3 +1,7 @@
/*
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
Gitea's private styles use `g-` prefix.
*/
.gt-df { display: flex !important; }
.gt-di { display: inline !important; }
.gt-dif { display: inline-flex !important; }

16
web_src/css/modules/modal.css
View file

@ -1,8 +1,15 @@
.ui.modal.gitea-confirm-modal {
.ui.modal.g-modal-confirm {
max-width: min(800px, 90vw);
width: fit-content;
}
.ui.modal.g-modal-confirm > .inside.close {
padding: 0;
width: 1em;
height: 1em;
top: 1.2em;
}
.ui.modal > .header {
/* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
color: var(--color-text-dark);
@ -42,6 +49,13 @@
padding: 10px 12px 10px 10px;
}
.ui.modal .actions > .ui.button.danger {
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
.ui.modal .actions > .ui.button .svg {
margin-right: 5px;
}