mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 19:38:23 +00:00 
			
		
		
		
	Fix line-button issue after file selection in file tree (#34574)
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:
		| @@ -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; | ||||
|   | ||||
| @@ -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(); | ||||
|   | ||||
| @@ -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)) { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user