third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Repo avatar fixes (#13891)

Browse Source 
- 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>
tokarchuk/v1.17
silverwind 4 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 29
      modules/templates/helper.go
  2. 65
      templates/explore/repo_list.tmpl
  3. 57
      templates/repo/header.tmpl
  4. 2
      templates/repo/icon.tmpl
  5. 26
      web_src/less/_base.less
  6. 5
      web_src/less/_explore.less
  7. 32
      web_src/less/_repository.less

29
modules/templates/helper.go
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 {

Write Preview
Loading…
Cancel
Save