peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): allow dropdown to contain not just items (#9951)

Browse source 
Currently the dropdown component only supports having one `<summary>` and one `<ul>` (with interactive items) in it. This PR refactors it to add a `.content` container so that it is possible for the dropdown to contain things the more complex dropdowns do like `<hr>` and a searchbar.

Also adds an `<hr>` to user actions as a little demo.

Preview
B: https://codeberg.org/attachments/8dfb98d2-52be-4c3c-8fc0-8fe470f34703
A: https://codeberg.org/attachments/53f2acfb-2e61-4420-b616-13d563f5c257

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9951
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
0ko 2025-11-05 05:00:15 +01:00
parent 07d6663748
commit 382c3c3228
8 changed files with 235 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

30
templates/explore/search.tmpl
View file

@ -13,20 +13,22 @@
{{ctx.Locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</summary>
<ul>
<li>
<a class="{{if eq .SortType "newest"}}active{{end}}" href="?sort=newest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</a>
</li>
<li>
<a class="{{if eq .SortType "oldest"}}active{{end}}" href="?sort=oldest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.oldest"}}</a>
</li>
<li>
<a class="{{if eq .SortType "alphabetically"}}active{{end}}" href="?sort=alphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
</li>
<li>
<a class="{{if eq .SortType "reversealphabetically"}}active{{end}}" href="?sort=reversealphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
</li>
</ul>
<div class="content">
<ul>
<li>
<a class="{{if eq .SortType "newest"}}active{{end}}" href="?sort=newest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</a>
</li>
<li>
<a class="{{if eq .SortType "oldest"}}active{{end}}" href="?sort=oldest&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.filter_sort.oldest"}}</a>
</li>
<li>
<a class="{{if eq .SortType "alphabetically"}}active{{end}}" href="?sort=alphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
</li>
<li>
<a class="{{if eq .SortType "reversealphabetically"}}active{{end}}" href="?sort=reversealphabetically&q={{$.Keyword}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
</li>
</ul>
</div>
</details>
</div>
</div>

32
templates/org/header.tmpl
View file

@ -22,21 +22,23 @@
<summary class="border" data-tooltip-content="{{ctx.Locale.Tr "profile.actions.tooltip"}}">
{{svg "octicon-kebab-horizontal" 20}}
</summary>
<ul>
{{if .EnableFeed}}
<li>
<a href="{{.Org.HomeLink}}.rss">{{svg "octicon-rss"}}{{ctx.Locale.Tr "rss_feed"}}</a>
</li>
<li>
<a href="{{.Org.HomeLink}}.atom">{{svg "octicon-rss"}}{{ctx.Locale.Tr "feed.atom.link"}}</a>
</li>
{{end}}
{{if $moderationEntryNeeded}}
<li>
<a class="orange text" href="{{AppSubUrl}}/report_abuse?type=org&id={{$.Org.ID}}">{{svg "octicon-stop"}}{{ctx.Locale.Tr "moderation.report_abuse"}}</a>
</li>
{{end}}
</ul>
<div class="content">
<ul>
{{if .EnableFeed}}
<li>
<a href="{{.Org.HomeLink}}.rss">{{svg "octicon-rss"}}{{ctx.Locale.Tr "rss_feed"}}</a>
</li>
<li>
<a href="{{.Org.HomeLink}}.atom">{{svg "octicon-rss"}}{{ctx.Locale.Tr "feed.atom.link"}}</a>
</li>
{{end}}
{{if $moderationEntryNeeded}}
<li>
<a class="orange text" href="{{AppSubUrl}}/report_abuse?type=org&id={{$.Org.ID}}">{{svg "octicon-stop"}}{{ctx.Locale.Tr "moderation.report_abuse"}}</a>
</li>
{{end}}
</ul>
</div>
</details>
{{end}}
</span>

79
templates/shared/user/actions_menu.tmpl
View file

