mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-22 12:54:53 -05:00
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:
parent
47748df9b3
commit
75c62054a6
58 changed files with 173 additions and 129 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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
49
templates/devtest/fomantic-modal.tmpl
Normal 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" .}}
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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" .}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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" .}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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"}}
|
||||
|
|
|
@ -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; }
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue