This commit is contained in:
mathuo 2025-03-17 19:48:49 +00:00
commit 54a51ed10b
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
6 changed files with 92 additions and 5 deletions

View File

@ -0,0 +1,66 @@
import { Tabs } from '../../../../dockview/components/titlebar/tabs';
import { fromPartial } from '@total-typescript/shoehorn';
import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
import { DockviewComponent } from '../../../../dockview/dockviewComponent';
describe('tabs', () => {
describe('disableCustomScrollbars', () => {
test('enabled by default', () => {
const cut = new Tabs(
fromPartial<DockviewGroupPanel>({}),
fromPartial<DockviewComponent>({
options: {},
}),
{
showTabsOverflowControl: true,
}
);
expect(
cut.element.querySelectorAll(
'.dv-scrollable > .dv-tabs-container'
).length
).toBe(1);
});
test('enabled when disabled flag is false', () => {
const cut = new Tabs(
fromPartial<DockviewGroupPanel>({}),
fromPartial<DockviewComponent>({
options: {
scrollbars: 'custom',
},
}),
{
showTabsOverflowControl: true,
}
);
expect(
cut.element.querySelectorAll(
'.dv-scrollable > .dv-tabs-container'
).length
).toBe(1);
});
test('disabled when disabled flag is true', () => {
const cut = new Tabs(
fromPartial<DockviewGroupPanel>({}),
fromPartial<DockviewComponent>({
options: {
scrollbars: 'native',
},
}),
{
showTabsOverflowControl: true,
}
);
expect(
cut.element.querySelectorAll(
'.dv-scrollable > .dv-tabs-container'
).length
).toBe(0);
});
});
});

View File

@ -1,7 +1,7 @@
.dv-tabs-container { .dv-tabs-container {
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: auto;
scrollbar-width: thin; // firefox scrollbar-width: thin; // firefox
&.dv-horizontal { &.dv-horizontal {
@ -35,6 +35,12 @@
} }
} }
.dv-scrollable {
> .dv-tabs-container {
overflow: hidden;
}
}
.dv-tab { .dv-tab {
-webkit-user-drag: element; -webkit-user-drag: element;
outline: none; outline: none;

View File

@ -101,13 +101,17 @@ export class Tabs extends CompositeDisposable {
this.showTabsOverflowControl = options.showTabsOverflowControl; this.showTabsOverflowControl = options.showTabsOverflowControl;
const scrollbar = new Scrollbar(this._tabsList); if (accessor.options.scrollbars === 'native') {
this._element = scrollbar.element; this._element = this._tabsList;
} else {
const scrollbar = new Scrollbar(this._tabsList);
this._element = scrollbar.element;
this.addDisposables(scrollbar);
}
this.addDisposables( this.addDisposables(
this._onOverflowTabsChange, this._onOverflowTabsChange,
this._observerDisposable, this._observerDisposable,
scrollbar,
this._onWillShowOverlay, this._onWillShowOverlay,
this._onDrop, this._onDrop,
this._onTabDragStart, this._onTabDragStart,

View File

@ -7,6 +7,10 @@
font-size: var(--dv-tabs-and-actions-container-font-size); font-size: var(--dv-tabs-and-actions-container-font-size);
&.dv-single-tab.dv-full-width-single-tab { &.dv-single-tab.dv-full-width-single-tab {
.dv-scrollable {
flex-grow: 1;
}
.dv-tabs-container { .dv-tabs-container {
flex-grow: 1; flex-grow: 1;

View File

@ -69,6 +69,13 @@ export interface DockviewOptions {
noPanelsOverlay?: 'emptyGroup' | 'watermark'; noPanelsOverlay?: 'emptyGroup' | 'watermark';
theme?: DockviewTheme; theme?: DockviewTheme;
disableTabsOverflowList?: boolean; disableTabsOverflowList?: boolean;
/**
* Select `native` to use built-in scrollbar behaviours and `custom` to use an internal implementation
* that allows for improved scrollbar overlay UX.
*
* This is only applied to the tab header section. Defaults to `custom`.
*/
scrollbars?: 'native' | 'custom';
} }
export interface DockviewDndOverlayEvent extends IAcceptableEvent { export interface DockviewDndOverlayEvent extends IAcceptableEvent {
@ -116,6 +123,7 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
dndEdges: undefined, dndEdges: undefined,
theme: undefined, theme: undefined,
disableTabsOverflowList: undefined, disableTabsOverflowList: undefined,
scrollbars: undefined,
}; };
return Object.keys(properties) as (keyof DockviewOptions)[]; return Object.keys(properties) as (keyof DockviewOptions)[];

View File

@ -1,7 +1,6 @@
.dv-scrollable { .dv-scrollable {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%;
.dv-scrollbar-horizontal { .dv-scrollbar-horizontal {
position: absolute; position: absolute;