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

Implement Split Diff-View 

- Unified/Inline Diff-View Selectable
pull/2296/head
Kim "BKC" Carlbäcker 9 years ago
parent
7392b6a755
commit
0df39b33eb
7 changed files with 243 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      public/css/gogs.css
  2. 7
      public/less/_base.less
  3. 24
      public/less/_repository.less
  4. 2
      routers/repo/commit.go
  5. 61
      templates/repo/diff_box.tmpl
  6. 74
      templates/repo/diff_box_inline.tmpl
  7. 98
      templates/repo/diff_box_split.tmpl

33
public/css/gogs.css
Unescape View File

@ -735,6 +735,18 @@ pre.raw {
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
} }
pre.wrap {
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+ */
}
.full.height { .full.height {
padding: 0; padding: 0;
margin: 0 0 -80px 0; margin: 0 0 -80px 0;
@ -2325,6 +2337,10 @@ footer .container .links > *:first-child {
background: #fafafa; background: #fafafa;
width: 1%; width: 1%;
} }
.repository .diff-file-box .file-body.file-code .lines-num span.fold {
display: block;
text-align: center;
}
.repository .diff-file-box .file-body.file-code .lines-num-old { .repository .diff-file-box .file-body.file-code .lines-num-old {
border-right: 1px solid #DDD; border-right: 1px solid #DDD;
} }
@ -2350,16 +2366,33 @@ footer .container .links > *:first-child {
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
} }
.repository .diff-file-box .code-diff tbody tr.tag-code td.halfwidth {
width: 50%;
}
.repository .diff-file-box .code-diff tbody tr.del-code td.add-code {
background-color: #eaffea !important;
border-color: #c1e9c1 !important;
}
.repository .diff-file-box .code-diff tbody tr.del-code td.add-code pre {
background-color: #eaffea !important;
border-color: #c1e9c1 !important;
}
.repository .diff-file-box .code-diff tbody tr.del-code td, .repository .diff-file-box .code-diff tbody tr.del-code td,
.repository .diff-file-box .code-diff tbody tr.del-code pre { .repository .diff-file-box .code-diff tbody tr.del-code pre {
background-color: #ffecec !important; background-color: #ffecec !important;
border-color: #f1c0c0 !important; border-color: #f1c0c0 !important;
} }
.repository .diff-file-box .code-diff tbody tr.del-code td.halfwidth {
width: 50%;
}
.repository .diff-file-box .code-diff tbody tr.add-code td, .repository .diff-file-box .code-diff tbody tr.add-code td,
.repository .diff-file-box .code-diff tbody tr.add-code pre { .repository .diff-file-box .code-diff tbody tr.add-code pre {
background-color: #eaffea !important; background-color: #eaffea !important;
border-color: #c1e9c1 !important; border-color: #c1e9c1 !important;
} }
.repository .diff-file-box .code-diff tbody tr.add-code td.halfwidth {
width: 50%;
}
.repository .diff-file-box.file-content img { .repository .diff-file-box.file-content img {
max-width: 100%; max-width: 100%;
padding: 5px 5px 0 5px; padding: 5px 5px 0 5px;

7
public/less/_base.less
Unescape View File

@ -19,6 +19,13 @@ pre {
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
} }
&.wrap {
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+ */
}
} }
.full.height { .full.height {
padding: 0; padding: 0;

24
public/less/_repository.less
Unescape View File

@ -668,6 +668,11 @@
color: #A7A7A7; color: #A7A7A7;
background: #fafafa; background: #fafafa;
width: 1%; width: 1%;
span.fold {
display: block;
text-align: center;
}
} }
.lines-num-old { .lines-num-old {
border-right: 1px solid #DDD; border-right: 1px solid #DDD;
@ -698,6 +703,9 @@
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
} }
td.halfwidth {
width: 50%;
}
// td.selected-line, td.selected-line pre { // td.selected-line, td.selected-line pre {
// background-color: #ffffdd !important; // background-color: #ffffdd !important;
// } // }
@ -708,10 +716,23 @@
// } // }
// } // }
&.del-code { &.del-code {
td.add-code {
background-color: #eaffea !important;
border-color: #c1e9c1 !important;
pre {
background-color: #eaffea !important;
border-color: #c1e9c1 !important;
}
}
td, pre { td, pre {
background-color: #ffecec !important; background-color: #ffecec !important;
border-color: #f1c0c0 !important; border-color: #f1c0c0 !important;
} }
td.halfwidth {
width: 50%;
}
// td.selected-line, td.selected-line pre { // td.selected-line, td.selected-line pre {
// background-color: #ffffdd !important; // background-color: #ffffdd !important;
// } // }
@ -721,6 +742,9 @@
background-color: #eaffea !important; background-color: #eaffea !important;
border-color: #c1e9c1 !important; border-color: #c1e9c1 !important;
} }
td.halfwidth {
width: 50%;
}
// td.selected-line, td.selected-line pre { // td.selected-line, td.selected-line pre {
// background-color: #ffffdd !important; // background-color: #ffffdd !important;
// } // }

