diff page ui

This commit is contained in:
FuXiaoHei 2014-03-24 21:27:19 +08:00
parent 137538e54b
commit 5e22f1437a
5 changed files with 599 additions and 33 deletions

View file

@ -798,7 +798,7 @@ html, body {
margin-left: .5em; margin-left: .5em;
} }
.commit-box .avatar { .commit-box .avatar, .diff-head-box .avatar {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 8px; margin-right: 8px;
@ -831,10 +831,137 @@ html, body {
background-color: #FFF; background-color: #FFF;
} }
.guide-box { .guide-box, .diff-head-box {
margin-top: 20px; margin-top: 20px;
} }
.diff-head-box h4 {
margin-top: 0;
margin-bottom: 0;
line-height: 26px;
}
.diff-head-box p {
margin-bottom: 0;
}
.diff-head-box .sha {
margin-left: 8px;
}
.diff-head-box a.name {
color: #444;
margin-right: 8px;
}
.diff-head-box span.time {
color: #888;
}
.diff-detail-box {
margin-bottom: 16px;
line-height: 30px;
}
.diff-detail-box span.status {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
vertical-align: middle;
}
.diff-detail-box ol {
padding-left: 0;
margin-bottom: 28px;
}
.diff-detail-box li {
list-style: none;
padding-bottom: 4px;
margin-bottom: 4px;
border-bottom: 1px dashed #DDD;
padding-left: 6px;
}
.diff-detail-box span.status.modify {
background-color: #f0db88;
}
.diff-detail-box span.status.add {
background-color: #b4e2b4;
}
.diff-detail-box span.status.del {
background-color: #e9aeae;
}
.diff-detail-box span.status.rename{
background-color: #dad8ff;
}
.diff-file-box .panel-heading {
padding: 10px 20px;
line-height: 26px;
}
.diff-box .count {
margin-right: 12px;
}
.diff-box .count .bar {
width: 40px;
display: inline-block;
margin: 2px 4px 0 4px;
vertical-align: text-top;
}
.diff-box .file {
color: #888;
}
#gogs-source .file-content.diff-file-box {
margin-bottom: 20px;
}
.diff-box .count .bar .add {
background-color: #77c64a;
height: 12px;
}
.diff-box .count .bar .del, .diff-box .count .bar {
background-color: #e75316;
height: 12px;
}
.diff-file-box .file-body.file-code .lines-code > pre {
margin: 0;
padding: 3px;
}
.diff-file-box .file-body.file-code .lines-num-old {
border-right: 1px solid #DDD;
}
.diff-file-box .code-bin td {
padding: 20px;
}
.diff-file-box .code-diff tbody tr.add-code td, .diff-file-box .code-diff tbody tr.add-code pre {
background-color: #d1ffd6 !important;
border-color: #b4e2b4 !important;
}
.diff-file-box .code-diff tbody tr.del-code td, .diff-file-box .code-diff tbody tr.del-code pre {
background-color: #ffe2dd !important;
border-color: #e9aeae !important;
}
.diff-file-box .code-diff tbody tr:hover td, .diff-file-box .code-diff tbody tr:hover pre {
background-color: #fff8d2 !important;
border-color: #f0db88 !important;
}
/* wrapper and footer */ /* wrapper and footer */
#wrapper { #wrapper {

View file

