Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Diff color enhancements, add line number background (#30670)

Browse Source 
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
This commit is contained in:
silverwind 2024-04-26 21:37:21 +02:00 committed by GitHub
parent 852547d0dc
commit c93eefb42b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
templates/repo/diff/blob_excerpt.tmpl
View File

@ -1,6 +1,6 @@
{{if $.IsSplitStyle}} {{if $.IsSplitStyle}}
{{range $k, $line := $.section.Lines}} {{range $k, $line := $.section.Lines}}
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}"> <tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
{{if eq .GetType 4}} {{if eq .GetType 4}}
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"> <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
<div class="tw-flex"> <div class="tw-flex">
@ -26,17 +26,17 @@
{{else}} {{else}}
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.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}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td> <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>
<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> <td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
<td class="blob-excerpt lines-code lines-code-old">{{/* <td class="lines-code lines-code-old">{{/*
*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/* */}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/*
*/}}<code class="code-inner"></code>{{/* */}}<code class="code-inner"></code>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
*/}}</td> */}}</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="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}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td> <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>
<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> <td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
<td class="blob-excerpt lines-code lines-code-new">{{/* <td class="lines-code lines-code-new">{{/*
*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/* */}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/*
*/}}<code class="code-inner"></code>{{/* */}}<code class="code-inner"></code>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
@ -46,7 +46,7 @@
{{end}} {{end}}
{{else}} {{else}}
{{range $k, $line := $.section.Lines}} {{range $k, $line := $.section.Lines}}
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}"> <tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
{{if eq .GetType 4}} {{if eq .GetType 4}}
<td colspan="2" class="lines-num"> <td colspan="2" class="lines-num">
<div class="tw-flex"> <div class="tw-flex">
@ -72,9 +72,9 @@
<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>
{{end}} {{end}}
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}}
<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> <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>
<td class="blob-excerpt lines-type-marker"><span class="tw-font-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> <td class="lines-type-marker"><span class="tw-font-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<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> <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>
</tr> </tr>
{{end}} {{end}}
{{end}} {{end}}

28
web_src/css/repo.css
View File

