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>
2020-12-08 05:14:28 +01:00 · 2020-12-08 05:14:28 +01:00 · e7938c9c44
commit e7938c9c44
parent 9b22ada0a7
7 changed files with 112 additions and 104 deletions
--- 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("")
 }

--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@ -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}}
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@ -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}}
--- a/templates/repo/header_icon.tmpl
+++ b/templates/repo/header_icon.tmpl
@ -1,4 +1,4 @@
-<div class="repo-header-icon">
+<div class="repo-icon mr-3">
 	{{if $.IsTemplate}}
 		{{svg "octicon-repo-template" 32}}
 	{{else}}
--- 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;
--- 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;
-    }
  }
 }

--- 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 {