Skip to content

Commit

Permalink
Refactor delete_modal_actions template and use it for project column …
Browse files Browse the repository at this point in the history
…related actions (#24097)

Co-Author: @wxiaoguang 

This PR is to fix
#23318 (comment) .
The way to fix this in this PR is to use `delete_modal_actions.tmpl`
here both to fix this issue and keep ui consistency (as suggested by
[TODO
here](https://github.com/go-gitea/gitea/blob/4299c3b7db61f8741eca0ba3d663bb65745a4acc/templates/projects/view.tmpl#L161))

And this PR also refactors `delete_modal_actions.tmpl` and its related
styles, and use the template for more modal actions:

1. Added template attributes:
* locale
* ModalButtonStyle: "yes" (default) or "confirm"
* ModalButtonCancelText
* ModalButtonOkText

2. Rename `delete_modal_actions.tmpl` template to
`modal_actions_confirm.tmpl` because it is not only used for action
modals deletion now.

3. Refactored css related to modals into `web_src/css/modules/modal.css`
and improved the styles.

4. Also use the template for PR deletion modal and remove issue
dependency modal.

5. Some modals should also use the template, but not sure how to open
them, so mark these modal actions by `{{/* TODO: Convert to
base/modal_actions_confirm */}}`

After (Also tested on arc green):

Hovering on the left buttons

<img width="711" alt="Screen Shot 2023-04-23 at 15 17 12"
src="https://user-images.githubusercontent.com/17645053/233825650-76307e65-9255-44bb-80e8-7062f58ead1b.png">

<img width="786" alt="Screen Shot 2023-04-23 at 15 17 21"
src="https://user-images.githubusercontent.com/17645053/233825652-4dc6f7d1-a180-49fb-a468-d60950eaee0d.png">

Test for functionalities:

https://user-images.githubusercontent.com/17645053/233826857-76376fda-022c-42d0-b0f3-339c17ca4e59.mov

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
  • Loading branch information
HesterG and wxiaoguang authored Apr 23, 2023
1 parent 5e38922 commit 476a043
Show file tree
Hide file tree
Showing 63 changed files with 285 additions and 286 deletions.
2 changes: 2 additions & 0 deletions options/locale/locale_en-US.ini
Original file line number Diff line number Diff line change
Expand Up @@ -462,6 +462,8 @@ team_invite.text_3 = Note: This invitation was intended for %[1]s. If you were n
[modal]
yes = Yes
no = No
confirm = Confirm
cancel = Cancel
modify = Update

[form]
Expand Down
6 changes: 3 additions & 3 deletions templates/admin/auth/edit.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -440,14 +440,14 @@
</div>
</div>

<div class="ui small basic delete modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "admin.auths.delete_auth_title"}}
</div>
<div class="content">
<p>{{.locale.Tr "admin.auths.delete_auth_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
8 changes: 4 additions & 4 deletions templates/admin/emails/list.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,11 @@

{{template "base/paginate" .}}

<div class="ui basic modal" id="change-email-modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal modal" id="change-email-modal">
<div class="header">
{{.locale.Tr "admin.emails.change_email_header"}}
</div>
<div class="content center">
<div class="content">
<p class="center">{{.locale.Tr "admin.emails.change_email_text"}}</p>

<form class="ui form" id="email-action-form" action="{{AppSubUrl}}/admin/emails/activate" method="post">
Expand All @@ -94,7 +94,7 @@
<input type="hidden" id="form-activate" name="activate" value="" required>

<div class="center">
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
</form>
</div>
Expand Down
7 changes: 3 additions & 4 deletions templates/admin/monitor.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,14 @@
{{template "admin/process" .}}
</div>
</div>
<div class="ui small basic delete modal">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{.locale.Tr "admin.monitor.process.cancel"}}
</div>
<div class="content">
<p>{{$.locale.Tr "admin.monitor.process.cancel_notices" `<span class="name"></span>` | Safe}}</p>
<p>{{$.locale.Tr "admin.monitor.process.cancel_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
1 change: 0 additions & 1 deletion templates/admin/notice.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
</div>

<div class="ui modal admin" id="detail-modal">
{{svg "octicon-x" 16 "close inside"}}
<div class="header">{{$.locale.Tr "admin.notices.view_detail_header"}}</div>
<div class="content">
<div class="sub header"></div>
Expand Down
6 changes: 3 additions & 3 deletions templates/admin/packages/list.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -80,14 +80,14 @@
</div>
</div>

<div class="ui small basic delete modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "packages.settings.delete"}}
</div>
<div class="content">
{{.locale.Tr "packages.settings.delete.notice" `<span class="name"></span>` `<span class="dataVersion"></span>` | Safe}}
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
7 changes: 3 additions & 4 deletions templates/admin/queue.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -181,16 +181,15 @@
</div>
</div>
</div>
<div class="ui small basic delete modal">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{.locale.Tr "admin.monitor.queue.pool.cancel"}}
</div>
<div class="content">
<p>{{$.locale.Tr "admin.monitor.queue.pool.cancel_notices" `<span class="name"></span>` | Safe}}</p>
<p>{{$.locale.Tr "admin.monitor.queue.pool.cancel_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>

{{template "base/footer" .}}
6 changes: 3 additions & 3 deletions templates/admin/repo/list.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,8 @@
</div>
</div>

<div class="ui small basic delete modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.settings.delete"}}
</div>
Expand All @@ -105,6 +105,6 @@
{{.locale.Tr "repo.settings.delete_notices_2" `<span class="name"></span>` | Safe}}<br>
{{.locale.Tr "repo.settings.delete_notices_fork_1"}}<br>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
10 changes: 4 additions & 6 deletions templates/admin/repo/unadopted.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,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 basic modal" id="adopt-unadopted-modal-{{$dirI}}">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal modal" id="adopt-unadopted-modal-{{$dirI}}">
<div class="header">
<span class="label">{{$.locale.Tr "repo.adopt_preexisting"}}</span>
</div>
Expand All @@ -43,7 +42,7 @@
<input type="hidden" name="action" value="adopt">
<input type="hidden" name="q" value="{{$.Keyword}}">
<input type="hidden" name="page" value="{{$.CurrentPage}}">
<div class="actions">
<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"}}
Expand All @@ -56,8 +55,7 @@
</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 basic modal" id="delete-unadopted-modal-{{$dirI}}">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal modal" id="delete-unadopted-modal-{{$dirI}}">
<div class="header">
<span class="label">{{$.locale.Tr "repo.delete_preexisting"}}</span>
</div>
Expand All @@ -70,7 +68,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">
<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"}}
Expand Down
7 changes: 3 additions & 4 deletions templates/admin/stacktrace.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,15 @@
</div>
</div>
</div>
<div class="ui small basic delete modal">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{.locale.Tr "admin.monitor.process.cancel"}}
</div>
<div class="content">
<p>{{$.locale.Tr "admin.monitor.process.cancel_notices" `<span class="name"></span>` | Safe}}</p>
<p>{{$.locale.Tr "admin.monitor.process.cancel_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>

{{template "base/footer" .}}
6 changes: 3 additions & 3 deletions templates/admin/user/edit.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -196,8 +196,8 @@
</div>
</div>

<div class="ui small basic delete modal" id="delete-user-modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal" id="delete-user-modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "settings.delete_account_title"}}
</div>
Expand All @@ -213,7 +213,7 @@
</div>
<p class="help">{{.locale.Tr "admin.users.purge_help"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</form>
</div>
{{template "base/footer" .}}
10 changes: 0 additions & 10 deletions templates/base/delete_modal_actions.tmpl

This file was deleted.

21 changes: 21 additions & 0 deletions templates/base/modal_actions_confirm.tmpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{{/*
Template Attributes:
* locale
* ModalButtonStyle: "yes" (default) or "confirm"
* ModalButtonCancelText
* ModalButtonOkText

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"}}
{{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>
14 changes: 6 additions & 8 deletions templates/org/member/members.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -81,25 +81,23 @@
{{template "base/paginate" .}}
</div>
</div>
<div class="ui small basic delete modal" id="leave-organization">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal" id="leave-organization">
<div class="header">
{{$.locale.Tr "org.members.leave"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.members.leave.detail" `<span class="dataOrganizationName"></span>` | Safe}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
<div class="ui small basic delete modal" id="remove-organization-member">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal" id="remove-organization-member">
<div class="header">
{{$.locale.Tr "org.members.remove"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.members.remove.detail" `<span class="name"></span>` `<span class="dataOrganizationName"></span>` | Safe}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>

{{template "base/footer" .}}
6 changes: 3 additions & 3 deletions templates/org/settings/delete.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@
</div>
</div>

<div class="ui small basic delete modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "org.settings.delete_org_title"}}
</div>
<div class="content">
<p>{{.locale.Tr "org.settings.delete_org_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
7 changes: 3 additions & 4 deletions templates/org/team/members.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,13 @@
</div>
</div>
</div>
<div class="ui small basic delete modal" id="remove-team-member">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal" id="remove-team-member">
<div class="header">
{{$.locale.Tr "org.members.remove"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.members.remove.detail" `<span class="name"></span>` `<span class="dataTeamName"></span>` | Safe}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
6 changes: 3 additions & 3 deletions templates/org/team/new.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -148,14 +148,14 @@
</div>
</div>

<div class="ui small basic delete modal">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "org.teams.delete_team_title"}}
</div>
<div class="content">
<p>{{.locale.Tr "org.teams.delete_team_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
12 changes: 6 additions & 6 deletions templates/org/team/repositories.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -64,26 +64,26 @@
</div>
</div>

<div class="ui small basic delete modal" id="org-team-remove-all-repo">
<div class="ui icon header">
<div class="ui gitea-confirm-modal delete modal" id="org-team-remove-all-repo">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "org.teams.remove_all_repos_title"}}
</div>
<div class="content">
<p>{{.locale.Tr "org.teams.remove_all_repos_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>

<div class="ui small basic addall modal" id="org-team-add-all-repo">
<div class="ui icon header">
<div class="ui gitea-confirm-modal addall modal" id="org-team-add-all-repo">
<div class="header">
{{svg "octicon-globe"}}
{{.locale.Tr "org.teams.add_all_repos_title"}}
</div>
<div class="content">
<p>{{.locale.Tr "org.teams.add_all_repos_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>

{{template "base/footer" .}}
7 changes: 3 additions & 4 deletions templates/org/team/sidebar.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,12 @@
</div>
{{end}}
</div>
<div class="ui small basic delete modal" id="leave-team-sidebar">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal" id="leave-team-sidebar">
<div class="header">
{{$.locale.Tr "org.teams.leave"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.teams.leave.detail" `<span class="name"></span>` | Safe}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
7 changes: 3 additions & 4 deletions templates/org/team/teams.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,13 @@
</div>
</div>
</div>
<div class="ui small basic delete modal" id="leave-team">
<div class="ui icon header">
{{svg "octicon-x" 16 "close inside"}}
<div class="ui gitea-confirm-modal delete modal" id="leave-team">
<div class="header">
{{$.locale.Tr "org.teams.leave"}}
</div>
<div class="content">
<p>{{$.locale.Tr "org.teams.leave.detail" `<span class="name"></span>` | Safe}}</p>
</div>
{{template "base/delete_modal_actions" .}}
{{template "base/modal_actions_confirm" .}}
</div>
{{template "base/footer" .}}
Loading

0 comments on commit 476a043

Please sign in to comment.