From c6f1fb1c6dcaaeccd203ae22005902795187415a Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Thu, 29 Jun 2023 12:16:04 +0800
Subject: [PATCH] Use fetch form action for lock/unlock/pin/unpin on sidebar
(#25380)
Before:
<img width="364" alt="Screen Shot 2023-06-20 at 11 59 11"
src="https://github.com/go-gitea/gitea/assets/17645053/ad284b7e-8d21-43be-b178-bbcfd37cb5bd">
Might trigger many posts when keep clicking the buttons above.
<img width="448" alt="Screen Shot 2023-06-20 at 11 52 28"
src="https://github.com/go-gitea/gitea/assets/17645053/a60aa6ac-af74-45e4-b13a-512b436b81b0">
<img width="678" alt="Screen Shot 2023-06-20 at 11 52 37"
src="https://github.com/go-gitea/gitea/assets/17645053/d6662700-3643-4cc7-a2ec-64e1c0f5fbdb">
After (PR sidebar, Same for issue):
https://github.com/go-gitea/gitea/assets/17645053/9df3ad1f-e29c-439b-8bde-e6b917d63cc6
For delete, it is using `base/modal_actions_confirm` subtemplate, and we
might need another general solution for this (maybe add another
attribute to the subtemplate or something)
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
routers/web/repo/issue_lock.go | 13 +++++--------
routers/web/repo/issue_pin.go | 2 +-
templates/repo/issue/view_content/sidebar.tmpl | 4 ++--
web_src/css/modules/animations.css | 15 +++++++++++----
4 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/routers/web/repo/issue_lock.go b/routers/web/repo/issue_lock.go
index 08b76e555f..93f5a588d9 100644
--- a/routers/web/repo/issue_lock.go
+++ b/routers/web/repo/issue_lock.go
@@ -20,14 +20,12 @@ func LockIssue(ctx *context.Context) {
}
if issue.IsLocked {
- ctx.Flash.Error(ctx.Tr("repo.issues.lock_duplicate"))
- ctx.Redirect(issue.Link())
+ ctx.JSONError(ctx.Tr("repo.issues.lock_duplicate"))
return
}
if !form.HasValidReason() {
- ctx.Flash.Error(ctx.Tr("repo.issues.lock.unknown_reason"))
- ctx.Redirect(issue.Link())
+ ctx.JSONError(ctx.Tr("repo.issues.lock.unknown_reason"))
return
}
@@ -40,7 +38,7 @@ func LockIssue(ctx *context.Context) {
return
}
- ctx.Redirect(issue.Link())
+ ctx.JSONRedirect(issue.Link())
}
// UnlockIssue unlocks a previously locked issue.
@@ -51,8 +49,7 @@ func UnlockIssue(ctx *context.Context) {
}
if !issue.IsLocked {
- ctx.Flash.Error(ctx.Tr("repo.issues.unlock_error"))
- ctx.Redirect(issue.Link())
+ ctx.JSONError(ctx.Tr("repo.issues.unlock_error"))
return
}
@@ -64,5 +61,5 @@ func UnlockIssue(ctx *context.Context) {
return
}
- ctx.Redirect(issue.Link())
+ ctx.JSONRedirect(issue.Link())
}
diff --git a/routers/web/repo/issue_pin.go b/routers/web/repo/issue_pin.go
index 6586372fc5..7c1a306e6c 100644
--- a/routers/web/repo/issue_pin.go
+++ b/routers/web/repo/issue_pin.go
@@ -31,7 +31,7 @@ func IssuePinOrUnpin(ctx *context.Context) {
return
}
- ctx.Redirect(issue.Link())
+ ctx.JSONRedirect(issue.Link())
}
// IssueUnpin unpins a Issue
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 0bc1684489..0e36e15e5c 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -556,7 +556,7 @@
<div class="ui divider"></div>
{{if or .PinEnabled .Issue.IsPinned}}
- <form class="gt-mt-2" method="post" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
+ <form class="gt-mt-2 form-fetch-action single-button-form" method="post" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
{{$.CsrfTokenHtml}}
<button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
{{if not .Issue.IsPinned}}
@@ -599,7 +599,7 @@
{{end}}
</div>
- <form class="ui form" action="{{.Issue.Link}}{{if .Issue.IsLocked}}/unlock{{else}}/lock{{end}}"
+ <form class="ui form form-fetch-action" action="{{.Issue.Link}}{{if .Issue.IsLocked}}/unlock{{else}}/lock{{end}}"
method="post">
{{.CsrfTokenHtml}}
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index cb7ac59b07..876758d8bf 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -17,12 +17,10 @@
content: "";
position: absolute;
display: block;
- height: 4rem;
- aspect-ratio: 1 / 1;
left: 50%;
top: 50%;
- max-height: 100%;
- max-width: 100%;
+ height: min(4em, 66.6%);
+ aspect-ratio: 1;
transform: translate(-50%, -50%);
animation: isloadingspin 500ms infinite linear;
border-width: 4px;
@@ -35,6 +33,15 @@
border-width: 2px;
}
+/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
+form.single-button-form.is-loading > * {
+ opacity: 1;
+}
+
+form.single-button-form.is-loading .button {
+ color: transparent;
+}
+
.markup pre.is-loading,
.editor-loading.is-loading,
.pdf-content.is-loading {