Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace code fold icons with octicons (#12222)

Browse source 
- replace font-awesome icons with octicons
- clean up js and css surrounding the code expansion and file folding
- fix hover color on arc-green
- tweak diff line number colors

Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
silverwind 2020-07-13 15:21:19 +02:00 committed by GitHub
parent b49a195839
commit 84a419de98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 146 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
templates/repo/diff/blob_excerpt.tmpl
View file

@ -4,13 +4,19 @@
{{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}}">
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
<i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="{{$.Anchor}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="{{$.Anchor}}">
{{svg "octicon-fold-down" 16}}
</a>
{{end}} {{end}}
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
<i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="{{$.Anchor}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="{{$.Anchor}}">
{{svg "octicon-fold-up" 16}}
</a>
{{end}} {{end}}
{{if eq $line.GetExpandDirection 2}} {{if eq $line.GetExpandDirection 2}}
<span class="ui blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="{{$.Anchor}}">{{svg "octicon-fold" 16}}</span> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="{{$.Anchor}}">
{{svg "octicon-fold" 16}}
</a>
{{end}} {{end}}
</td> </td>
<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td> <td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
@ -29,14 +35,20 @@
<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}"> <tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
{{if eq .GetType 4}} {{if eq .GetType 4}}
<td colspan="2" class="lines-num"> <td colspan="2" class="lines-num">
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
<i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="{{$.Anchor}}"></i>
{{end}}
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
<i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="{{$.Anchor}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="{{$.Anchor}}">
{{svg "octicon-fold-down" 16}}
</a>
{{end}}
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="{{$.Anchor}}">
{{svg "octicon-fold-up" 16}}
</a>
{{end}} {{end}}
{{if eq $line.GetExpandDirection 2}} {{if eq $line.GetExpandDirection 2}}
<span class="ui blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="{{$.Anchor}}">{{svg "octicon-fold" 16}}</span> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="{{$.Anchor}}">
{{svg "octicon-fold" 16}}
</a>
{{end}} {{end}}
</td> </td>
{{else}} {{else}}

19
templates/repo/diff/box.tmpl
View file

