repo branch page ui

public/css/gogs.css

@@ -67,6 +67,8 @@ html, body {
 
 #gogs-nav-logo{
     padding-left: 0;
+    padding-right: 0;
+    margin-right: 10px;
 }
 
 .gogs-nav-item:hover,
@@ -619,6 +621,67 @@ html, body {
     padding: 30px 30px 50px;
 }
 
+.branch-list th{
+    background-color: #FFF;
+    line-height: 28px !important;
+}
+
+.branch-list td{
+    line-height: 36px !important;
+}
+
+.branch-box tr:hover td{
+    background-color: rgba(19, 95, 215, 0.06) !important;
+}
+
+.branch-box .name{
+    padding-left: 20px;
+    font-size: 15px;
+}
+
+.branch-box .action{
+    width: 150px;
+}
+
+.branch-box td.date,.branch-box td.behind,.branch-box td.ahead{
+    width: 120px;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.branch-box .graph{
+    display: block;
+    height: 3px;
+}
+
+.branch-box .behind{
+    text-align: right;
+    direction: rtl;
+}
+
+.branch-box .behind .graph{
+    background-color: #888;
+}
+
+.branch-box .ahead .graph{
+    background-color: #0093c4;
+}
+
+.branch-box .branch-main{
+    background-color: #444;
+    color: #FFF;
+    border-color: #444;
+}
+
+.branch-box .branch-main a{
+    color: #FFF;
+}
+
+.branch-box .branch-main .name .btn{
+    margin-left: .5em;
+}
+
+/* wrapper and footer */
+
 #wrapper {
     min-height: 100%;
     height: auto !important;

routers/repo/single.go

@@ -13,6 +13,26 @@ import (
 	"github.com/gogits/gogs/modules/middleware"
 )
 
+func Branches(ctx *middleware.Context, params martini.Params) {
+	if !ctx.Repo.IsValid {
+		return
+	}
+
+	ctx.Data["Username"] = params["username"]
+	ctx.Data["Reponame"] = params["reponame"]
+
+	brs, err := models.GetBranches(params["username"], params["reponame"])
+	if err != nil {
+		ctx.Handle(200, "repo.Branches", err)
+		return
+	}
+
+	ctx.Data["Branches"] = brs
+	ctx.Data["IsRepoToolbarBranches"] = true
+
+	ctx.Render.HTML(200, "repo/branches", ctx.Data)
+}
+
 func Single(ctx *middleware.Context, params martini.Params) {
 	if !ctx.Repo.IsValid {
 		return

templates/repo/branches.tmpl

@@ -0,0 +1,42 @@
+{{template "base/head" .}}
+{{template "base/navbar" .}}
+{{template "repo/nav" .}}
+{{template "repo/toolbar" .}}
+<div id="gogs-body" class="container">
+    <div id="gogs-source">
+        <div class="panel panel-default branch-box info-box">
+            <div class="panel-heading info-head">
+                <h4>Branches</h4>
+            </div>
+            <table class="panel-footer table branch-list table table-hover">
+                <thead>
+                <tr>
+                    <th class="name"></th>
+                    <th class="behind">Behind</th>
+                    <th class="ahead">Ahead</th>
+                    <th class="date">Last Commit</th>
+                    <th class="action"></th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr class="branch-main">
+                    <td class="name" colspan="3">
+                        <a href="#"><strong>BranchName</strong></a>
+                        <button class="btn btn-primary btn-sm">base branch</button>
+                    </td>
+                    <td class="date">3 years ago</td>
+                    <td class="action"></td>
+                </tr>
+                <tr>
+                    <td class="name"><a href="#"><strong>BranchName</strong></a></td>
+                    <td class="behind">102 <span class="graph" style="width: 100%"></span></td>
+                    <td class="ahead"><span class="graph" style="width: 4%"></span>4</td>
+                    <td class="date">3 years ago</td>
+                    <td class="action"><a class="btn btn-info btn-sm" href="#">compare</a></td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{{template "base/footer" .}}

templates/repo/single.tmpl

@@ -24,13 +24,15 @@
             {{$paths := .Paths}}
             {{ $l := Subtract $n 1}}
             <ol class="breadcrumb">
-                <li class="root dir"><a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}">{{.Repository.Name}}</a></li>
+                <li class="root dir">
+                    <a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}">{{.Repository.Name}}</a></li>
                 {{range $i, $v := $treenames}}
                 <li class="dir">
-                {{if eq $i $l}}{{$v}}
-                {{else}}
-                <a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}/{{index $paths $i}}">{{$v}}</a>&nbsp;
-                {{end}}</li>
+                    {{if eq $i $l}}{{$v}}
+                    {{else}}
+                    <a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}/{{index $paths $i}}">{{$v}}</a>&nbsp;
+                    {{end}}
+                </li>
                 {{end}}
             </ol>
         </div>