@ -144,7 +144,7 @@ var Gogits = {
node = node.wrap('<div id="' + name + '" class="anchor-wrap" ></div>'); node = node.wrap('<div id="' + name + '" class="anchor-wrap" ></div>');
node.append('<a class="anchor" href="#' + name + '"><span class="octicon octicon-link"></span></a>'); node.append('<a class="anchor" href="#' + name + '"><span class="octicon octicon-link"></span></a>');
}); });
} };
Gogits.renderCodeView = function () { Gogits.renderCodeView = function () {
function selectRange($list, $select, $from) { function selectRange($list, $select, $from) {
@ -334,6 +334,21 @@ function initRepository() {
return false; return false;
}); });
})(); })();
// repo diff counter
(function () {
var $counter = $('.diff-counter');
if ($counter.length < 1) {
return;
}
$counter.each(function (i, item) {
var $item = $(item);
var addLine = $item.find('span[data-line].add').data("line");
var delLine = $item.find('span[data-line].del').data("line");
var addPercent = parseFloat(addLine) / (parseFloat(addLine) + parseFloat(delLine)) * 100;
$item.find(".bar .add").css("width", addPercent + "%");
});
}());
} }
(function ($) { (function ($) {

View file

@ -33,3 +33,9 @@ func Commits(ctx *middleware.Context, params martini.Params) {
ctx.Data["Commits"] = commits ctx.Data["Commits"] = commits
ctx.HTML(200, "repo/commits") ctx.HTML(200, "repo/commits")
} }
func Diff(ctx *middleware.Context,params martini.Params){
ctx.Data["Title"] = "commit-sha"
ctx.Data["IsRepoToolbarCommits"] = true
ctx.HTML(200,"repo/diff")
}

418
templates/repo/diff.tmpl Normal file
View file

@ -0,0 +1,418 @@
{{template "base/head" .}}
{{template "base/navbar" .}}
{{template "repo/nav" .}}
{{template "repo/toolbar" .}}
<div id="gogs-body" class="container" data-page="repo">
<div id="gogs-source">
<div class="panel panel-info diff-box diff-head-box">
<div class="panel-heading">
<a class="pull-right btn btn-primary btn-sm" href="#commit-source">Browse Source</a>
<h4>bsongen: support for custom tags</h4>
</div>
<div class="panel-body">
<span class="pull-right">
commit <span class="label label-default sha">commit-sha</span>
</span>
<p class="author">
<img class="avatar" src="#" alt=""/>
<a class="name" href="#"><strong>author-name</strong></a>
<span class="time">times-ago</span>
</p>
</div>
</div>
<div class="diff-detail-box diff-box">
<a class="pull-right btn btn-default" data-toggle="collapse" data-target="#diff-files">Show Diff Files</a>
<p class="showing">
<i class="fa fa-retweet"></i>
<strong> 5 changed files</strong> with <strong>25 additions</strong> and <strong>9 deletions</strong>.
</p>
<ol class="detail-files collapse" id="diff-files">
<li>
<div class="diff-counter count pull-right">
<span class="add" data-line="2">2</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="4">4</span>
</div>
<!-- todo finish all file status, now modify, add, delete and rename -->
<span class="status modify" data-toggle="tooltip" data-placement="right" title="modify">&nbsp;</span>
<a class="file" href="#diff-1">gopmweb.go</a>
</li>
<li>
<div class="diff-counter count pull-right">
<span class="add" data-line="666">666</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="44">44</span>
</div>
<span class="status add" data-toggle="tooltip" data-placement="right" title="add">&nbsp;</span>
<a class="file" href="#diff-2">static/img/favicon.png</a>
</li>
<li>
<span class="status del" data-toggle="tooltip" data-placement="right" title="delete">&nbsp;</span>
<a class="file" href="#diff-2">static/img/favicon.png</a>
</li>
<li>
<span class="status rename" data-toggle="tooltip" data-placement="right" title="rename">&nbsp;</span>
<a class="file" href="#diff-2">static/img/favicon.png</a>
</li>
</ol>
</div>
<div class="panel panel-default diff-file-box diff-box file-content" id="diff-1">
<div class="panel-heading">
<div class="diff-counter count pull-left">
<span class="add" data-line="1">BIN</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="0"></span>
</div>
<a class="btn btn-default btn-sm pull-right" href="#">View File</a>
<span class="file">data/test/bson_test/simple_type.png</span>
</div>
<div class="panel-body file-body file-code code-view code-bin">
<table>
<tbody>
<tr class="text-center"><td><img src="http://1.gravatar.com/avatar/f72f7454ce9d710baa506394f68f4132?s=200" alt=""/></td></tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default diff-file-box diff-box file-content" id="diff-2">
<div class="panel-heading">
<div class="diff-counter count pull-left">
<span class="add" data-line="30">+ 30</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="4">- 4</span>
</div>
<a class="btn btn-default btn-sm pull-right" href="#">View File</a>
<span class="file">data/test/bson_test/simple_type.go</span>
</div>
<div class="panel-body file-body file-code code-view code-diff">
<table>
<tbody>
<tr class="same-code nl-1 ol-1">
<td class="lines-num lines-num-old">
<span rel="L1">1</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">1</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-2 ol-2">
<td class="lines-num lines-num-old">
<span rel="L1">2</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">2</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-3 ol-3">
<td class="lines-num lines-num-old">
<span rel="L3">3</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L3">3</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="add-code nl-4 ol-0">
<td class="lines-num lines-num-old">
<span rel="add">+</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L4">4</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="add-code nl-5 ol-0">
<td class="lines-num lines-num-old">
<span rel="add">+</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L5">5</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-4">
<td class="lines-num lines-num-old">
<span rel="L4">4</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-5">
<td class="lines-num lines-num-old">
<span rel="L5">5</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-6">
<td class="lines-num lines-num-old">
<span rel="L6">6</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-7">
<td class="lines-num lines-num-old">
<span rel="L7">7</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-6 ol-8">
<td class="lines-num lines-num-old">
<span rel="L8">8</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L6">6</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-7 ol-9">
<td class="lines-num lines-num-old">
<span rel="L1">9</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">7</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-8 ol-10">
<td class="lines-num lines-num-old">
<span rel="L1">10</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">8</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default diff-file-box diff-box file-content">
<div class="panel-heading">
<div class="diff-counter count pull-left">
<span class="add" data-line="2">+ 2</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="4">- 4</span>
</div>
<a class="btn btn-default btn-sm pull-right" href="#">View File</a>
<span class="file">data/test/bson_test/simple_type.go</span>
</div>
<div class="panel-body file-body file-code code-view code-diff">
<table>
<tbody>
<tr class="same-code nl-1 ol-1">
<td class="lines-num lines-num-old">
<span rel="L1">1</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">1</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-2 ol-2">
<td class="lines-num lines-num-old">
<span rel="L1">2</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">2</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-3 ol-3">
<td class="lines-num lines-num-old">
<span rel="L3">3</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L3">3</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="add-code nl-4 ol-0">
<td class="lines-num lines-num-old">
<span rel="add">+</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L4">4</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="add-code nl-5 ol-0">
<td class="lines-num lines-num-old">
<span rel="add">+</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L5">5</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-4">
<td class="lines-num lines-num-old">
<span rel="L4">4</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-5">
<td class="lines-num lines-num-old">
<span rel="L5">5</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-6">
<td class="lines-num lines-num-old">
<span rel="L6">6</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="del-code nl-0 ol-7">
<td class="lines-num lines-num-old">
<span rel="L7">7</span>
</td>
<td class="lines-num lines-num-new">
<span rel="del">-</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-6 ol-8">
<td class="lines-num lines-num-old">
<span rel="L8">8</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L6">6</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-7 ol-9">
<td class="lines-num lines-num-old">
<span rel="L1">9</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">7</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
<tr class="same-code nl-8 ol-10">
<td class="lines-num lines-num-old">
<span rel="L1">10</span>
</td>
<td class="lines-num lines-num-new">
<span rel="L1">8</span>
</td>
<td class="lines-code">
<pre> "github.com/youtube/vitess/go/bson"</pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default diff-file-box diff-box file-content">
<div class="panel-heading">
<div class="diff-counter count pull-left">
<span class="add" data-line="0">BIN</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="1"></span>
</div>
<a class="btn btn-default btn-sm pull-right" href="#">View File</a>
<span class="file">data/test/bson_test/simple_type.png</span>
</div>
<div class="panel-body file-body file-code code-view code-bin">
<table>
<tbody>
<tr class="text-center"><td><img src="http://1.gravatar.com/avatar/f72f7454ce9d710baa506394f68f4132?s=200" alt=""/></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}

4
web.go
View file

@ -156,8 +156,8 @@ func runWeb(*cli.Context) {
}, ignSignIn, middleware.RepoAssignment(true)) }, ignSignIn, middleware.RepoAssignment(true))
// TODO: implement single commit page // TODO: implement single commit page
// m.Get("/:username/:reponame/commit/:commitid/**", ignSignIn, middleware.RepoAssignment(true), repo.Single) m.Get("/:username/:reponame/commit/:commitid/**", ignSignIn, middleware.RepoAssignment(true), repo.Diff)
// m.Get("/:username/:reponame/commit/:commitid", ignSignIn, middleware.RepoAssignment(true), repo.Single) m.Get("/:username/:reponame/commit/:commitid", ignSignIn, middleware.RepoAssignment(true), repo.Diff)
m.Group("/:username", func(r martini.Router) { m.Group("/:username", func(r martini.Router) {
r.Get("/:reponame", middleware.RepoAssignment(true), repo.Single) r.Get("/:reponame", middleware.RepoAssignment(true), repo.Single)