2
routers/repo/commit.go
Unescape View File

@ -168,6 +168,7 @@ func Diff(ctx *middleware.Context) {
} }
} }
ctx.Data["Style"] = ctx.Query("style") == "split"
ctx.Data["Username"] = userName ctx.Data["Username"] = userName
ctx.Data["Reponame"] = repoName ctx.Data["Reponame"] = repoName
ctx.Data["IsImageFile"] = commit.IsImageFile ctx.Data["IsImageFile"] = commit.IsImageFile
@ -213,6 +214,7 @@ func CompareDiff(ctx *middleware.Context) {
} }
commits = models.ValidateCommitsWithEmails(commits) commits = models.ValidateCommitsWithEmails(commits)
ctx.Data["Style"] = ctx.Query("style") == "split"
ctx.Data["CommitRepoLink"] = ctx.Repo.RepoLink ctx.Data["CommitRepoLink"] = ctx.Repo.RepoLink
ctx.Data["Commits"] = commits ctx.Data["Commits"] = commits
ctx.Data["CommitCount"] = commits.Len() ctx.Data["CommitCount"] = commits.Len()

61
templates/repo/diff_box.tmpl
Unescape View File

@ -6,6 +6,7 @@
<i class="fa fa-retweet"></i> <i class="fa fa-retweet"></i>
{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
<div class="ui right"> <div class="ui right">
<a class="ui tiny basic toggle button" href="?style={{if .Style}}inline{{else}}split{{end}}">{{ if .Style }}Inline{{else}}Split{{end}}</a>
<a class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a> <a class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
</div> </div>
</div> </div>
@ -32,63 +33,9 @@
</ol> </ol>
</div> </div>
{{range $i, $file := .Diff.Files}} {{if .Style}}
<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}"> {{ template "repo/diff_box_split" . }}
<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}} {{else}}
<div class="file-body file-code code-view code-diff"> {{ template "repo/diff_box_inline" . }}
<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}}
{{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}}

98
templates/repo/diff_box_split.tmpl
Unescape View File

@ -0,0 +1,98 @@
{{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 halfwidth">
<pre class="wrap">{{$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 halfwidth">
<pre class="wrap">{{$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 halfwidth">
<pre class="wrap">{{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 halfwidth">
<pre class="wrap">{{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') && prev.children().eq(3).text().trim() === '') {
while(prev.prev().is('.del-code') && prev.prev().children().eq(3).text().trim() === '') {
prev = prev.prev();
}
prev.children().eq(3).html($(this).children().eq(3).html());
prev.children().eq(2).html($(this).children().eq(2).html());
prev.children().eq(3).addClass('add-code');
prev.children().eq(2).addClass('add-code');
// 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