Skip to content

Commit 75c6205

Browse files
wxiaoguangsilverwind
wxiaoguang
and
silverwind
authored
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: #24285 (comment)) ![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png) --------- Co-authored-by: silverwind <[email protected]>
1 parent 47748df commit 75c6205

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+173
-129
lines changed

Diff for: ‎docs/content/doc/contributing/guidelines-frontend.en-us.md

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
4949
9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided.
5050
10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event.
5151
11. Custom event names are recommended to use `ce-` prefix.
52+
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`).
5253

5354
### Accessibility / ARIA
5455

Diff for: ‎templates/admin/auth/edit.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@
436436
</div>
437437
</div>
438438

439-
<div class="ui gitea-confirm-modal delete modal">
439+
<div class="ui g-modal-confirm delete modal">
440440
<div class="header">
441441
{{svg "octicon-trash"}}
442442
{{.locale.Tr "admin.auths.delete_auth_title"}}

Diff for: ‎templates/admin/emails/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070

7171
{{template "base/paginate" .}}
7272

73-
<div class="ui gitea-confirm-modal modal" id="change-email-modal">
73+
<div class="ui g-modal-confirm modal" id="change-email-modal">
7474
<div class="header">
7575
{{.locale.Tr "admin.emails.change_email_header"}}
7676
</div>

Diff for: ‎templates/admin/monitor.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
{{template "admin/process" .}}
3535
</div>
3636

37-
<div class="ui gitea-confirm-modal delete modal">
37+
<div class="ui g-modal-confirm delete modal">
3838
<div class="header">
3939
{{.locale.Tr "admin.monitor.process.cancel"}}
4040
</div>

Diff for: ‎templates/admin/packages/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
{{template "base/paginate" .}}
7777
</div>
7878

79-
<div class="ui gitea-confirm-modal delete modal">
79+
<div class="ui g-modal-confirm delete modal">
8080
<div class="header">
8181
{{svg "octicon-trash"}}
8282
{{.locale.Tr "packages.settings.delete"}}

Diff for: ‎templates/admin/queue.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178
</div>
179179
</div>
180180

181-
<div class="ui gitea-confirm-modal delete modal">
181+
<div class="ui g-modal-confirm delete modal">
182182
<div class="header">
183183
{{.locale.Tr "admin.monitor.queue.pool.cancel"}}
184184
</div>

Diff for: ‎templates/admin/repo/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
{{template "base/paginate" .}}
9292
</div>
9393

94-
<div class="ui gitea-confirm-modal delete modal">
94+
<div class="ui g-modal-confirm delete modal">
9595
<div class="header">
9696
{{svg "octicon-trash"}}
9797
{{.locale.Tr "repo.settings.delete"}}

Diff for: ‎templates/admin/repo/unadopted.tmpl

+4-22
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<span class="name">{{$dir}}</span>
2727
<div class="right floated content">
2828
<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>
29-
<div class="ui gitea-confirm-modal modal" id="adopt-unadopted-modal-{{$dirI}}">
29+
<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
3030
<div class="header">
3131
<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
3232
</div>
@@ -39,20 +39,11 @@
3939
<input type="hidden" name="action" value="adopt">
4040
<input type="hidden" name="q" value="{{$.Keyword}}">
4141
<input type="hidden" name="page" value="{{$.CurrentPage}}">
42-
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
43-
<button class="ui red basic inverted cancel button">
44-
{{svg "octicon-trash" 16 "gt-mr-2"}}
45-
{{$.locale.Tr "modal.no"}}
46-
</button>
47-
<button class="ui green basic inverted ok button">
48-
{{svg "octicon-check" 16 "gt-mr-2"}}
49-
{{$.locale.Tr "modal.yes"}}
50-
</button>
51-
</div>
42+
{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
5243
</form>
5344
</div>
5445
<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>
55-
<div class="ui gitea-confirm-modal modal" id="delete-unadopted-modal-{{$dirI}}">
46+
<div class="ui g-modal-confirm modal" id="delete-unadopted-modal-{{$dirI}}">
5647
<div class="header">
5748
<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
5849
</div>
@@ -65,16 +56,7 @@
6556
<input type="hidden" name="action" value="delete">
6657
<input type="hidden" name="q" value="{{$.Keyword}}">
6758
<input type="hidden" name="page" value="{{$.CurrentPage}}">
68-
<div class="actions">{{/* TODO: Convert to base/modal_actions_confirm */}}
69-
<button class="ui red basic inverted cancel button">
70-
{{svg "octicon-trash" 16 "gt-mr-2"}}
71-
{{$.locale.Tr "modal.no"}}
72-
</button>
73-
<button class="ui green basic inverted ok button">
74-
{{svg "octicon-check" 16 "gt-mr-2"}}
75-
{{$.locale.Tr "modal.yes"}}
76-
</button>
77-
</div>
59+
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
7860
</form>
7961
</div>
8062
</div>

Diff for: ‎templates/admin/stacktrace.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</div>
1616
</div>
1717

18-
<div class="ui gitea-confirm-modal delete modal">
18+
<div class="ui g-modal-confirm delete modal">
1919
<div class="header">
2020
{{.locale.Tr "admin.monitor.process.cancel"}}
2121
</div>

Diff for: ‎templates/admin/user/edit.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@
192192
</div>
193193
</div>
194194

195-
<div class="ui gitea-confirm-modal delete modal" id="delete-user-modal">
195+
<div class="ui g-modal-confirm delete modal" id="delete-user-modal">
196196
<div class="header">
197197
{{svg "octicon-trash"}}
198198
{{.locale.Tr "settings.delete_account_title"}}

Diff for: ‎templates/base/modal_actions_confirm.tmpl

+27-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
11
{{/*
22
Template Attributes:
33
* locale
4-
* ModalButtonStyle: "yes" (default) or "confirm"
4+
5+
Two buttons (negative, positive):
6+
* ModalButtonTypes: "yes" (default) or "confirm"
7+
* ModalButtonColors: "green" (default) / "blue" / "yellow"
58
* ModalButtonCancelText
69
* ModalButtonOkText
710

11+
Single danger button (GitHub-like):
12+
* ModalButtonDangerText "This action will destroy your data"
13+
814
The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal internally
915
*/}}
1016
<div class="actions">
11-
{{$textNegitive := .locale.Tr "modal.no"}}
12-
{{$textPositive := .locale.Tr "modal.yes"}}
13-
{{if eq .ModalButtonStyle "confirm"}}
14-
{{$textNegitive = .locale.Tr "modal.cancel"}}
15-
{{$textPositive = .locale.Tr "modal.confirm"}}
17+
{{if .ModalButtonDangerText}}
18+
<button class="ui danger red ok button">{{.ModalButtonDangerText}}</button>
19+
{{else}}
20+
{{$textNegitive := .locale.Tr "modal.no"}}
21+
{{$textPositive := .locale.Tr "modal.yes"}}
22+
{{if eq .ModalButtonTypes "confirm"}}
23+
{{$textNegitive = .locale.Tr "modal.cancel"}}
24+
{{$textPositive = .locale.Tr "modal.confirm"}}
25+
{{end}}
26+
{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
27+
{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
28+
29+
{{$stylePositive := "green"}}
30+
{{if eq .ModalButtonColors "blue"}}
31+
{{$stylePositive = "blue"}}
32+
{{else if eq .ModalButtonColors "yellow"}}
33+
{{$stylePositive = "yellow"}}
34+
{{end}}
35+
<button class="ui secondary basic cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
36+
<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
1637
{{end}}
17-
{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
18-
{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
19-
<button class="ui red cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
20-
<button class="ui green ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
2138
</div>

Diff for: ‎templates/devtest/fomantic-modal.tmpl

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{{template "base/head" .}}
2+
<div class="page-content devtest ui container">
3+
<div class="ui g-modal-confirm modal" id="test-modal-default">
4+
<div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div>
5+
<div class="content">
6+
very long aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
7+
</div>
8+
{{template "base/modal_actions_confirm" (dict "locale" $.locale)}}
9+
</div>
10+
11+
<div class="ui g-modal-confirm modal" id="test-modal-confirm">
12+
<div class="header">Confirm dialog</div>
13+
<div class="content">hello, this is the modal dialog content</div>
14+
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
15+
</div>
16+
17+
<div class="ui g-modal-confirm modal" id="test-modal-blue">
18+
<div class="header">Blue dialog</div>
19+
<div class="content">hello, this is the modal dialog content</div>
20+
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "blue")}}
21+
</div>
22+
23+
<div class="ui g-modal-confirm modal" id="test-modal-yellow">
24+
<div class="header">yellow dialog</div>
25+
<div class="content">hello, this is the modal dialog content</div>
26+
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonColors" "yellow")}}
27+
</div>
28+
29+
<div class="ui g-modal-confirm modal" id="test-modal-danger">
30+
{{svg "octicon-x" 16 "inside close"}}
31+
<div class="header">dangerous action dialog</div>
32+
<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
33+
{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
34+
</div>
35+
36+
<div class="modal-buttons"></div>
37+
<script type="module">
38+
for (const el of $('.ui.modal')) {
39+
const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
40+
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
41+
});
42+
$('.modal-buttons').append($btn);
43+
}
44+
</script>
45+
<style>
46+
.modal-buttons button { margin: 5px; }
47+
</style>
48+
</div>
49+
{{template "base/footer" .}}

Diff for: ‎templates/org/member/members.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
{{template "base/paginate" .}}
8282
</div>
8383
</div>
84-
<div class="ui gitea-confirm-modal delete modal" id="leave-organization">
84+
<div class="ui g-modal-confirm delete modal" id="leave-organization">
8585
<div class="header">
8686
{{$.locale.Tr "org.members.leave"}}
8787
</div>
@@ -90,7 +90,7 @@
9090
</div>
9191
{{template "base/modal_actions_confirm" .}}
9292
</div>
93-
<div class="ui gitea-confirm-modal delete modal" id="remove-organization-member">
93+
<div class="ui g-modal-confirm delete modal" id="remove-organization-member">
9494
<div class="header">
9595
{{$.locale.Tr "org.members.remove"}}
9696
</div>

Diff for: ‎templates/org/settings/delete.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</div>
2222
</div>
2323

24-
<div class="ui gitea-confirm-modal delete modal">
24+
<div class="ui g-modal-confirm delete modal">
2525
<div class="header">
2626
{{svg "octicon-trash"}}
2727
{{.locale.Tr "org.settings.delete_org_title"}}

Diff for: ‎templates/org/team/members.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
</div>
6565
</div>
6666
</div>
67-
<div class="ui gitea-confirm-modal delete modal" id="remove-team-member">
67+
<div class="ui g-modal-confirm delete modal" id="remove-team-member">
6868
<div class="header">
6969
{{$.locale.Tr "org.members.remove"}}
7070
</div>

Diff for: ‎templates/org/team/new.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
</div>
149149
</div>
150150

151-
<div class="ui gitea-confirm-modal delete modal">
151+
<div class="ui g-modal-confirm delete modal">
152152
<div class="header">
153153
{{svg "octicon-trash"}}
154154
{{.locale.Tr "org.teams.delete_team_title"}}

Diff for: ‎templates/org/team/repositories.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
</div>
6565
</div>
6666

67-
<div class="ui gitea-confirm-modal delete modal" id="org-team-remove-all-repo">
67+
<div class="ui g-modal-confirm delete modal" id="org-team-remove-all-repo">
6868
<div class="header">
6969
{{svg "octicon-trash"}}
7070
{{.locale.Tr "org.teams.remove_all_repos_title"}}
@@ -75,7 +75,7 @@
7575
{{template "base/modal_actions_confirm" .}}
7676
</div>
7777

78-
<div class="ui gitea-confirm-modal addall modal" id="org-team-add-all-repo">
78+
<div class="ui g-modal-confirm addall modal" id="org-team-add-all-repo">
7979
<div class="header">
8080
{{svg "octicon-globe"}}
8181
{{.locale.Tr "org.teams.add_all_repos_title"}}

Diff for: ‎templates/org/team/sidebar.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
</div>
8484
{{end}}
8585
</div>
86-
<div class="ui gitea-confirm-modal delete modal" id="leave-team-sidebar">
86+
<div class="ui g-modal-confirm delete modal" id="leave-team-sidebar">
8787
<div class="header">
8888
{{$.locale.Tr "org.teams.leave"}}
8989
</div>

Diff for: ‎templates/org/team/teams.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</div>
4444
</div>
4545
</div>
46-
<div class="ui gitea-confirm-modal delete modal" id="leave-team">
46+
<div class="ui g-modal-confirm delete modal" id="leave-team">
4747
<div class="header">
4848
{{$.locale.Tr "org.teams.leave"}}
4949
</div>

Diff for: ‎templates/projects/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
</div>
7777

7878
{{if $.CanWriteProjects}}
79-
<div class="ui gitea-confirm-modal delete modal">
79+
<div class="ui g-modal-confirm delete modal">
8080
<div class="header">
8181
{{svg "octicon-trash"}}
8282
{{.locale.Tr "repo.projects.deletion"}}

Diff for: ‎templates/projects/view.tmpl

+5-5
Original file line numberDiff line numberDiff line change
@@ -150,17 +150,17 @@
150150
</div>
151151
</div>
152152

153-
<div class="ui gitea-confirm-modal modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
153+
<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
154154
<div class="header">
155155
<span id="default-project-board-header"></span>
156156
</div>
157157
<div class="content">
158158
<label id="default-project-board-content"></label>
159159
</div>
160-
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
160+
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
161161
</div>
162162

163-
<div class="ui gitea-confirm-modal modal" id="delete-board-modal-{{.ID}}">
163+
<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
164164
<div class="header">
165165
{{$.locale.Tr "repo.projects.column.delete"}}
166166
</div>
@@ -169,7 +169,7 @@
169169
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
170170
</label>
171171
</div>
172-
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonStyle" "confirm")}}
172+
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
173173
</div>
174174
</div>
175175
</div>
@@ -272,7 +272,7 @@
272272
</div>
273273

274274
{{if .CanWriteProjects}}
275-
<div class="ui gitea-confirm-modal delete modal">
275+
<div class="ui g-modal-confirm delete modal">
276276
<div class="header">
277277
{{svg "octicon-trash"}}
278278
{{.locale.Tr "repo.projects.deletion"}}

Diff for: ‎templates/repo/branch/list.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147
</div>
148148
</div>
149149

150-
<div class="ui gitea-confirm-modal delete modal">
150+
<div class="ui g-modal-confirm delete modal">
151151
<div class="header">
152152
{{svg "octicon-trash"}}
153153
{{.locale.Tr "repo.branch.delete_html"}} <span class="name"></span>

Diff for: ‎templates/repo/commit_page.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.cherry-pick-header" (ShortSha .CommitID)}}"
6060
data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.cherry-pick-content"}}"
6161
data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.cherry-pick"}}">{{.locale.Tr "repo.commit.cherry-pick"}}</div>
62-
<div class="ui gitea-confirm-modal modal" id="cherry-pick-modal">
62+
<div class="ui g-modal-confirm modal" id="cherry-pick-modal">
6363
<div class="header">
6464
<span id="cherry-pick-header"></span>
6565
</div>

Diff for: ‎templates/repo/editor/edit.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</div>
5757

5858

59-
<div class="ui gitea-confirm-modal modal" id="edit-empty-content-modal">
59+
<div class="ui g-modal-confirm modal" id="edit-empty-content-modal">
6060
<div class="header">
6161
{{svg "octicon-file"}}
6262
{{.locale.Tr "repo.editor.commit_empty_file_header"}}
@@ -65,11 +65,11 @@
6565
<p>{{.locale.Tr "repo.editor.commit_empty_file_text"}}</p>
6666
</div>
6767
<div class="actions">
68-
<button class="ui red basic cancel inverted button">
68+
<button class="ui red cancel button">
6969
{{svg "octicon-x"}}
7070
{{.locale.Tr "repo.editor.cancel"}}
7171
</button>
72-
<button class="ui green basic ok inverted button">
72+
<button class="ui green ok button">
7373
{{svg "fontawesome-save"}}
7474
{{.locale.Tr "repo.editor.commit_changes"}}
7575
</button>

0 commit comments

Comments
 (0)