@ -2,48 +2,53 @@
<summary class="border" data-tooltip-content="{{ctx.Locale.Tr "profile.actions.tooltip"}}">
{{svg "octicon-kebab-horizontal"}}
</summary>
<ul>
{{if eq .SignedUserID .ContextUser.ID}}
<div class="content">
<ul>
{{if eq .SignedUserID .ContextUser.ID}}
<li>
<a href="{{AppSubUrl}}/user/settings">{{svg "octicon-pencil"}}{{ctx.Locale.Tr "profile.edit.link"}}</a>
</li>
{{end}}
{{if .IsAdmin}}
<li>
<a href="{{AppSubUrl}}/admin/users/{{.ContextUser.ID}}">{{svg "octicon-gear"}}{{ctx.Locale.Tr "admin.users.details"}}</a>
</li>
{{end}}
{{if and .EnableFeed (or .IsAdmin (eq .SignedUserID .ContextUser.ID) (not .ContextUser.KeepActivityPrivate))}}
<li>
<a href="{{.ContextUser.HomeLink}}.rss">{{svg "octicon-rss"}}{{ctx.Locale.Tr "rss_feed"}}</a>
</li>
<li>
<a href="{{.ContextUser.HomeLink}}.atom">{{svg "octicon-rss"}}{{ctx.Locale.Tr "feed.atom.link"}}</a>
</li>
{{end}}
<li>
<a href="{{AppSubUrl}}/user/settings">{{svg "octicon-pencil"}}{{ctx.Locale.Tr "profile.edit.link"}}</a>
</li>
{{end}}
{{if .IsAdmin}}
<li>
<a href="{{AppSubUrl}}/admin/users/{{.ContextUser.ID}}">{{svg "octicon-gear"}}{{ctx.Locale.Tr "admin.users.details"}}</a>
</li>
{{end}}
{{if and .EnableFeed (or .IsAdmin (eq .SignedUserID .ContextUser.ID) (not .ContextUser.KeepActivityPrivate))}}
<li>
<a href="{{.ContextUser.HomeLink}}.rss">{{svg "octicon-rss"}}{{ctx.Locale.Tr "rss_feed"}}</a>
<a href="{{.ContextUser.HomeLink}}.keys">{{svg "octicon-key"}}{{ctx.Locale.Tr "keys.ssh.link"}}</a>
</li>
<li>
<a href="{{.ContextUser.HomeLink}}.atom">{{svg "octicon-rss"}}{{ctx.Locale.Tr "feed.atom.link"}}</a>
<a href="{{.ContextUser.HomeLink}}.gpg">{{svg "octicon-key"}}{{ctx.Locale.Tr "keys.gpg.link"}}</a>
</li>
{{end}}
<li>
<a href="{{.ContextUser.HomeLink}}.keys">{{svg "octicon-key"}}{{ctx.Locale.Tr "keys.ssh.link"}}</a>
</li>
<li>
<a href="{{.ContextUser.HomeLink}}.gpg">{{svg "octicon-key"}}{{ctx.Locale.Tr "keys.gpg.link"}}</a>
</li>
</ul>
{{if and .IsSigned (ne .SignedUserID .ContextUser.ID)}}
<li hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card" id="action-block">
{{if .IsBlocked}}
<button class="orange text" hx-post="{{.ContextUser.HomeLink}}?action=unblock">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unblock"}}
</button>
{{else}}
<button class="orange text" data-modal-id="block-user" hx-post="{{.ContextUser.HomeLink}}?action=block" hx-confirm="-">
{{svg "octicon-blocked"}} {{ctx.Locale.Tr "user.block"}}
</button>
<hr>
<ul>
<li hx-target="#profile-avatar-card" hx-indicator="#profile-avatar-card" id="action-block">
{{if .IsBlocked}}
<button class="orange text" hx-post="{{.ContextUser.HomeLink}}?action=unblock">
{{svg "octicon-person"}} {{ctx.Locale.Tr "user.unblock"}}
</button>
{{else}}
<button class="orange text" data-modal-id="block-user" hx-post="{{.ContextUser.HomeLink}}?action=block" hx-confirm="-">
{{svg "octicon-blocked"}} {{ctx.Locale.Tr "user.block"}}
</button>
{{end}}
</li>
{{if .IsModerationEnabled}}
<li>
<a href="{{AppSubUrl}}/report_abuse?type=user&id={{.ContextUser.ID}}" class="orange text">{{svg "octicon-stop"}}{{ctx.Locale.Tr "moderation.report_abuse"}}</a>
</li>
{{end}}
</li>
</ul>
{{end}}
{{if and .IsModerationEnabled .IsSigned (ne .SignedUserID .ContextUser.ID)}}
<li>
<a href="{{AppSubUrl}}/report_abuse?type=user&id={{.ContextUser.ID}}" class="orange text">{{svg "octicon-stop"}}{{ctx.Locale.Tr "moderation.report_abuse"}}</a>
</li>
{{end}}
</ul>
</div>
</details>