mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-01 16:38:37 +00:00
14d9c386fd
- There were two issues with the profile card since the introduction of
HTMX in 3e8414179c. 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.
130 lines
5.1 KiB
Go HTML Template
130 lines
5.1 KiB
Go HTML Template
{{if .IsHTMX}}
|
|
{{template "base/alert" .}}
|
|
{{end}}
|
|
<div id="profile-avatar-card" class="ui card" hx-swap="morph">
|
|
<div id="profile-avatar" class="content tw-flex">
|
|
{{if eq .SignedUserID .ContextUser.ID}}
|
|
<a class="image" href="{{AppSubUrl}}/user/settings" data-tooltip-content="{{ctx.Locale.Tr "user.change_avatar"}}">
|
|
{{/* the size doesn't take affect (and no need to take affect), image size(width) should be controlled by the parent container since this is not a flex layout*/}}
|
|
{{ctx.AvatarUtils.Avatar .ContextUser 256}}
|
|
</a>
|
|
{{else}}
|
|
<span class="image">
|
|
{{ctx.AvatarUtils.Avatar .ContextUser 256}}
|
|
</span>
|
|
{{end}}
|
|
</div>
|
|
<div class="content tw-break-anywhere profile-avatar-name">
|
|
{{if .ContextUser.FullName}}<span class="header text center">{{.ContextUser.FullName}}</span>{{end}}
|
|
<span class="username text center">{{.ContextUser.Name}}{{if .ContextUser.Pronouns}} · {{.ContextUser.Pronouns}}{{end}} {{if .IsAdmin}}
|
|
<a class="muted" href="{{AppSubUrl}}/admin/users/{{.ContextUser.ID}}" data-tooltip-content="{{ctx.Locale.Tr "admin.users.details"}}">
|
|
{{svg "octicon-gear" 18}}
|
|
</a>
|
|
{{end}}</span>
|
|
<div class="tw-mt-2">
|
|
<a class="muted" href="{{.ContextUser.HomeLink}}?tab=followers">{{svg "octicon-people" 18 "tw-mr-1"}}{{ctx.Locale.TrN .NumFollowers "user.followers_one" "user.followers_few" .NumFollowers}}</a> · <a class="muted" href="{{.ContextUser.HomeLink}}?tab=following">{{ctx.Locale.TrN .NumFollowing "user.following_one" "user.following_few" .NumFollowing}}</a>
|
|
{{if and .EnableFeed (or .IsAdmin (eq .SignedUserID .ContextUser.ID) (not .ContextUser.KeepActivityPrivate))}}
|
|
<a href="{{.ContextUser.HomeLink}}.rss"><i class="ui text grey tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div class="extra content tw-break-anywhere">
|
|
<ul>
|
|
{{if .ContextUser.Location}}
|
|
<li>
|
|
{{svg "octicon-location"}}
|
|
<span class="tw-flex-1">{{.ContextUser.Location}}</span>
|
|
{{if .ContextUserLocationMapURL}}
|
|
<a href="{{.ContextUserLocationMapURL}}" rel="nofollow noreferrer" data-tooltip-content="{{ctx.Locale.Tr "user.show_on_map"}}">
|
|
{{svg "octicon-link-external"}}
|
|
</a>
|
|
{{end}}
|
|
</li>
|
|
{{end}}
|
|
{{if .ShowUserEmail}}
|
|
<li>
|
|
{{svg "octicon-mail"}}
|
|
<a class="tw-flex-1" href="mailto:{{.ContextUser.Email}}" rel="nofollow">{{.ContextUser.Email}}</a>
|
|
{{if (eq .SignedUserID .ContextUser.ID)}}
|
|
<a href="{{AppSubUrl}}/user/settings#privacy-user-settings">
|
|
<i data-tooltip-content="{{ctx.Locale.Tr "user.email_visibility.limited"}}">
|
|
{{svg "octicon-unlock"}}
|
|
</i>
|
|
</a>
|
|
{{end}}
|
|
</li>
|
|
{{end}}
|
|
{{if .ContextUser.Website}}
|
|
<li>
|
|
{{svg "octicon-link"}}
|
|
<a target="_blank" rel="noopener noreferrer me" href="{{.ContextUser.Website}}">{{.ContextUser.Website}}</a>
|
|
</li>
|
|
{{end}}
|
|
{{if $.RenderedDescription}}
|
|
<li>
|
|
<div class="render-content markup">{{$.RenderedDescription}}</div>
|
|
</li>
|
|
{{end}}
|
|
{{range .OpenIDs}}
|
|
{{if .Show}}
|
|
<li>
|
|
{{svg "fontawesome-openid"}}
|
|
<a target="_blank" rel="noopener noreferrer" href="{{.URI}}">{{.URI}}</a>
|
|
</li>
|
|
{{end}}
|
|
{{end}}
|
|
<li>{{svg "octicon-calendar"}} <span>{{ctx.Locale.Tr "user.joined_on" (DateTime "short" .ContextUser.CreatedUnix)}}</span></li>
|
|
{{if and .Orgs .HasOrgsVisible}}
|
|
<li>
|
|
<ul class="user-orgs">
|
|
{{range .Orgs}}
|
|
{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.HasMemberWithUserID ctx $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
|
|
<li>
|
|
<a href="{{.HomeLink}}" data-tooltip-content="{{.Name}}">
|
|
{{ctx.AvatarUtils.Avatar .}}
|
|
</a>
|
|
</li>
|
|
{{end}}
|
|
{{end}}
|
|
</ul>
|
|
</li>
|
|
{{end}}
|
|
{{if .Badges}}
|
|
<li>
|
|
<ul class="user-badges">
|
|
{{range .Badges}}
|
|
<li>
|
|
<img width="64" height="64" src="{{.ImageURL}}" alt="{{.Description}}" data-tooltip-content="{{.Description}}">
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
</li>
|
|
{{end}}
|
|
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
|
|
<li class="follow" hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card">
|
|
{{if $.IsFollowing}}
|
|
<button hx-post="{{.ContextUser.HomeLink}}?action=unfollow" class="ui basic red button">
|
|
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unfollow"}}
|
|
</button>
|
|
{{else}}
|
|
<button hx-post="{{.ContextUser.HomeLink}}?action=follow" class="ui basic primary button">
|
|
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.follow"}}
|
|
</button>
|
|
{{end}}
|
|
</li>
|
|
<li class="block" hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card">
|
|
{{if $.IsBlocked}}
|
|
<button class="ui basic red button" hx-post="{{.ContextUser.HomeLink}}?action=unblock">
|
|
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unblock"}}
|
|
</button>
|
|
{{else}}
|
|
<button type="submit" class="ui basic orange button" data-modal-id="block-user" hx-post="{{.ContextUser.HomeLink}}?action=block" hx-confirm="-">
|
|
{{svg "octicon-blocked"}} {{ctx.Locale.Tr "user.block"}}
|
|
</button>
|
|
{{end}}
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
</div>
|
|
</div>
|