mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Repo avatar fixes (#13891) 

- Split up avatar rendering helpers for performance
- Fix showing repo SVG icon when no avatar is set
- Make repo SVG and avatar same size at 32px
- Fix fork line by adding vertical flexbox on repo title

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind 2020-12-08 05:14:28 +01:00 committed by GitHub
parent 9b22ada0a7
commit e7938c9c44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 112 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
modules/templates/helper.go
View File

@ -341,6 +341,7 @@ func NewFuncMap() []template.FuncMap {
"svg": SVG, "svg": SVG,
"avatar": Avatar, "avatar": Avatar,
"avatarByEmail": AvatarByEmail, "avatarByEmail": AvatarByEmail,
"repoAvatar": RepoAvatar,
"SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML { "SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML {
// if needed // if needed
if len(normSort) == 0 || len(urlSort) == 0 { if len(normSort) == 0 || len(urlSort) == 0 {
@ -545,23 +546,25 @@ func SVG(icon string, others ...interface{}) template.HTML {
return template.HTML("") return template.HTML("")
} }
// Avatar renders user and repo avatars. args: user/repo, size (int), class (string) // Avatar renders user avatars. args: user, size (int), class (string)
func Avatar(item interface{}, others ...interface{}) template.HTML { func Avatar(user *models.User, others ...interface{}) template.HTML {
size, class := parseOthers(28, "ui avatar image", others...) size, class := parseOthers(28, "ui avatar image", others...)
if user, ok := item.(*models.User); ok {
src := user.RealSizedAvatarLink(size * 2) // request double size for finer rendering
if src != "" {
return avatarHTML(src, size, class, user.DisplayName())
}
}
if repo, ok := item.(*models.Repository); ok { src := user.RealSizedAvatarLink(size * 2) // request double size for finer rendering
src := repo.RelAvatarLink() if src != "" {
if src != "" { return avatarHTML(src, size, class, user.DisplayName())
return avatarHTML(src, size, class, repo.FullName())
}
} }
return template.HTML("")
}
// RepoAvatar renders repo avatars. args: repo, size(int), class (string)
func RepoAvatar(repo *models.Repository, others ...interface{}) template.HTML {
size, class := parseOthers(28, "ui avatar image", others...)
src := repo.RelAvatarLink()
if src != "" {
return avatarHTML(src, size, class, repo.FullName())
}
return template.HTML("") return template.HTML("")
} }

65
templates/explore/repo_list.tmpl
View File

@ -1,37 +1,44 @@
<div class="ui repository list"> <div class="ui repository list">
{{range .Repos}} {{range .Repos}}
<div class="item"> <div class="item">
<div class="ui header"> <div class="ui header df ac">
{{avatar .}} <div class="repo-title">
<a class="name" href="{{.Link}}"> {{$avatar := (repoAvatar . 32 "mr-3")}}
{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} {{if $avatar}}
</a> {{$avatar}}
{{if .IsArchived}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
{{end}}
{{if .IsTemplate}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span>
{{end}}
{{end}} {{end}}
{{else}} <a class="name" href="{{.Link}}">
{{if .IsPrivate}} {{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span> </a>
{{else}} <div class="labels df ac fw">
{{if .Owner.Visibility.IsPrivate}} {{if .IsArchived}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span> <span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
{{end}} {{end}}
{{end}} {{if .IsTemplate}}
{{end}} {{if .IsPrivate}}
{{if .IsFork}} <span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>
<span class="middle">{{svg "octicon-repo-forked"}}</span> {{else}}
{{else if .IsMirror}} {{if .Owner.Visibility.IsPrivate}}
<span class="middle">{{svg "octicon-mirror"}}</span> <span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span>
{{end}} {{end}}
<div class="ui right metas"> {{end}}
{{else}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span>
{{end}}
{{end}}
{{end}}
{{if .IsFork}}
{{svg "octicon-repo-forked"}}
{{else if .IsMirror}}
{{svg "octicon-mirror"}}
{{end}}
</div>
</div>
<div class="metas">
{{if .PrimaryLanguage }} {{if .PrimaryLanguage }}
<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span> <span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
{{end}} {{end}}

57
templates/repo/header.tmpl
View File

@ -2,35 +2,40 @@
{{with .Repository}} {{with .Repository}}
<div class="ui container"> <div class="ui container">
<div class="repo-header"> <div class="repo-header">
<div class="ui huge breadcrumb repo-title"> <div class="repo-title-wrap df fc">
{{if .Name}} <div class="repo-title">
{{avatar .}} {{$avatar := (repoAvatar . 32 "mr-3")}}
{{else}} {{if $avatar}}
{{template "repo/header_icon" .}} {{$avatar}}
{{end}}
<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
<div class="divider"> / </div>
<a href="{{$.RepoLink}}">{{.Name}}</a>
{{if .IsTemplate}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>
{{else}} {{else}}
{{if .Owner.Visibility.IsPrivate}} {{template "repo/icon" .}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span>
{{end}}
{{end}} {{end}}
{{else}} <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
{{if .IsPrivate}} <div class="mx-2">/</div>
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span> <a href="{{$.RepoLink}}">{{.Name}}</a>
{{else}} <div class="labels df ac fw">
{{if .Owner.Visibility.IsPrivate}} {{if .IsTemplate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span> {{if .IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span>
{{end}}
{{end}}
{{else}}
{{if .IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.private"}}</span>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal"}}</span>
{{end}}
{{end}}
{{end}} {{end}}
{{end}} {{if .IsArchived}}
{{end}} <span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
{{if .IsArchived}} {{end}}
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span> </div>
{{end}} </div>
{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}">{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}</a></div>{{end}} {{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}">{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}</a></div>{{end}}
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}} {{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
{{if .IsGenerated}}<div class="fork-flag">{{$.i18n.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{SubStr .TemplateRepo.RelLink 1 -1}}</a></div>{{end}} {{if .IsGenerated}}<div class="fork-flag">{{$.i18n.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{SubStr .TemplateRepo.RelLink 1 -1}}</a></div>{{end}}

2
templates/repo/header_icon.tmpl → templates/repo/icon.tmpl
View File

@ -1,4 +1,4 @@
<div class="repo-header-icon"> <div class="repo-icon mr-3">
{{if $.IsTemplate}} {{if $.IsTemplate}}
{{svg "octicon-repo-template" 32}} {{svg "octicon-repo-template" 32}}
{{else}} {{else}}

26
web_src/less/_base.less
View File

@ -1247,6 +1247,32 @@ footer {
margin-bottom: 2px !important; margin-bottom: 2px !important;
} }
.repo-title {
font-size: 1.5rem;
display: flex;
align-items: center;
flex: 1;
word-break: break-all;
color: var(--color-text-light);
.avatar {
width: 32px !important;
height: 32px !important;
}
.labels {
margin-left: .5rem;
> * + * {
margin-left: .5rem;
}
}
}
.repo-icon {
display: inline-block;
}
.activity-bar-graph { .activity-bar-graph {
background-color: var(--color-primary); background-color: var(--color-primary);
color: #fff; color: #fff;

5
web_src/less/_explore.less
View File

@ -49,11 +49,6 @@
.ui.tags { .ui.tags {
margin-bottom: 1em; margin-bottom: 1em;
} }
.ui.avatar.image {
width: 24px;
height: 24px;
}
} }
} }

32
web_src/less/_repository.less
View File

@ -8,38 +8,9 @@
margin-top: 0; margin-top: 0;
} }
.ui.huge.breadcrumb {
font-weight: 400;
font-size: 1.5rem;
.label {
vertical-align: middle;
margin-top: -.29165em;
}
&.repo-title .repo-header-icon {
display: inline-block;
position: relative;
.avatar {
position: absolute;
right: 0;
bottom: 0;
width: 16px;
height: 16px;
color: #fafafa;
box-shadow: 0 0 0 2px;
margin: 0;
}
}
}
.fork-flag { .fork-flag {
margin-left: 36px;
margin-top: 3px;
display: block;
font-size: 12px; font-size: 12px;
white-space: nowrap; margin-top: 2px;
} }
.repo-buttons .svg { .repo-buttons .svg {
@ -2985,6 +2956,7 @@ tbody.commit-list {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
word-break: break-all;
} }
.repo-header .repo-buttons { .repo-header .repo-buttons {