Implement Split Diff-View

- Unified/Inline Diff-View Selectable

3 files changed, 177 insertions, 58 deletions

diff --git a/templates/repo/diff_box.tmpl b/templates/repo/diff_box.tmpl
index 036d4a6491..c408fd492b 100644
--- a/templates/repo/diff_box.tmpl
+++ b/templates/repo/diff_box.tmpl
@@ -6,6 +6,7 @@
 			<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" 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>
 			</div>
 		</div>
@@ -32,63 +33,9 @@
 		</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>
-			</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 .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>
+	{{if .Style}}
+		{{ template "repo/diff_box_split" . }}
+	{{else}}
+		{{ template "repo/diff_box_inline" . }}
 	{{end}}
 {{end}}
diff --git a/templates/repo/diff_box_inline.tmpl b/templates/repo/diff_box_inline.tmpl
new file mode 100644
index 0000000000..2dea013838
--- /dev/null
+++ b/templates/repo/diff_box_inline.tmpl
@@ -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}}
diff --git a/templates/repo/diff_box_split.tmpl b/templates/repo/diff_box_split.tmpl
new file mode 100644
index 0000000000..0234fd1301
--- /dev/null
+++ b/templates/repo/diff_box_split.tmpl
@@ -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}}