Split dashboard elements into separate template files (#10885)

* Split dashboard elements into separate template files

No code change just Move Heatmap and Repo list/search into separate
template files (like feeds and navbar already are). This will let a
user more easily replace dashboard.tmpl without regularly becoming
out of sync with fixes or changes to the actual code.

Fixes #10870

* End file with an empty line

Co-authored-by: zeripath <art27@cantab.net>

templates/user/dashboard/dashboard.tmpl

@@ -6,126 +6,11 @@
 		<div class="ui mobile reversed stackable grid">
 			<div class="ui container ten wide column">
 				{{if .EnableHeatmap}}
-					<div id="user-heatmap" style="padding-right: 40px">
-						<activity-heatmap :locale="locale" :suburl="suburl" :user="heatmapUser">
-							<div slot="loading">
-								<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div>
-							</div>
-						</activity-heatmap>
-						<div class="ui divider"></div>
-					</div>
+					{{template "user/dashboard/heatmap" .}}
 				{{end}}
 				{{template "user/dashboard/feeds" .}}
 			</div>
-			<div id="app" class="six wide column">
-				<repo-search
-					:search-limit="searchLimit"
-					:suburl="suburl"
-					:uid="uid"
-					:more-repos-link="'{{.ContextUser.HomeLink}}'"
-					{{if not .ContextUser.IsOrganization}}
-					:organizations="[
-						{{range .ContextUser.Orgs}}
-						{name: '{{.Name}}', num_repos: '{{.NumRepos}}'},
-						{{end}}
-					]"
-					:is-organization="false"
-					:organizations-total-count="{{.ContextUser.GetOrganizationCount}}"
-					:can-create-organization="{{.SignedUser.CanCreateOrganization}}"
-					{{end}}
-					inline-template
-					v-cloak
-				>
-					<div>
-						<div v-if="!isOrganization" class="ui two item tabable menu">
-							<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
-							<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>
-						</div>
-						<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
-							<h4 class="ui top attached header">
-								{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
-								{{if or (not .ContextUser.IsOrganization) .IsOrganizationOwner}}
-								<div class="ui right">
-									<a class="poping up" :href="suburl + '/repo/create{{if .ContextUser.IsOrganization}}?org={{.ContextUser.ID}}{{end}}'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
-										<i class="plus icon"></i>
-										<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
-									</a>
-								</div>
-								{{end}}
-							</h4>
-							<div class="ui attached secondary segment repos-search">
-								<div class="ui fluid icon input" :class="{loading: isLoading}">
-									<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
-									<i class="search icon"></i>
-								</div>
-								<div class="ui secondary tiny pointing borderless menu center aligned grid repos-filter">
-									<a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
-										{{.i18n.Tr "all"}}
-										<div v-show="reposFilter === 'all'" class="ui circular mini grey label">${repoTypeCount}</div>
-									</a>
-									<a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
-										{{.i18n.Tr "sources"}}
-										<div v-show="reposFilter === 'sources'" class="ui circular mini grey label">${repoTypeCount}</div>
-									</a>
-									<a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
-										{{.i18n.Tr "forks"}}
-										<div v-show="reposFilter === 'forks'" class="ui circular mini grey label">${repoTypeCount}</div>
-									</a>
-									<a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')">
-										{{.i18n.Tr "mirrors"}}
-										<div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">${repoTypeCount}</div>
-									</a>
-									<a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
-										{{.i18n.Tr "collaborative"}}
-										<div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">${repoTypeCount}</div>
-									</a>
-								</div>
-							</div>
-							<div class="ui attached table segment">
-								<ul class="repo-owner-name-list">
-									<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
-										<a :href="suburl + '/' + repo.full_name">
-											<svg :class="'svg ' + repoClass(repo)" width="16" height="16" aria-hidden="true"><use :xlink:href="'#' + repoClass(repo)" /></svg>
-											<strong class="text truncate item-name">${repo.full_name}</strong>
-											<i v-if="repo.archived" class="archive icon archived-icon"></i>
-											<span class="ui right text light grey">
-												${repo.stars_count} <span class="rear">{{svg "octicon-star" 16}}</span>
-											</span>
-										</a>
-									</li>
-									<li v-if="showMoreReposLink">
-										<a :href="moreReposLink">{{.i18n.Tr "home.show_more_repos"}}</a>
-									</li>
-								</ul>
-							</div>
-						</div>
-						<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
-							<h4 class="ui top attached header">
-								{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
-								<div v-if="canCreateOrganization" class="ui right">
-									<a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
-										<i class="plus icon"></i>
-										<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
-									</a>
-								</div>
-							</h4>
-							<div class="ui attached table segment">
-								<ul class="repo-owner-name-list">
-									<li v-for="org in organizations">
-										<a :href="suburl + '/' + org.name">
-											{{svg "octicon-organization" 16}}
-											<strong class="text truncate item-name">${org.name}</strong>
-											<span class="ui right text light grey">
-												${org.num_repos} <span class="rear">{{svg "octicon-repo" 16}}</span>
-											</span>
-										</a>
-									</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-				</repo-search>
-			</div>
+			{{template "user/dashboard/repolist" .}}
 		</div>
 	</div>
 </div>

templates/user/dashboard/heatmap.tmpl

@@ -0,0 +1,8 @@
+<div id="user-heatmap" style="padding-right: 40px">
+	<activity-heatmap :locale="locale" :suburl="suburl" :user="heatmapUser">
+		<div slot="loading">
+			<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div>
+		</div>
+	</activity-heatmap>
+	<div class="ui divider"></div>
+</div>

templates/user/dashboard/repolist.tmpl

@@ -0,0 +1,109 @@
+<div id="app" class="six wide column">
+	<repo-search
+	:search-limit="searchLimit"
+	:suburl="suburl"
+	:uid="uid"
+	:more-repos-link="'{{.ContextUser.HomeLink}}'"
+	{{if not .ContextUser.IsOrganization}}
+	:organizations="[
+	{{range .ContextUser.Orgs}}
+	{name: '{{.Name}}', num_repos: '{{.NumRepos}}'},
+	{{end}}
+	]"
+	:is-organization="false"
+	:organizations-total-count="{{.ContextUser.GetOrganizationCount}}"
+	:can-create-organization="{{.SignedUser.CanCreateOrganization}}"
+	{{end}}
+	inline-template
+	v-cloak
+	>
+	<div>
+		<div v-if="!isOrganization" class="ui two item tabable menu">
+			<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
+			<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>
+		</div>
+		<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
+			<h4 class="ui top attached header">
+				{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
+				{{if or (not .ContextUser.IsOrganization) .IsOrganizationOwner}}
+				<div class="ui right">
+					<a class="poping up" :href="suburl + '/repo/create{{if .ContextUser.IsOrganization}}?org={{.ContextUser.ID}}{{end}}'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
+						<i class="plus icon"></i>
+						<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
+					</a>
+				</div>
+				{{end}}
+			</h4>
+			<div class="ui attached secondary segment repos-search">
+				<div class="ui fluid icon input" :class="{loading: isLoading}">
+					<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
+					<i class="search icon"></i>
+				</div>
+				<div class="ui secondary tiny pointing borderless menu center aligned grid repos-filter">
+					<a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
+						{{.i18n.Tr "all"}}
+						<div v-show="reposFilter === 'all'" class="ui circular mini grey label">${repoTypeCount}</div>
+					</a>
+					<a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
+						{{.i18n.Tr "sources"}}
+						<div v-show="reposFilter === 'sources'" class="ui circular mini grey label">${repoTypeCount}</div>
+					</a>
+					<a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
+						{{.i18n.Tr "forks"}}
+						<div v-show="reposFilter === 'forks'" class="ui circular mini grey label">${repoTypeCount}</div>
+					</a>
+					<a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')">
+						{{.i18n.Tr "mirrors"}}
+						<div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">${repoTypeCount}</div>
+					</a>
+					<a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
+						{{.i18n.Tr "collaborative"}}
+						<div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">${repoTypeCount}</div>
+					</a>
+				</div>
+			</div>
+			<div class="ui attached table segment">
+				<ul class="repo-owner-name-list">
+					<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
+						<a :href="suburl + '/' + repo.full_name">
+							<svg :class="'svg ' + repoClass(repo)" width="16" height="16" aria-hidden="true"><use :xlink:href="'#' + repoClass(repo)" /></svg>
+							<strong class="text truncate item-name">${repo.full_name}</strong>
+							<i v-if="repo.archived" class="archive icon archived-icon"></i>
+							<span class="ui right text light grey">
+								${repo.stars_count} <span class="rear">{{svg "octicon-star" 16}}</span>
+							</span>
+						</a>
+					</li>
+					<li v-if="showMoreReposLink">
+						<a :href="moreReposLink">{{.i18n.Tr "home.show_more_repos"}}</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
+			<h4 class="ui top attached header">
+				{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
+				<div v-if="canCreateOrganization" class="ui right">
+					<a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
+						<i class="plus icon"></i>
+						<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
+					</a>
+				</div>
+			</h4>
+			<div class="ui attached table segment">
+				<ul class="repo-owner-name-list">
+					<li v-for="org in organizations">
+						<a :href="suburl + '/' + org.name">
+							{{svg "octicon-organization" 16}}
+							<strong class="text truncate item-name">${org.name}</strong>
+							<span class="ui right text light grey">
+								${org.num_repos} <span class="rear">{{svg "octicon-repo" 16}}</span>
+							</span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</repo-search>
+</div>