forked from forgejo/forgejo
[Port] gitea#30014: Various code view improvements
1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074 --- Conflict resolution: Trivial. Ref: https://codeberg.org/forgejo/forgejo/issues/2776 (cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
This commit is contained in:
silverwind
Gusted
parent
1ee494a045
commit
a579a0f318
12 changed files with 145 additions and 103 deletions
|
|
@ -16,8 +16,16 @@ function changeHash(hash) {
|
|||
}
|
||||
}
|
||||
|
||||
function selectRange($list, $select, $from) {
|
||||
$list.removeClass('active');
|
||||
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');
|
||||
|
||||
// add hashchange to permalink
|
||||
const $refInNewIssue = $('a.ref-in-new-issue');
|
||||
|
|
@ -25,7 +33,7 @@ function selectRange($list, $select, $from) {
|
|||
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,9 +43,7 @@ function selectRange($list, $select, $from) {
|
|||
};
|
||||
|
||||
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) {
|
||||
|
|
@ -47,17 +53,15 @@ function selectRange($list, $select, $from) {
|
|||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
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 +73,9 @@ function selectRange($list, $select, $from) {
|
|||
for (let i = a; i <= b; i++) {
|
||||
classes.push(`[rel=L${i}]`);
|
||||
}
|
||||
$list.filter(classes.join(',')).addClass('active');
|
||||
$linesEls.filter(classes.join(',')).each(function () {
|
||||
$(this).closest('tr').addClass('active');
|
||||
});
|
||||
changeHash(`#L${a}-L${b}`);
|
||||
|
||||
updateIssueHref(`L${a}-L${b}`);
|
||||
|
|
@ -78,12 +84,12 @@ function selectRange($list, $select, $from) {
|
|||
return;
|
||||
}
|
||||
}
|
||||
$select.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() {
|
||||
|
|
@ -96,10 +102,10 @@ function showLineButton() {
|
|||
}
|
||||
|
||||
// find active row and add button
|
||||
const tr = document.querySelector('.code-view td.lines-code.active').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');
|
||||
btn.classList.add('code-line-button', 'ui', 'basic', 'button');
|
||||
btn.innerHTML = svg('octicon-kebab-horizontal');
|
||||
td.prepend(btn);
|
||||
|
||||
|
|
@ -123,14 +129,18 @@ 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');
|
||||
} else {
|
||||
$list = $('.code-view td.lines-code');
|
||||
const linesEls = getLineEls();
|
||||
const selectedEls = Array.from(linesEls).filter((el) => {
|
||||
return el.matches(`[rel=${this.getAttribute('id')}]`);
|
||||
});
|
||||
|
||||
let from;
|
||||
if (e.shiftKey) {
|
||||
from = Array.from(linesEls).filter((el) => {
|
||||
return el.closest('tr').classList.contains('active');
|
||||
});
|
||||
}
|
||||
selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
|
||||
selectRange($(linesEls), $(selectedEls), from ? $(from) : null);
|
||||
|
||||
if (window.getSelection) {
|
||||
window.getSelection().removeAllRanges();
|
||||
|
|
@ -138,28 +148,20 @@ export function initRepoCodeView() {
|
|||
document.selection.empty();
|
||||
}
|
||||
|
||||
// show code view menu marker (don't show in blame page)
|
||||
if ($('div.blame').length === 0) {
|
||||
showLineButton();
|
||||
}
|
||||
showLineButton();
|
||||
});
|
||||
|
||||
$(window).on('hashchange', () => {
|
||||
let m = window.location.hash.match(rangeAnchorRegex);
|
||||
let $list;
|
||||
if ($('div.blame').length) {
|
||||
$list = $('.code-view td.lines-code.blame-code');
|
||||
} else {
|
||||
$list = $('.code-view td.lines-code');
|
||||
}
|
||||
const $linesEls = $(getLineEls());
|
||||
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) {
|
||||
if (!isBlame()) {
|
||||
showLineButton();
|
||||
}
|
||||
|
||||
|
|
@ -169,12 +171,12 @@ 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) {
|
||||
if (!isBlame()) {
|
||||
showLineButton();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue