playground
/
gogs
mirror of https://github.com/gogits/gogs.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Implement Unified Diff-View

pull/2288/head
Kim "BKC" Carlbäcker 9 years ago
parent
09c981846b
commit
d78642e019
4 changed files with 200 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      public/css/gogs.css
  2. 67
      templates/repo/diff_box.tmpl
  3. 74
      templates/repo/diff_box_inline.tmpl
  4. 97
      templates/repo/diff_box_unified.tmpl

18
public/css/gogs.css
Unescape View File

@ -724,6 +724,11 @@ img {
}
pre {
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
white-space: pre-wrap; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
pre.raw {
padding: 7px 12px;
@ -2343,6 +2348,13 @@ footer .container .links > *:first-child {
border-right: 1px solid #d4d4d5;
padding: 0 5px;
}
.repository .diff-file-box .code-diff tbody tr.tag-code td {
width: 50%;
}
.repository .diff-file-box .code-diff tbody tr.tag-code td.lines-num span.fold {
display: block;
text-align: center;
}
.repository .diff-file-box .code-diff tbody tr.tag-code td,
.repository .diff-file-box .code-diff tbody tr.tag-code pre {
background-color: #F0F0F0 !important;
@ -2350,11 +2362,17 @@ footer .container .links > *:first-child {
padding-top: 4px;
padding-bottom: 4px;
}
.repository .diff-file-box .code-diff tbody tr.del-code td {
width: 50%;
}
.repository .diff-file-box .code-diff tbody tr.del-code td,
.repository .diff-file-box .code-diff tbody tr.del-code pre {
background-color: #ffecec !important;
border-color: #f1c0c0 !important;
}
.repository .diff-file-box .code-diff tbody tr.add-code td {
width: 50%;
}
.repository .diff-file-box .code-diff tbody tr.add-code td,
.repository .diff-file-box .code-diff tbody tr.add-code pre {
background-color: #eaffea !important;

67
templates/repo/diff_box.tmpl
Unescape View File

@ -6,7 +6,11 @@
<i class="fa fa-retweet"></i>
{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
<div class="ui right">
<a class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
<div class="ui buttons">
<button class="ui tiny basic toggle button" data-target="#inline">Inline</button>
<button class="ui tiny basic toggle button" data-target="#unified">Unified</button>
</div>
<button class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</button>
</div>
</div>
<ol class="detail-files hide" id="diff-files">
@ -32,63 +36,10 @@
</ol>
</div>
{{range $i, $file := .Diff.Files}}
<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
<h4 class="ui top attached normal header">
<div class="diff-counter count ui left">
{{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}}
<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
{{end}}
</div>
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
<div class="ui right">
{{if $file.IsDeleted}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{else}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{end}}
<div id="unified" class="hide">
{{ template "repo/diff_box_unified.tmpl" . }}
</div>
</h4>
<div class="ui attached table segment">
{{if not $file.IsRenamed}}
{{$isImage := (call $.IsImageFile $file.Name)}}
{{if and $isImage}}
<div class="center">
<img src="{{$.RawPath}}/{{EscapePound .Name}}">
<div if="inline" class="">
{{ template "repo/diff_box_inline.tmpl" . }}
</div>
{{else}}
<div class="file-body file-code code-view code-diff">
<table>
<tbody>
{{range .Sections}}
{{range $k, $line := .Lines}}
<tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
<td class="lines-num lines-num-old">
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
</td>
<td class="lines-num lines-num-new">
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
</td>
<td class="lines-code">
<pre>{{$line.Content}}</pre>
</td>
</tr>
{{end}}
{{end}}
</tbody>
</table>
</div>
{{end}}
{{end}}
</div>
</div>
<br>
{{end}}
{{end}}

74
templates/repo/diff_box_inline.tmpl
Unescape View File

@ -0,0 +1,74 @@
{{range $i, $file := .Diff.Files}}
<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
<h4 class="ui top attached normal header">
<div class="diff-counter count ui left">
{{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}}
<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
{{end}}
</div>
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
<div class="ui right">
{{if $file.IsDeleted}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{else}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{end}}
</div>
</h4>
<div class="ui attached table segment">
{{if not $file.IsRenamed}}
{{$isImage := (call $.IsImageFile $file.Name)}}
{{if and $isImage}}
<div class="center">
<img src="{{$.RawPath}}/{{EscapePound .Name}}">
</div>
{{else}}
<div class="file-body file-code code-view code-diff">
<table>
<tbody>
{{range $j, $section := .Sections}}
{{range $k, $line := .Lines}}
<tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
{{if eq .Type 4}}
<td colspan="2" class="lines-num">
{{if gt $j 0}}<span class="fold octicon octicon-fold"></span>{{end}}
</td>
{{else}}
<td class="lines-num lines-num-old">
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
</td>
<td class="lines-num lines-num-new">
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
</td>
{{end}}
<td class="lines-code">
<pre>{{$line.Content}}</pre>
</td>
</tr>
{{end}}
{{end}}
</tbody>
</table>
</div>
<script>
(function() {
$('tr.del-code').each(function() {
if($(this).next().hasClass('add-code')) {
// $($(this).children()[3]).replaceWith($(this).next().children()[3]);
}
});
}());
</script>
{{end}}
{{end}}
</div>
</div>
<br>
{{end}}

97
templates/repo/diff_box_unified.tmpl
Unescape View File

@ -0,0 +1,97 @@
{{range $i, $file := .Diff.Files}}
<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
<h4 class="ui top attached normal header">
<div class="diff-counter count ui left">
{{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}}
<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
<span class="bar">
<span class="pull-left add"></span>
<span class="pull-left del"></span>
</span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
{{end}}
</div>
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
<div class="ui right">
{{if $file.IsDeleted}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{else}}
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
{{end}}
</div>
</h4>
<div class="ui attached table segment">
{{if not $file.IsRenamed}}
{{$isImage := (call $.IsImageFile $file.Name)}}
{{if and $isImage}}
<div class="center">
<img src="{{$.RawPath}}/{{EscapePound .Name}}">
</div>
{{else}}
<div class="file-body file-code code-view code-diff">
<table>
<tbody>
{{range $j, $section := .Sections}}
{{range $k, $line := .Lines}}
<tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
{{if eq .Type 4}}
<td class="lines-num lines-num-old">
<span class="{{if gt $j 0}}fold octicon octicon-fold{{end}}"></span>
</td>
<td class="lines-code">
<pre>{{$line.Content}}</pre>
</td>
<td class="lines-num lines-num-old">
<span class="{{if gt $j 0}}fold octicon octicon-fold{{end}}"></span>
</td>
<td class="lines-code">
<pre>{{$line.Content}}</pre>
</td>
{{else}}
<td class="lines-num lines-num-old">
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
</td>
<td class="lines-code">
<pre>{{if $line.LeftIdx}}{{$line.Content}}{{end}}</pre>
</td>
<td class="lines-num lines-num-new">
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
</td>
<td class="lines-code">
<pre>{{if $line.RightIdx}}{{$line.Content}}{{end}}</pre>
</td>
{{end}}
</tr>
{{end}}
{{end}}
</tbody>
</table>
</div>
<script>
(function() {
$('.add-code').each(function() {
var prev = $(this).prev();
if(prev.is('.del-code')) {
while(prev.prev().is('.del-code') && prev.prev().text().trim() !== '') {
prev = prev.prev();
}
console.log("done");
prev.children().eq(3).html($(this).children().eq(3).html());
prev.children().eq(2).html($(this).children().eq(2).html());
prev.children().eq(2).attr('style', 'background-color: #eaffea !important');
prev.children().eq(2).children().eq(0).attr('style', 'background-color: #eaffea !important');
prev.children().eq(3).attr('style', 'background-color: #eaffea !important');
prev.children().eq(3).children().eq(0).attr('style', 'background-color: #eaffea !important');
$(this).remove();
}
});
}());
</script>
{{end}}
{{end}}
</div>
</div>
<br>
{{end}}
Write Preview
Loading…
Cancel
Save