diff --git a/packages/dockview-core/gulpfile.js b/packages/dockview-core/gulpfile.js index 4b62c983d..8d27ebdd8 100644 --- a/packages/dockview-core/gulpfile.js +++ b/packages/dockview-core/gulpfile.js @@ -1,6 +1,13 @@ const gulp = require('gulp'); -const buildfile = require('../../scripts/build'); +const gulpSass = require('gulp-dart-sass'); +const concat = require('gulp-concat'); -buildfile.init(); +gulp.task('sass', () => { + return gulp + .src('./src/**/*.scss') + .pipe(gulpSass().on('error', gulpSass.logError)) + .pipe(concat('dockview.css')) + .pipe(gulp.dest('./dist/styles/')); +}); gulp.task('run', gulp.series(['sass'])); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 1ec04ab90..b99eb28fe 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -2015,7 +2015,7 @@ describe('dockviewComponent', () => { expect(viewQuery.length).toBe(2); const viewQuery2 = group.element.querySelectorAll( - '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .default-tab' + '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .dv-default-tab' ); expect(viewQuery2.length).toBe(1); diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.scss b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss index 2a1e58734..c088c9209 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.scss +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss @@ -28,29 +28,33 @@ } &.dv-tab-dragging { - .tab-action { + .dv-default-tab-action { background-color: var(--dv-activegroup-visiblepanel-tab-color); } } - &.active-tab > .default-tab { - .tab-action { - visibility: visible; - } - } - - &.inactive-tab > .default-tab { - .tab-action { - visibility: hidden; - } - &:hover { - .tab-action { + &.active-tab { + .dv-default-tab { + .dv-default-tab-action { visibility: visible; } } } - .default-tab { + &.inactive-tab { + .dv-default-tab { + .dv-default-tab-action { + visibility: hidden; + } + &:hover { + .dv-default-tab-action { + visibility: visible; + } + } + } + } + + .dv-default-tab { position: relative; height: 100%; display: flex; @@ -60,33 +64,21 @@ white-space: nowrap; text-overflow: elipsis; - .tab-content { + .dv-default-tab-content { padding: 0px 8px; flex-grow: 1; } - .action-container { - text-align: right; + .dv-default-tab-action { + padding: 4px; display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; - .tab-list { - display: flex; - padding: 0px; - margin: 0px; - justify-content: flex-end; - - .tab-action { - padding: 4px; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - - &:hover { - border-radius: 2px; - background-color: var(--dv-icon-hover-background-color); - } - } + &:hover { + border-radius: 2px; + background-color: var(--dv-icon-hover-background-color); } } } diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index b69ce025d..254835de9 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -8,8 +8,6 @@ import { createCloseButton } from '../../../svg'; export class DefaultTab extends CompositeDisposable implements ITabRenderer { private _element: HTMLElement; private _content: HTMLElement; - private _actionContainer: HTMLElement; - private _list: HTMLElement; private action: HTMLElement; // private params: GroupPanelPartInitParameters = {} as any; @@ -22,29 +20,21 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { super(); this._element = document.createElement('div'); - this._element.className = 'default-tab'; + this._element.className = 'dv-default-tab'; // this._content = document.createElement('div'); - this._content.className = 'tab-content'; - // - this._actionContainer = document.createElement('div'); - this._actionContainer.className = 'action-container'; - // - this._list = document.createElement('ul'); - this._list.className = 'tab-list'; - // + this._content.className = 'dv-default-tab-content'; + this.action = document.createElement('div'); - this.action.className = 'tab-action'; + this.action.className = 'dv-default-tab-action'; this.action.appendChild(createCloseButton()); // this._element.appendChild(this._content); - this._element.appendChild(this._actionContainer); - this._actionContainer.appendChild(this._list); - this._list.appendChild(this.action); + this._element.appendChild(this.action); // this.addDisposables( - addDisposableListener(this._actionContainer, 'mousedown', (ev) => { + addDisposableListener(this.action, 'mousedown', (ev) => { ev.preventDefault(); }) ); diff --git a/packages/dockview/gulpfile.js b/packages/dockview/gulpfile.js deleted file mode 100644 index 4b62c983d..000000000 --- a/packages/dockview/gulpfile.js +++ /dev/null @@ -1,6 +0,0 @@ -const gulp = require('gulp'); -const buildfile = require('../../scripts/build'); - -buildfile.init(); - -gulp.task('run', gulp.series(['sass'])); diff --git a/packages/dockview/package.json b/packages/dockview/package.json index 9260d11fc..e83c74c1d 100644 --- a/packages/dockview/package.json +++ b/packages/dockview/package.json @@ -44,7 +44,7 @@ "build": "npm run build:package && npm run build:bundles", "build:bundles": "rollup -c", "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics", - "build:css": "gulp sass", + "build:css": "node scripts/copy-css.js", "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics", "build:package": "npm run build:cjs && npm run build:esm && npm run build:css", "clean": "rimraf dist/ .build/ .rollup.cache/", diff --git a/packages/dockview/scripts/copy-css.js b/packages/dockview/scripts/copy-css.js new file mode 100644 index 000000000..2a3b11c43 --- /dev/null +++ b/packages/dockview/scripts/copy-css.js @@ -0,0 +1,13 @@ +const path = require('path'); +const fs = require('fs'); + +const outDir = path.join(__dirname, '../dist/styles'); + +if (!fs.existsSync(outDir)) { + fs.mkdirSync(outDir); +} + +fs.copyFileSync( + path.join(__dirname, '../../dockview-core/dist/styles/dockview.css'), + path.join(outDir, 'dockview.css') +); diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx index bfbc96bb4..94f6b1050 100644 --- a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx +++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx @@ -18,8 +18,8 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); - expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy(); + const element = await screen.getByTestId('dockview-dv-default-tab'); + expect(element.querySelector('.dv-default-tab-action')).toBeTruthy(); }); test('that title is displayed', async () => { @@ -37,9 +37,9 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); + const element = await screen.getByTestId('dockview-dv-default-tab'); expect( - element.querySelector('.dockview-react-tab-title')?.textContent + element.querySelector('.dv-default-tab-content')?.textContent ).toBe('test_title'); }); @@ -57,8 +57,8 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); - expect(element.querySelector('.dv-react-tab-close-btn')).toBeNull(); + const element = await screen.getByTestId('dockview-dv-default-tab'); + expect(element.querySelector('.dv-default-tab-action')).toBeNull(); }); test('that settings closeActionOverride skips api.close()', async () => { @@ -79,9 +79,9 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); + const element = await screen.getByTestId('dockview-dv-default-tab'); const btn = element.querySelector( - '.dv-react-tab-close-btn' + '.dv-default-tab-action' ) as HTMLElement; fireEvent.click(btn); @@ -104,9 +104,9 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); + const element = await screen.getByTestId('dockview-dv-default-tab'); const btn = element.querySelector( - '.dv-react-tab-close-btn' + '.dv-default-tab-action' ) as HTMLElement; fireEvent.click(btn); @@ -127,8 +127,8 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); - expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy(); + const element = await screen.getByTestId('dockview-dv-default-tab'); + expect(element.querySelector('.dv-default-tab-action')).toBeTruthy(); }); test('that mouseDown on close button prevents panel becoming active', async () => { @@ -146,9 +146,9 @@ describe('defaultTab', () => { /> ); - const element = await screen.getByTestId('dockview-default-tab'); + const element = await screen.getByTestId('dockview-dv-default-tab'); const btn = element.querySelector( - '.dv-react-tab-close-btn' + '.dv-default-tab-action' ) as HTMLElement; fireEvent.mouseDown(btn); diff --git a/packages/dockview/src/dockview/defaultTab.scss b/packages/dockview/src/dockview/defaultTab.scss deleted file mode 100644 index 3e3a89085..000000000 --- a/packages/dockview/src/dockview/defaultTab.scss +++ /dev/null @@ -1,32 +0,0 @@ -.tab { - .dockview-react-tab { - display: flex; - padding: 0px 8px; - align-items: center; - height: 100%; - - .dockview-react-tab-title { - padding: 0px 8px; - flex-grow: 1; - } - - .dv-react-tab-close-btn { - padding: 4px; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - - &:hover { - border-radius: 2px; - background-color: var(--dv-icon-hover-background-color); - } - } - } - - &.inactive-tab:not(:hover) { - .dv-react-tab-close-btn { - visibility: hidden; - } - } -} diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx index 5032cfb03..e00d9a7d8 100644 --- a/packages/dockview/src/dockview/defaultTab.tsx +++ b/packages/dockview/src/dockview/defaultTab.tsx @@ -52,15 +52,15 @@ export const DockviewDefaultTab: React.FunctionComponent< return (
- {api.title} + {api.title} {!hideClose && (
diff --git a/packages/dockview/src/dockview/dockview.scss b/packages/dockview/src/dockview/dockview.scss deleted file mode 100644 index d9a7a9485..000000000 --- a/packages/dockview/src/dockview/dockview.scss +++ /dev/null @@ -1,4 +0,0 @@ -.dockview-react-part { - height: 100%; - width: 100%; -} diff --git a/packages/dockview/src/dockview/headerActionsRenderer.ts b/packages/dockview/src/dockview/headerActionsRenderer.ts index 603d09061..552bbf465 100644 --- a/packages/dockview/src/dockview/headerActionsRenderer.ts +++ b/packages/dockview/src/dockview/headerActionsRenderer.ts @@ -43,6 +43,8 @@ export class ReactHeaderActionsRendererPart { ) { this._element = document.createElement('div'); this._element.className = 'dockview-react-part'; + this._element.style.height = '100%'; + this._element.style.width = '100%'; } focus(): void { diff --git a/packages/dockview/src/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts index e98137c7d..653a736d1 100644 --- a/packages/dockview/src/dockview/reactContentPart.ts +++ b/packages/dockview/src/dockview/reactContentPart.ts @@ -30,6 +30,8 @@ export class ReactPanelContentPart implements IContentRenderer { ) { this._element = document.createElement('div'); this._element.className = 'dockview-react-part'; + this._element.style.height = '100%'; + this._element.style.width = '100%'; } focus(): void { diff --git a/packages/dockview/src/dockview/reactHeaderPart.ts b/packages/dockview/src/dockview/reactHeaderPart.ts index 133416beb..173ef8825 100644 --- a/packages/dockview/src/dockview/reactHeaderPart.ts +++ b/packages/dockview/src/dockview/reactHeaderPart.ts @@ -22,6 +22,8 @@ export class ReactPanelHeaderPart implements ITabRenderer { ) { this._element = document.createElement('div'); this._element.className = 'dockview-react-part'; + this._element.style.height = '100%'; + this._element.style.width = '100%'; } focus(): void { diff --git a/packages/dockview/src/dockview/reactWatermarkPart.ts b/packages/dockview/src/dockview/reactWatermarkPart.ts index 2d9d0db85..ce13aa215 100644 --- a/packages/dockview/src/dockview/reactWatermarkPart.ts +++ b/packages/dockview/src/dockview/reactWatermarkPart.ts @@ -32,6 +32,8 @@ export class ReactWatermarkPart implements IWatermarkRenderer { ) { this._element = document.createElement('div'); this._element.className = 'dockview-react-part'; + this._element.style.height = '100%'; + this._element.style.width = '100%'; } init(parameters: WatermarkRendererInitParameters): void { diff --git a/packages/dockview/src/index.scss b/packages/dockview/src/index.scss deleted file mode 100644 index 7c4a8f79e..000000000 --- a/packages/dockview/src/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "dockview-core/dist/styles/dockview.css" diff --git a/scripts/build.js b/scripts/build.js deleted file mode 100644 index 36f2d6c88..000000000 --- a/scripts/build.js +++ /dev/null @@ -1,15 +0,0 @@ -const gulp = require('gulp'); -const gulpSass = require('gulp-dart-sass'); -const concat = require('gulp-concat'); - -const init = () => { - gulp.task('sass', () => { - return gulp - .src('./src/**/*.scss') - .pipe(gulpSass().on('error', gulpSass.logError)) - .pipe(concat('dockview.css')) - .pipe(gulp.dest('./dist/styles/')); - }); -}; - -module.exports = { init };