code

2025-03-12 17:02:04 +00:00 · 2020-10-21 20:04:23 +01:00 · 2020-10-21 20:04:23 +01:00 · 72b0f8861c
commit 72b0f8861c
parent 2126e33e60
13 changed files with 52 additions and 24 deletions
--- a/packages/splitview-demo/src/layout-grid/application.tsx
+++ b/packages/splitview-demo/src/layout-grid/application.tsx
@ -95,6 +95,7 @@ export const Application = () => {

    return (
        <GridviewComponent
+            // className={'visual-studio-theme'}
            components={rootcomponents}
            onReady={onReady}
            orientation={Orientation.VERTICAL}
--- a/packages/splitview-demo/src/layout-grid/layoutGrid.layout.json
+++ b/packages/splitview-demo/src/layout-grid/layoutGrid.layout.json
@ -97,8 +97,5 @@
            "state": {}
        }
    },
-    "options":{
-        "tabHeight": 35
-    },
    "activeGroup": "group_2"
 }
--- a/packages/splitview-demo/src/layout-grid/settingsPanel.tsx
+++ b/packages/splitview-demo/src/layout-grid/settingsPanel.tsx
@ -17,6 +17,10 @@ export const Settings = (props: IGroupPanelProps) => {
        props.containerApi.setTabHeight(tabHeight);
    };

