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

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. 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. 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. 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 ### Accessibility / ARIA

View file

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

View file

@ -70,7 +70,7 @@
{{template "base/paginate" .}} {{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"> <div class="header">
{{.locale.Tr "admin.emails.change_email_header"}} {{.locale.Tr "admin.emails.change_email_header"}}
</div> </div>

View file

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

View file

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

View file

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

View file

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

View file

@ -26,7 +26,7 @@
<span class="name">{{$dir}}</span> <span class="name">{{$dir}}</span>
<div class="right floated content"> <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> <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"> <div class="header">
<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span> <span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
</div> </div>
@ -39,20 +39,11 @@
<input type="hidden" name="action" value="adopt"> <input type="hidden" name="action" value="adopt">
<input type="hidden" name="q" value="{{$.Keyword}}"> <input type="hidden" name="q" value="{{$.Keyword}}">
<input type="hidden" name="page" value="{{$.CurrentPage}}"> <input type="hidden" name="page" value="{{$.CurrentPage}}">
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}} {{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
<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>
</form> </form>
</div> </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> <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"> <div class="header">
<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span> <span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
</div> </div>
@ -65,16 +56,7 @@
<input type="hidden" name="action" value="delete"> <input type="hidden" name="action" value="delete">
<input type="hidden" name="q" value="{{$.Keyword}}"> <input type="hidden" name="q" value="{{$.Keyword}}">
<input type="hidden" name="page" value="{{$.CurrentPage}}"> <input type="hidden" name="page" value="{{$.CurrentPage}}">
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}} {{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
<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>
</form> </form>
</div> </div>
</div> </div>

View file

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

View file

@ -192,7 +192,7 @@
</div> </div>
</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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.delete_account_title"}} {{.locale.Tr "settings.delete_account_title"}}

View file

@ -1,21 +1,38 @@
{{/* {{/*
Template Attributes: Template Attributes:
* locale * locale
* ModalButtonStyle: "yes" (default) or "confirm"
Two buttons (negative, positive):
* ModalButtonTypes: "yes" (default) or "confirm"
* ModalButtonColors: "green" (default) / "blue" / "yellow"
* ModalButtonCancelText * ModalButtonCancelText
* ModalButtonOkText * 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 The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal internally
*/}} */}}
<div class="actions"> <div class="actions">
{{if .ModalButtonDangerText}}
<button class="ui danger red ok button">{{.ModalButtonDangerText}}</button>
{{else}}
{{$textNegitive := .locale.Tr "modal.no"}} {{$textNegitive := .locale.Tr "modal.no"}}
{{$textPositive := .locale.Tr "modal.yes"}} {{$textPositive := .locale.Tr "modal.yes"}}
{{if eq .ModalButtonStyle "confirm"}} {{if eq .ModalButtonTypes "confirm"}}
{{$textNegitive = .locale.Tr "modal.cancel"}} {{$textNegitive = .locale.Tr "modal.cancel"}}
{{$textPositive = .locale.Tr "modal.confirm"}} {{$textPositive = .locale.Tr "modal.confirm"}}
{{end}} {{end}}
{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}} {{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{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> {{$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}}
</div> </div>

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" .}}

View file

@ -81,7 +81,7 @@
{{template "base/paginate" .}} {{template "base/paginate" .}}
</div> </div>
</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"> <div class="header">
{{$.locale.Tr "org.members.leave"}} {{$.locale.Tr "org.members.leave"}}
</div> </div>
@ -90,7 +90,7 @@
</div> </div>
{{template "base/modal_actions_confirm" .}} {{template "base/modal_actions_confirm" .}}
</div> </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"> <div class="header">
{{$.locale.Tr "org.members.remove"}} {{$.locale.Tr "org.members.remove"}}
</div> </div>

View file

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

View file

@ -64,7 +64,7 @@
</div> </div>
</div> </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"> <div class="header">
{{$.locale.Tr "org.members.remove"}} {{$.locale.Tr "org.members.remove"}}
</div> </div>

View file

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

View file

@ -64,7 +64,7 @@
</div> </div>
</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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "org.teams.remove_all_repos_title"}} {{.locale.Tr "org.teams.remove_all_repos_title"}}
@ -75,7 +75,7 @@
{{template "base/modal_actions_confirm" .}} {{template "base/modal_actions_confirm" .}}
</div> </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"> <div class="header">
{{svg "octicon-globe"}} {{svg "octicon-globe"}}
{{.locale.Tr "org.teams.add_all_repos_title"}} {{.locale.Tr "org.teams.add_all_repos_title"}}

View file

@ -83,7 +83,7 @@
</div> </div>
{{end}} {{end}}
</div> </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"> <div class="header">
{{$.locale.Tr "org.teams.leave"}} {{$.locale.Tr "org.teams.leave"}}
</div> </div>

View file

@ -43,7 +43,7 @@
</div> </div>
</div> </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"> <div class="header">
{{$.locale.Tr "org.teams.leave"}} {{$.locale.Tr "org.teams.leave"}}
</div> </div>

View file

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

View file

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

View file

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

View file

@ -59,7 +59,7 @@
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.cherry-pick-header" (ShortSha .CommitID)}}" 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-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> 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"> <div class="header">
<span id="cherry-pick-header"></span> <span id="cherry-pick-header"></span>
</div> </div>

View file

@ -56,7 +56,7 @@
</div> </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"> <div class="header">
{{svg "octicon-file"}} {{svg "octicon-file"}}
{{.locale.Tr "repo.editor.commit_empty_file_header"}} {{.locale.Tr "repo.editor.commit_empty_file_header"}}
@ -65,11 +65,11 @@
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p> <p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui red basic cancel inverted button"> <button class="ui red cancel button">
{{svg "octicon-x"}} {{svg "octicon-x"}}
{{.locale.Tr "repo.editor.cancel"}} {{.locale.Tr "repo.editor.cancel"}}
</button> </button>
<button class="ui green basic ok inverted button"> <button class="ui green ok button">
{{svg "fontawesome-save"}} {{svg "fontawesome-save"}}
{{.locale.Tr "repo.editor.commit_changes"}} {{.locale.Tr "repo.editor.commit_changes"}}
</button> </button>

View file

@ -36,7 +36,7 @@
</form> </form>
</div> </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"> <div class="header">
{{svg "octicon-file"}} {{svg "octicon-file"}}
{{.locale.Tr "repo.editor.commit_empty_file_header"}} {{.locale.Tr "repo.editor.commit_empty_file_header"}}
@ -45,11 +45,11 @@
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p> <p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui red basic inverted cancel button"> <button class="ui red cancel button">
{{svg "octicon-x"}} {{svg "octicon-x"}}
{{.locale.Tr "repo.editor.cancel"}} {{.locale.Tr "repo.editor.cancel"}}
</button> </button>
<button class="ui green basic inverted ok button"> <button class="ui green ok button">
{{svg "fontawesome-save"}} {{svg "fontawesome-save"}}
{{.locale.Tr "repo.editor.commit_changes"}} {{.locale.Tr "repo.editor.commit_changes"}}
</button> </button>

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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "repo.issues.label_deletion"}} {{.locale.Tr "repo.issues.label_deletion"}}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -184,7 +184,7 @@
</div> </div>
{{if (and ($.Permission.CanWrite $.UnitTypeCode) .PageIsTagList)}} {{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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "repo.release.delete_tag"}} {{.locale.Tr "repo.release.delete_tag"}}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -963,7 +963,7 @@
{{end}} {{end}}
{{if not .Repository.IsMirror}} {{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"> <div class="header">
{{if .Repository.IsArchived}} {{if .Repository.IsArchived}}
{{.locale.Tr "repo.settings.unarchive.header"}} {{.locale.Tr "repo.settings.unarchive.header"}}

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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.webhook_deletion"}} {{.locale.Tr "repo.settings.webhook_deletion"}}

View file

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

View file

@ -88,7 +88,7 @@
</table> </table>
{{template "base/paginate" .}} {{template "base/paginate" .}}
</div> </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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "actions.runners.delete_runner_header"}} {{.locale.Tr "actions.runners.delete_runner_header"}}

