mirror of
https://github.com/mathuo/dockview
synced 2025-05-02 01:28:28 +00:00
Merge branch 'master' of https://github.com/mathuo/dockview
This commit is contained in:
commit
54a51ed10b
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -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;
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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)[];
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user