From 34efd712791d3a2c41a45d7eb718054c27dc8e06 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 00:55:45 +0100 Subject: [PATCH 01/24] Various code view improvements --- web_src/css/base.css | 6 +++--- web_src/css/modules/message.css | 12 ++++++++++++ web_src/css/repo.css | 1 - web_src/css/repo/linebutton.css | 8 +++----- web_src/css/themes/theme-gitea-dark.css | 10 +++++----- web_src/css/themes/theme-gitea-light.css | 4 ++-- web_src/js/features/repo-code.js | 19 +++++++++++++------ 7 files changed, 38 insertions(+), 22 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index dba379e7c83f..6ca9f08e5da1 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1429,7 +1429,7 @@ a.ui.active.label:hover { padding-left: 10px; padding-right: 10px; text-align: right !important; - color: var(--color-text-light-1); + color: var(--color-text-light-2); width: 1%; font-family: var(--fonts-monospace); } @@ -1487,8 +1487,8 @@ a.ui.active.label:hover { padding-left: 5px; } -.lines-code.active, -.lines-code .active { +.file-view tr.active, +.file-view tr.active .lines-code { background: var(--color-active-line) !important; } diff --git a/web_src/css/modules/message.css b/web_src/css/modules/message.css index a29603cd91a8..c62dbddd2531 100644 --- a/web_src/css/modules/message.css +++ b/web_src/css/modules/message.css @@ -100,3 +100,15 @@ color: var(--color-warning-text); border-color: var(--color-warning-border); } + +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + top: 9px; + right: 9px; + opacity: .7; +} + +.ui.message > .close.icon:hover { + opacity: 1; +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index ca8de42a06cf..2014dfc3708c 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1602,7 +1602,6 @@ .repository .diff-file-box .file-body.file-code .lines-num { text-align: right; - color: var(--color-text-light); width: 1%; min-width: 50px; } diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css index 79be5a7a9e76..e99d0399d1b7 100644 --- a/web_src/css/repo/linebutton.css +++ b/web_src/css/repo/linebutton.css @@ -3,18 +3,16 @@ } .code-line-button { - background-color: var(--color-menu); - color: var(--color-text-light); border: 1px solid var(--color-secondary); border-radius: var(--border-radius); - padding: 1px 10px; + padding: 1px 4px !important; position: absolute; font-family: var(--fonts-regular); left: 0; - transform: translateX(-50%); + transform: translateX(calc(-50% + 6px)); cursor: pointer; } .code-line-button:hover { - color: var(--color-primary); + background: var(--color-secondary) !important; } diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index c769c51cdce9..b62d778ab2fb 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -183,7 +183,7 @@ --color-body: #1c1f25; --color-box-header: #1a1d1f; --color-box-body: #14171a; - --color-box-body-highlight: #121517; + --color-box-body-highlight: #1c2227; --color-text-dark: #f8f8f9; --color-text: #d1d5d8; --color-text-light: #bdc3c7; @@ -207,11 +207,11 @@ --color-markup-table-row: #e8e8ff06; --color-markup-code-block: #e8e8ff16; --color-button: #151a1e; - --color-code-bg: #191d20; + --color-code-bg: #101315; --color-code-sidebar-bg: #1b1f22; --color-shadow: #00001758; - --color-secondary-bg: #2f3135; - --color-expand-button: #414348; + --color-secondary-bg: #2f3138; + --color-expand-button: #2b353e; --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); @@ -233,7 +233,7 @@ --color-label-active-bg: #73828eff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); - --color-active-line: #534d1b; + --color-active-line: #39301e; --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 2d9ab8e7210c..d9b6c55bae1f 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -183,7 +183,7 @@ --color-body: #ffffff; --color-box-header: #f1f3f5; --color-box-body: #ffffff; - --color-box-body-highlight: #f4faff; + --color-box-body-highlight: #ecf5fd; --color-text-dark: #01050a; --color-text: #181c21; --color-text-light: #30363b; @@ -211,7 +211,7 @@ --color-code-sidebar-bg: #f2f5f8; --color-shadow: #00001726; --color-secondary-bg: #f2f5f8; - --color-expand-button: #d8efff; + --color-expand-button: #cfe8fa; --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--color-primary-light-6); --color-project-board-bg: var(--color-secondary-light-4); diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 08fae763b8d2..5cd1936f76cc 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -17,7 +17,7 @@ function changeHash(hash) { } function selectRange($list, $select, $from) { - $list.removeClass('active'); + $list.closest('tr').removeClass('active'); // add hashchange to permalink const $refInNewIssue = $('a.ref-in-new-issue'); @@ -69,7 +69,9 @@ function selectRange($list, $select, $from) { for (let i = a; i <= b; i++) { classes.push(`[rel=L${i}]`); } - $list.filter(classes.join(',')).addClass('active'); + $list.filter(classes.join(',')).each(function () { + $(this).closest('tr').addClass('active'); + }); changeHash(`#L${a}-L${b}`); updateIssueHref(`L${a}-L${b}`); @@ -78,7 +80,7 @@ function selectRange($list, $select, $from) { return; } } - $select.addClass('active'); + $select.closest('tr').addClass('active'); changeHash(`#${$select.attr('rel')}`); updateIssueHref($select.attr('rel')); @@ -96,10 +98,10 @@ function showLineButton() { } // find active row and add button - const tr = document.querySelector('.code-view td.lines-code.active').closest('tr'); + const tr = document.querySelector('.code-view tr.active .lines-code').closest('tr'); const td = tr.querySelector('td'); const btn = document.createElement('button'); - btn.classList.add('code-line-button'); + btn.classList.add('code-line-button', 'ui', 'basic', 'button'); btn.innerHTML = svg('octicon-kebab-horizontal'); td.prepend(btn); @@ -130,7 +132,12 @@ export function initRepoCodeView() { } else { $list = $('.code-view td.lines-code'); } - selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null)); + const $sel = $list.filter(`[rel=${$select.attr('id')}]`); + let $from = null; + if (e.shiftKey) { + $from = $list.closest('tr').filter('.active').children('.lines-code').eq(0); + } + selectRange($list, $sel, $from); if (window.getSelection) { window.getSelection().removeAllRanges(); From ebb322e976651f4aacbe01a75fc73f4a92ef0115 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 15:03:50 +0100 Subject: [PATCH 02/24] rewrite click handle to vanilla js --- web_src/js/features/repo-code.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 5cd1936f76cc..d4938de7ea16 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -125,19 +125,24 @@ function showLineButton() { export function initRepoCodeView() { if ($('.code-view .lines-num').length > 0) { $(document).on('click', '.lines-num span', function (e) { - const $select = $(this); - let $list; - if ($('div.blame').length) { - $list = $('.code-view td.lines-code.blame-code'); + let linesEls; + if (document.querySelector('div.blame')) { + linesEls = document.querySelectorAll('.code-view td.lines-code.blame-code'); } else { - $list = $('.code-view td.lines-code'); + linesEls = document.querySelectorAll('.code-view td.lines-code'); } - const $sel = $list.filter(`[rel=${$select.attr('id')}]`); - let $from = null; + + const selectedEls = Array.from(linesEls).filter((el) => { + return el.matches(`[rel=${this.getAttribute('id')}]`); + }); + + let from; if (e.shiftKey) { - $from = $list.closest('tr').filter('.active').children('.lines-code').eq(0); + from = Array.from(linesEls).filter((el) => { + return el.closest('tr').classList.contains('active'); + }); } - selectRange($list, $sel, $from); + selectRange($(linesEls), $(selectedEls), from ? $(from) : null); if (window.getSelection) { window.getSelection().removeAllRanges(); From 4dab7d2b6dea1c02bdc6533930b4d18b1daf0f04 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 15:19:33 +0100 Subject: [PATCH 03/24] rename vars for clarity --- web_src/js/features/repo-code.js | 44 +++++++++++++++----------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index d4938de7ea16..aaaa3559b8c6 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -16,8 +16,8 @@ function changeHash(hash) { } } -function selectRange($list, $select, $from) { - $list.closest('tr').removeClass('active'); +function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { + $linesEls.closest('tr').removeClass('active'); // add hashchange to permalink const $refInNewIssue = $('a.ref-in-new-issue'); @@ -35,9 +35,7 @@ function selectRange($list, $select, $from) { }; const updateViewGitBlameFragment = function (anchor) { - if ($viewGitBlame.length === 0) { - return; - } + if ($viewGitBlame.length === 0) return; let href = $viewGitBlame.attr('href'); href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`; if (anchor.length !== 0) { @@ -47,17 +45,15 @@ function selectRange($list, $select, $from) { }; const updateCopyPermalinkUrl = function(anchor) { - if ($copyPermalink.length === 0) { - return; - } + if ($copyPermalink.length === 0) return; let link = $copyPermalink.attr('data-url'); link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`; $copyPermalink.attr('data-url', link); }; - if ($from) { - let a = parseInt($select.attr('rel').slice(1)); - let b = parseInt($from.attr('rel').slice(1)); + if ($selectionStartEls) { + let a = parseInt($selectionEndEl.attr('rel').slice(1)); + let b = parseInt($selectionStartEls.attr('rel').slice(1)); let c; if (a !== b) { if (a > b) { @@ -69,7 +65,7 @@ function selectRange($list, $select, $from) { for (let i = a; i <= b; i++) { classes.push(`[rel=L${i}]`); } - $list.filter(classes.join(',')).each(function () { + $linesEls.filter(classes.join(',')).each(function () { $(this).closest('tr').addClass('active'); }); changeHash(`#L${a}-L${b}`); @@ -80,12 +76,12 @@ function selectRange($list, $select, $from) { return; } } - $select.closest('tr').addClass('active'); - changeHash(`#${$select.attr('rel')}`); + $selectionEndEl.closest('tr').addClass('active'); + changeHash(`#${$selectionEndEl.attr('rel')}`); - updateIssueHref($select.attr('rel')); - updateViewGitBlameFragment($select.attr('rel')); - updateCopyPermalinkUrl($select.attr('rel')); + updateIssueHref($selectionEndEl.attr('rel')); + updateViewGitBlameFragment($selectionEndEl.attr('rel')); + updateCopyPermalinkUrl($selectionEndEl.attr('rel')); } function showLineButton() { @@ -158,17 +154,17 @@ export function initRepoCodeView() { $(window).on('hashchange', () => { let m = window.location.hash.match(rangeAnchorRegex); - let $list; + let $linesEls; if ($('div.blame').length) { - $list = $('.code-view td.lines-code.blame-code'); + $linesEls = $('.code-view td.lines-code.blame-code'); } else { - $list = $('.code-view td.lines-code'); + $linesEls = $('.code-view td.lines-code'); } let $first; if (m) { - $first = $list.filter(`[rel=${m[1]}]`); + $first = $linesEls.filter(`[rel=${m[1]}]`); if ($first.length) { - selectRange($list, $first, $list.filter(`[rel=${m[2]}]`)); + selectRange($linesEls, $first, $linesEls.filter(`[rel=${m[2]}]`)); // show code view menu marker (don't show in blame page) if ($('div.blame').length === 0) { @@ -181,9 +177,9 @@ export function initRepoCodeView() { } m = window.location.hash.match(singleAnchorRegex); if (m) { - $first = $list.filter(`[rel=L${m[2]}]`); + $first = $linesEls.filter(`[rel=L${m[2]}]`); if ($first.length) { - selectRange($list, $first); + selectRange($linesEls, $first); // show code view menu marker (don't show in blame page) if ($('div.blame').length === 0) { From 61d5d621d9ba9f23912b4e5cd233faed6afaaca1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 15:23:30 +0100 Subject: [PATCH 04/24] more refactor --- web_src/js/features/repo-code.js | 33 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index aaaa3559b8c6..99abc6ab5697 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -16,6 +16,14 @@ function changeHash(hash) { } } +function isBlame() { + return Boolean(document.querySelector('div.blame')); +} + +function getLineEls() { + return document.querySelectorAll(`.code-view td.lines-code${isBlame() ? '.blame-code' : ''}`); +} + function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { $linesEls.closest('tr').removeClass('active'); @@ -25,7 +33,7 @@ function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { const $viewGitBlame = $('a.view_git_blame'); const updateIssueHref = function (anchor) { - if ($refInNewIssue.length === 0) { + if (!$refInNewIssue.length) { return; } const urlIssueNew = $refInNewIssue.attr('data-url-issue-new'); @@ -35,7 +43,7 @@ function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { }; const updateViewGitBlameFragment = function (anchor) { - if ($viewGitBlame.length === 0) return; + if (!$viewGitBlame.length) return; let href = $viewGitBlame.attr('href'); href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`; if (anchor.length !== 0) { @@ -121,13 +129,7 @@ function showLineButton() { export function initRepoCodeView() { if ($('.code-view .lines-num').length > 0) { $(document).on('click', '.lines-num span', function (e) { - let linesEls; - if (document.querySelector('div.blame')) { - linesEls = document.querySelectorAll('.code-view td.lines-code.blame-code'); - } else { - linesEls = document.querySelectorAll('.code-view td.lines-code'); - } - + const linesEls = getLineEls(); const selectedEls = Array.from(linesEls).filter((el) => { return el.matches(`[rel=${this.getAttribute('id')}]`); }); @@ -147,19 +149,14 @@ export function initRepoCodeView() { } // show code view menu marker (don't show in blame page) - if ($('div.blame').length === 0) { + if (!isBlame()) { showLineButton(); } }); $(window).on('hashchange', () => { let m = window.location.hash.match(rangeAnchorRegex); - let $linesEls; - if ($('div.blame').length) { - $linesEls = $('.code-view td.lines-code.blame-code'); - } else { - $linesEls = $('.code-view td.lines-code'); - } + const $linesEls = $(getLineEls()); let $first; if (m) { $first = $linesEls.filter(`[rel=${m[1]}]`); @@ -167,7 +164,7 @@ export function initRepoCodeView() { selectRange($linesEls, $first, $linesEls.filter(`[rel=${m[2]}]`)); // show code view menu marker (don't show in blame page) - if ($('div.blame').length === 0) { + if (!isBlame()) { showLineButton(); } @@ -182,7 +179,7 @@ export function initRepoCodeView() { selectRange($linesEls, $first); // show code view menu marker (don't show in blame page) - if ($('div.blame').length === 0) { + if (!isBlame()) { showLineButton(); } From cd1dc263926e7e992b094237ab4482366a620d39 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 15:49:13 +0100 Subject: [PATCH 05/24] remove code sidebar, remove 1 var and introduce 2 --- templates/repo/blame.tmpl | 2 +- web_src/css/base.css | 31 ++++++++++++++++-------- web_src/css/chroma/base.css | 4 --- web_src/css/themes/theme-gitea-dark.css | 6 ++--- web_src/css/themes/theme-gitea-light.css | 4 +-- 5 files changed, 27 insertions(+), 20 deletions(-) diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index 05cdf53b44a8..f1b91420bda8 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -53,7 +53,7 @@ {{if $row.PreviousSha}} - + {{svg "octicon-versions"}} {{end}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 6ca9f08e5da1..a5c63938fd21 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1421,7 +1421,6 @@ a.ui.active.label:hover { padding-left: 10px; padding-right: 10px; text-align: right !important; - background-color: var(--color-code-sidebar-bg); width: 2%; } @@ -1483,22 +1482,30 @@ a.ui.active.label:hover { } .lines-code { - background-color: var(--color-code-bg); padding-left: 5px; } -.file-view tr.active, +.file-view tr.active { + color: inherit !important; + background: inherit !important; +} + +.file-view tr.active .lines-num, .file-view tr.active .lines-code { - background: var(--color-active-line) !important; + background: var(--color-highlight-bg) !important; } -.blame .lines-num { - padding: 0 !important; - background-color: var(--color-code-sidebar-bg); +.file-view tr.active .lines-num { + position: relative; } -.blame .lines-code { - padding: 0 !important; +.file-view tr.active .lines-num:before { + content: ''; + position: absolute; + left: 0; + width: 2px; + height: 100%; + background: var(--color-highlight-fg); } .code-inner { @@ -1518,7 +1525,6 @@ a.ui.active.label:hover { vertical-align: top; color: var(--color-text-light-2); padding: 0 !important; - background: var(--color-code-sidebar-bg); width: 1%; } @@ -1568,6 +1574,11 @@ a.ui.active.label:hover { border-bottom: 1px solid var(--color-secondary); } +.code-view { + background: var(--color-code-bg); + border-radius: var(--border-radius); +} + .code-view table { width: 100%; } diff --git a/web_src/css/chroma/base.css b/web_src/css/chroma/base.css index 26d128775f0a..bce13332f89b 100644 --- a/web_src/css/chroma/base.css +++ b/web_src/css/chroma/base.css @@ -1,7 +1,3 @@ -.chroma { - background-color: var(--color-code-bg); -} - /* LineTableTD */ .chroma .lntd { vertical-align: top; diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index b62d778ab2fb..2b22d3c8682e 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -207,8 +207,7 @@ --color-markup-table-row: #e8e8ff06; --color-markup-code-block: #e8e8ff16; --color-button: #151a1e; - --color-code-bg: #101315; - --color-code-sidebar-bg: #1b1f22; + --color-code-bg: #121518; --color-shadow: #00001758; --color-secondary-bg: #2f3138; --color-expand-button: #2b353e; @@ -233,7 +232,8 @@ --color-label-active-bg: #73828eff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); - --color-active-line: #39301e; + --color-highlight-fg: #877147; + --color-highlight-bg: #39301e; --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index d9b6c55bae1f..f6913fbe22af 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -208,7 +208,6 @@ --color-markup-code-block: #00001710; --color-button: #f8f9fb; --color-code-bg: #fafdff; - --color-code-sidebar-bg: #f2f5f8; --color-shadow: #00001726; --color-secondary-bg: #f2f5f8; --color-expand-button: #cfe8fa; @@ -233,7 +232,8 @@ --color-label-active-bg: #949da6ff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-6); - --color-active-line: #fffbdd; + --color-highlight-fg: #eed200; + --color-highlight-bg: #fffbdd; --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: light; From 9f909b9608396ff1fb50e4fb678d654424c0bdf4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 15:57:36 +0100 Subject: [PATCH 06/24] fix lint --- web_src/css/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index a5c63938fd21..d7ff2acb9c8c 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1499,8 +1499,8 @@ a.ui.active.label:hover { position: relative; } -.file-view tr.active .lines-num:before { - content: ''; +.file-view tr.active .lines-num::before { + content: ""; position: absolute; left: 0; width: 2px; From 03f20a582889691dde52cd353c938cb7bef4dbdd Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 16:00:56 +0100 Subject: [PATCH 07/24] fix buttons last button border with hidden last child --- web_src/css/modules/button.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 26f8fcf94c17..d76b4cc9882d 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -61,11 +61,13 @@ It needs some tricks to tweak the left/right borders with active state */ border-right: none; } -.ui.buttons .button:first-child { +.ui.buttons .button:first-child, +.ui.buttons .button.gt-hidden:first-child + .button { border-left: 1px solid var(--color-light-border); } -.ui.buttons .button:last-child { +.ui.buttons .button:last-child, +.ui.buttons .button:nth-last-child(2):has(+ .button.gt-hidden) { border-right: 1px solid var(--color-light-border); } From 0bd44c84edfb87fd40e460b85bf9c322442af137 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 16:10:04 +0100 Subject: [PATCH 08/24] tweak blame commit link and add missing underline styles --- templates/repo/blame.tmpl | 2 +- web_src/css/base.css | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index f1b91420bda8..f5467f545afe 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -41,7 +41,7 @@ {{$row.Avatar}}
- + {{$row.CommitMessage}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index d7ff2acb9c8c..5d5d55f3251a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -215,7 +215,7 @@ progress::-moz-progress-bar { a { color: var(--color-primary); cursor: pointer; - text-decoration: none; + text-decoration-line: none; text-decoration-skip-ink: all; } @@ -239,6 +239,11 @@ a.muted:hover [class*="color-text"], color: var(--color-primary); } +a.muted:hover, +a.suppressed:hover { + text-decoration-line: underline; +} + a.silenced:hover, a.suppressed:hover { color: inherit; From c6a8568be7cb574409795a0820c095b54aceccd7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 16:13:43 +0100 Subject: [PATCH 09/24] lighten --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 5d5d55f3251a..19fd22934d66 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1528,7 +1528,7 @@ a.ui.active.label:hover { .lines-commit { vertical-align: top; - color: var(--color-text-light-2); + color: var(--color-text-light-1); padding: 0 !important; width: 1%; } From 950b47311da0ace88afc7420560ed8b1c089dab8 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 17:30:36 +0100 Subject: [PATCH 10/24] link fixes, add devtest --- templates/devtest/gitea-ui.tmpl | 7 +++++++ web_src/css/base.css | 13 ++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index f71b6611c5ec..6341076323e9 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -2,6 +2,13 @@
+

Link

+

Button

Style: diff --git a/web_src/css/base.css b/web_src/css/base.css index 19fd22934d66..cd01437b4854 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -219,6 +219,10 @@ a { text-decoration-skip-ink: all; } +a:hover { + text-decoration-line: underline; +} + /* a = always colored, underlined on hover */ /* a.muted = colored on hover, underlined on hover */ /* a.suppressed = never colored, underlined on hover */ @@ -239,18 +243,13 @@ a.muted:hover [class*="color-text"], color: var(--color-primary); } -a.muted:hover, -a.suppressed:hover { - text-decoration-line: underline; -} - a.silenced:hover, a.suppressed:hover { color: inherit; } a.silenced:hover { - text-decoration: none; + text-decoration-line: none; } a.label, @@ -258,7 +257,7 @@ a.label, .ui .menu a, .ui.cards a.card, .issue-keyword a { - text-decoration: none !important; + text-decoration-line: none !important; } .ui.search > .results { From 3341bdc6db6a6aeb32e800ed3115267300b13d7b Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 22:33:47 +0100 Subject: [PATCH 11/24] color tweak --- web_src/css/themes/theme-gitea-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 2b22d3c8682e..90c07876279d 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -207,7 +207,7 @@ --color-markup-table-row: #e8e8ff06; --color-markup-code-block: #e8e8ff16; --color-button: #151a1e; - --color-code-bg: #121518; + --color-code-bg: #14171a; --color-shadow: #00001758; --color-secondary-bg: #2f3138; --color-expand-button: #2b353e; From 81396496e867eacdc0b3aa0fe6ace410d406de7b Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 22:47:07 +0100 Subject: [PATCH 12/24] tweak blame button and author --- web_src/css/base.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index cd01437b4854..a0659e1f5e77 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1422,10 +1422,9 @@ a.ui.active.label:hover { } .lines-blame-btn { - padding-left: 10px; - padding-right: 10px; - text-align: right !important; - width: 2%; + padding: 1px 3px; + display: flex; + justify-content: center; } .lines-num { @@ -1536,7 +1535,7 @@ a.ui.active.label:hover { width: 350px; max-width: 350px; display: block; - padding: 0 0 0 10px; + padding: 1px 0 1px 10px; line-height: 20px; box-sizing: content-box; } From eb9bddd38919b0d7a8ebc037d6400a8a58d64467 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 22:55:31 +0100 Subject: [PATCH 13/24] blame tweaks --- routers/web/repo/blame.go | 2 +- web_src/css/base.css | 16 +++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/routers/web/repo/blame.go b/routers/web/repo/blame.go index b088b8387e7e..549ccdeabe5d 100644 --- a/routers/web/repo/blame.go +++ b/routers/web/repo/blame.go @@ -278,7 +278,7 @@ func renderBlame(ctx *context.Context, blameParts []*git.BlamePart, commitNames var avatar string if commit.User != nil { - avatar = string(avatarUtils.Avatar(commit.User, 18, "gt-mr-3")) + avatar = string(avatarUtils.Avatar(commit.User, 18)) } else { avatar = string(avatarUtils.AvatarByEmail(commit.Author.Email, commit.Author.Name, 18, "gt-mr-3")) } diff --git a/web_src/css/base.css b/web_src/css/base.css index a0659e1f5e77..277de5a6c7b7 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1422,14 +1422,13 @@ a.ui.active.label:hover { } .lines-blame-btn { - padding: 1px 3px; + padding: 0 4px; display: flex; justify-content: center; } .lines-num { - padding-left: 10px; - padding-right: 10px; + padding: 0 8px; text-align: right !important; color: var(--color-text-light-2); width: 1%; @@ -1535,7 +1534,7 @@ a.ui.active.label:hover { width: 350px; max-width: 350px; display: block; - padding: 1px 0 1px 10px; + padding: 0 0 0 6px; line-height: 20px; box-sizing: content-box; } @@ -1557,11 +1556,10 @@ a.ui.active.label:hover { flex-shrink: 0; } -.lines-commit .ui.avatar { - height: 18px; - width: 18px; - display: block; - margin-top: 1px; +.blame-avatar { + display: flex; + align-items: center; + margin-right: 4px; } .top-line-blame { From 7e8d1bf2459b0bd752875691e5955f67cc7189a5 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 22:58:27 +0100 Subject: [PATCH 14/24] fix border-radius of last line active --- web_src/css/base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/css/base.css b/web_src/css/base.css index 277de5a6c7b7..9c431861b098 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1497,6 +1497,10 @@ a.ui.active.label:hover { background: var(--color-highlight-bg) !important; } +.file-view tr.active:last-of-type .lines-code { + border-bottom-right-radius: var(--border-radius); +} + .file-view tr.active .lines-num { position: relative; } From e39b87214cfaf2ecfff4f44d84c92ec7df5e6e9a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 23:05:17 +0100 Subject: [PATCH 15/24] more tweaks --- templates/repo/blame.tmpl | 2 +- web_src/css/base.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index f5467f545afe..6f32f27a6cb1 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -45,7 +45,7 @@ {{$row.CommitMessage}}
-
+
{{$row.CommitSince}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index 9c431861b098..fb7bc4ec7788 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1422,7 +1422,7 @@ a.ui.active.label:hover { } .lines-blame-btn { - padding: 0 4px; + padding: 0 1px; display: flex; justify-content: center; } @@ -1535,8 +1535,8 @@ a.ui.active.label:hover { } .lines-commit .blame-info { - width: 350px; - max-width: 350px; + width: 26vw; + max-width: 26vw; display: block; padding: 0 0 0 6px; line-height: 20px; From 69e9e92d8a543e76dadbaa7a36d956595a1f6cd7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 23:43:45 +0100 Subject: [PATCH 16/24] enable blame wrap --- web_src/css/base.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index fb7bc4ec7788..0d874dddb813 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1422,7 +1422,7 @@ a.ui.active.label:hover { } .lines-blame-btn { - padding: 0 1px; + padding: 0 3px; display: flex; justify-content: center; } @@ -1522,9 +1522,8 @@ a.ui.active.label:hover { } .blame .code-inner { - white-space: pre; - word-break: normal; - word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */ + white-space: pre-wrap; + overflow-wrap: anywhere; } .lines-commit { @@ -1535,8 +1534,7 @@ a.ui.active.label:hover { } .lines-commit .blame-info { - width: 26vw; - max-width: 26vw; + width: min(26vw, 300px); display: block; padding: 0 0 0 6px; line-height: 20px; From fceb473720973e052c5f41357f2e0086e681d17a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 Mar 2024 23:48:57 +0100 Subject: [PATCH 17/24] padding tweak --- web_src/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 0d874dddb813..cb49fa9c58a4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1422,7 +1422,7 @@ a.ui.active.label:hover { } .lines-blame-btn { - padding: 0 3px; + padding: 0 0 0 5px; display: flex; justify-content: center; } From 11051b0d54aaa79f3510a5d6718bf287428b1987 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 01:27:07 +0100 Subject: [PATCH 18/24] color tweak --- web_src/css/themes/theme-gitea-dark.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 90c07876279d..bfc905af01ba 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -232,8 +232,8 @@ --color-label-active-bg: #73828eff; --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); - --color-highlight-fg: #877147; - --color-highlight-bg: #39301e; + --color-highlight-fg: #87651e; + --color-highlight-bg: #2c2517; --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; From 8e4423eae27b957c8c25a17ce14be81ac6718ced Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 01:34:19 +0100 Subject: [PATCH 19/24] make code-line-menu work in blame --- templates/repo/blame.tmpl | 6 ++++++ web_src/js/features/repo-code.js | 9 +++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index 6f32f27a6cb1..fc6b65f142ed 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -75,6 +75,12 @@ {{end}} +
+ {{if $.Permission.CanRead $.UnitTypeIssues}} + {{ctx.Locale.Tr "repo.issues.context.reference_issue"}} + {{end}} + {{ctx.Locale.Tr "repo.file_copy_permalink"}} +
diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 99abc6ab5697..0e05a4ecf1c7 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -102,8 +102,8 @@ function showLineButton() { } // find active row and add button - const tr = document.querySelector('.code-view tr.active .lines-code').closest('tr'); - const td = tr.querySelector('td'); + const tr = document.querySelector('.code-view tr.active'); + const td = tr.querySelector('td.lines-num'); const btn = document.createElement('button'); btn.classList.add('code-line-button', 'ui', 'basic', 'button'); btn.innerHTML = svg('octicon-kebab-horizontal'); @@ -148,10 +148,7 @@ export function initRepoCodeView() { document.selection.empty(); } - // show code view menu marker (don't show in blame page) - if (!isBlame()) { - showLineButton(); - } + showLineButton(); }); $(window).on('hashchange', () => { From 782d887697a726af8452518149969cc18e0c5535 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 01:35:06 +0100 Subject: [PATCH 20/24] color tweak --- web_src/css/themes/theme-gitea-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index bfc905af01ba..626590ca5447 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -233,7 +233,7 @@ --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-highlight-fg: #87651e; - --color-highlight-bg: #2c2517; + --color-highlight-bg: #352c1c; --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; From 5e55437d922047b35911b4b9b913f69d4c25b99c Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 01:54:45 +0100 Subject: [PATCH 21/24] fix button hover in button group --- web_src/css/modules/button.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index d76b4cc9882d..222f9296b12a 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -61,6 +61,10 @@ It needs some tricks to tweak the left/right borders with active state */ border-right: none; } +.ui.buttons .button:hover + .button { + border-left: 1px solid var(--color-secondary-dark-1); /* color is approximation */ +} + .ui.buttons .button:first-child, .ui.buttons .button.gt-hidden:first-child + .button { border-left: 1px solid var(--color-light-border); From fed1edba0fed61db022414ab8afde8f2fa7acdb3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 02:02:08 +0100 Subject: [PATCH 22/24] fix button border approxiimation --- web_src/css/modules/button.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 222f9296b12a..1d3f446a9eb7 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -11,6 +11,7 @@ .ui.button:hover { background: var(--color-hover); color: var(--color-text); + border-color: var(--color-secondary-dark-3); } .page-content .ui.button { @@ -62,7 +63,7 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.buttons .button:hover + .button { - border-left: 1px solid var(--color-secondary-dark-1); /* color is approximation */ + border-left: 1px solid var(--color-secondary-dark-3); } .ui.buttons .button:first-child, @@ -111,6 +112,7 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.basic.button:hover { color: var(--color-text); background: var(--color-hover); + border-color: var(--color-secondary-dark-3); } .ui.basic.buttons .button:active, From d8bd752f8f8f6751a736c96e7851a5c90a874c25 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 02:07:20 +0100 Subject: [PATCH 23/24] darken by one shade --- web_src/css/modules/button.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 1d3f446a9eb7..e72260d99b6e 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -11,7 +11,7 @@ .ui.button:hover { background: var(--color-hover); color: var(--color-text); - border-color: var(--color-secondary-dark-3); + border-color: var(--color-secondary-dark-2); } .page-content .ui.button { @@ -63,7 +63,7 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.buttons .button:hover + .button { - border-left: 1px solid var(--color-secondary-dark-3); + border-left: 1px solid var(--color-secondary-dark-2); } .ui.buttons .button:first-child, @@ -112,7 +112,7 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.basic.button:hover { color: var(--color-text); background: var(--color-hover); - border-color: var(--color-secondary-dark-3); + border-color: var(--color-secondary-dark-2); } .ui.basic.buttons .button:active, From b7bcc01350640a28ba889841b6f99576ad624fe3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 09:37:15 +0100 Subject: [PATCH 24/24] Update web_src/js/features/repo-code.js Co-authored-by: 6543 <6543@obermui.de> --- web_src/js/features/repo-code.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 0e05a4ecf1c7..befa09000490 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -53,7 +53,7 @@ function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { }; const updateCopyPermalinkUrl = function(anchor) { - if ($copyPermalink.length === 0) return; + if (!$copyPermalink.length) return; let link = $copyPermalink.attr('data-url'); link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`; $copyPermalink.attr('data-url', link);