mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Fix code view (diff) broken layout (#23096) (#23918)

Browse Source 
Backport #23096 by @wxiaoguang

Close #22911

I think it's ready for review now, feel free to test it, welcome to help
to improve.

### Before


![image](https://user-images.githubusercontent.com/2114189/220958734-06871615-b498-4143-8449-3d443f08ffaa.png)

### After


![image](https://user-images.githubusercontent.com/2114189/220958621-0dce2728-57b8-4a1f-ac5d-48c7c2d42f5c.png)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
pull/23921/head
Giteabot 2 years ago committed by GitHub
parent c34f7cdb1a
commit 7c180ff8eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 38 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      templates/repo/diff/blob_excerpt.tmpl
  2. 30
      templates/repo/diff/section_split.tmpl
  3. 8
      templates/repo/diff/section_unified.tmpl
  4. 2
      templates/repo/settings/lfs_file.tmpl
  5. 10
      web_src/css/repository.css
  6. 6
      web_src/css/review.css
  7. 9
      web_src/js/features/repo-issue.js

6
templates/repo/diff/blob_excerpt.tmpl
Unescape View File

@ -19,14 +19,14 @@
</a> </a>
{{end}} {{end}}
</td> </td>
<td colspan="5" class="lines-code lines-code-old ">{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}{{/* <td colspan="7" class="lines-code lines-code-old ">{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}{{/*
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}</td> */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}</td>
{{else}} {{else}}
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td> <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td> <td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td> <td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
<td class="blob-excerpt lines-code lines-code-old halfwidth">{{/* <td class="blob-excerpt lines-code lines-code-old">{{/*
*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* */}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
*/}}<code class="code-inner"></code>{{/* */}}<code class="code-inner"></code>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -34,7 +34,7 @@
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td> <td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td> <td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td> <td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
<td class="blob-excerpt lines-code lines-code-new halfwidth">{{/* <td class="blob-excerpt lines-code lines-code-new">{{/*
*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/* */}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
*/}}<code class="code-inner"></code>{{/* */}}<code class="code-inner"></code>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*

30
templates/repo/diff/section_split.tmpl
Unescape View File

@ -1,4 +1,14 @@
{{$file := .file}} {{$file := .file}}
<colgroup>
<col width="50">
<col width="10">
<col width="10">
<col>
<col width="50">
<col width="10">
<col width="10">
<col>
</colgroup>
{{range $j, $section := $file.Sections}} {{range $j, $section := $file.Sections}}
{{range $k, $line := $section.Lines}} {{range $k, $line := $section.Lines}}
{{$hasmatch := ne $line.Match -1}} {{$hasmatch := ne $line.Match -1}}
@ -33,7 +43,7 @@
<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td> <td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td>
<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> <td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> <td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<td class="lines-code lines-code-old halfwidth del-code">{{/* <td class="lines-code lines-code-old del-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
@ -48,7 +58,7 @@
<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td> <td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td>
<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> <td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new halfwidth add-code">{{/* <td class="lines-code lines-code-new add-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/* */}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
@ -65,7 +75,7 @@
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td> <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> <td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-old halfwidth">{{/* <td class="lines-code lines-code-old">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
@ -80,7 +90,7 @@
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td> <td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td> <td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new halfwidth">{{/* <td class="lines-code lines-code-new">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/* */}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
@ -98,9 +108,6 @@
{{$match := index $section.Lines $line.Match}} {{$match := index $section.Lines $line.Match}}
{{if or (gt (len $line.Comments) 0) (gt (len $match.Comments) 0)}} {{if or (gt (len $line.Comments) 0) (gt (len $match.Comments) 0)}}
<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}"> <tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}">
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-left" colspan="4"> <td class="add-comment-left" colspan="4">
{{if gt (len $line.Comments) 0}} {{if gt (len $line.Comments) 0}}
{{if eq $line.GetCommentSide "previous"}} {{if eq $line.GetCommentSide "previous"}}
@ -113,9 +120,6 @@
{{end}} {{end}}
{{end}} {{end}}
</td> </td>
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-right" colspan="4"> <td class="add-comment-right" colspan="4">
{{if eq $line.GetCommentSide "proposed"}} {{if eq $line.GetCommentSide "proposed"}}
{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}} {{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
@ -130,9 +134,6 @@
{{end}} {{end}}
{{else if gt (len $line.Comments) 0}} {{else if gt (len $line.Comments) 0}}
<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}"> <tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}">
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-left" colspan="4"> <td class="add-comment-left" colspan="4">
{{if gt (len $line.Comments) 0}} {{if gt (len $line.Comments) 0}}
{{if eq $line.GetCommentSide "previous"}} {{if eq $line.GetCommentSide "previous"}}
@ -140,9 +141,6 @@
{{end}} {{end}}
{{end}} {{end}}
</td> </td>
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-right" colspan="4"> <td class="add-comment-right" colspan="4">
{{if eq $line.GetCommentSide "proposed"}} {{if eq $line.GetCommentSide "proposed"}}
{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}} {{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}

8
templates/repo/diff/section_unified.tmpl
Unescape View File

@ -1,4 +1,11 @@
{{$file := .file}} {{$file := .file}}
<colgroup>
<col width="50">
<col width="50">
<col width="10">
<col width="10">
<col>
</colgroup>
{{range $j, $section := $file.Sections}} {{range $j, $section := $file.Sections}}
{{range $k, $line := $section.Lines}} {{range $k, $line := $section.Lines}}
<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{DiffLineTypeToStr .GetType}}"> <tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{DiffLineTypeToStr .GetType}}">
@ -49,7 +56,6 @@
</tr> </tr>
{{if gt (len $line.Comments) 0}} {{if gt (len $line.Comments) 0}}
<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}"> <tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}">
<td colspan="3" class="lines-num"></td>
<td class="add-comment-left add-comment-right" colspan="5"> <td class="add-comment-left add-comment-right" colspan="5">
{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}} {{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
</td> </td>

2
templates/repo/settings/lfs_file.tmpl
Unescape View File

@ -48,7 +48,7 @@
<td><strong>{{.locale.Tr "repo.file_too_large"}}</strong></td> <td><strong>{{.locale.Tr "repo.file_too_large"}}</strong></td>
{{else}} {{else}}
<td class="lines-num">{{.LineNums}}</td> <td class="lines-num">{{.LineNums}}</td>
<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol class="linenums">{{.FileContent}}</ol></code></pre></td> <td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol>{{.FileContent}}</ol></code></pre></td>
{{end}} {{end}}
</tr> </tr>
</tbody> </tbody>

10
web_src/css/repository.css
Unescape View File

@ -1801,8 +1801,14 @@
padding: 0 !important; padding: 0 !important;
} }
.repository .diff-file-box .code-diff tbody tr td.halfwidth { .repository .diff-file-box .code-diff table {
width: 49%; /* halfwidth is used in split view - and in that case, 1% of each */ table-layout: fixed;
}
.repository .diff-file-box .code-diff tbody tr td.lines-num,
.repository .diff-file-box .code-diff tbody tr td.lines-escape,
.repository .diff-file-box .code-diff tbody tr td.lines-type-marker {
white-space: nowrap;
} }
.repository .diff-file-box .code-diff tbody tr td.center { .repository .diff-file-box .code-diff tbody tr td.center {

6
web_src/css/review.css
Unescape View File

@ -53,12 +53,6 @@
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.add-comment .lines-num,
.add-comment .lines-escape,
.add-comment .lines-type-marker {
display: none;
}
.show-outdated:hover, .show-outdated:hover,
.hide-outdated:hover { .hide-outdated:hover {
text-decoration: underline; text-decoration: underline;

9
web_src/js/features/repo-issue.js
Unescape View File

@ -548,18 +548,9 @@ export function initRepoPullRequestReview() {
ntr = $(` ntr = $(`
<tr class="add-comment" data-line-type="${lineType}"> <tr class="add-comment" data-line-type="${lineType}">
${isSplit ? ` ${isSplit ? `
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-left" colspan="4"></td> <td class="add-comment-left" colspan="4"></td>
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="lines-type-marker"></td>
<td class="add-comment-right" colspan="4"></td> <td class="add-comment-right" colspan="4"></td>
` : ` ` : `
<td class="lines-num"></td>
<td class="lines-num"></td>
<td class="lines-escape"></td>
<td class="add-comment-left add-comment-right" colspan="5"></td> <td class="add-comment-left add-comment-right" colspan="5"></td>
`} `}
</tr>`); </tr>`);

Write Preview
Loading…
Cancel
Save