Skip to content

Commit c93eefb

Browse files
silverwindsilverwind
authored
Diff color enhancements, add line number background (#30670)
1. Bring back the background on line numbers. This feature was lost a long time ago. <img width="457" alt="Screenshot 2024-04-24 at 01 36 09" src="https://github.com/go-gitea/gitea/assets/115237/76a7f5a9-c22a-4c72-9f0a-ebf16a66513e"> <img width="473" alt="Screenshot 2024-04-24 at 01 22 47" src="https://github.com/go-gitea/gitea/assets/115237/eef06cf2-f1b9-40e3-947d-dd5852ec12a3"> <img width="457" alt="Screenshot 2024-04-24 at 02 13 18" src="https://github.com/go-gitea/gitea/assets/115237/59e317d4-76a7-468c-8a19-10d88c675cc3"> <img width="459" alt="Screenshot 2024-04-24 at 01 23 21" src="https://github.com/go-gitea/gitea/assets/115237/f1a46f8d-8846-4d78-a9d7-8b7dc18ac6e4"> 2. Expanded lines background is now full-line, including line numbers: <img width="1303" alt="Screenshot 2024-04-24 at 01 37 12" src="https://github.com/go-gitea/gitea/assets/115237/271eefe2-0869-424e-93fb-ccd8adc87806"> 3. Sort affected colors alphabetically in the CSS Fixes #14603
1 parent 852547d commit c93eefb

6 files changed

+56
-36
lines changed

‎templates/repo/diff/blob_excerpt.tmpl

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{if $.IsSplitStyle}}
22
{{range $k, $line := $.section.Lines}}
3-
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}">
3+
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
44
{{if eq .GetType 4}}
55
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
66
<div class="tw-flex">
@@ -26,17 +26,17 @@
2626
{{else}}
2727
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}}
2828
<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>
29-
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
30-
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
31-
<td class="blob-excerpt lines-code lines-code-old">{{/*
29+
<td class="lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
30+
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
31+
<td class="lines-code lines-code-old">{{/*
3232
*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/*
3333
*/}}<code class="code-inner"></code>{{/*
3434
*/}}{{end}}{{/*
3535
*/}}</td>
3636
<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>
37-
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
38-
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
39-
<td class="blob-excerpt lines-code lines-code-new">{{/*
37+
<td class="lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
38+
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
39+
<td class="lines-code lines-code-new">{{/*
4040
*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/*
4141
*/}}<code class="code-inner"></code>{{/*
4242
*/}}{{end}}{{/*
@@ -46,7 +46,7 @@
4646
{{end}}
4747
{{else}}
4848
{{range $k, $line := $.section.Lines}}
49-
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}">
49+
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
5050
{{if eq .GetType 4}}
5151
<td colspan="2" class="lines-num">
5252
<div class="tw-flex">
@@ -72,9 +72,9 @@
7272
<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>
7373
{{end}}
7474
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}}
75-
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
76-
<td class="blob-excerpt lines-type-marker"><span class="tw-font-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
77-
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
75+
<td class="lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
76+
<td class="lines-type-marker"><span class="tw-font-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
77+
<td class="lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
7878
</tr>
7979
{{end}}
8080
{{end}}

‎web_src/css/repo.css

+21-7
Original file line numberDiff line numberDiff line change
@@ -2377,7 +2377,7 @@ tbody.commit-list {
23772377

23782378
.tag-code,
23792379
.tag-code td,
2380-
.tag-code .blob-excerpt {
2380+
.tag-code.line-expanded {
23812381
background-color: var(--color-box-body-highlight);
23822382
vertical-align: middle;
23832383
}
@@ -2393,8 +2393,8 @@ tbody.commit-list {
23932393
padding-top: 0 !important;
23942394
}
23952395

2396-
.blob-excerpt {
2397-
background-color: var(--color-secondary-alpha-30);
2396+
.line-expanded {
2397+
background-color: var(--color-secondary-alpha-20);
23982398
}
23992399

24002400
.issue-keyword {
@@ -2553,29 +2553,43 @@ tbody.commit-list {
25532553

25542554
.code-diff-unified .add-code,
25552555
.code-diff-unified .add-code td,
2556-
.code-diff-split .add-code .lines-num-new,
25572556
.code-diff-split .add-code .lines-type-marker-new,
25582557
.code-diff-split .add-code .lines-escape-new,
25592558
.code-diff-split .add-code .lines-code-new,
2560-
.code-diff-split .del-code .add-code.lines-num-new,
25612559
.code-diff-split .del-code .add-code.lines-type-marker-new,
25622560
.code-diff-split .del-code .add-code.lines-escape-new,
25632561
.code-diff-split .del-code .add-code.lines-code-new {
25642562
background: var(--color-diff-added-row-bg);
25652563
border-color: var(--color-diff-added-row-border);
25662564
}
25672565

2568-
.code-diff-split .del-code .lines-num-new,
25692566
.code-diff-split .del-code .lines-type-marker-new,
25702567
.code-diff-split .del-code .lines-code-new,
25712568
.code-diff-split .del-code .lines-escape-new,
2572-
.code-diff-split .add-code .lines-num-old,
25732569
.code-diff-split .add-code .lines-escape-old,
25742570
.code-diff-split .add-code .lines-type-marker-old,
25752571
.code-diff-split .add-code .lines-code-old {
25762572
background: var(--color-diff-inactive);
25772573
}
25782574

2575+
.code-diff-split .add-code .lines-num.lines-num-old,
2576+
.code-diff-split .del-code .lines-num.lines-num-new {
2577+
background: var(--color-diff-inactive);
2578+
}
2579+
2580+
.code-diff-unified .del-code .lines-num,
2581+
.code-diff-split .del-code .lines-num {
2582+
background: var(--color-diff-removed-linenum-bg);
2583+
color: var(--color-text);
2584+
}
2585+
2586+
.code-diff-unified .add-code .lines-num,
2587+
.code-diff-split .add-code .lines-num,
2588+
.code-diff-split .del-code .add-code.lines-num {
2589+
background: var(--color-diff-added-linenum-bg);
2590+
color: var(--color-text);
2591+
}
2592+
25792593
.code-diff-split tbody tr td:nth-child(5),
25802594
.code-diff-split tbody tr td.add-comment-right {
25812595
border-left: 1px solid var(--color-secondary);

‎web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
/* red/green colorblind-friendly colors */
44
/* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
55
:root {
6-
--color-diff-added-word-bg: #388bfd66;
7-
--color-diff-added-row-bg: #388bfd26;
8-
9-
--color-diff-removed-word-bg: #db6d2866;
10-
--color-diff-removed-row-bg: #db6d2826;
6+
--color-diff-added-linenum-bg: #1979fd46;
7+
--color-diff-added-row-bg: #1979fd20;
8+
--color-diff-added-word-bg: #1979fd66;
9+
--color-diff-removed-linenum-bg: #c8622146;
10+
--color-diff-removed-row-bg: #c8622120;
11+
--color-diff-removed-word-bg: #c8622166;
1112
}

‎web_src/css/themes/theme-gitea-dark.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -143,14 +143,16 @@
143143
--color-grey-light: #818f9e;
144144
--color-gold: #b1983b;
145145
--color-white: #ffffff;
146-
--color-diff-removed-word-bg: #6f3333;
146+
--color-diff-added-linenum-bg: #274227;
147+
--color-diff-added-row-bg: #203224;
148+
--color-diff-added-row-border: #314a37;
147149
--color-diff-added-word-bg: #3c653c;
148-
--color-diff-removed-row-bg: #3c2626;
149150
--color-diff-moved-row-bg: #818044;
150-
--color-diff-added-row-bg: #283e2d;
151-
--color-diff-removed-row-border: #634343;
152151
--color-diff-moved-row-border: #bcca6f;
153-
--color-diff-added-row-border: #314a37;
152+
--color-diff-removed-linenum-bg: #482121;
153+
--color-diff-removed-row-bg: #301e1e;
154+
--color-diff-removed-row-border: #634343;
155+
--color-diff-removed-word-bg: #6f3333;
154156
--color-diff-inactive: #22282d;
155157
--color-error-border: #a04141;
156158
--color-error-bg: #522;

‎web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
/* red/green colorblind-friendly colors */
44
/* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
55
:root {
6-
--color-diff-added-word-bg: #54aeff66;
6+
--color-diff-added-linenum-bg: #54aeff4d;
77
--color-diff-added-row-bg: #ddf4ff80;
8-
9-
--color-diff-removed-word-bg: #ffb77c80;
8+
--color-diff-added-word-bg: #54aeff66;
9+
--color-diff-removed-linenum-bg: #ffb77c4d;
1010
--color-diff-removed-row-bg: #fff1e580;
11+
--color-diff-removed-word-bg: #ffb77c80;
1112
}

‎web_src/css/themes/theme-gitea-light.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -143,14 +143,16 @@
143143
--color-grey-light: #7c838a;
144144
--color-gold: #a1882b;
145145
--color-white: #ffffff;
146-
--color-diff-removed-word-bg: #fdb8c0;
146+
--color-diff-added-linenum-bg: #d1f8d9;
147+
--color-diff-added-row-bg: #e6ffed;
148+
--color-diff-added-row-border: #e6ffed;
147149
--color-diff-added-word-bg: #acf2bd;
148-
--color-diff-removed-row-bg: #ffeef0;
149150
--color-diff-moved-row-bg: #f1f8d1;
150-
--color-diff-added-row-bg: #e6ffed;
151-
--color-diff-removed-row-border: #f1c0c0;
152151
--color-diff-moved-row-border: #d0e27f;
153-
--color-diff-added-row-border: #e6ffed;
152+
--color-diff-removed-linenum-bg: #ffcecb;
153+
--color-diff-removed-row-bg: #ffeef0;
154+
--color-diff-removed-row-border: #f1c0c0;
155+
--color-diff-removed-word-bg: #fdb8c0;
154156
--color-diff-inactive: #f0f2f4;
155157
--color-error-border: #e0b4b4;
156158
--color-error-bg: #fff6f6;

0 commit comments

Comments
 (0)