refactor: change dist/styles.css to dist/styles/dockview.css

This commit is contained in:
mathuo 2021-03-22 23:16:47 +00:00
parent 65a8095e27
commit c91ab8617c
12 changed files with 46 additions and 53 deletions

View File

@ -39,10 +39,10 @@ npm install --save dockview
## Setup ## Setup
You must import or reference the stylesheet at `dockview/dist/styles.css`. For example: You must import or reference the stylesheet at `dockview/dist/styles/dockview.css`. For example:
```css ```css
@import '~dockview/dist/styles.css'; @import '~dockview/dist/styles/dockview.css';
``` ```
You should also attach a dockview theme to an element containing your components. For example: You should also attach a dockview theme to an element containing your components. For example:

View File

@ -1,4 +1,4 @@
@import '~dockview/dist/styles.css'; @import '~dockview/dist/styles/dockview.css';
body { body {
margin: 0; margin: 0;

View File

@ -10,7 +10,6 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IDockviewPanelProps> = { const components: PanelCollection<IDockviewPanelProps> = {
default: (props) => { default: (props) => {

View File

@ -10,7 +10,6 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IDockviewPanelProps> = { const components: PanelCollection<IDockviewPanelProps> = {
default: (props) => { default: (props) => {

View File

@ -10,7 +10,6 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IDockviewPanelProps> = { const components: PanelCollection<IDockviewPanelProps> = {
default: (props) => { default: (props) => {
@ -29,8 +28,6 @@ const components: PanelCollection<IDockviewPanelProps> = {
}, },
}; };
const Watermark = (props: IWatermarkPanelProps) => { const Watermark = (props: IWatermarkPanelProps) => {
const [size, setSize] = React.useState<number>(props.containerApi.size); const [size, setSize] = React.useState<number>(props.containerApi.size);
const [panels, setPanels] = React.useState<number>( const [panels, setPanels] = React.useState<number>(

View File

@ -8,7 +8,6 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Story, Meta } from '@storybook/react'; import { Story, Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IGridviewPanelProps> = { const components: PanelCollection<IGridviewPanelProps> = {
default: (props) => { default: (props) => {

View File

@ -14,19 +14,21 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Story, Meta } from '@storybook/react'; import { Story, Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IPaneviewPanelProps> = { const components: PanelCollection<IPaneviewPanelProps> = {
default: (props) => { default: (props) => {
const [constraints, setConstraints] = React.useState< const [
PanelConstraintChangeEvent constraints,
>(); setConstraints,
const [dimensions, setDimensions] = React.useState< ] = React.useState<PanelConstraintChangeEvent>();
PanelDimensionChangeEvent const [
>(); dimensions,
const [expansionState, setExpansionState] = React.useState< setDimensions,
ExpansionEvent ] = React.useState<PanelDimensionChangeEvent>();
>(); const [
expansionState,
setExpansionState,
] = React.useState<ExpansionEvent>();
const [active, setActive] = React.useState<ActiveEvent>(); const [active, setActive] = React.useState<ActiveEvent>();
const [focus, setFocus] = React.useState<FocusEvent>(); const [focus, setFocus] = React.useState<FocusEvent>();
@ -143,8 +145,6 @@ export const Deserialization = (props: {
); );
}; };
export default { export default {
title: 'Paneview/Deserialization', title: 'Paneview/Deserialization',
component: Deserialization, component: Deserialization,

View File

@ -14,19 +14,21 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Story, Meta } from '@storybook/react'; import { Story, Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IPaneviewPanelProps> = { const components: PanelCollection<IPaneviewPanelProps> = {
default: (props) => { default: (props) => {
const [constraints, setConstraints] = React.useState< const [
PanelConstraintChangeEvent constraints,
>(); setConstraints,
const [dimensions, setDimensions] = React.useState< ] = React.useState<PanelConstraintChangeEvent>();
PanelDimensionChangeEvent const [
>(); dimensions,
const [expansionState, setExpansionState] = React.useState< setDimensions,
ExpansionEvent ] = React.useState<PanelDimensionChangeEvent>();
>(); const [
expansionState,
setExpansionState,
] = React.useState<ExpansionEvent>();
const [active, setActive] = React.useState<ActiveEvent>(); const [active, setActive] = React.useState<ActiveEvent>();
const [focus, setFocus] = React.useState<FocusEvent>(); const [focus, setFocus] = React.useState<FocusEvent>();

View File

@ -14,19 +14,21 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Story, Meta } from '@storybook/react'; import { Story, Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<IPaneviewPanelProps> = { const components: PanelCollection<IPaneviewPanelProps> = {
default: (props) => { default: (props) => {
const [constraints, setConstraints] = React.useState< const [
PanelConstraintChangeEvent constraints,
>(); setConstraints,
const [dimensions, setDimensions] = React.useState< ] = React.useState<PanelConstraintChangeEvent>();
PanelDimensionChangeEvent const [
>(); dimensions,
const [expansionState, setExpansionState] = React.useState< setDimensions,
ExpansionEvent ] = React.useState<PanelDimensionChangeEvent>();
>(); const [
expansionState,
setExpansionState,
] = React.useState<ExpansionEvent>();
const [active, setActive] = React.useState<ActiveEvent>(); const [active, setActive] = React.useState<ActiveEvent>();
const [focus, setFocus] = React.useState<FocusEvent>(); const [focus, setFocus] = React.useState<FocusEvent>();
@ -126,7 +128,6 @@ export const Simple = (props: {
); );
}; };
export default { export default {
title: 'Paneview/Simple', title: 'Paneview/Simple',
component: Simple, component: Simple,
@ -150,4 +151,3 @@ export default {
}, },
}, },
} as Meta; } as Meta;

View File

@ -9,7 +9,6 @@ import {
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Story, Meta } from '@storybook/react'; import { Story, Meta } from '@storybook/react';
import 'dockview/dist/styles.css';
const components: PanelCollection<ISplitviewPanelProps> = { const components: PanelCollection<ISplitviewPanelProps> = {
default: (props) => { default: (props) => {

View File

@ -39,10 +39,10 @@ npm install --save dockview
## Setup ## Setup
You must import or reference the stylesheet at `dockview/dist/styles.css`. For example: You must import or reference the stylesheet at `dockview/dist/styles/dockview.css`. For example:
```css ```css
@import '~dockview/dist/styles.css'; @import '~dockview/dist/styles/dockview.css';
``` ```
You should also attach a dockview theme to an element containing your components. For example: You should also attach a dockview theme to an element containing your components. For example:

View File

@ -4,13 +4,11 @@ const concat = require('gulp-concat');
const init = () => { const init = () => {
gulp.task('sass', () => { gulp.task('sass', () => {
return ( return gulp
gulp .src('./src/**/*.scss')
.src('./src/**/*.scss') .pipe(gulpSass().on('error', gulpSass.logError))
.pipe(gulpSass().on('error', gulpSass.logError)) .pipe(concat('dockview.css'))
.pipe(concat('styles.css')) .pipe(gulp.dest('./dist/styles/'));
.pipe(gulp.dest('./dist'))
);
}); });
}; };