From 4e124e6eb6532e576c0b9eaa326c0afe331a16d8 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 19 Jun 2022 19:55:47 +0100 Subject: [PATCH] feat: don't serialize info when using default tab --- .../dockview/groupControlsRenderer.spec.ts | 56 +++++++++ .../react/dockview/reactHeaderPart.spec.ts | 24 ++++ .../src/dockview/defaultGroupPanelView.ts | 9 +- .../src/react/dockview/reactHeaderPart.ts | 6 +- packages/dockview/src/theme.scss | 118 +++++++++++++++++- 5 files changed, 209 insertions(+), 4 deletions(-) create mode 100644 packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts create mode 100644 packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts diff --git a/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts new file mode 100644 index 000000000..17c90e30e --- /dev/null +++ b/packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts @@ -0,0 +1,56 @@ +import { Groupview } from '../../../groupview/groupview'; +import { + GroupPanel, + GroupviewPanelApi, +} from '../../../groupview/groupviewPanel'; +import { ReactGroupControlsRendererPart } from '../../../react/dockview/groupControlsRenderer'; + +describe('groupControlsRenderer', () => { + test('#1', () => { + const groupviewMock = jest.fn, []>(() => { + return { + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + onDidActivePanelChange: jest.fn(), + }; + }); + + const groupview = new groupviewMock() as Groupview; + + const groupPanelMock = jest.fn, []>(() => { + return { + api: {} as GroupviewPanelApi as any, + model: groupview, + }; + }); + + const groupPanel = new groupPanelMock() as GroupPanel; + + const cut = new ReactGroupControlsRendererPart( + jest.fn(), + { + addPortal: jest.fn(), + }, + groupPanel + ); + + expect(cut.element.childNodes.length).toBe(0); + expect(cut.element.className).toBe('dockview-react-part'); + expect(cut.part).toBeUndefined(); + + cut.init({ + containerApi: jest.fn(), + api: { + onDidActiveChange: jest.fn(), + }, + }); + + const update = jest.fn(); + + jest.spyOn(cut.part!, 'update').mockImplementation(update); + + cut.update({ params: { valueA: 'A' } }); + + expect(update).toBeCalledWith({ valueA: 'A' }); + }); +}); diff --git a/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts b/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts new file mode 100644 index 000000000..dcf3ad437 --- /dev/null +++ b/packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts @@ -0,0 +1,24 @@ +import { DEFAULT_TAB_IDENTIFIER } from '../../../react'; +import { ReactPanelHeaderPart } from '../../../react/dockview/reactHeaderPart'; + +describe('reactHeaderPart', () => { + test('that tab id is present in toJSON when not the default tab', () => { + const cut = new ReactPanelHeaderPart( + 'test-id', + jest.fn(), + jest.fn() + ); + + expect(cut.toJSON()).toEqual({ id: 'test-id' }); + }); + + test('that tab id is not present in the toJSON when is default tab', () => { + const cut = new ReactPanelHeaderPart( + DEFAULT_TAB_IDENTIFIER, + jest.fn(), + jest.fn() + ); + + expect(cut.toJSON()).toEqual({}); + }); +}); diff --git a/packages/dockview/src/dockview/defaultGroupPanelView.ts b/packages/dockview/src/dockview/defaultGroupPanelView.ts index dd15b734e..a433fb5a0 100644 --- a/packages/dockview/src/dockview/defaultGroupPanelView.ts +++ b/packages/dockview/src/dockview/defaultGroupPanelView.ts @@ -55,9 +55,16 @@ export class DefaultGroupPanelView implements IGroupPanelView { } toJSON(): {} { + let tab = + this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(); + + if (tab && Object.keys(tab).length === 0) { + tab = undefined; + } + return { content: this.content.toJSON(), - tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(), + tab, }; } diff --git a/packages/dockview/src/react/dockview/reactHeaderPart.ts b/packages/dockview/src/react/dockview/reactHeaderPart.ts index 69d9313c3..44a1b49e7 100644 --- a/packages/dockview/src/react/dockview/reactHeaderPart.ts +++ b/packages/dockview/src/react/dockview/reactHeaderPart.ts @@ -6,7 +6,7 @@ import { import { GroupPanel } from '../../groupview/groupviewPanel'; import { PanelUpdateEvent } from '../../panel/types'; import { ReactPart, ReactPortalStore } from '../react'; -import { IGroupPanelBaseProps } from './dockview'; +import { DEFAULT_TAB_IDENTIFIER, IGroupPanelBaseProps } from './dockview'; export class ReactPanelHeaderPart implements ITabRenderer { private _element: HTMLElement; @@ -47,6 +47,10 @@ export class ReactPanelHeaderPart implements ITabRenderer { } public toJSON() { + if (this.id === DEFAULT_TAB_IDENTIFIER) { + return {}; + } + return { id: this.id, }; diff --git a/packages/dockview/src/theme.scss b/packages/dockview/src/theme.scss index 9ba9e8e92..c2581f7b6 100644 --- a/packages/dockview/src/theme.scss +++ b/packages/dockview/src/theme.scss @@ -63,21 +63,64 @@ .dockview-theme-vs { @include dockview-theme-dark-mixin(); - --dv-activegroup-visiblepanel-tab-background-color: dodgerblue; - --dv-tabs-and-actions-container-height: 18px; + --dv-tabs-and-actions-container-background-color: #2d2d30; + + --dv-tabs-and-actions-container-height: 20px; --dv-tabs-and-actions-container-font-size: 11px; + --dv-activegroup-visiblepanel-tab-background-color: #007acc; + --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46; + + --dv-activegroup-visiblepanel-tab-color: white; + --dv-activegroup-hiddenpanel-tab-color: white; + --dv-inactivegroup-visiblepanel-tab-color: white; + --dv-inactivegroup-hiddenpanel-tab-color: white; + .groupview { &.active-group { > .tabs-and-actions-container { + box-sizing: content-box; border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color); + + .tab { + &.active-tab { + border-top: 2px solid + var( + --dv-activegroup-visiblepanel-tab-background-color + ); + } + + &.inactive-tab { + border-top: 2px solid + var( + --dv-activegroup-hiddenpanel-tab-background-color + ); + } + } } } &.inactive-group { > .tabs-and-actions-container { + box-sizing: content-box; border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color); + + .tab { + &.active-tab { + border-top: 2px solid + var( + --dv-inactivegroup-visiblepanel-tab-background-color + ); + } + + &.inactive-tab { + border-top: 2px solid + var( + --dv-inactivegroup-hiddenpanel-tab-background-color + ); + } + } } } } @@ -107,6 +150,77 @@ --dv-paneview-active-outline-color: #596f99; } +@mixin dockview-theme-dracula-mixin { + @include dockview-theme-core-mixin(); + // + --dv-group-view-background-color: #282a36; + // + --dv-tabs-and-actions-container-background-color: #191a21; + // + --dv-activegroup-visiblepanel-tab-background-color: #282a36; + --dv-activegroup-hiddenpanel-tab-background-color: #21222c; + --dv-inactivegroup-visiblepanel-tab-background-color: #282a36; + --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c; + --dv-tab-divider-color: #191a21; + // + --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242); + --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164); + --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5); + --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5); + // + --dv-separator-border: #bd93f9; + --dv-paneview-header-border-color: #bd93f9; + + --dv-paneview-active-outline-color: #6272a4; + + .groupview { + &.active-group { + > .tabs-and-actions-container { + > .tabs-container { + > .tab.active-tab { + position: relative; + + &::after { + position: absolute; + left: 0px; + top: 0px; + content: ''; + width: 100%; + height: 1px; + background-color: #94527e; + z-index: 999; + } + } + } + } + } + &.inactive-group { + > .tabs-and-actions-container { + > .tabs-container { + > .tab.active-tab { + position: relative; + + &::after { + position: absolute; + left: 0px; + bottom: 0px; + content: ''; + width: 100%; + height: 1px; + background-color: #5e3d5a; + z-index: 999; + } + } + } + } + } + } +} + .dockview-theme-abyss { @include dockview-theme-abyss-mixin(); } + +.dockview-theme-dracula { + @include dockview-theme-dracula-mixin(); +}