0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-25 08:54:17 -05:00
forgejo/templates/repo/header.tmpl
Denys Konovalov b9baed2c74
Introduce flex-list & flex-item elements for Gitea UI (#25790)
This PR introduces a new UI element type for Gitea called `flex-item`.
It consists of a horizontal card with a leading, main and trailing part:


![grafik](https://github.com/go-gitea/gitea/assets/47871822/395dd3f3-3906-4481-8f65-be6ac0acbe03)

The idea behind it is that in Gitea UI, we have many cases where we use
this kind of layout, but it is achieved in many different ways:
  - grid layout
  - `.ui.list` with additional hacky flexbox
- `.ui.key.list` - looks to me like a style set originally created for
ssh/gpg key list, was used in many other places
  - `.issue.list` - created for issue cards, used in many other places
  - ...

This new style is based on `.issue.list`, specifically the refactoring
of it done in #25750.

In this PR, the new element is introduced and lots of templates are
being refactored to use that style. This allows to remove a lot of
page-specific css, makes many of the elements responsive or simply
provides a cleaner/better-looking way to present information.

A devtest section with the new style is also available.

<details>
<summary>Screenshots (left: before, right: after)</summary>

![Bildschirmfoto vom 2023-07-09
21-01-21](https://github.com/go-gitea/gitea/assets/47871822/545b7da5-b300-475f-bd6d-b7d836950bb5)
![Bildschirmfoto vom 2023-07-09
21-01-56](https://github.com/go-gitea/gitea/assets/47871822/b6f70415-6795-4f71-a5ea-117d56107ea1)
![Bildschirmfoto vom 2023-07-09
21-02-45](https://github.com/go-gitea/gitea/assets/47871822/47407121-3f2a-4778-8f6d-ad2687c2e7b3)
![Bildschirmfoto vom 2023-07-09
21-03-44](https://github.com/go-gitea/gitea/assets/47871822/76167aaf-c3b2-46f6-9ffd-709f20aa6a34)
![Bildschirmfoto vom 2023-07-09
21-04-52](https://github.com/go-gitea/gitea/assets/47871822/af8fdde5-711e-4524-99cf-fb5d68af85b9)
![Bildschirmfoto vom 2023-07-09
21-05-25](https://github.com/go-gitea/gitea/assets/47871822/ae406946-e3e4-4109-abfe-b3588a07b468)
![Bildschirmfoto vom 2023-07-09
21-06-35](https://github.com/go-gitea/gitea/assets/47871822/2dbacc04-24d6-4f91-9e42-e16d6e4b5f1f)
![Bildschirmfoto vom 2023-07-09
21-09-03](https://github.com/go-gitea/gitea/assets/47871822/d3ca4e56-a72f-4179-adc8-98bfd638025b)
![Bildschirmfoto vom 2023-07-09
21-09-44](https://github.com/go-gitea/gitea/assets/47871822/df1fa689-499c-4e54-b6fb-3b81644b725f)
![Bildschirmfoto vom 2023-07-09
21-10-27](https://github.com/go-gitea/gitea/assets/47871822/b21cac71-a85a-4c8c-bb99-ab90373d8e09)
![Bildschirmfoto vom 2023-07-09
21-11-12](https://github.com/go-gitea/gitea/assets/47871822/89be39cf-0af9-4f2d-9fca-42f9eb5e7824)
![Bildschirmfoto vom 2023-07-09
21-12-01](https://github.com/go-gitea/gitea/assets/47871822/079579ea-1ecb-49c0-b32b-b59ed957caec)
![Bildschirmfoto vom 2023-07-09
21-17-44](https://github.com/go-gitea/gitea/assets/47871822/61ac6ec4-a319-4d5c-9c99-2e02a77295ba)
![Bildschirmfoto vom 2023-07-09
21-18-27](https://github.com/go-gitea/gitea/assets/47871822/5b55b73f-6244-47f7-a3e6-c5e4a7474585)
![Bildschirmfoto vom 2023-07-09
21-19-18](https://github.com/go-gitea/gitea/assets/47871822/c1b7c22e-3e5a-46d4-b8d6-5560db478c0b)
![Bildschirmfoto vom 2023-07-09
21-29-13](https://github.com/go-gitea/gitea/assets/47871822/82ffca8d-ab2e-4a18-9954-5b685bf6a422)
![Bildschirmfoto vom 2023-07-09
21-30-11](https://github.com/go-gitea/gitea/assets/47871822/ad2fdccc-2be8-41bb-bfdc-a084aa387b61)
![Bildschirmfoto vom 2023-07-09
21-32-44](https://github.com/go-gitea/gitea/assets/47871822/2d298ba7-d084-48b5-a139-f86d56262110)
![Bildschirmfoto vom 2023-07-09
21-33-28](https://github.com/go-gitea/gitea/assets/47871822/4cbd838e-9de8-4ad0-8ed9-438da5c9a5cb)


</details>

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-08-01 00:13:42 +02:00

255 lines
11 KiB
Handlebars

<div class="header-wrapper">
{{with .Repository}}
<div class="ui container">
<div class="repo-header">
<div class="repo-title-wrap gt-df gt-fc">
<div class="repo-title" role="heading" aria-level="1">
{{$avatar := (repoAvatar . 32 "gt-mr-3")}}
{{if $avatar}}
{{$avatar}}
{{else}}
<div class="gt-mr-3">
{{template "repo/icon" .}}
</div>
{{end}}
<a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
<div class="gt-mx-2">/</div>
<a href="{{$.RepoLink}}">{{.Name}}</a>
<div class="labels gt-df gt-ac gt-fw">
{{if .IsTemplate}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private_template"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal_template"}}</span>
{{end}}
{{end}}
{{else}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.private"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.internal"}}</span>
{{end}}
{{end}}
{{end}}
{{if .IsArchived}}
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
{{end}}
</div>
{{if $.EnableFeed}}
<a class="rss-icon gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div>
{{if $.PullMirror}}
{{$address := MirrorRemoteAddress $.Context . $.PullMirror.GetRemoteName false}}
<div class="fork-flag">{{$.locale.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$address.Address}}">{{$address.Address}}</a></div>
{{end}}
{{if .IsFork}}<div class="fork-flag">{{$.locale.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{.BaseRepo.FullName}}</a></div>{{end}}
{{if .IsGenerated}}<div class="fork-flag">{{$.locale.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{.TemplateRepo.FullName}}</a></div>{{end}}
</div>
{{if not (or .IsBeingCreated .IsBroken)}}
<div class="repo-buttons">
{{if $.RepoTransfer}}
<form method="post" action="{{$.RepoLink}}/action/accept_transfer?redirect_to={{$.RepoLink}}">
{{$.CsrfTokenHtml}}
<div data-tooltip-content="{{if $.CanUserAcceptTransfer}}{{$.locale.Tr "repo.transfer.accept_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{$.locale.Tr "repo.transfer.no_permission_to_accept"}}{{end}}">
<button type="submit" class="ui basic button {{if $.CanUserAcceptTransfer}}green {{end}} ok small"{{if not $.CanUserAcceptTransfer}} disabled{{end}}>
{{$.locale.Tr "repo.transfer.accept"}}
</button>
</div>
</form>
<form method="post" action="{{$.RepoLink}}/action/reject_transfer?redirect_to={{$.RepoLink}}">
{{$.CsrfTokenHtml}}
<div data-tooltip-content="{{if $.CanUserAcceptTransfer}}{{$.locale.Tr "repo.transfer.reject_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{$.locale.Tr "repo.transfer.no_permission_to_reject"}}{{end}}">
<button type="submit" class="ui basic button {{if $.CanUserAcceptTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptTransfer}} disabled{{end}}>
{{$.locale.Tr "repo.transfer.reject"}}
</button>
</div>
</form>
{{end}}
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}}
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{$.locale.Tr "repo.watch_guest_user"}}"{{end}}>
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
{{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{$.locale.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{$.locale.Tr "repo.watch"}}{{end}}
</button>
<a class="ui basic label" href="{{.Link}}/watchers">
{{CountFmt .NumWatches}}
</a>
</div>
</form>
{{if not $.DisableStars}}
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}}
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{$.locale.Tr "repo.star_guest_user"}}"{{end}}>
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
{{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{$.locale.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{$.locale.Tr "repo.star"}}{{end}}
</button>
<a class="ui basic label" href="{{.Link}}/stars">
{{CountFmt .NumStars}}
</a>
</div>
</form>
{{end}}
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
<div class="ui labeled button
{{if or (not $.IsSigned) (and (not $.CanSignedUserFork) (eq (len $.UserAndOrgForks) 0))}}
disabled
{{end}}"
{{if not $.IsSigned}}
data-tooltip-content="{{$.locale.Tr "repo.fork_guest_user"}}"
{{else if and (not $.CanSignedUserFork) (eq (len $.UserAndOrgForks) 0)}}
data-tooltip-content="{{$.locale.Tr "repo.fork_from_self"}}"
{{end}}
>
<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
{{if not $.CanSignedUserFork}}
{{if gt (len $.UserAndOrgForks) 1}}
data-modal="#fork-repo-modal"
{{else if eq (len $.UserAndOrgForks) 1}}
href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
{{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}}
{{end}}
{{else if eq (len $.UserAndOrgForks) 0}}
href="{{AppSubUrl}}/repo/fork/{{.ID}}"
{{else}}
data-modal="#fork-repo-modal"
{{end}}
>
{{svg "octicon-repo-forked"}}{{$.locale.Tr "repo.fork"}}
</a>
<div class="ui small modal" id="fork-repo-modal">
<div class="header">
{{$.locale.Tr "repo.already_forked" .Name}}
</div>
<div class="content gt-text-left">
<div class="ui list">
{{range $.UserAndOrgForks}}
<div class="ui item gt-py-3">
<a href="{{.Link}}">
{{svg "octicon-repo-forked" 16 "gt-mr-3"}}{{.FullName}}
</a>
</div>
{{end}}
</div>
{{if $.CanSignedUserFork}}
<div class="divider"></div>
<a href="{{AppSubUrl}}/repo/fork/{{.ID}}">
{{$.locale.Tr "repo.fork_to_different_account"}}
</a>
{{end}}
</div>
</div>
<a class="ui basic label" href="{{.Link}}/forks">
{{CountFmt .NumForks}}
</a>
</div>
{{end}}
</div>
{{end}}
</div><!-- end grid -->
</div><!-- end container -->
{{end}}
<div class="ui tabs container">
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
{{if .Permission.CanRead $.UnitTypeCode}}
<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if (ne .BranchName .Repository.DefaultBranch)}}/src/{{.BranchNameSubURL}}{{end}}">
{{svg "octicon-code"}} {{.locale.Tr "repo.code"}}
</a>
{{end}}
{{if .Permission.CanRead $.UnitTypeIssues}}
<a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoLink}}/issues">
{{svg "octicon-issue-opened"}} {{.locale.Tr "repo.issues"}}
{{if .Repository.NumOpenIssues}}
<span class="ui small label">{{CountFmt .Repository.NumOpenIssues}}</span>
{{end}}
</a>
{{end}}
{{if .Permission.CanRead $.UnitTypeExternalTracker}}
<a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoExternalIssuesLink}}" target="_blank" rel="noopener noreferrer">
{{svg "octicon-link-external"}} {{.locale.Tr "repo.issues"}}
</a>
{{end}}
{{if and .Repository.CanEnablePulls (.Permission.CanRead $.UnitTypePullRequests)}}
<a class="{{if .PageIsPullList}}active {{end}}item" href="{{.RepoLink}}/pulls">
{{svg "octicon-git-pull-request"}} {{.locale.Tr "repo.pulls"}}
{{if .Repository.NumOpenPulls}}
<span class="ui small label">{{CountFmt .Repository.NumOpenPulls}}</span>
{{end}}
</a>
{{end}}
{{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}}
<a class="{{if .PageIsActions}}active {{end}}item" href="{{.RepoLink}}/actions">
{{svg "octicon-play"}} {{.locale.Tr "actions.actions"}}
{{if .Repository.NumOpenActionRuns}}
<span class="ui small label">{{CountFmt .Repository.NumOpenActionRuns}}</span>
{{end}}
</a>
{{end}}
{{if .Permission.CanRead $.UnitTypePackages}}
<a href="{{.RepoLink}}/packages" class="{{if .IsPackagesPage}}active {{end}}item">
{{svg "octicon-package"}} {{.locale.Tr "packages.title"}}
</a>
{{end}}
{{if and (not .UnitProjectsGlobalDisabled) (.Permission.CanRead $.UnitTypeProjects)}}
<a href="{{.RepoLink}}/projects" class="{{if .IsProjectsPage}}active {{end}}item">
{{svg "octicon-project"}} {{.locale.Tr "repo.project_board"}}
{{if .Repository.NumOpenProjects}}
<span class="ui small label">{{CountFmt .Repository.NumOpenProjects}}</span>
{{end}}
</a>
{{end}}
{{if and (.Permission.CanRead $.UnitTypeReleases) (not .IsEmptyRepo)}}
<a class="{{if or .PageIsReleaseList .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/releases">
{{svg "octicon-tag"}} {{.locale.Tr "repo.releases"}}
{{if .NumReleases}}
<span class="ui small label">{{CountFmt .NumReleases}}</span>
{{end}}
</a>
{{end}}
{{if .Permission.CanRead $.UnitTypeWiki}}
<a class="{{if .PageIsWiki}}active {{end}}item" href="{{.RepoLink}}/wiki">
{{svg "octicon-book"}} {{.locale.Tr "repo.wiki"}}
</a>
{{end}}
{{if .Permission.CanRead $.UnitTypeExternalWiki}}
<a class="item" href="{{(.Repository.MustGetUnit $.Context $.UnitTypeExternalWiki).ExternalWikiConfig.ExternalWikiURL}}" target="_blank" rel="noopener noreferrer">
{{svg "octicon-link-external"}} {{.locale.Tr "repo.wiki"}}
</a>
{{end}}
{{if and (.Permission.CanReadAny $.UnitTypePullRequests $.UnitTypeIssues $.UnitTypeReleases) (not .IsEmptyRepo)}}
<a class="{{if .PageIsActivity}}active {{end}}item" href="{{.RepoLink}}/activity">
{{svg "octicon-pulse"}} {{.locale.Tr "repo.activity"}}
</a>
{{end}}
{{template "custom/extra_tabs" .}}
{{if .Permission.IsAdmin}}
<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
</a>
{{end}}
</div>
{{else if .Permission.IsAdmin}}
<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
{{svg "octicon-tools"}} {{.locale.Tr "repo.settings"}}
</a>
</div>
{{end}}
</div>
<div class="ui tabs divider"></div>
</div>