@ -2377,7 +2377,7 @@ tbody.commit-list {
.tag-code, .tag-code,
.tag-code td, .tag-code td,
.tag-code .blob-excerpt { .tag-code.line-expanded {
background-color: var(--color-box-body-highlight); background-color: var(--color-box-body-highlight);
vertical-align: middle; vertical-align: middle;
} }
@ -2393,8 +2393,8 @@ tbody.commit-list {
padding-top: 0 !important; padding-top: 0 !important;
} }
.blob-excerpt { .line-expanded {
background-color: var(--color-secondary-alpha-30); background-color: var(--color-secondary-alpha-20);
} }
.issue-keyword { .issue-keyword {
@ -2553,11 +2553,9 @@ tbody.commit-list {
.code-diff-unified .add-code, .code-diff-unified .add-code,
.code-diff-unified .add-code td, .code-diff-unified .add-code td,
.code-diff-split .add-code .lines-num-new,
.code-diff-split .add-code .lines-type-marker-new, .code-diff-split .add-code .lines-type-marker-new,
.code-diff-split .add-code .lines-escape-new, .code-diff-split .add-code .lines-escape-new,
.code-diff-split .add-code .lines-code-new, .code-diff-split .add-code .lines-code-new,
.code-diff-split .del-code .add-code.lines-num-new,
.code-diff-split .del-code .add-code.lines-type-marker-new, .code-diff-split .del-code .add-code.lines-type-marker-new,
.code-diff-split .del-code .add-code.lines-escape-new, .code-diff-split .del-code .add-code.lines-escape-new,
.code-diff-split .del-code .add-code.lines-code-new { .code-diff-split .del-code .add-code.lines-code-new {
@ -2565,17 +2563,33 @@ tbody.commit-list {
border-color: var(--color-diff-added-row-border); border-color: var(--color-diff-added-row-border);
} }
.code-diff-split .del-code .lines-num-new,
.code-diff-split .del-code .lines-type-marker-new, .code-diff-split .del-code .lines-type-marker-new,
.code-diff-split .del-code .lines-code-new, .code-diff-split .del-code .lines-code-new,
.code-diff-split .del-code .lines-escape-new, .code-diff-split .del-code .lines-escape-new,
.code-diff-split .add-code .lines-num-old,
.code-diff-split .add-code .lines-escape-old, .code-diff-split .add-code .lines-escape-old,
.code-diff-split .add-code .lines-type-marker-old, .code-diff-split .add-code .lines-type-marker-old,
.code-diff-split .add-code .lines-code-old { .code-diff-split .add-code .lines-code-old {
background: var(--color-diff-inactive); background: var(--color-diff-inactive);
} }
.code-diff-split .add-code .lines-num.lines-num-old,
.code-diff-split .del-code .lines-num.lines-num-new {
background: var(--color-diff-inactive);
}
.code-diff-unified .del-code .lines-num,
.code-diff-split .del-code .lines-num {
background: var(--color-diff-removed-linenum-bg);
color: var(--color-text);
}
.code-diff-unified .add-code .lines-num,
.code-diff-split .add-code .lines-num,
.code-diff-split .del-code .add-code.lines-num {
background: var(--color-diff-added-linenum-bg);
color: var(--color-text);
}
.code-diff-split tbody tr td:nth-child(5), .code-diff-split tbody tr td:nth-child(5),
.code-diff-split tbody tr td.add-comment-right { .code-diff-split tbody tr td.add-comment-right {
border-left: 1px solid var(--color-secondary); border-left: 1px solid var(--color-secondary);

11
web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css
View File

@ -3,9 +3,10 @@
/* red/green colorblind-friendly colors */ /* red/green colorblind-friendly colors */
/* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */ /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
:root { :root {
--color-diff-added-word-bg: #388bfd66; --color-diff-added-linenum-bg: #1979fd46;
--color-diff-added-row-bg: #388bfd26; --color-diff-added-row-bg: #1979fd20;
--color-diff-added-word-bg: #1979fd66;
--color-diff-removed-word-bg: #db6d2866; --color-diff-removed-linenum-bg: #c8622146;
--color-diff-removed-row-bg: #db6d2826; --color-diff-removed-row-bg: #c8622120;
--color-diff-removed-word-bg: #c8622166;
} }

16
web_src/css/themes/theme-gitea-dark.css
View File

@ -143,14 +143,16 @@
--color-grey-light: #818f9e; --color-grey-light: #818f9e;
--color-gold: #b1983b; --color-gold: #b1983b;
--color-white: #ffffff; --color-white: #ffffff;
--color-diff-removed-word-bg: #6f3333; --color-diff-added-linenum-bg: #274227;
--color-diff-added-word-bg: #3c653c; --color-diff-added-row-bg: #203224;
--color-diff-removed-row-bg: #3c2626;
--color-diff-moved-row-bg: #818044;
--color-diff-added-row-bg: #283e2d;
--color-diff-removed-row-border: #634343;
--color-diff-moved-row-border: #bcca6f;
--color-diff-added-row-border: #314a37; --color-diff-added-row-border: #314a37;
--color-diff-added-word-bg: #3c653c;
--color-diff-moved-row-bg: #818044;
--color-diff-moved-row-border: #bcca6f;
--color-diff-removed-linenum-bg: #482121;
--color-diff-removed-row-bg: #301e1e;
--color-diff-removed-row-border: #634343;
--color-diff-removed-word-bg: #6f3333;
--color-diff-inactive: #22282d; --color-diff-inactive: #22282d;
--color-error-border: #a04141; --color-error-border: #a04141;
--color-error-bg: #522; --color-error-bg: #522;

7
web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css
View File

@ -3,9 +3,10 @@
/* red/green colorblind-friendly colors */ /* red/green colorblind-friendly colors */
/* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */ /* from GitHub: --diffBlob-addition-*, --diffBlob-deletion-*, etc */
:root { :root {
--color-diff-added-word-bg: #54aeff66; --color-diff-added-linenum-bg: #54aeff4d;
--color-diff-added-row-bg: #ddf4ff80; --color-diff-added-row-bg: #ddf4ff80;
--color-diff-added-word-bg: #54aeff66;
--color-diff-removed-word-bg: #ffb77c80; --color-diff-removed-linenum-bg: #ffb77c4d;
--color-diff-removed-row-bg: #fff1e580; --color-diff-removed-row-bg: #fff1e580;
--color-diff-removed-word-bg: #ffb77c80;
} }

14
web_src/css/themes/theme-gitea-light.css
View File

@ -143,14 +143,16 @@
--color-grey-light: #7c838a; --color-grey-light: #7c838a;
--color-gold: #a1882b; --color-gold: #a1882b;
--color-white: #ffffff; --color-white: #ffffff;
--color-diff-removed-word-bg: #fdb8c0; --color-diff-added-linenum-bg: #d1f8d9;
--color-diff-added-word-bg: #acf2bd;
--color-diff-removed-row-bg: #ffeef0;
--color-diff-moved-row-bg: #f1f8d1;
--color-diff-added-row-bg: #e6ffed; --color-diff-added-row-bg: #e6ffed;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-moved-row-border: #d0e27f;
--color-diff-added-row-border: #e6ffed; --color-diff-added-row-border: #e6ffed;
--color-diff-added-word-bg: #acf2bd;
--color-diff-moved-row-bg: #f1f8d1;
--color-diff-moved-row-border: #d0e27f;
--color-diff-removed-linenum-bg: #ffcecb;
--color-diff-removed-row-bg: #ffeef0;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-inactive: #f0f2f4; --color-diff-inactive: #f0f2f4;
--color-error-border: #e0b4b4; --color-error-border: #e0b4b4;
--color-error-bg: #fff6f6; --color-error-bg: #fff6f6;