Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2177 from TriliumNext/tab-row-scroll

Browse Source 
fix(tab-row): ensure similar behavior between horizontal/vertical scrolling
This commit is contained in:
Elian Doran 2025-06-07 14:05:03 +03:00 committed by GitHub
commit 17c2ae1177
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/client/src/widgets/tab_row.ts
View File

@ -385,38 +385,17 @@ export default class TabRowWidget extends BasicWidget {
}; };
setupScrollEvents() { setupScrollEvents() {
let deltaX = 0; this.$tabScrollingContainer.on('wheel', (event) => {
let isScrolling = false; const wheelEvent = event.originalEvent as WheelEvent;
const stepScroll = () => { if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) {
if (Math.abs(deltaX) > 5) { return;
const step = Math.round(deltaX * 0.2);
deltaX -= step;
this.scrollTabContainer(step, "instant");
requestAnimationFrame(stepScroll);
} else {
this.scrollTabContainer(deltaX, "instant");
deltaX = 0;
isScrolling = false;
} }
};
this.$tabScrollingContainer[0].addEventListener('wheel', async (event) => {
if (!event.shiftKey && event.deltaX === 0) {
event.preventDefault(); event.preventDefault();
// Clamp deltaX between TAB_CONTAINER_MIN_WIDTH and TAB_CONTAINER_MIN_WIDTH * 3
deltaX += Math.sign(event.deltaY) * Math.max(Math.min(Math.abs(event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3), TAB_CONTAINER_MIN_WIDTH); const delta = Math.sign(wheelEvent.deltaX + wheelEvent.deltaY) *
if (!isScrolling) { Math.min(Math.abs(wheelEvent.deltaX + wheelEvent.deltaY), TAB_CONTAINER_MIN_WIDTH * 2);
isScrolling = true;
stepScroll(); this.scrollTabContainer(delta, "instant");
}
} else if (event.shiftKey) {
event.preventDefault();
if (event.deltaY > 0) {
await appContext.tabManager.activateNextTabCommand();
} else {
await appContext.tabManager.activatePreviousTabCommand();
}
this.activeTabEl.scrollIntoView();
}
}); });
this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200)); this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200));
@ -485,8 +464,9 @@ export default class TabRowWidget extends BasicWidget {
// this.$newTab may include margin, and using NEW_TAB_WIDTH could cause tabsContainerWidth to be slightly larger, // this.$newTab may include margin, and using NEW_TAB_WIDTH could cause tabsContainerWidth to be slightly larger,
// resulting in misaligned scrollbars/buttons. Therefore, use outerwidth. // resulting in misaligned scrollbars/buttons. Therefore, use outerwidth.
this.updateOuterWidth(); this.updateOuterWidth();
let tabsContainerWidth = Math.floor(this.$widget.width() ?? 0); let tabsContainerWidth = Math.floor(
tabsContainerWidth -= this.newTabOuterWidth + MIN_FILLER_WIDTH; (this.$widget.width() ?? 0) - this.newTabOuterWidth - MIN_FILLER_WIDTH
);
// Check whether the scroll buttons need to be displayed. // Check whether the scroll buttons need to be displayed.
if ((TAB_CONTAINER_MIN_WIDTH + MARGIN_WIDTH) * numberOfTabs > tabsContainerWidth) { if ((TAB_CONTAINER_MIN_WIDTH + MARGIN_WIDTH) * numberOfTabs > tabsContainerWidth) {
tabsContainerWidth -= this.scrollButtonsOuterWidth; tabsContainerWidth -= this.scrollButtonsOuterWidth;
@ -506,11 +486,11 @@ export default class TabRowWidget extends BasicWidget {
let extraWidthRemaining = totalExtraWidthDueToFlooring; let extraWidthRemaining = totalExtraWidthDueToFlooring;
for (let i = 0; i < numberOfTabs; i += 1) { for (let i = 0; i < numberOfTabs; i += 1) {
const extraWidth = flooredClampedTargetWidth < TAB_CONTAINER_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0; const extraWidth = flooredClampedTargetWidth < TAB_CONTAINER_MAX_WIDTH && extraWidthRemaining >= 1 ? 1 : 0;
widths.push(flooredClampedTargetWidth + extraWidth); widths.push(flooredClampedTargetWidth + extraWidth);
if (extraWidthRemaining > 0) { if (extraWidthRemaining >= 1) {
extraWidthRemaining -= 1; extraWidthRemaining -= 1;
} }
} }