From e7938c9c44384e044afba14d5a86b1ba32520dd3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 8 Dec 2020 05:14:28 +0100 Subject: [PATCH] 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 --- modules/templates/helper.go | 29 +++++---- templates/explore/repo_list.tmpl | 65 ++++++++++--------- templates/repo/header.tmpl | 57 ++++++++-------- .../repo/{header_icon.tmpl => icon.tmpl} | 2 +- web_src/less/_base.less | 26 ++++++++ web_src/less/_explore.less | 5 -- web_src/less/_repository.less | 32 +-------- 7 files changed, 112 insertions(+), 104 deletions(-) rename templates/repo/{header_icon.tmpl => icon.tmpl} (93%) diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 5af1addb6..0b5ae0f01 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -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("") } diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl index fe4b278e2..bfec17ff2 100644 --- a/templates/explore/repo_list.tmpl +++ b/templates/explore/repo_list.tmpl @@ -1,37 +1,44 @@
{{range .Repos}}
-
- {{avatar .}} - - {{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} - - {{if .IsArchived}} - {{$.i18n.Tr "repo.desc.archived"}} - {{end}} - {{if .IsTemplate}} - {{if .IsPrivate}} - {{$.i18n.Tr "repo.desc.private_template"}} - {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{$.i18n.Tr "repo.desc.internal_template"}} - {{end}} +
+
+ {{$avatar := (repoAvatar . 32 "mr-3")}} + {{if $avatar}} + {{$avatar}} {{end}} - {{else}} - {{if .IsPrivate}} - {{$.i18n.Tr "repo.desc.private"}} - {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{$.i18n.Tr "repo.desc.internal"}} + + {{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} + +
+ {{if .IsArchived}} + {{$.i18n.Tr "repo.desc.archived"}} {{end}} - {{end}} - {{end}} - {{if .IsFork}} - {{svg "octicon-repo-forked"}} - {{else if .IsMirror}} - {{svg "octicon-mirror"}} - {{end}} -
+ {{if .IsTemplate}} + {{if .IsPrivate}} + {{$.i18n.Tr "repo.desc.private_template"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{$.i18n.Tr "repo.desc.internal_template"}} + {{end}} + {{end}} + {{else}} + {{if .IsPrivate}} + {{$.i18n.Tr "repo.desc.private"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{$.i18n.Tr "repo.desc.internal"}} + {{end}} + {{end}} + {{end}} + {{if .IsFork}} + {{svg "octicon-repo-forked"}} + {{else if .IsMirror}} + {{svg "octicon-mirror"}} + {{end}} +
+
+
{{if .PrimaryLanguage }} {{ .PrimaryLanguage.Language }} {{end}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 348c6b1ff..8799cda65 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -2,35 +2,40 @@ {{with .Repository}}
-
- {{if .Name}} - {{avatar .}} - {{else}} - {{template "repo/header_icon" .}} - {{end}} - {{.Owner.Name}} -
/
- {{.Name}} - {{if .IsTemplate}} - {{if .IsPrivate}} - {{$.i18n.Tr "repo.desc.private_template"}} +
+
+ {{$avatar := (repoAvatar . 32 "mr-3")}} + {{if $avatar}} + {{$avatar}} {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{$.i18n.Tr "repo.desc.internal_template"}} - {{end}} + {{template "repo/icon" .}} {{end}} - {{else}} - {{if .IsPrivate}} - {{$.i18n.Tr "repo.desc.private"}} - {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{$.i18n.Tr "repo.desc.internal"}} + {{.Owner.Name}} +
/
+ {{.Name}} +
+ {{if .IsTemplate}} + {{if .IsPrivate}} + {{$.i18n.Tr "repo.desc.private_template"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{$.i18n.Tr "repo.desc.internal_template"}} + {{end}} + {{end}} + {{else}} + {{if .IsPrivate}} + {{$.i18n.Tr "repo.desc.private"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{$.i18n.Tr "repo.desc.internal"}} + {{end}} + {{end}} {{end}} - {{end}} - {{end}} - {{if .IsArchived}} - {{$.i18n.Tr "repo.desc.archived"}} - {{end}} + {{if .IsArchived}} + {{$.i18n.Tr "repo.desc.archived"}} + {{end}} +
+
{{if .IsMirror}}
{{$.i18n.Tr "repo.mirror_from"}} {{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}
{{end}} {{if .IsFork}}
{{$.i18n.Tr "repo.forked_from"}} {{SubStr .BaseRepo.RelLink 1 -1}}
{{end}} {{if .IsGenerated}}
{{$.i18n.Tr "repo.generated_from"}} {{SubStr .TemplateRepo.RelLink 1 -1}}
{{end}} diff --git a/templates/repo/header_icon.tmpl b/templates/repo/icon.tmpl similarity index 93% rename from templates/repo/header_icon.tmpl rename to templates/repo/icon.tmpl index b9d49c209..b4d8a2456 100644 --- a/templates/repo/header_icon.tmpl +++ b/templates/repo/icon.tmpl @@ -1,4 +1,4 @@ -
+
{{if $.IsTemplate}} {{svg "octicon-repo-template" 32}} {{else}} diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 8885ffc40..81c6a310f 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -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; diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less index 5962d411e..6d6462df6 100644 --- a/web_src/less/_explore.less +++ b/web_src/less/_explore.less @@ -49,11 +49,6 @@ .ui.tags { margin-bottom: 1em; } - - .ui.avatar.image { - width: 24px; - height: 24px; - } } } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index b4cff3490..1cedb07f1 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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 {