forgejo/templates/user/dashboard/navbar.tmpl
wxiaoguang 5a5ab8ef5a
Start cleaning the messy ".ui.left / .ui.right", improve label list page, fix stackable menu (#24393)
Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right".

Fomantic UI doesn't work this way, it just conflicts with many Fomantic
definitions.

This PR starts the cleaning work of such techinical debts.

And, the "label list" page has been quite messy for long time, for
example, why "li" appears in "div" ......

And fix #24296

<details>


![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png)


![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png)


![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png)


![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png)


![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png)

</details>
2023-04-29 07:35:59 -04:00

108 lines
5.4 KiB
Handlebars

<div class="dashboard-navbar">
<div class="ui secondary stackable menu g-menu-stackable-scrollable">
<div class="item">
<div class="ui floating dropdown jump">
<span class="text truncated-item-container">
{{avatar $.Context .ContextUser}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
<span class="org-visibility">
{{if .ContextUser.Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .ContextUser.Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</span>
<div class="context user overflow menu" tabindex="-1">
<div class="ui header">
{{.locale.Tr "home.switch_dashboard_context"}}
</div>
<div class="scrolling menu items">
<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item truncated-item-container" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
{{avatar $.Context .SignedUser}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
<span class="org-visibility">
{{if .ContextUser.Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{$.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .ContextUser.Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
</span>
</a>
{{range .Orgs}}
<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item truncated-item-container" title="{{.Name}}" href="{{.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
{{avatar $.Context .}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
<span class="org-visibility">
{{if .Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{$.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{$.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
</span>
</a>
{{end}}
</div>
{{if .SignedUser.CanCreateOrganization}}
<a class="item" href="{{AppSubUrl}}/org/create">
{{svg "octicon-plus"}}&nbsp;&nbsp;&nbsp;{{.locale.Tr "new_org"}}
</a>
{{end}}
</div>
</div>
</div>
{{if .ContextUser.IsOrganization}}
<div class="item">
<div class="ui floating dropdown jump">
<span class="text">
{{svg "octicon-people" 18}}
{{if .Team}}
{{.Team.Name}}
{{else}}
{{.locale.Tr "org.teams"}}
{{end}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</span>
<div class="context user overflow menu" tabindex="-1">
<div class="ui header">
{{.locale.Tr "home.filter_by_team_repositories"}}
</div>
<div class="scrolling menu items">
<a class="{{if not $.Team}}active selected{{end}} item" title="{{.locale.Tr "all"}}" href="{{$.Org.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
{{.locale.Tr "all"}}
</a>
{{range .Teams}}
{{if not .IncludesAllRepositories}}
<a class="{{if $.Team}}{{if eq $.Team.ID .ID}}active selected{{end}}{{end}} item" title="{{.Name}}" href="{{$.Org.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}/{{.Name}}">
{{.Name}}
</a>
{{end}}
{{end}}
</div>
</div>
</div>
</div>
{{end}}
{{if .ContextUser.IsOrganization}}
<div class="right stackable menu">
<a class="{{if .PageIsNews}}active {{end}}item" style="margin-left: auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}}
</a>
{{if not .UnitIssuesGlobalDisabled}}
<a class="{{if .PageIsIssues}}active {{end}}item" href="{{.ContextUser.OrganisationLink}}/issues{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-issue-opened"}}&nbsp;{{.locale.Tr "issues"}}
</a>
{{end}}
{{if not .UnitPullsGlobalDisabled}}
<a class="{{if .PageIsPulls}}active {{end}}item" href="{{.ContextUser.OrganisationLink}}/pulls{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-git-pull-request"}}&nbsp;{{.locale.Tr "pull_requests"}}
</a>
{{end}}
{{if and .ShowMilestonesDashboardPage (not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled))}}
<a class="{{if .PageIsMilestonesDashboard}}active {{end}}item" href="{{.ContextUser.OrganisationLink}}/milestones{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-milestone"}}&nbsp;{{.locale.Tr "milestones"}}
</a>
{{end}}
<div class="item">
<a class="ui primary basic button" href="{{.ContextUser.HomeLink}}" title='{{.locale.Tr "home.view_home" .ContextUser.Name}}'>
{{.locale.Tr "home.view_home" (.ContextUser.ShortName 40)}}
</a>
</div>
</div>
{{end}}
</div>
</div>
<div class="ui divider"></div>