Web editor: improve edit file

3 files changed, 220 insertions, 0 deletions

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
new file mode 100644
index 0000000000..4f6c70a328
--- /dev/null
+++ b/templates/repo/diff/box.tmpl
@@ -0,0 +1,152 @@
+{{if .DiffNotAvailable}}
+	<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
+{{else}}
+	<div class="diff-detail-box diff-box">
+		<div>
+			<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>
+		<ol class="detail-files hide" id="diff-files">
+			{{range .Diff.Files}}
+				<li>
+					<div class="diff-counter count pull-right">
+						{{if not .IsBin}}
+							<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>
+						{{else}}
+							<span>{{$.i18n.Tr "repo.diff.bin"}}</span>
+						{{end}}
+					</div>
+					<!-- todo finish all file status, now modify, add, delete and rename -->
+					<span class="status {{DiffTypeToStr .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
+					<a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
+				</li>
+			{{end}}
+		</ol>
+	</div>
+
+	{{range $i, $file := .Diff.Files}}
+		{{if $file.IsIncomplete}}
+			<div class="diff-file-box diff-box file-content">
+				<h4 class="ui top attached normal header">
+					{{$.i18n.Tr "repo.diff.file_suppressed"}}
+					<div class="diff-counter count ui left">
+						{{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">{{$file.Name}}</span>
+				</h4>
+			</div>
+		{{else}}
+			<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" 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>
+					{{if not $file.IsSubmodule}}
+						<div class="ui right">
+							{{if $file.IsDeleted}}
+								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+							{{else}}
+								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+							{{end}}
+						</div>
+					{{end}}
+				</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>
+										{{if $.IsSplitStyle}}
+											{{$highlightClass := $file.GetHighlightClass}}
+											{{range $j, $section := $file.Sections}}
+												{{range $k, $line := $section.Lines}}
+													<tr class="{{DiffLineTypeToStr .GetType}}-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><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></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><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
+														</td>
+													</tr>
+												{{end}}
+											{{end}}
+										{{else}}
+											{{template "repo/diff/section_unified" .}}
+										{{end}}
+									</tbody>
+								</table>
+							</div>
+						{{end}}
+					{{end}}
+				</div>
+			</div>
+		{{end}}
+	<br>
+	{{end}}
+
+	{{if .Diff.IsIncomplete}}
+		<div class="diff-file-box diff-box file-content">
+			<h4 class="ui top attached normal header">
+				{{$.i18n.Tr "repo.diff.too_many_files"}}
+			</h4>
+		</div>
+	{{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}}
diff --git a/templates/repo/diff/page.tmpl b/templates/repo/diff/page.tmpl
new file mode 100644
index 0000000000..0a35a80427
--- /dev/null
+++ b/templates/repo/diff/page.tmpl
@@ -0,0 +1,45 @@
+{{template "base/head" .}}
+<div class="repository diff">
+	{{template "repo/header" .}}
+	<div class="ui container {{if .IsSplitStyle}}fluid padded{{end}}">
+		{{if .IsDiffCompare }}
+			{{template "repo/commits_table" .}}
+		{{else}}
+			<div class="ui top attached info clearing segment">
+				<a class="ui floated right blue tiny button" href="{{EscapePound .SourcePath}}">
+					{{.i18n.Tr "repo.diff.browse_source"}}
+				</a>
+				{{RenderCommitMessage true .Commit.Message $.RepoLink $.Repository.ComposeMetas}}
+			</div>
+			<div class="ui attached info segment">
+				{{if .Author}}
+					<img class="ui avatar image" src="{{.Author.RelAvatarLink}}" />
+					<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a> {{if .IsSigned}}<{{.Commit.Author.Email}}>{{end}}
+				{{else}}
+					<img class="ui avatar image" src="{{AvatarLink .Commit.Author.Email}}" />
+					<strong>{{.Commit.Author.Name}}</strong>
+				{{end}}
+				<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
+				<div class="ui right">
+					<div class="ui horizontal list">
+						{{if .Parents}}
+							<div class="item">
+								{{.i18n.Tr "repo.diff.parent"}}
+							</div>
+							<div class="item">
+								{{range .Parents}}
+									<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{.}}">{{ShortSha .}}</a>
+								{{end}}
+							</div>
+						{{end}}
+						<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
+						<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
+					</div>
+				</div>
+			</div>
+		{{end}}
+
+		{{template "repo/diff/box" .}}
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
new file mode 100644
index 0000000000..ee66b6dc9a
--- /dev/null
+++ b/templates/repo/diff/section_unified.tmpl
@@ -0,0 +1,23 @@
+{{$file := .}}
+{{$highlightClass := $file.GetHighlightClass}}
+{{range $j, $section := $file.Sections}}
+	{{range $k, $line := $section.Lines}}
+		<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
+			{{if eq .GetType 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><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
+			</td>
+		</tr>
+	{{end}}
+{{end}}
\ No newline at end of file