@@ -43,20 +45,21 @@
             </div>
             <table class="panel-footer table file-list">
                 <thead class="hidden">
-    	            <tr>
-                        <th class="icon"></th>
-    	                <th class="name">Filename</th>
-                        <th class="text">Message</th>
-    	                <th class="date">Date modified</th>
-    	            </tr>
+                <tr>
+                    <th class="icon"></th>
+                    <th class="name">Filename</th>
+                    <th class="text">Message</th>
+                    <th class="date">Date modified</th>
+                </tr>
                 </thead>
                 <tbody>
-        			{{range .Files}}
-    				<tr {{if .IsDir}}class="is-dir"{{end}}>
-                        <td class="icon">
-                            <i class="fa {{if .IsDir}}fa-folder{{else}}fa-file-text-o{{end}}"></i>
-                        </td>
-    	                <td class="name">
+                {{range .Files}}
+                <tr
+                {{if .IsDir}}class="is-dir"{{end}}>
+                <td class="icon">
+                    <i class="fa {{if .IsDir}}fa-folder{{else}}fa-file-text-o{{end}}"></i>
+                </td>
+                <td class="name">
                             <span class="wrap">
                                 {{if .IsDir}}
                                 <a href="/{{$username}}/{{$reponame}}/tree/{{$branchname}}/{{.Path}}">{{.Name}}</a>
@@ -64,19 +67,19 @@
                                 <a href="/{{$username}}/{{$reponame}}/blob/{{$branchname}}/{{.Name}}">{{.Name}}</a>
                                 {{end}}
                             </span>
-                        </td>
-    	                <td class="text">
+                </td>
+                <td class="text">
                             <span class="wrap">
                                 {{.Message}}
                             </span>
-                        </td>
-                        <td class="date">
+                </td>
+                <td class="date">
                             <span class="wrap">
                                 {{TimeSince .Created}}
                             </span>
-                        </td>
-    				</tr>
-        			{{end}}
+                </td>
+                </tr>
+                {{end}}
                 </tbody>
             </table>
         </div>

templates/repo/toolbar.tmpl

@@ -4,10 +4,10 @@
             <div class="collapse navbar-collapse">
                 <ul class="nav navbar-nav">
                     <li class="{{if .IsRepoToolbarSource}}active{{end}}"><a href="/{{.RepositoryLink}}">Source</a></li>
-                    <li><a href="/{{.RepositoryLink}}/commits">Commits</a></li>
-                    <li><a href="/{{.RepositoryLink}}/branches">Branches</a></li>
-                    <li><a href="/{{.RepositoryLink}}/pulls">Pull Requests</a></li>
-                    <li><a href="/{{.RepositoryLink}}/issues">Issues <!--<span class="badge">42</span>--></a></li>
+                    <li class="{{if .IsRepoToolbarCommits}}active{{end}}"><a href="/{{.RepositoryLink}}/commits">Commits</a></li>
+                    <li class="{{if .IsRepoToolbarBranches}}active{{end}}"><a href="/{{.RepositoryLink}}/branches">Branches</a></li>
+                    <li class="{{if .IsRepoToolbarPulls}}active{{end}}"><a href="/{{.RepositoryLink}}/pulls">Pull Requests</a></li>
+                    <li class="{{if .IsRepoToolbarIssues}}active{{end}}"><a href="/{{.RepositoryLink}}/issues">Issues <!--<span class="badge">42</span>--></a></li>
                     <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                         <ul class="dropdown-menu">

web.go

@@ -77,6 +77,7 @@ func runWeb(*cli.Context) {
 	m.Get("/:username/:reponame/commits", middleware.SignInRequire(false), middleware.RepoAssignment(true), repo.Commits)
 	m.Get("/:username/:reponame/issues", middleware.SignInRequire(false), middleware.RepoAssignment(true), repo.Issues)
 	m.Get("/:username/:reponame/pulls", middleware.SignInRequire(false), middleware.RepoAssignment(true), repo.Pulls)
+	m.Get("/:username/:reponame/branches", middleware.SignInRequire(false), middleware.RepoAssignment(true), repo.Branches)
 	m.Get("/:username/:reponame/tree/:branchname/**",
 		middleware.SignInRequire(false), middleware.RepoAssignment(true), repo.Single)
 	m.Get("/:username/:reponame/tree/:branchname",