+    const onRemove = () => {
+        props.containerApi.setTabHeight(undefined);
+    };
+
    return (
        <div style={{ height: '100%', color: 'white' }}>
            <label>
@ -27,6 +31,7 @@ export const Settings = (props: IGroupPanelProps) => {
                    type="number"
                />
                <button onClick={onClick}>Apply</button>
+                <button onClick={onRemove}>Remove</button>
            </label>
        </div>
    );
--- a/packages/splitview/src/api/component.api.ts
+++ b/packages/splitview/src/api/component.api.ts
@ -290,7 +290,7 @@ export class DockviewApi {
        return this.component.getTabHeight();
    }

-    setTabHeight(height: number) {
+    setTabHeight(height: number | undefined) {
        this.component.setTabHeight(height);
    }

--- a/packages/splitview/src/dockview/componentDockview.ts
+++ b/packages/splitview/src/dockview/componentDockview.ts
@ -82,7 +82,7 @@ export interface IComponentDockview extends IBaseGrid<IGroupview> {
    fireMouseEvent(event: LayoutMouseEvent): void;
    createWatermarkComponent(): WatermarkPart;
    setAutoResizeToFit(enabled: boolean): void;
-    setTabHeight(height: number): void;
+    setTabHeight(height: number | undefined): void;
    getTabHeight(): number;
    totalPanels: number;
    // lifecycle
@ -162,9 +162,6 @@ export class ComponentDockview
        if (!this.options.components) {
            this.options.components = {};
        }
-        if (typeof this.options.tabHeight !== 'number') {
-            this.options.tabHeight = DEFAULT_TAB_HEIGHT;
-        }
        if (!this.options.frameworkComponents) {
            this.options.frameworkComponents = {};
        }
@ -428,7 +425,7 @@ export class ComponentDockview
        }
        const { grid, panels, options, activeGroup } = data;

-        if (typeof options.tabHeight === 'number') {
+        if (typeof options?.tabHeight === 'number') {
            this.setTabHeight(options.tabHeight);
        }

@ -464,7 +461,7 @@ export class ComponentDockview
        return true;
    }

-    public setTabHeight(height: number) {
+    public setTabHeight(height: number | undefined) {
        this.options.tabHeight = height;
        this.groups.forEach((value) => {
            value.value.tabHeight = height;
--- a/packages/splitview/src/dockview/components/tab/defaultTab.scss
+++ b/packages/splitview/src/dockview/components/tab/defaultTab.scss
@ -31,7 +31,6 @@
        padding-left: 10px;
        white-space: nowrap;
        text-overflow: elipsis;
-        font-size: 13px;

        .tab-content {
            flex-grow: 1;
--- a/packages/splitview/src/groupview/titlebar/tabContainer.scss
+++ b/packages/splitview/src/groupview/titlebar/tabContainer.scss
@ -4,6 +4,8 @@
    overflow: overlay;
    flex-shrink: 0;
    box-sizing: border-box;
+    height: var(--title-height);
+    font-size: var(--title-font-size);

    &.hidden {
        display: none;
@ -27,7 +29,6 @@
        flex-shrink: 0;
        flex-grow: 1;
        display: flex;
-        font-size: 13px;
        overflow-x: overlay;
        overflow-y: hidden;

--- a/packages/splitview/src/groupview/titlebar/tabContainer.ts
+++ b/packages/splitview/src/groupview/titlebar/tabContainer.ts
@ -5,13 +5,7 @@ import {
 } from '../../lifecycle';
 import { addDisposableListener, Emitter, Event } from '../../events';
 import { ITab, Tab } from '../panel/tab/tab';
-import {
-    removeClasses,
-    addClasses,
-    toggleClass,
-    isInTree,
-    isAncestor,
-} from '../../dom';
+import { removeClasses, addClasses, toggleClass } from '../../dom';
 import { hasProcessed, Position } from '../droptarget/droptarget';
 import { TabDropEvent } from '../events';

@ -71,7 +65,16 @@ export class TabContainer extends CompositeDisposable implements ITabContainer {

    set height(value: number) {
        this._height = value;
-        this._element.style.height = `${this.height}px`;
+        if (typeof value !== 'number') {
+            // removeClasses(this.element, 'separator-border');
+            this.element.style.removeProperty('--title-height');
+        } else {
+            // addClasses(this.element, 'separator-border');
+            // if (styles?.separatorBorder) {
+            this.element.style.setProperty('--title-height', `${value}px`);
+            // }
+        }
+        // this._element.style.height = `${this.height}px`;
    }

    public get element() {
--- a/packages/splitview/src/react/dockview/dockview.tsx
+++ b/packages/splitview/src/react/dockview/dockview.tsx
@ -37,6 +37,7 @@ export interface IDockviewComponentProps {
    enableExternalDragEvents?: boolean;
    onTabContextMenu?: (event: TabContextMenuEvent) => void;
    hideBorders?: boolean;
+    className?: string;
 }

 export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps> = (
@ -132,7 +133,11 @@ export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps>
    }, [props.onTabContextMenu]);

    return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
            {portals}
        </div>
    );
--- a/packages/splitview/src/react/gridview/gridview.tsx
+++ b/packages/splitview/src/react/gridview/gridview.tsx
@ -24,6 +24,7 @@ export interface IGridviewComponentProps {
    onReady?: (event: GridviewReadyEvent) => void;
    components?: PanelCollection<IGridviewPanelProps>;
    hideBorders?: boolean;
+    className?: string;
 }

 export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps> = (
@ -61,7 +62,11 @@ export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps>
    }, []);

    return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
            {portals}
        </div>
    );
--- a/packages/splitview/src/react/paneview/paneview.tsx
+++ b/packages/splitview/src/react/paneview/paneview.tsx
@ -23,6 +23,7 @@ export interface IPaneviewComponentProps {
    onReady?: (event: PaneviewReadyEvent) => void;
    components?: PanelCollection<IPaneviewPanelProps>;
    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    className?: string;
 }

 export const PaneviewComponent: React.FunctionComponent<IPaneviewComponentProps> = (
@ -78,7 +79,11 @@ export const PaneviewComponent: React.FunctionComponent<IPaneviewComponentProps>
    }, []);

    return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
            {portals}
        </div>
    );
--- a/packages/splitview/src/react/splitview/splitview.tsx
+++ b/packages/splitview/src/react/splitview/splitview.tsx
@ -25,6 +25,7 @@ export interface ISplitviewComponentProps {
    components: PanelCollection<ISplitviewPanelProps>;
    proportionalLayout?: boolean;
    hideBorders?: boolean;
+    className?: string;
 }

 export const SplitviewComponent: React.FunctionComponent<ISplitviewComponentProps> = (
@ -65,7 +66,11 @@ export const SplitviewComponent: React.FunctionComponent<ISplitviewComponentProp
    }, []);

    return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
            {portals}
        </div>
    );
--- a/packages/splitview/src/theme.scss
+++ b/packages/splitview/src/theme.scss
@ -21,10 +21,15 @@
    --tab-dirty-icon: url('https://fonts.gstatic.com/s/i/materialicons/lens/v6/24px.svg');
    //
    --separator-border: rgb(68, 68, 68);
+
+    --title-font-size: 13px;
+    --title-height: 35px;
 }

 .visual-studio-theme {
    --active-tab-background-visible: dodgerblue;
+    --title-height: 18px;
+    --title-font-size: 11px;

    .groupview {
        &.active-group {