Merge pull request #2296 from bkcsoft/feature/split-diff

Implement Split Diff-View

conf/locale/locale_en-US.ini

@@ -668,6 +668,8 @@ diff.parent = parent
 diff.commit = commit
 diff.data_not_available = Diff Data Not Available.
 diff.show_diff_stats = Show Diff Stats
+diff.show_split_view = Split View
+diff.show_unified_view = Unified View
 diff.stats_desc = <strong> %d changed files</strong> with <strong>%d additions</strong> and <strong>%d deletions</strong>
 diff.bin = BIN
 diff.view_file = View File

public/css/gogs.css

@@ -736,6 +736,11 @@ pre.raw {
   line-height: 1.5;
   overflow: auto;
 }
+pre.wrap {
+  white-space: pre-wrap;
+  /* CSS 3 */
+  word-break: break-word;
+}
 .full.height {
   padding: 0;
   margin: 0 0 -80px 0;
@@ -2326,6 +2331,10 @@ footer .container .links > *:first-child {
   background: #fafafa;
   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 {
   border-right: 1px solid #DDD;
 }
@@ -2351,16 +2360,33 @@ footer .container .links > *:first-child {
   padding-top: 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 pre {
   background-color: #ffecec !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 pre {
   background-color: #eaffea !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 {
   max-width: 100%;
   padding: 5px 5px 0 5px;

public/less/_base.less

@@ -20,6 +20,13 @@ pre {
 		line-height: 1.5;
 		overflow: auto;
 	}
+	&.wrap {
+		white-space: pre-wrap;       /* CSS 3 */
+//		white-space: -moz-normal;  /* Mozilla, since 1999 */
+//		white-space: -normal;      /* Opera 4-6 */
+//		white-space: -o-normal;    /* Opera 7 */
+		word-break: break-word;
+	}
 }
 .full.height {
 	padding: 0;

public/less/_repository.less

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

routers/repo/commit.go

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

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 .IsSplitStyle}}unified{{else}}split{{end}}">{{ if .IsSplitStyle }}{{.i18n.Tr "repo.diff.show_unified_view"}}{{else}}{{.i18n.Tr "repo.diff.show_split_view"}}{{end}}</a>
 				<a class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
 			</div>
 		</div>
@@ -67,21 +68,48 @@
 						<div class="file-body file-code code-view code-diff">
 							<table>
 								<tbody>
-									{{range .Sections}}
+									{{if $.IsSplitStyle}}
+										{{range $j, $section := .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-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>
+												</tr>
+											{{end}}
+										{{end}}
+									{{else}}
+										{{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}}
+									{{end}}
 								</tbody>
 							</table>
 						</div>
@@ -91,4 +119,23 @@
 		</div>
 	<br>
 	{{end}}
+	{{if .IsSplitStyle}}
+		<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');
+					$(this).remove();
+				}
+			});
+		}());
+		</script>
+	{{end}}
 {{end}}