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

6 files changed, 19 insertions, 10 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index e499bb9fe4..bf4c4964f2 100644
--- a/options/locale/locale_en-US.ini
+++ b/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
diff --git a/routers/org/teams.go b/routers/org/teams.go
index 1aee99fb88..80309dff44 100644
--- a/routers/org/teams.go
+++ b/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
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
index 54785b0be3..7633bec823 100644
--- a/templates/org/team/members.tmpl
+++ b/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}}
diff --git a/templates/org/team/navbar.tmpl b/templates/org/team/navbar.tmpl
new file mode 100644
index 0000000000..1a8f108331
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
index e73b85c40b..fafe15e128 100644
--- a/templates/org/team/repositories.tmpl
+++ b/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}}
diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index 0edfcd0148..846613e32e 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/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}}