@ -18,8 +18,7 @@
{{else}} {{else}}
<div> <div>
<div class="diff-detail-box diff-box sticky"> <div class="diff-detail-box diff-box sticky">
<i class="fa fa-retweet"></i> {{svg "octicon-diff" 16}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
<div class="ui right"> <div class="ui right">
{{if .PageIsPullFiles}} {{if .PageIsPullFiles}}
{{template "repo/diff/whitespace_dropdown" .}} {{template "repo/diff/whitespace_dropdown" .}}
@ -88,7 +87,9 @@
{{$isImage = (call $.IsImageFileInHead $file.Name)}} {{$isImage = (call $.IsImageFileInHead $file.Name)}}
{{end}} {{end}}
{{if or (not $file.IsBin) $isImage}} {{if or (not $file.IsBin) $isImage}}
<i class="ui fold-code grey fa fa-chevron-down"></i> <a role="button" class="fold-file">
{{svg "octicon-chevron-down" 18}}
</a>
{{end}} {{end}}
<div class="diff-counter count"> <div class="diff-counter count">
{{if $file.IsBin}} {{if $file.IsBin}}
@ -126,13 +127,19 @@
{{if eq .GetType 4}} {{if eq .GetType 4}}
<td class="lines-num lines-num-old"> <td class="lines-num lines-num-old">
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
<i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-down" 16}}
</a>
{{end}} {{end}}
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
<i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-up" 16}}
</a>
{{end}} {{end}}
{{if eq $line.GetExpandDirection 2}} {{if eq $line.GetExpandDirection 2}}
<span class="ui blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">{{svg "octicon-fold" 16}}</span> <a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{$.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold" 16}}
</a>
{{end}} {{end}}
</td> </td>
<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td> <td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>

12
templates/repo/diff/section_unified.tmpl
View file

@ -5,13 +5,19 @@
{{if eq .GetType 4}} {{if eq .GetType 4}}
<td colspan="2" class="lines-num"> <td colspan="2" class="lines-num">
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }}
<i class="ui blob-excerpt fa fa-caret-down" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-down" 16}}
</a>
{{end}} {{end}}
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }}
<i class="ui blob-excerpt fa fa-caret-up" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}"></i> <a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-up" 16}}
</a>
{{end}} {{end}}
{{if eq $line.GetExpandDirection 2}} {{if eq $line.GetExpandDirection 2}}
<span class="ui blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">{{svg "octicon-fold" 16}}</span> <a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{$.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=" data-anchor="diff-{{Sha1 $file.Name}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold" 16}}
</a>
{{end}} {{end}}
</td> </td>
{{else}} {{else}}

21
web_src/js/index.js
View file

@ -19,7 +19,7 @@ import initTableSort from './features/tablesort.js';
import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initNotificationsTable, initNotificationCount} from './features/notification.js';
import {createCodeEditor} from './features/codeeditor.js'; import {createCodeEditor} from './features/codeeditor.js';
import {svgs} from './svg.js'; import {svg, svgs} from './svg.js';
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
@ -2017,22 +2017,17 @@ function initCodeView() {
} }
}).trigger('hashchange'); }).trigger('hashchange');
} }
$('.fold-code').on('click', ({target}) => { $(document).on('click', '.fold-file', ({currentTarget}) => {
const box = target.closest('.file-content'); const box = currentTarget.closest('.file-content');
const folded = box.dataset.folded !== 'true'; const folded = box.dataset.folded !== 'true';
target.classList.add(`fa-chevron-${folded ? 'right' : 'down'}`); currentTarget.innerHTML = svg(`octicon-chevron-${folded ? 'right' : 'down'}`, 18);
target.classList.remove(`fa-chevron-${folded ? 'down' : 'right'}`);
box.dataset.folded = String(folded); box.dataset.folded = String(folded);
}); });
function insertBlobExcerpt(e) { $(document).on('click', '.blob-excerpt', async ({currentTarget}) => {
const $blob = $(e.currentTarget); const {url, query, anchor} = currentTarget.dataset;
const $row = $blob.parent().parent(); const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
$.get(`${$blob.data('url')}?${$blob.data('query')}&anchor=${$blob.data('anchor')}`, (blob) => { currentTarget.closest('tr').outerHTML = blob;
$row.replaceWith(blob);
$(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e) });
}); });
}
$('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e) });
} }
function initU2FAuth() { function initU2FAuth() {

4
web_src/js/svg.js
View file

@ -1,3 +1,5 @@
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg'; import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg'; import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
import octiconInternalRepo from '../../public/img/svg/octicon-internal-repo.svg'; import octiconInternalRepo from '../../public/img/svg/octicon-internal-repo.svg';
@ -12,6 +14,8 @@ import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg'
import octiconRepoTemplatePrivate from '../../public/img/svg/octicon-repo-template-private.svg'; import octiconRepoTemplatePrivate from '../../public/img/svg/octicon-repo-template-private.svg';
export const svgs = { export const svgs = {
'octicon-chevron-down': octiconChevronDown,
'octicon-chevron-right': octiconChevronRight,
'octicon-git-merge': octiconGitMerge, 'octicon-git-merge': octiconGitMerge,
'octicon-git-pull-request': octiconGitPullRequest, 'octicon-git-pull-request': octiconGitPullRequest,
'octicon-internal-repo': octiconInternalRepo, 'octicon-internal-repo': octiconInternalRepo,

33
web_src/less/_repository.less
View file

@ -1694,6 +1694,11 @@
padding: 0 5px !important; padding: 0 5px !important;
} }
.tag-code .lines-num,
.tag-code td {
padding: 0 !important;
}
tbody { tbody {
tr { tr {
td.halfwidth { td.halfwidth {
@ -1727,17 +1732,21 @@
.code-diff-unified tbody tr { .code-diff-unified tbody tr {
&.del-code td { &.del-code td {
background-color: #ffeef0 !important; background-color: #ffeef0;
border-color: #f1c0c0 !important; border-color: #f1c0c0;
} }
&.add-code td { &.add-code td {
background-color: #e6ffed; background-color: #e6ffed;
border-color: #bef5cb;
}
&.del-code td.lines-num {
background-color: #ffe5e4;
} }
&.add-code td.lines-num { &.add-code td.lines-num {
background-color: #cdffd8; background-color: #cdffd8;
border-color: #bef5cb;
} }
} }
@ -3001,19 +3010,15 @@ tbody.commit-list {
margin: 0 !important; margin: 0 !important;
} }
.tag-code, .tag-code {
.tag-code td { height: 28px;
background-color: #e6f1f6;
border-color: #f1f8ff !important;
padding-top: 8px;
padding-bottom: 8px;
vertical-align: middle;
color: rgba(27, 31, 35, .7);
} }
.tag-code td.lines-num { .tag-code,
background-color: #f6e6eb !important; .tag-code td {
border-color: #dbedff; background-color: #f0f9ff;
border-color: #f1f8ff !important;
vertical-align: middle;
} }
.issue-keyword { .issue-keyword {

31
web_src/less/_review.less
View file

@ -133,27 +133,24 @@
color: rgba(0, 0, 0, .87); color: rgba(0, 0, 0, .87);
} }
.ui.fold-code { a.fold-file {
margin-right: 1em; margin-right: 10px;
padding-left: 5px; color: inherit;
cursor: pointer;
width: 22px;
font-size: 12px;
} }
.ui.fold-code:hover { a.blob-excerpt {
color: #428bca; color: #575a68;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: #daecfe;
} }
.ui.blob-excerpt { a.blob-excerpt:hover {
display: block; background: #428bca;
line-height: 20px; color: #fff;
font-size: 16px;
cursor: pointer;
}
.ui.blob-excerpt:hover {
color: #428bca;
} }
.btn-review > .dropdown.icon { .btn-review > .dropdown.icon {

23
web_src/less/themes/theme-arc-green.less
View file

@ -1056,11 +1056,19 @@ a.ui.basic.green.label:hover {
border-color: #634343 !important; border-color: #634343 !important;
} }
.repository .diff-file-box .code-diff-unified tbody tr.del-code td.lines-num {
background-color: #4e2c2c !important;
}
.repository .diff-file-box .code-diff-unified tbody tr.add-code td { .repository .diff-file-box .code-diff-unified tbody tr.add-code td {
background-color: #283e2d !important; background-color: #283e2d !important;
border-color: #314a37 !important; border-color: #314a37 !important;
} }
.repository .diff-file-box .code-diff-unified tbody tr.add-code td.lines-num {
background-color: #2c4632 !important;
}
.removed-code { .removed-code {
background-color: #5f3737; background-color: #5f3737;
} }
@ -1071,12 +1079,11 @@ a.ui.basic.green.label:hover {
.tag-code, .tag-code,
.tag-code td { .tag-code td {
background: #242637 !important; background: #353945 !important;
} }
.tag-code td.lines-num { .tag-code td.lines-num {
background-color: #242637 !important; background-color: #3a3e4c !important;
border-color: transparent !important;
} }
.tag-code td.lines-type-marker, .tag-code td.lines-type-marker,
@ -1424,7 +1431,6 @@ input {
} }
.lines-num { .lines-num {
background: #2e323e !important;
color: #9e9e9e !important; color: #9e9e9e !important;
border-color: #2d2d2d !important; border-color: #2d2d2d !important;
} }
@ -1433,6 +1439,15 @@ td.blob-excerpt {
background-color: rgba(0, 0, 0, .15); background-color: rgba(0, 0, 0, .15);
} }
a.blob-excerpt {
color: #ccc;
background: #393d4a;
}
a.blob-excerpt:hover {
background: #87ab63;
}
.code-view .lines-code.active { .code-view .lines-code.active {
background: #534d1b !important; background: #534d1b !important;
} }