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:
parent
9b22ada0a7
commit
e7938c9c44
7 changed files with 112 additions and 104 deletions
|
@ -341,6 +341,7 @@ func NewFuncMap() []template.FuncMap {
|
|||
"svg": SVG,
|
||||
"avatar": Avatar,
|
||||
"avatarByEmail": AvatarByEmail,
|
||||
"repoAvatar": RepoAvatar,
|
||||
"SortArrow": func(normSort, revSort, urlSort string, isDefault bool) template.HTML {
|
||||
// if needed
|
||||
if len(normSort) == 0 || len(urlSort) == 0 {
|
||||
|
@ -545,23 +546,25 @@ func SVG(icon string, others ...interface{}) template.HTML {
|
|||
return template.HTML("")
|
||||
}
|
||||
|
||||
// Avatar renders user and repo avatars. args: user/repo, size (int), class (string)
|
||||
func Avatar(item interface{}, others ...interface{}) template.HTML {
|
||||
// Avatar renders user avatars. args: user, size (int), class (string)
|
||||
func Avatar(user *models.User, others ...interface{}) template.HTML {
|
||||
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 := repo.RelAvatarLink()
|
||||
if src != "" {
|
||||
return avatarHTML(src, size, class, repo.FullName())
|
||||
}
|
||||
src := user.RealSizedAvatarLink(size * 2) // request double size for finer rendering
|
||||
if src != "" {
|
||||
return avatarHTML(src, size, class, user.DisplayName())
|
||||
}
|
||||
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("")
|
||||
}
|
||||
|
||||
|
|
|
@ -1,37 +1,44 @@
|
|||
<div class="ui repository list">
|
||||
{{range .Repos}}
|
||||
<div class="item">
|
||||
<div class="ui header">
|
||||
{{avatar .}}
|
||||
<a class="name" href="{{.Link}}">
|
||||
{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
|
||||
</a>
|
||||
{{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}}
|
||||
<div class="ui header df ac">
|
||||
<div class="repo-title">
|
||||
{{$avatar := (repoAvatar . 32 "mr-3")}}
|
||||
{{if $avatar}}
|
||||
{{$avatar}}
|
||||
{{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>
|
||||
<a class="name" href="{{.Link}}">
|
||||
{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
|
||||
</a>
|
||||
<div class="labels df ac fw">
|
||||
{{if .IsArchived}}
|
||||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{if .IsFork}}
|
||||
<span class="middle">{{svg "octicon-repo-forked"}}</span>
|
||||
{{else if .IsMirror}}
|
||||
<span class="middle">{{svg "octicon-mirror"}}</span>
|
||||
{{end}}
|
||||
<div class="ui right metas">
|
||||
{{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}}
|
||||
{{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 }}
|
||||
<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
|
||||
{{end}}
|
||||
|
|
|
@ -2,35 +2,40 @@
|
|||
{{with .Repository}}
|
||||
<div class="ui container">
|
||||
<div class="repo-header">
|
||||
<div class="ui huge breadcrumb repo-title">
|
||||
{{if .Name}}
|
||||
{{avatar .}}
|
||||
{{else}}
|
||||
{{template "repo/header_icon" .}}
|
||||
{{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>
|
||||
<div class="repo-title-wrap df fc">
|
||||
<div class="repo-title">
|
||||
{{$avatar := (repoAvatar . 32 "mr-3")}}
|
||||
{{if $avatar}}
|
||||
{{$avatar}}
|
||||
{{else}}
|
||||
{{if .Owner.Visibility.IsPrivate}}
|
||||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.internal_template"}}</span>
|
||||
{{end}}
|
||||
{{template "repo/icon" .}}
|
||||
{{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>
|
||||
<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
|
||||
<div class="mx-2">/</div>
|
||||
<a href="{{$.RepoLink}}">{{.Name}}</a>
|
||||
<div class="labels df ac fw">
|
||||
{{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}}
|
||||
{{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}}
|
||||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
|
||||
{{end}}
|
||||
{{if .IsArchived}}
|
||||
<span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
</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 .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}}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="repo-header-icon">
|
||||
<div class="repo-icon mr-3">
|
||||
{{if $.IsTemplate}}
|
||||
{{svg "octicon-repo-template" 32}}
|
||||
{{else}}
|
|
@ -1247,6 +1247,32 @@ footer {
|
|||
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 {
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
|
|
|
@ -49,11 +49,6 @@
|
|||
.ui.tags {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.ui.avatar.image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -8,38 +8,9 @@
|
|||
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 {
|
||||
margin-left: 36px;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.repo-buttons .svg {
|
||||
|
@ -2985,6 +2956,7 @@ tbody.commit-list {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.repo-header .repo-buttons {
|
||||
|
|
Reference in a new issue