rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 17:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: css exported only from core package

Browse Source
This commit is contained in:
mathuo 2024-03-13 22:23:01 +00:00
parent ddcb42fe53
commit 4a9a791047
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
17 changed files with 83 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/dockview-core/gulpfile.js
View File

@ -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']));

2
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -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);

62
packages/dockview-core/src/dockview/components/tab/defaultTab.scss
View File

@ -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);
}
}
}

22
packages/dockview-core/src/dockview/components/tab/defaultTab.ts
View File

@ -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();
})
);

6
packages/dockview/gulpfile.js
View File

@ -1,6 +0,0 @@
const gulp = require('gulp');
const buildfile = require('../../scripts/build');
buildfile.init();
gulp.task('run', gulp.series(['sass']));

2
packages/dockview/package.json
View File

@ -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/",

13
packages/dockview/scripts/copy-css.js Normal file
View File

@ -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')
);

28
packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
View File

@ -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);

32
packages/dockview/src/dockview/defaultTab.scss
View File

@ -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;
}
}
}

8
packages/dockview/src/dockview/defaultTab.tsx
View File

@ -52,15 +52,15 @@ export const DockviewDefaultTab: React.FunctionComponent<
return (
<div
data-testid="dockview-default-tab"
data-testid="dockview-dv-default-tab"
{...rest}
onClick={onClick}
className="dockview-react-tab"
className="dv-default-tab"
>
<span className="dockview-react-tab-title">{api.title}</span>
<span className="dv-default-tab-content">{api.title}</span>
{!hideClose && (
<div
className="dv-react-tab-close-btn"
className="dv-default-tab-action"
onMouseDown={onMouseDown}
onClick={onClose}
>

4
packages/dockview/src/dockview/dockview.scss
View File

@ -1,4 +0,0 @@
.dockview-react-part {
height: 100%;
width: 100%;
}

2
packages/dockview/src/dockview/headerActionsRenderer.ts
View File

@ -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 {

2
packages/dockview/src/dockview/reactContentPart.ts
View File

@ -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 {

2
packages/dockview/src/dockview/reactHeaderPart.ts
View File

@ -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 {

2
packages/dockview/src/dockview/reactWatermarkPart.ts
View File

@ -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 {

1
packages/dockview/src/index.scss
View File

@ -1 +0,0 @@
@import "dockview-core/dist/styles/dockview.css"

15
scripts/build.js
View File

@ -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 };