diff options
| author | Gusted <postmaster@gusted.xyz> | 2024-07-16 21:30:47 +0200 |
|---|---|---|
| committer | Gusted <postmaster@gusted.xyz> | 2024-07-17 01:41:32 +0200 |
| commit | 14d9c386fd05cbd0dd37253806137a09c3dec324 (patch) | |
| tree | 96ef185a0d53e15ef4115b5d735b38f9e82aac96 /templates/base | |
| parent | Merge pull request 'docs(e2e): explain how to use VSCodium or VSCode' (#4531)... (diff) | |
| download | forgejo-14d9c386fd05cbd0dd37253806137a09c3dec324.tar.xz forgejo-14d9c386fd05cbd0dd37253806137a09c3dec324.zip | |
[UI] Fix HTMX support for profile card
- There were two issues with the profile card since the introduction of
HTMX in 3e8414179c3f3e8a12d3a66fdf32c144f941f5c3. If an HTMX request
resulted in a flash message, it wasn't being shown and HTMX was
replacing all the HTML content instead of morphing it into the existing
DOM which caused event listeners to be lost for buttons.
- Flash messages are now properly being shown by using `hx-swap-oob`
and sending the alerts on a HTMX request, this does mean it requires
server-side changes in order to support HTMX requests like this, but
it's luckily not a big change either.
- Morphing is now enabled for the profile card by setting
`hx-swap="morph"`, and weirdly, the morphing library was already
installed and included as a dependency. This solves the issue of buttons
losing their event listeners.
- This patch also adds HTMX support to the modals feature, which means
that the blocking feature on the profile card now takes advantage of
HTMX.
- Added a E2E test.
Diffstat (limited to 'templates/base')
| -rw-r--r-- | templates/base/alert.tmpl | 11 |
1 files changed, 7 insertions, 4 deletions
diff --git a/templates/base/alert.tmpl b/templates/base/alert.tmpl index 760d3bfa2c..b2deab5c2d 100644 --- a/templates/base/alert.tmpl +++ b/templates/base/alert.tmpl @@ -1,20 +1,23 @@ {{if .Flash.ErrorMsg}} - <div class="ui negative message flash-message flash-error"> + <div id="flash-message" class="ui negative message flash-message flash-error" hx-swap-oob="true"> <p>{{.Flash.ErrorMsg | SanitizeHTML}}</p> </div> {{end}} {{if .Flash.SuccessMsg}} - <div class="ui positive message flash-message flash-success"> + <div id="flash-message" class="ui positive message flash-message flash-success" hx-swap-oob="true"> <p>{{.Flash.SuccessMsg | SanitizeHTML}}</p> </div> {{end}} {{if .Flash.InfoMsg}} - <div class="ui info message flash-message flash-info"> + <div id="flash-message" class="ui info message flash-message flash-info" hx-swap-oob="true"> <p>{{.Flash.InfoMsg | SanitizeHTML}}</p> </div> {{end}} {{if .Flash.WarningMsg}} - <div class="ui warning message flash-message flash-warning"> + <div id="flash-message" class="ui warning message flash-message flash-warning" hx-swap-oob="true"> <p>{{.Flash.WarningMsg | SanitizeHTML}}</p> </div> {{end}} +{{if and (not .Flash.ErrorMsg) (not .Flash.SuccessMsg) (not .Flash.InfoMsg) (not .Flash.WarningMsg) (not .IsHTMX)}} + <div id="flash-message" hx-swap-oob="true"></div> +{{end}} |