improve repo/icon template, extract js function

Author: silverwind

routers/web/repo/view.go

@@ -412,7 +412,6 @@ func Forks(ctx *context.Context) {
 	}
 
 	pager := context.NewPagination(int(total), pageSize, page, 5)
-	ctx.Data["ShowRepoOwnerAvatar"] = true
 	ctx.Data["ShowRepoOwnerOnList"] = true
 	ctx.Data["Page"] = pager
 	ctx.Data["Repos"] = forks

templates/org/team/repositories.tmpl

@@ -30,7 +30,7 @@
 						{{range $.TeamRepos}}
 							<div class="flex-item tw-items-center">
 								<div class="flex-item-leading">
-									{{template "repo/icon" .}}
+									{{template "repo/icon" (dict "Repo" . "Size" 24)}}
 								</div>
 								<div class="flex-item-main">
 									<a class="flex-item-title text primary" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">

templates/repo/header.tmpl

@@ -4,7 +4,7 @@
 		<div class="repo-header">
 			<div class="flex-item tw-items-center">
 				<div class="flex-item-leading">
-					{{template "repo/icon" .}}
+					{{template "repo/icon" (dict "Repo" . "EnableRepoAvatar" "true" "Size" 24)}}
 				</div>
 				<div class="flex-item-main">
 					<div class="flex-item-title tw-text-18">

templates/repo/icon.tmpl

@@ -1,12 +1,22 @@
-{{$avatarLink := (.RelAvatarLink ctx)}}
-{{if $avatarLink}}
-	<img class="ui avatar tw-align-middle" src="{{$avatarLink}}" width="24" height="24" alt aria-hidden="true">
-{{else if $.IsMirror}}
-	{{svg "octicon-mirror" 24}}
-{{else if $.IsFork}}
-	{{svg "octicon-repo-forked" 24}}
-{{else if $.IsPrivate}}
-	{{svg "octicon-repo-locked" 24}}
+{{/* Template Attributes:
+* Repo: The repo
+* EnableRepoAvatar: Enable repo avatars when non-nil
+* Size: Icon size in pixels, default is 16
+*
+* Note: Keep the icon logic in sync with web_src/js/utils/mappings.ts
+*/}}
+{{$size := or .Size 16}}
+{{$avatarLink := (.Repo.RelAvatarLink ctx)}}
+{{if and $avatarLink .EnableRepoAvatar}}
+	<img class="ui avatar tw-align-middle" src="{{$avatarLink}}" width="{{$size}}" height="{{$size}}" alt aria-hidden="true">
+{{else if .Repo.IsMirror}}
+	{{svg "octicon-mirror" $size}}
+{{else if .Repo.IsPrivate}}
+	{{svg "octicon-repo-locked" $size}}
+{{else if .Repo.IsTemplate}}
+	{{svg "octicon-repo-template" $size}}
+{{else if .Repo.IsFork}}
+	{{svg "octicon-repo-forked" $size}}
 {{else}}
-	{{svg "octicon-repo" 24}}
+	{{svg "octicon-repo" $size}}
 {{end}}

templates/shared/repo/list.tmpl

@@ -2,11 +2,7 @@
 	{{range .Repos}}
 		<div class="flex-item">
 			<div class="flex-item-leading">
-				{{if $.ShowRepoOwnerAvatar}}
-					{{ctx.AvatarUtils.Avatar .Owner 24}}
-				{{else}}
-					{{template "repo/icon" .}}
-				{{end}}
+				{{template "repo/icon" (dict "Repo" . "Size" 24 "EnableRepoAvatar" "true")}}
 			</div>
 			<div class="flex-item-main">
 				<div class="flex-item-header">

templates/user/settings/repos.tmpl

@@ -12,17 +12,7 @@
 							<div class="item {{if not $repo}}tw-py-1{{end}}">{{/* if not repo, then there are "adapt" buttons, so the padding shouldn't be that default large*/}}
 								<div class="content">
 									{{if $repo}}
-										{{if $repo.IsPrivate}}
-											<span class="icon">{{svg "octicon-repo-locked"}}</span>
-										{{else if $repo.IsFork}}
-											<span class="icon">{{svg "octicon-repo-forked"}}</span>
-										{{else if $repo.IsMirror}}
-											<span class="icon">{{svg "octicon-mirror"}}</span>
-										{{else if $repo.IsTemplate}}
-											<span class="icon">{{svg "octicon-repo-template"}}</span>
-										{{else}}
-											<span class="icon">{{svg "octicon-repo"}}</span>
-										{{end}}
+										{{template "repo/icon" (dict "Repo" $repo "Size" 16)}}
 										<a class="muted name" href="{{$repo.Link}}">{{$repo.OwnerName}}/{{$repo.Name}}</a>
 										<span class="text light-3" {{if not (eq $repo.Size 0)}} data-tooltip-content="{{$repo.SizeDetailsString}}"{{end}}>{{FileSize $repo.Size}}</span>
 										{{if $repo.IsFork}}
@@ -85,17 +75,7 @@
 						{{range .Repos}}
 							<div class="item">
 								<div class="content flex-text-block">
-									{{if .IsPrivate}}
-										{{svg "octicon-lock"}}
-									{{else if .IsFork}}
-										{{svg "octicon-repo-forked"}}
-									{{else if .IsMirror}}
-										{{svg "octicon-mirror"}}
-									{{else if .IsTemplate}}
-										{{svg "octicon-repo-template"}}
-									{{else}}
-										{{svg "octicon-repo"}}
-									{{end}}
+									{{template "repo/icon" (dict "Repo" . "Size" 16)}}
 									<a class="name" href="{{.Link}}">{{.OwnerName}}/{{.Name}}</a>
 									<span>{{FileSize .Size}}</span>
 									{{if .IsFork}}

web_src/js/components/DashboardRepoList.vue

@@ -3,6 +3,7 @@ import {nextTick, defineComponent} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {getRepoIcon} from '../utils/mappings.ts';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
@@ -283,19 +284,8 @@ export default defineComponent({
       }
     },
 
-    repoIcon(repo: any) {
-      if (repo.fork) {
-        return 'octicon-repo-forked';
-      } else if (repo.mirror) {
-        return 'octicon-mirror';
-      } else if (repo.template) {
-        return `octicon-repo-template`;
-      } else if (repo.private) {
-        return 'octicon-repo-locked';
-      } else if (repo.internal) {
-        return 'octicon-repo';
-      }
-      return 'octicon-repo';
+    repoIcon(repo: Record<string, any>) {
+      return getRepoIcon(repo);
     },
 
     statusIcon(status: CommitStatus) {

web_src/js/utils/mappings.ts

@@ -0,0 +1,12 @@
+export function getRepoIcon(repo: Record<string, any>) {
+  if (repo.mirror) {
+    return 'octicon-mirror';
+  } else if (repo.fork) {
+    return 'octicon-repo-forked';
+  } else if (repo.private) {
+    return 'octicon-repo-locked';
+  } else if (repo.template) {
+    return `octicon-repo-template`;
+  }
+  return 'octicon-repo';
+}