View file

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

View file

@ -1,5 +1,5 @@
{{template "base/head" .}} {{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> <p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p>
<div class="ui divider"></div> <div class="ui divider"></div>

View file

@ -157,7 +157,7 @@
</div> </div>
</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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.email_deletion"}} {{.locale.Tr "settings.email_deletion"}}
@ -168,7 +168,7 @@
{{template "base/modal_actions_confirm" .}} {{template "base/modal_actions_confirm" .}}
</div> </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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.delete_account_title"}} {{.locale.Tr "settings.delete_account_title"}}

View file

@ -264,7 +264,7 @@
{{end}} {{end}}
</div> </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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.access_token_deletion"}} {{.locale.Tr "settings.access_token_deletion"}}
@ -272,17 +272,7 @@
<div class="content"> <div class="content">
<p>{{.locale.Tr "settings.access_token_deletion_desc"}}</p> <p>{{.locale.Tr "settings.access_token_deletion_desc"}}</p>
</div> </div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
<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>
</div> </div>
{{template "user/settings/layout_footer" .}} {{template "user/settings/layout_footer" .}}

View file

@ -47,7 +47,7 @@
</form> </form>
</div> </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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.remove_oauth2_application"}} {{.locale.Tr "settings.remove_oauth2_application"}}

View file

@ -28,7 +28,7 @@
</div> </div>
</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"> <div class="header">
{{svg "octicon-shield" 16 "gt-mr-2"}} {{svg "octicon-shield" 16 "gt-mr-2"}}
{{.locale.Tr "settings.revoke_oauth2_grant"}} {{.locale.Tr "settings.revoke_oauth2_grant"}}

View file

@ -111,7 +111,7 @@
<br> <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> <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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.gpg_key_deletion"}} {{.locale.Tr "settings.gpg_key_deletion"}}

View file

@ -54,7 +54,7 @@
</div> </div>
</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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.ssh_principal_deletion"}} {{.locale.Tr "settings.ssh_principal_deletion"}}

View file

@ -100,7 +100,7 @@
<br> <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> <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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.ssh_key_deletion"}} {{.locale.Tr "settings.ssh_key_deletion"}}

View file

@ -37,7 +37,7 @@
</div> </div>
</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"> <div class="header">
{{$.locale.Tr "org.members.leave"}} {{$.locale.Tr "org.members.leave"}}
</div> </div>

View file

@ -35,7 +35,7 @@
<div class="right floated content"> <div class="right floated content">
{{if $.allowAdopt}} {{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> <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"> <div class="header">
<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span> <span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
</div> </div>
@ -46,22 +46,13 @@
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<input type="hidden" name="id" value="{{$dir}}"> <input type="hidden" name="id" value="{{$dir}}">
<input type="hidden" name="action" value="adopt"> <input type="hidden" name="action" value="adopt">
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}} {{template "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>
</form> </form>
</div> </div>
{{end}} {{end}}
{{if $.allowDelete}} {{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> <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"> <div class="header">
<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span> <span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
</div> </div>
@ -125,7 +116,7 @@
</div> </div>
</div> </div>
<div class="ui gitea-confirm-modal delete modal"> <div class="ui g-modal-confirm delete modal">
<div class="header"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.remove_account_link"}} {{.locale.Tr "settings.remove_account_link"}}

View file

@ -41,7 +41,7 @@
</div> </div>
</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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.remove_account_link"}} {{.locale.Tr "settings.remove_account_link"}}

View file

@ -51,7 +51,7 @@
</form> </form>
</div> </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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.openid_deletion"}} {{.locale.Tr "settings.openid_deletion"}}

View file

@ -23,7 +23,7 @@
{{end}} {{end}}
</div> </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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.twofa_disable"}} {{.locale.Tr "settings.twofa_disable"}}

View file

@ -30,7 +30,7 @@
{{template "user/auth/webauthn_error" .}} {{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"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "settings.webauthn_delete_key"}} {{.locale.Tr "settings.webauthn_delete_key"}}

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-df { display: flex !important; }
.gt-di { display: inline !important; } .gt-di { display: inline !important; }
.gt-dif { display: inline-flex !important; } .gt-dif { display: inline-flex !important; }

View file

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