Improve team members and repositories settings UI (#5457)

* improve team members and repositories settings UI

* use tab on team pages

* add default description on team members and repos

* add blank on numbers and texts

* improve translation

Author: lunny

options/locale/locale_en-US.ini

@@ -1327,6 +1327,8 @@ teams.add_team_repository = Add Team Repository
 teams.remove_repo = Remove
 teams.add_nonexistent_repo = "The repository you're trying to add does not exist; please create it first."
 teams.add_duplicate_users = User is already a team member.
+teams.repos.none = No repositories could be accessed by this team.
+teams.members.none = No members on this team.
 
 [admin]
 dashboard = Dashboard

routers/org/teams.go

@@ -228,6 +228,7 @@ func NewTeamPost(ctx *context.Context, form auth.CreateTeamForm) {
 func TeamMembers(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Org.Team.Name
 	ctx.Data["PageIsOrgTeams"] = true
+	ctx.Data["PageIsOrgTeamMembers"] = true
 	if err := ctx.Org.Team.GetMembers(); err != nil {
 		ctx.ServerError("GetMembers", err)
 		return
@@ -239,6 +240,7 @@ func TeamMembers(ctx *context.Context) {
 func TeamRepositories(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Org.Team.Name
 	ctx.Data["PageIsOrgTeams"] = true
+	ctx.Data["PageIsOrgTeamRepos"] = true
 	if err := ctx.Org.Team.GetRepositories(); err != nil {
 		ctx.ServerError("GetRepositories", err)
 		return

templates/org/team/members.tmpl

@@ -6,9 +6,7 @@
 		<div class="ui grid">
 			{{template "org/team/sidebar" .}}
 			<div class="ui ten wide column">
-				<div class="ui top attached header">
-					{{.i18n.Tr "org.teams.members"}}
-				</div>
+				{{template "org/team/navbar" .}}
 				<div class="ui attached table segment members">
 					{{range .Team.Members}}
 						<div class="item">
@@ -20,6 +18,10 @@
 								{{.DisplayName}}
 							</a>
 						</div>
+					{{else}}
+						<div class="item">
+							<span class="text grey italic">{{$.i18n.Tr "org.teams.members.none"}}</span>
+						</div>
 					{{end}}
 				</div>
 				{{if .IsOrganizationOwner}}

templates/org/team/navbar.tmpl

@@ -0,0 +1,4 @@
+<div class="ui top attached tabular menu">
+  <a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName}}"><span class="octicon octicon-person"></span> <strong>{{.Team.NumMembers}}</strong>&nbsp; {{$.i18n.Tr "org.lower_members"}}</a>
+  <a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/repositories"><span class="octicon octicon-repo"></span> <strong>{{.Team.NumRepos}}</strong>&nbsp; {{$.i18n.Tr "org.lower_repositories"}}</a>
+</div>

templates/org/team/repositories.tmpl

@@ -6,9 +6,7 @@
 		<div class="ui grid">
 			{{template "org/team/sidebar" .}}
 			<div class="ui ten wide column">
-				<div class="ui top attached header">
-					{{.i18n.Tr "org.teams.repositories"}}
-				</div>
+				{{template "org/team/navbar" .}}
 				<div class="ui attached table segment repositories">
 					{{$canAddRemove := and $.IsOrganizationOwner (not (eq $.Team.LowerName "owners"))}}
 					{{range .Team.Repos}}
@@ -21,6 +19,10 @@
 								<strong>{{$.Org.Name}}/{{.Name}}</strong>
 							</a>
 						</div>
+					{{else}}
+						<div class="item">
+							<span class="text grey italic">{{$.i18n.Tr "org.teams.repos.none"}}</span>
+						</div>
 					{{end}}
 				</div>
 				{{if $canAddRemove}}

templates/org/team/sidebar.tmpl

@@ -17,10 +17,7 @@
 				<span class="text grey italic">{{.i18n.Tr "org.teams.no_desc"}}</span>
 			{{end}}
 		</div>
-		<div class="item">
-			<a href="{{.OrgLink}}/teams/{{.Team.LowerName}}"><span class="octicon octicon-person"></span> <strong>{{.Team.NumMembers}}</strong> {{$.i18n.Tr "org.lower_members"}}</a> ·
-			<a href="{{.OrgLink}}/teams/{{.Team.LowerName}}/repositories"><span class="octicon octicon-repo"></span> <strong>{{.Team.NumRepos}}</strong> {{$.i18n.Tr "org.lower_repositories"}}</a>
-		</div>
+
 		<div class="item">
 			{{if eq .Team.LowerName "owners"}}
 				{{.i18n.Tr "org.teams.owners_permission_desc" | Str2html}}