Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve some modal action buttons #24289

Merged
merged 7 commits into from
Apr 24, 2023
Merged

Improve some modal action buttons #24289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4a259ff
fix
wxiaoguang Apr 23, 2023
c1102c8
Merge branch 'main' into improve-modal-button
wxiaoguang Apr 24, 2023
4c0ea70
rename css class name
wxiaoguang Apr 24, 2023
0b416f2
improve modal buttons
wxiaoguang Apr 24, 2023
cc3f2bf
use g-modal-confirm instead of g-confirm-modal
wxiaoguang Apr 24, 2023
c07b3b3
Merge branch 'main' into improve-modal-button
wxiaoguang Apr 24, 2023
e0c3bf3
Merge branch 'main' into improve-modal-button
silverwind Apr 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/content/doc/contributing/guidelines-frontend.en-us.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion templates/admin/auth/edit.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/emails/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/monitor.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/packages/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/queue.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/repo/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
26 changes: 4 additions & 22 deletions templates/admin/repo/unadopted.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/stacktrace.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/user/edit.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
37 changes: 27 additions & 10 deletions templates/base/modal_actions_confirm.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 49 additions & 0 deletions templates/devtest/fomantic-modal.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 2 deletions templates/org/member/members.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/org/settings/delete.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/org/team/members.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/org/team/new.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
4 changes: 2 additions & 2 deletions templates/org/team/repositories.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand All @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/org/team/sidebar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/org/team/teams.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/projects/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down
10 changes: 5 additions & 5 deletions templates/projects/view.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/branch/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/commit_page.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/editor/edit.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand All @@ -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>
Expand Down
Loading