luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-17 11:59:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Don't do a full page load when clicking the subscribe button (#28871)

Browse source 
- Refactor the form around the subscribe button into its own template
- Use htmx to perform the form submission
- `hx-boost="true"` to prevent the default form submission behavior of a
full page load
- `hx-sync="this:replace"` to replace the current request (in case the
button is clicked again before the response is returned)
  - `hx-target="this"` to replace the form tag with the new form tag
  - `hx-push-url="false"` to disable a change to the URL
  - `hx-swap="show:no-scroll"` to preserve the scroll position
- Change the backend response to return a `<form>` tag instead of a
redirect to the issue page
- Include `htmx.org` in javascript imports

This change introduces htmx with the hope we could use it to make Gitea
more reactive while keeping our "HTML rendered on the server" approach.

# Before


![before](4ec3e81e-4dbf-4338-9968-b0655c276d4c)

# After


![after](8c8841af-9bfe-40b2-b1cd-cd1f3c90ba4d)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
This commit is contained in:
Yarden Shoham 2024-01-20 21:44:51 +02:00 • committed by GitHub
parent 80d48621cd
commit 14f6fcf448
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 31 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

14
templates/repo/issue/view_content/sidebar.tmpl
View file

@ -270,19 +270,7 @@
<div class="ui watching">
<span class="text"><strong>{{ctx.Locale.Tr "notification.notifications"}}</strong></span>
<div class="gt-mt-3">
<form method="post" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
{{$.CsrfTokenHtml}}
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
{{else}}
{{svg "octicon-unmute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.subscribe"}}
{{end}}
</button>
</form>
{{template "repo/issue/view_content/watching" .}}
</div>
</div>
{{end}}

13
templates/repo/issue/view_content/watching.tmpl Normal file
View file

@ -0,0 +1,13 @@
<form hx-boost="true" hx-sync="this:replace" hx-target="this" hx-push-url="false" hx-swap="show:no-scroll" method="post" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
{{$.CsrfTokenHtml}}
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.unsubscribe"}}
{{else}}
{{svg "octicon-unmute" 16 "gt-mr-3"}}
{{ctx.Locale.Tr "repo.issues.subscribe"}}
{{end}}
</button>
</form>