feat: tab panel overflow dropdown

mathuo · Feb 27, 2025 · 683177d · 683177d
1 parent 5754ddc
commit 683177d
Show file tree

Hide file tree

Showing 15 changed files with 358 additions and 151 deletions.
diff --git a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts
@@ -1,11 +1,12 @@
 import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import {
-    GroupPanelPartInitParameters,
+    TabPartInitParameters,
     IContentRenderer,
     ITabRenderer,
 } from '../../dockview/types';
 import { PanelUpdateEvent } from '../../panel/types';
+import { TabLocation } from '../../dockview/framework';
 
 export class DockviewPanelModelMock implements IDockviewPanelModel {
     constructor(
@@ -17,8 +18,11 @@ export class DockviewPanelModelMock implements IDockviewPanelModel {
         //
     }
 
+    copyTabComponent(tabLocation: TabLocation): ITabRenderer {
+        return this.tab;
+    }
 
-    init(params: GroupPanelPartInitParameters): void {
+    init(params: TabPartInitParameters): void {
         //
     }
 

diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -2453,17 +2453,17 @@ describe('dockviewComponent', () => {
         const group = dockview.getGroupPanel('panel2')!.api.group;
 
         const viewQuery = group.element.querySelectorAll(
-            '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab'
+            '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-panel > .dv-tabs-container > .dv-tab'
         );
         expect(viewQuery.length).toBe(2);
 
         const viewQuery2 = group.element.querySelectorAll(
-            '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab > .dv-default-tab'
+            '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-panel > .dv-tabs-container > .dv-tab > .dv-default-tab'
         );
         expect(viewQuery2.length).toBe(1);
 
         const viewQuery3 = group.element.querySelectorAll(
-            '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab > .panel-tab-part-panel2'
+            '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-panel > .dv-tabs-container > .dv-tab > .panel-tab-part-panel2'
         );
         expect(viewQuery3.length).toBe(1);
     });

diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
@@ -24,6 +24,7 @@ import { createOffsetDragOverEvent } from '../__test_utils__/utils';
 import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
 import { Emitter } from '../../events';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { TabLocation } from '../../dockview/framework';
 
 enum GroupChangeKind2 {
     ADD_PANEL,
@@ -36,12 +37,16 @@ class TestModel implements IDockviewPanelModel {
     readonly contentComponent: string;
     readonly tab: ITabRenderer;
 
-    constructor(id: string) {
+    constructor(readonly id: string) {
         this.content = new TestHeaderPart(id);
         this.contentComponent = id;
         this.tab = new TestContentPart(id);
     }
 
+    copyTabComponent(tabLocation: TabLocation): ITabRenderer {
+        return new TestHeaderPart(this.id);
+    }
+
     update(event: PanelUpdateEvent): void {
         //
     }

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.scss b/packages/dockview-core/src/dockview/components/titlebar/tabs.scss
@@ -1,83 +1,119 @@
-.dv-tabs-container {
-    display: flex;
-    overflow-x: overlay;
-    overflow-y: hidden;
+.dv-tabs-panel {
+    overflow: hidden;
 
-    scrollbar-width: thin; // firefox
+    &.dv-horizontal {
+        .dv-tabs-container {
+            .dv-tab {
+                &:last-child {
+                    margin-right: 0;
+                }
 
-    &::-webkit-scrollbar {
-        height: 3px;
-    }
+                &:not(:nth-last-child(1)) {
+                    margin-left: 0;
+                }
 
-    /* Track */
-    &::-webkit-scrollbar-track {
-        background: transparent;
+                &:not(:first-child)::before {
+                    content: ' ';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    z-index: 5;
+                    pointer-events: none;
+                    background-color: var(--dv-tab-divider-color);
+                    width: 1px;
+                    height: 100%;
+                }
+            }
+        }
     }
 
-    /* Handle */
-    &::-webkit-scrollbar-thumb {
-        background: var(--dv-tabs-container-scrollbar-color);
-    }
+    .dv-tabs-container {
+        display: flex;
+        overflow: hidden;
+        scrollbar-width: thin; // firefox
 
-    .dv-tab {
-        -webkit-user-drag: element;
-        outline: none;
-        padding: 0.25rem 0.5rem;
-        cursor: pointer;
-        position: relative;
-        box-sizing: border-box;
-        font-size: var(-dv-tab-font-size);
-        margin: var(--dv-tab-margin);
+        &::-webkit-scrollbar {
+            height: 3px;
+        }
 
-        &:first-child {
-            margin-right: 0;
+        /* Track */
+        &::-webkit-scrollbar-track {
+            background: transparent;
         }
 
-        &:not(:nth-last-child(1)) {
-            margin-left: 0;
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+            background: var(--dv-tabs-container-scrollbar-color);
         }
 
-        &:not(:first-child)::before {
-            content: ' ';
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 5;
-            pointer-events: none;
-            background-color: var(--dv-tab-divider-color);
-            width: 1px;
-            height: 100%;
+        .dv-tab {
+            -webkit-user-drag: element;
+            outline: none;
+            padding: 0.25rem 0.5rem;
+            cursor: pointer;
+            position: relative;
+            box-sizing: border-box;
+            font-size: var(--dv-tab-font-size);
+            margin: var(--dv-tab-margin);
         }
     }
 
-    &.dv-tabs-overflow-container {
-        flex-direction: column;
-        height: unset;
+    .dv-tabs-overflow-dropdown-default {
+        background-color: var(
+            --dv-activegroup-hiddenpanel-tab-background-color
+        );
+        height: 100%;
+        color: var(--dv-activegroup-hiddenpanel-tab-color);
+        border-left: 1px solid var(--dv-tab-divider-color);
 
-        .dv-tab {
-            height: var(--dv-tabs-and-actions-container-height);
-        }
+        margin: var(--dv-tab-margin);
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding: 0.25rem 0.5rem;
+        cursor: pointer;
 
-        .dv-active-tab {
-            background-color: var(
-                --dv-activegroup-visiblepanel-tab-background-color
-            );
-            color: var(--dv-activegroup-visiblepanel-tab-color);
+        > span {
+            padding-left: 0.25rem;
         }
-        .dv-inactive-tab {
-            background-color: var(
-                --dv-activegroup-hiddenpanel-tab-background-color
-            );
-            color: var(--dv-activegroup-hiddenpanel-tab-color);
+
+        > svg {
+            transform: rotate(90deg);
         }
     }
 }
 
-.dv-tabs-panel {
-    .dv-tabs-overflow-handle {
-        height: 100%;
-        width: 15px;
-        flex-shrink: 0;
-        background-color: red;
+.dv-tabs-overflow-container {
+    flex-direction: column;
+    height: unset;
+    border: 1px solid var(--dv-tab-divider-color);
+    background-color: var(--dv-group-view-background-color);
+
+    .dv-tab {
+        -webkit-user-drag: element;
+        outline: none;
+        padding: 0.25rem 0.5rem;
+        cursor: pointer;
+        position: relative;
+        box-sizing: border-box;
+        font-size: var(--dv-tab-font-size);
+        margin: var(--dv-tab-margin);
+
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--dv-tab-divider-color);
+        }
+    }
+
+    .dv-active-tab {
+        background-color: var(
+            --dv-activegroup-visiblepanel-tab-background-color
+        );
+        color: var(--dv-activegroup-visiblepanel-tab-color);
+    }
+    .dv-inactive-tab {
+        background-color: var(
+            --dv-activegroup-hiddenpanel-tab-background-color
+        );
+        color: var(--dv-activegroup-hiddenpanel-tab-color);
     }
 }