third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 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>
tokarchuk/v1.17
silverwind 4 years ago committed by GitHub
parent b49a195839
commit 84a419de98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 144 additions and 103 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. 28
      templates/repo/diff/blob_excerpt.tmpl
  2. 19
      templates/repo/diff/box.tmpl
  3. 12
      templates/repo/diff/section_unified.tmpl
  4. 21
      web_src/js/index.js
  5. 4
      web_src/js/svg.js
  6. 29
      web_src/less/_repository.less
  7. 31
      web_src/less/_review.less
  8. 23
      web_src/less/themes/theme-arc-green.less

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

@ -4,13 +4,19 @@
{{if eq .GetType 4}}
<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) }}
<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}}
{{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}}
{{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}}
</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}}">
{{if eq .GetType 4}}
<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) }}
<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}}
{{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}}
</td>
{{else}}

19
templates/repo/diff/box.tmpl
Unescape View File

@ -18,8 +18,7 @@
{{else}}
<div>
<div class="diff-detail-box diff-box sticky">
<i class="fa fa-retweet"></i>
{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
{{svg "octicon-diff" 16}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
<div class="ui right">
{{if .PageIsPullFiles}}
{{template "repo/diff/whitespace_dropdown" .}}
@ -88,7 +87,9 @@
{{$isImage = (call $.IsImageFileInHead $file.Name)}}
{{end}}
{{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}}
<div class="diff-counter count">
{{if $file.IsBin}}
@ -126,13 +127,19 @@
{{if eq .GetType 4}}
<td class="lines-num lines-num-old">
{{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}}
{{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}}
{{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}}
</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
Unescape View File

@ -5,13 +5,19 @@
{{if eq .GetType 4}}
<td colspan="2" class="lines-num">
{{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}}
{{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}}
{{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}}
</td>
{{else}}

21
web_src/js/index.js
Unescape View File

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

4
web_src/js/svg.js
Unescape 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 octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.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';
export const svgs = {
'octicon-chevron-down': octiconChevronDown,
'octicon-chevron-right': octiconChevronRight,
'octicon-git-merge': octiconGitMerge,
'octicon-git-pull-request': octiconGitPullRequest,
'octicon-internal-repo': octiconInternalRepo,

29
web_src/less/_repository.less
Unescape View File

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

31
web_src/less/_review.less
Unescape View File

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

23
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -1056,11 +1056,19 @@ a.ui.basic.green.label:hover {
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 {
background-color: #283e2d !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 {
background-color: #5f3737;
}
@ -1071,12 +1079,11 @@ a.ui.basic.green.label:hover {
.tag-code,
.tag-code td {
background: #242637 !important;
background: #353945 !important;
}
.tag-code td.lines-num {
background-color: #242637 !important;
border-color: transparent !important;
background-color: #3a3e4c !important;
}
.tag-code td.lines-type-marker,
@ -1424,7 +1431,6 @@ input {
}
.lines-num {
background: #2e323e !important;
color: #9e9e9e !important;
border-color: #2d2d2d !important;
}
@ -1433,6 +1439,15 @@ td.blob-excerpt {
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 {
background: #534d1b !important;
}

Write Preview
Loading…
Cancel
Save