github/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-06-25 15:53:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix line-button issue after file selection in file tree (#34574)

Browse Source 
Fix the issue where the line-button fails to work after selecting a file
from the file tree.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Kerwin Bryant 2025-06-02 09:52:12 +08:00 committed by GitHub
parent bb6377d080
commit 74858dc5ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web_src/css/repo/file-view.css
View File

@ -1,7 +1,10 @@
.file-view tr.active {
.file-view tr.active .lines-num,
.file-view tr.active .lines-escape,
.file-view tr.active .lines-code {
background: var(--color-highlight-bg);
}
/* set correct border radius on the last active lines, to avoid border overflow */
.file-view tr.active:last-of-type .lines-code {
border-bottom-right-radius: var(--border-radius);
}
@ -10,6 +13,7 @@
position: relative;
}
/* add a darker "handler" at the beginning of the active line */
.file-view tr.active .lines-num::before {
content: "";
position: absolute;

13
web_src/js/features/repo-code.ts
View File

@ -110,10 +110,15 @@ function showLineButton() {
}
export function initRepoCodeView() {
if (!document.querySelector('.code-view .lines-num')) return;
// When viewing a file or blame, there is always a ".file-view" element,
// but the ".code-view" class is only present when viewing the "code" of a file; it is not present when viewing a PDF file.
// Since the ".file-view" will be dynamically reloaded when navigating via the left file tree (eg: view a PDF file, then view a source code file, etc.)
// the "code-view" related event listeners should always be added when the current page contains ".file-view" element.
if (!document.querySelector('.repo-view-container .file-view')) return;
// "file code view" and "blame" pages need this "line number button" feature
let selRangeStart: string;
addDelegatedEventListener(document, 'click', '.lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
if (!selRangeStart || !e.shiftKey) {
selRangeStart = el.getAttribute('id');
selectRange(selRangeStart);
@ -125,12 +130,14 @@ export function initRepoCodeView() {
showLineButton();
});
// apply the selected range from the URL hash
const onHashChange = () => {
if (!window.location.hash) return;
if (!document.querySelector('.code-view .lines-num')) return;
const range = window.location.hash.substring(1);
const first = selectRange(range);
if (first) {
// set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
// set scrollRestoration to 'manual' when there is a hash in the URL, so that the scroll position will not be remembered after refreshing
if (window.history.scrollRestoration !== 'manual') window.history.scrollRestoration = 'manual';
first.scrollIntoView({block: 'start'});
showLineButton();

27
web_src/js/modules/tippy.ts
View File

@ -40,6 +40,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
}
}
visibleInstances.add(instance);
target.setAttribute('aria-controls', instance.popper.id);
return onShow?.(instance);
},
arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
@ -180,13 +181,25 @@ export function initGlobalTooltips(): void {
}
export function showTemporaryTooltip(target: Element, content: Content): void {
// if the target is inside a dropdown, the menu will be hidden soon
// so display the tooltip on the dropdown instead
target = target.closest('.ui.dropdown') || target;
const tippy = target._tippy ?? attachTooltip(target, content);
tippy.setContent(content);
if (!tippy.state.isShown) tippy.show();
tippy.setProps({
// if the target is inside a dropdown or tippy popup, the menu will be hidden soon
// so display the tooltip on the "aria-controls" element or dropdown instead
let refClientRect: DOMRect;
const popupTippyId = target.closest(`[data-tippy-root]`)?.id;
if (popupTippyId) {
// for example, the "Copy Permalink" button in the "File View" page for the selected lines
target = document.body;
refClientRect = document.querySelector(`[aria-controls="${CSS.escape(popupTippyId)}"]`)?.getBoundingClientRect();
refClientRect = refClientRect ?? new DOMRect(0, 0, 0, 0); // fallback to empty rect if not found, tippy doesn't accept null
} else {
// for example, the "Copy Link" button in the issue header dropdown menu
target = target.closest('.ui.dropdown') ?? target;
refClientRect = target.getBoundingClientRect();
}
const tooltipTippy = target._tippy ?? attachTooltip(target, content);
tooltipTippy.setContent(content);
tooltipTippy.setProps({getReferenceClientRect: () => refClientRect});
if (!tooltipTippy.state.isShown) tooltipTippy.show();
tooltipTippy.setProps({
onHidden: (tippy) => {
// reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
if (!attachTooltip(target)) {