Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-06 14:58:32 +02:00
Code Issues Activity

refactor: improve sidebar positioning and visibility logic

Browse Source 
- Enhance sidebar positioning to ensure it aligns with the file header and does not exceed the content's bottom.
- Implement logic to hide the sidebar when the file content is scrolled out of view.
- Replace IntersectionObserver with a scroll event listener for updating sidebar position, improving performance and responsiveness.
This commit is contained in:
hamki 2026-01-01 08:37:27 +08:00
parent 111bbcd7c0
commit f8868e5dab
No known key found for this signature in database
GPG Key ID: 092D4EC7F4DECB68
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web_src/js/features/file-view.ts
View File

@ -61,17 +61,30 @@ async function renderRawFileToContainer(container: HTMLElement, rawFileLink: str
function updateSidebarPosition(elFileView: HTMLElement, sidebar: HTMLElement): void {
const fileHeader = elFileView.querySelector('.file-header');
if (!fileHeader) return;
const segment = elFileView.querySelector('.ui.segment');
if (!fileHeader || !segment) return;
const headerRect = fileHeader.getBoundingClientRect();
// Align sidebar top with the file header top, with a minimum of 12px from viewport top
const topPos = Math.max(12, headerRect.top);
sidebar.style.top = `${topPos}px`;
const segmentRect = segment.getBoundingClientRect();
const sidebarHeight = sidebar.offsetHeight;
// Position sidebar right next to the content (works for both file view and home page)
const segment = elFileView.querySelector('.ui.segment');
if (segment) {
const segmentRect = segment.getBoundingClientRect();
// Calculate the maximum top position so sidebar doesn't exceed file content bottom
const maxTopPos = segmentRect.bottom - sidebarHeight;
// Align sidebar top with the file header top, with constraints:
// - minimum of 12px from viewport top
// - maximum so sidebar bottom doesn't exceed segment bottom
let topPos = Math.max(12, headerRect.top);
topPos = Math.min(topPos, maxTopPos);
// Hide sidebar if file content is scrolled out of view
if (segmentRect.bottom < 50 || segmentRect.top > window.innerHeight) {
sidebar.style.opacity = '0';
} else {
sidebar.style.opacity = '';
sidebar.style.top = `${topPos}px`;
// Position sidebar right next to the content
const leftPos = segmentRect.right + 8; // 8px gap from content
sidebar.style.left = `${leftPos}px`;
sidebar.style.right = 'auto';
@ -147,17 +160,8 @@ function initSidebarToggle(elFileView: HTMLElement): void {
});
resizeObserver.observe(document.body);
const fileHeader = elFileView.querySelector('.file-header');
if (fileHeader) {
const intersectionObserver = new IntersectionObserver(() => {
updatePosition();
}, {
root: null,
rootMargin: '0px',
threshold: [0, 0.25, 0.5, 0.75, 1.0],
});
intersectionObserver.observe(fileHeader);
}
// Update position on scroll
window.addEventListener('scroll', updatePosition, {passive: true});
toggleBtn.addEventListener('click', () => {
const isCurrentlyVisible = !sidebar.classList.contains('sidebar-panel-hidden');