diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl index f1fb9a055..604c814b8 100644 --- a/templates/repo/diff/blob_excerpt.tmpl +++ b/templates/repo/diff/blob_excerpt.tmpl @@ -1,50 +1,62 @@ {{if $.IsSplitStyle}} - {{range $k, $line := $.section.Lines}} - - {{if eq .GetType 4}} - - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} - - {{end}} - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} - - {{end}} - {{if eq $line.GetExpandDirection 2}} - {{svg "octicon-fold" 16}} - {{end}} - - {{$.section.GetComputedInlineDiffFor $line}} - {{else}} - - {{if $line.LeftIdx}}{{end}} - {{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}} - - {{if $line.RightIdx}}{{end}} - {{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}} - {{end}} - - {{end}} + {{range $k, $line := $.section.Lines}} + + {{if eq .GetType 4}} + + {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} + + {{svg "octicon-fold-down" 16}} + + {{end}} + {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} + + {{svg "octicon-fold-up" 16}} + + {{end}} + {{if eq $line.GetExpandDirection 2}} + + {{svg "octicon-fold" 16}} + + {{end}} + + {{$.section.GetComputedInlineDiffFor $line}} + {{else}} + + {{if $line.LeftIdx}}{{end}} + {{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}} + + {{if $line.RightIdx}}{{end}} + {{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}} + {{end}} + + {{end}} {{else}} - {{range $k, $line := $.section.Lines}} - - {{if eq .GetType 4}} - - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} - - {{end}} - {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} - - {{end}} - {{if eq $line.GetExpandDirection 2}} - {{svg "octicon-fold" 16}} - {{end}} - - {{else}} - - - {{end}} - - {{$.section.GetComputedInlineDiffFor $line}} - - {{end}} + {{range $k, $line := $.section.Lines}} + + {{if eq .GetType 4}} + + {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} + + {{svg "octicon-fold-down" 16}} + + {{end}} + {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} + + {{svg "octicon-fold-up" 16}} + + {{end}} + {{if eq $line.GetExpandDirection 2}} + + {{svg "octicon-fold" 16}} + + {{end}} + + {{else}} + + + {{end}} + + {{$.section.GetComputedInlineDiffFor $line}} + + {{end}} {{end}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index adb918413..7338c1ee6 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -18,8 +18,7 @@ {{else}}
- - {{.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}}
{{if .PageIsPullFiles}} {{template "repo/diff/whitespace_dropdown" .}} @@ -88,7 +87,9 @@ {{$isImage = (call $.IsImageFileInHead $file.Name)}} {{end}} {{if or (not $file.IsBin) $isImage}} - + + {{svg "octicon-chevron-down" 18}} + {{end}}
{{if $file.IsBin}} @@ -126,13 +127,19 @@ {{if eq .GetType 4}} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} - + + {{svg "octicon-fold-down" 16}} + {{end}} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} - + + {{svg "octicon-fold-up" 16}} + {{end}} {{if eq $line.GetExpandDirection 2}} - {{svg "octicon-fold" 16}} + + {{svg "octicon-fold" 16}} + {{end}} {{$section.GetComputedInlineDiffFor $line}} diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl index 040545069..0f561a8a8 100644 --- a/templates/repo/diff/section_unified.tmpl +++ b/templates/repo/diff/section_unified.tmpl @@ -5,13 +5,19 @@ {{if eq .GetType 4}} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5) }} - + + {{svg "octicon-fold-down" 16}} + {{end}} {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4) }} - + + {{svg "octicon-fold-up" 16}} + {{end}} {{if eq $line.GetExpandDirection 2}} - {{svg "octicon-fold" 16}} + + {{svg "octicon-fold" 16}} + {{end}} {{else}} diff --git a/web_src/js/index.js b/web_src/js/index.js index de3522983..db6c665ec 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -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) }); - }); - } - $('.ui.blob-excerpt').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; + }); } function initU2FAuth() { diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 9a7c7f4e6..556a19172 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -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, diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index ce35049eb..7bb7d81ba 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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 { diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 2e9bbf19b..1c84d61f4 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -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; +a.fold-file { + margin-right: 10px; + color: inherit; } -.ui.fold-code:hover { - color: #428bca; +a.blob-excerpt { + color: #575a68; + height: 28px; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background: #daecfe; } -.ui.blob-excerpt { - display: block; - line-height: 20px; - font-size: 16px; - cursor: pointer; -} - -.ui.blob-excerpt:hover { - color: #428bca; +a.blob-excerpt:hover { + background: #428bca; + color: #fff; } .btn-review > .dropdown.icon { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index cd4097456..ee294d3fa 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -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; }