new watchers, stars and forks UI

conf/locale/locale_en-US.ini

@@ -350,6 +350,9 @@ auto_init = Initialize this repository with selected files and template
 create_repo = Create Repository
 default_branch = Default Branch
 mirror_interval = Mirror Interval (hour)
+watchers = Watchers
+stargazers = Stargazers
+forks = Forks
 
 form.name_reserved = Repository name '%s' is reserved.
 form.name_pattern_not_allowed = Repository name pattern '%s' is not allowed.
@@ -382,7 +385,6 @@ create_new_repo_command = Create a new repository on the command line
 push_exist_repo = Push an existing repository from the command line
 repo_is_empty = This repository is empty, please come back later!
 
-
 branch = Branch
 tree = Tree
 filter_branch_and_tag = Filter branch or tag

models/repo.go

@@ -49,7 +49,7 @@ var (
 	Gitignores, Licenses, Readmes []string
 
 	// Maximum items per page in forks, watchers and stars of a repo
-	ItemsPerPage = 54
+	ItemsPerPage = 40
 )
 
 func LoadRepoConfig() {
@@ -1696,25 +1696,21 @@ func WatchRepo(uid, repoId int64, watch bool) (err error) {
 	return watchRepo(x, uid, repoId, watch)
 }
 
-func getWatchers(e Engine, rid int64) ([]*Watch, error) {
+func getWatchers(e Engine, repoID int64) ([]*Watch, error) {
 	watches := make([]*Watch, 0, 10)
-	err := e.Find(&watches, &Watch{RepoID: rid})
+	return watches, e.Find(&watches, &Watch{RepoID: repoID})
-	return watches, err
 }
 
 // GetWatchers returns all watchers of given repository.
-func GetWatchers(rid int64) ([]*Watch, error) {
+func GetWatchers(repoID int64) ([]*Watch, error) {
-	return getWatchers(x, rid)
+	return getWatchers(x, repoID)
 }
 
-// Repository.GetWatchers returns all users watching given repository.
+// Repository.GetWatchers returns range of users watching given repository.
-func (repo *Repository) GetWatchers(offset int) ([]*User, error) {
+func (repo *Repository) GetWatchers(page int) ([]*User, error) {
-	users := make([]*User, 0, 10)
+	users := make([]*User, 0, ItemsPerPage)
-	offset = (offset - 1) * ItemsPerPage
+	return users, x.Limit(ItemsPerPage, (page-1)*ItemsPerPage).
-
+		Where("repo_id=?", repo.ID).Join("LEFT", "watch", "user.id=watch.user_id").Find(&users)
-	err := x.Limit(ItemsPerPage, offset).Where("repo_id=?", repo.ID).Join("LEFT", "watch", "user.id=watch.user_id").Find(&users)
-
-	return users, err
 }
 
 func notifyWatchers(e Engine, act *Action) error {
@@ -1794,13 +1790,10 @@ func IsStaring(uid, repoId int64) bool {
 	return has
 }
 
-func (repo *Repository) GetStars(offset int) ([]*User, error) {
+func (repo *Repository) GetStargazers(page int) ([]*User, error) {
-	users := make([]*User, 0, 10)
+	users := make([]*User, 0, ItemsPerPage)
-	offset = (offset - 1) * ItemsPerPage
+	return users, x.Limit(ItemsPerPage, (page-1)*ItemsPerPage).
-
+		Where("repo_id=?", repo.ID).Join("LEFT", "star", "user.id=star.uid").Find(&users)
-	err := x.Limit(ItemsPerPage, offset).Where("repo_id=?", repo.ID).Join("LEFT", "star", "user.id=star.uid").Find(&users)
-
-	return users, err
 }
 
 // ___________           __

public/css/gogs.css

@@ -2470,6 +2470,46 @@ footer .container .links > *:first-child {
 .repository.new.release .prerelease.field {
   margin-bottom: 0;
 }
+.repository.watchers .list {
+  padding: 0;
+}
+.repository.watchers .list .item {
+  list-style: none;
+  width: 25%;
+  margin: 10px 10px 10px 0;
+  padding-bottom: 14px;
+  float: left;
+}
+.repository.watchers .list .item .avatar {
+  width: 48px;
+  height: 48px;
+  float: left;
+  display: block;
+  margin-right: 10px;
+}
+.repository.watchers .list .item .name {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: normal;
+}
+.repository.watchers .list .item .meta {
+  margin-top: 5px;
+}
+.repository.forks .list {
+  margin-top: 0;
+}
+.repository.forks .list .item {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #DDD;
+}
+.repository.forks .list .item .ui.avatar {
+  float: left;
+  margin-right: 5px;
+}
+.repository.forks .list .item .link {
+  padding-top: 5px;
+}
 .issue.list {
   list-style: none;
   padding-top: 15px;

public/less/_repository.less

@@ -885,6 +885,55 @@
 			margin-bottom: 0;
 		}
 	}
+
+	&.watchers {
+		.list {
+			padding: 0;
+
+			.item {
+				list-style: none;
+				width: 25%;
+				margin: 10px 10px 10px 0;
+		    padding-bottom: 14px;
+		    float: left;
+
+				.avatar {
+					width: 48px;
+					height: 48px;
+					float: left;
+			    display: block;
+			    margin-right: 10px;
+				}
+				.name {
+					margin-top: 0;
+					margin-bottom: 0;
+					font-weight: normal;
+				}
+				.meta {
+					margin-top: 5px;
+				}
+			}
+		}
+	}
+	&.forks {
+		.list {
+			margin-top: 0;
+
+			.item {
+				padding-top: 10px;
+				padding-bottom: 10px;
+				border-bottom: 1px solid #DDD;
+
+				.ui.avatar {
+					float: left;
+					margin-right: 5px;
+				}
+				.link {
+					padding-top: 5px;
+				}
+			}
+		}
+	}
 }
 // End of .repository
 

routers/repo/stars.go

@@ -1,44 +0,0 @@
-// Copyright 2014 The Gogs Authors. All rights reserved.
-// Use of this source code is governed by a MIT-style
-// license that can be found in the LICENSE file.
-
-package repo
-
-import (
-	"github.com/Unknwon/paginater"
-
-	"github.com/gogits/gogs/models"
-	"github.com/gogits/gogs/modules/base"
-	"github.com/gogits/gogs/modules/middleware"
-)
-
-const (
-	STARS base.TplName = "repo/stars"
-)
-
-func Stars(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repos.stars")
-
-	page := ctx.QueryInt("page")
-	if page <= 0 {
-		page = 1
-	}
-
-	ctx.Data["Page"] = paginater.New(ctx.Repo.Repository.NumStars, models.ItemsPerPage, page, 5)
-
-	stars, err := ctx.Repo.Repository.GetStars(ctx.QueryInt("page"))
-
-	if err != nil {
-		ctx.Handle(500, "GetStars", err)
-		return
-	}
-
-	if (ctx.QueryInt("page")-1)*models.ItemsPerPage > ctx.Repo.Repository.NumStars {
-		ctx.Handle(404, "ctx.Repo.Repository.NumStars", nil)
-		return
-	}
-
-	ctx.Data["Stars"] = stars
-
-	ctx.HTML(200, STARS)
-}

routers/repo/view.go

@@ -11,6 +11,8 @@ import (
 	"path/filepath"
 	"strings"
 
+	"github.com/Unknwon/paginater"
+
 	"github.com/gogits/gogs/models"
 	"github.com/gogits/gogs/modules/base"
 	"github.com/gogits/gogs/modules/git"
@@ -21,6 +23,7 @@ import (
 
 const (
 	HOME     base.TplName = "repo/home"
+	WATCHERS base.TplName = "repo/watchers"
 )
 
 func Home(ctx *middleware.Context) {
@@ -245,3 +248,33 @@ func Home(ctx *middleware.Context) {
 	ctx.Data["BranchLink"] = branchLink
 	ctx.HTML(200, HOME)
 }
+
+func renderItems(ctx *middleware.Context, total int, getter func(page int) ([]*models.User, error)) {
+	page := ctx.QueryInt("page")
+	if page <= 0 {
+		page = 1
+	}
+	pager := paginater.New(total, models.ItemsPerPage, page, 5)
+	ctx.Data["Page"] = pager
+
+	items, err := getter(pager.Current())
+	if err != nil {
+		ctx.Handle(500, "getter", err)
+		return
+	}
+	ctx.Data["Watchers"] = items
+
+	ctx.HTML(200, WATCHERS)
+}
+
+func Watchers(ctx *middleware.Context) {
+	ctx.Data["Title"] = ctx.Tr("repo.watchers")
+	ctx.Data["PageIsWatchers"] = true
+	renderItems(ctx, ctx.Repo.Repository.NumWatches, ctx.Repo.Repository.GetWatchers)
+}
+
+func Stars(ctx *middleware.Context) {
+	ctx.Data["Title"] = ctx.Tr("repo.stargazers")
+	ctx.Data["PageIsStargazers"] = true
+	renderItems(ctx, ctx.Repo.Repository.NumStars, ctx.Repo.Repository.GetStargazers)
+}

routers/repo/watchers.go

@@ -1,44 +0,0 @@
-// Copyright 2014 The Gogs Authors. All rights reserved.
-// Use of this source code is governed by a MIT-style
-// license that can be found in the LICENSE file.
-
-package repo
-
-import (
-	"github.com/Unknwon/paginater"
-
-	"github.com/gogits/gogs/models"
-	"github.com/gogits/gogs/modules/base"
-	"github.com/gogits/gogs/modules/middleware"
-)
-
-const (
-	WATCHERS base.TplName = "repo/watchers"
-)
-
-func Watchers(ctx *middleware.Context) {
-	ctx.Data["Title"] = ctx.Tr("repos.watches")
-
-	page := ctx.QueryInt("page")
-	if page <= 0 {
-		page = 1
-	}
-
-	ctx.Data["Page"] = paginater.New(ctx.Repo.Repository.NumWatches, models.ItemsPerPage, page, 5)
-
-	watchers, err := ctx.Repo.Repository.GetWatchers(ctx.QueryInt("page"))
-
-	if err != nil {
-		ctx.Handle(500, "GetWatchers", err)
-		return
-	}
-
-	if (ctx.QueryInt("page")-1)*models.ItemsPerPage > ctx.Repo.Repository.NumWatches {
-		ctx.Handle(404, "ctx.Repo.Repository.NumWatches", nil)
-		return
-	}
-
-	ctx.Data["Watchers"] = watchers
-
-	ctx.HTML(200, WATCHERS)
-}

templates/repo/forks.tmpl

@@ -1,27 +1,23 @@
-{{template "ng/base/head" .}}
+{{template "base/head" .}}
-{{template "ng/base/header" .}}
+<div class="repository forks">
-<div id="repo-wrapper">
+  {{template "repo/header" .}}
-    {{template "repo/header_old" .}}
+  <div class="ui container">
-    <div id="repo-content" class="clear container">
+    {{template "repo/sidebar" .}}
-        <div id="repo-main" class="left grid-5-6">
+    <h2 class="ui dividing header">
-            <div id="forks">
+      {{.i18n.Tr "repo.forks"}}
-                <h4>
+    </h2>
-                    <strong>{{.i18n.Tr "repos.forks"}}</strong>
+    <div class="ui list">
-                </h4>
-
-                <ol>
       {{range .Forks}}
-                    <p>
+        <div class="item">
-                    <img class="avatar-small" src="{{.Owner.AvatarLink}}">
+          <img class="ui avatar image" src="{{.Owner.AvatarLink}}">
+          <div class="link">
             <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
             /
             <a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">{{.Name}}</a>
-                    </p>
+          </div>
+        </div>
       {{end}}
     </div>
   </div>
-
-        {{template "repo/sidebar" .}}
 </div>
-</div>
+{{template "base/footer" .}}
-{{template "ng/base/footer" .}}

templates/repo/stars.tmpl

@@ -1,61 +0,0 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="repo-wrapper">
-    {{template "repo/header_old" .}}
-    <div id="repo-content" class="clear container">
-        <div id="repo-main" class="left grid-5-6">
-            <div id="stars">
-                <h4>
-                    <strong>{{.i18n.Tr "repos.stars"}}</strong>
-                </h4>
-
-                <ol>
-                {{range .Stars}}
-                <li>
-                    <a href="{{AppSubUrl}}/{{.Name}}">
-                    <img class="avatar" src="{{.AvatarLink}}" title="{{.Name}}"/>
-
-                    <h3>{{.Name}}</h3>
-                    </a>
-
-                    <p>
-                    {{if .Website}}
-                    <span class="octicon octicon-link"></span> <a href="{{.Website}}" target="_blank">{{.Website}}</a>
-                    {{else if .Location}}
-                    <span class="octicon octicon-location"></span> {{.Location}}
-                    {{else}}
-                    <span class="octicon octicon-clock"></span> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
-                    {{end}}
-                    </p>
-                </li>
-                {{end}}
-                </ol>
-
-                {{with .Page}}
-                {{if gt .TotalPages 1}}
-                <div class="pagination">
-                    {{if .HasPrevious}}
-                    <a href="{{$.RepoLink}}/stars?page={{.Previous}}">{{$.i18n.Tr "issues.previous"}}</a>
-                    {{end}}
-
-                    {{range .Pages}}
-                    {{if eq .Num -1}}
-                    <a class="disabled item">...</a>
-                    {{else}}
-                    <a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.RepoLink}}/stars?page={{.Num}}"{{end}}>{{.Num}}</a>
-                    {{end}}
-                    {{end}}
-
-                    {{if .HasNext}}
-                    <a href="{{$.RepoLink}}/stars?page={{.Next}}">{{$.i18n.Tr "issues.next"}}</a>
-                    {{end}}
-                </div>
-                {{end}}
-                {{end}}
-            </div>
-        </div>
-
-        {{template "repo/sidebar" .}}
-    </div>
-</div>
-{{template "ng/base/footer" .}}

templates/repo/watchers.tmpl

@@ -1,61 +1,57 @@
-{{template "ng/base/head" .}}
+{{template "base/head" .}}
-{{template "ng/base/header" .}}
+<div class="repository watchers">
-<div id="repo-wrapper">
+  {{template "repo/header" .}}
-    {{template "repo/header_old" .}}
+  <div class="ui container">
-    <div id="repo-content" class="clear container">
+    {{template "repo/sidebar" .}}
-        <div id="repo-main" class="left grid-5-6">
+    <h2 class="ui dividing header">
-            <div id="stars">
+      {{if .PageIsWatchers}}
-                <h4>
+      {{.i18n.Tr "repo.watchers"}}
-                    <strong>{{.i18n.Tr "repos.watches"}}</strong>
-                </h4>
-
-                <ol>
-                {{range .Watchers}}
-                <li>
-                    <a href="{{AppSubUrl}}/{{.Name}}">
-                    <img class="avatar" src="{{.AvatarLink}}" title="{{.Name}}"/>
-
-                    <h3>{{.Name}}</h3>
-                    </a>
-
-                    <p>
-                    {{if .Website}}
-                    <span class="octicon octicon-link"></span> <a href="{{.Website}}" target="_blank">{{.Website}}</a>
-                    {{else if .Location}}
-                    <span class="octicon octicon-location"></span> {{.Location}}
       {{else}}
-                    <span class="octicon octicon-clock"></span> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
+      {{.i18n.Tr "repo.stargazers"}}
       {{end}}
-                    </p>
+    </h2>
+    <ul class="list">
+      {{range .Watchers}}
+      <li class="item ui segment">
+        <a href="{{.HomeLink}}">
+          <img class="avatar" src="{{.AvatarLink}}"/>
+        </a>
+        <h3 class="name"><a href="{{.HomeLink}}">{{.DisplayName}}</a></h3>
+
+        <div class="meta">
+          {{if .Website}}
+          <span class="icon octicon octicon-link"></span> <a href="{{.Website}}" target="_blank">{{.Website}}</a>
+          {{else if .Location}}
+          <span class="icon octicon octicon-location"></span> {{.Location}}
+          {{else}}
+          <span class="icon octicon octicon-clock"></span> {{$.i18n.Tr "user.join_on"}} {{DateFmtShort .Created}}
+          {{end}}
+        </div>
       </li>
       {{end}}
-                </ol>
+    </ul>
       
     {{with .Page}}
     {{if gt .TotalPages 1}}
-                <div class="pagination">
+    <div class="center page buttons">
-                    {{if .HasPrevious}}
+      <div class="ui borderless pagination menu">
-                    <a href="{{$.RepoLink}}/watchers?page={{.Previous}}">{{$.i18n.Tr "issues.previous"}}</a>
+        <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.Link}}?page={{.Previous}}"{{end}}>
-                    {{end}}
+          <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
-
+        </a>
         {{range .Pages}}
         {{if eq .Num -1}}
         <a class="disabled item">...</a>
         {{else}}
-                    <a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.RepoLink}}/watchers?page={{.Num}}"{{end}}>{{.Num}}</a>
+        <a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?page={{.Num}}"{{end}}>{{.Num}}</a>
         {{end}}
         {{end}}
-
+        <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.Link}}?page={{.Next}}"{{end}}>
-                    {{if .HasNext}}
+          {{$.i18n.Tr "repo.issues.next"}}&nbsp;<i class="icon right arrow"></i>
-                    <a href="{{$.RepoLink}}/watchers?page={{.Next}}">{{$.i18n.Tr "issues.next"}}</a>
+        </a>
-                    {{end}}
+      </div>
     </div>
     {{end}}
     {{end}}
   </div>
 </div>
-
+{{template "base/footer" .}}
-        {{template "repo/sidebar" .}}
-    </div>
-</div>
-{{template "ng/base/footer" .}}