rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-01 09:08:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #130 from mathuo/100-docs

Browse Source 
100 docs
This commit is contained in:
mathuo 2022-05-31 20:40:45 +01:00 committed by GitHub
commit 68e573e5f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 298 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/docs/docs/basics.mdx
View File

@ -7,6 +7,7 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
# Basics
asd
This section will take you through a number of concepts that can be applied to all dockview components.
## Panels

4
packages/docs/docs/index.mdx
View File

@ -7,9 +7,7 @@ import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
import { SimpleDockview } from '@site/src/components/simpleDockview';
# Dockview
## Introduction
# Introduction
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.

5
packages/docs/docusaurus.config.js
View File

@ -30,6 +30,11 @@ const config = {
defaultLocale: 'en',
locales: ['en'],
},
stylesheets: [
{
href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200',
},
],
plugins: [
'docusaurus-plugin-sass',
(context, options) => {

16
packages/docs/src/components/HomepageFeatures/index.tsx
View File

@ -20,7 +20,7 @@ const FeatureList: FeatureItem[] = [
</h3>
<p className="feature-banner-content">
Add and remove panels using the provided api or use the
serialization method to persist layouts.
serialziation methods to persist layouts.
</p>
</div>
<div className="feature-banner">
@ -28,7 +28,7 @@ const FeatureList: FeatureItem[] = [
Customizable Theme
</h3>
<p className="feature-banner-content">
Adjust a numbero of provided CSS Properties for a simple
Adjust a number of provided CSS Properties for a simple
change or target specific classes for a more customized
approach.
</p>
@ -38,9 +38,9 @@ const FeatureList: FeatureItem[] = [
Choose Your Control
</h3>
<p className="feature-banner-content">
Choose from a simple splitview, a gridview, collapsable
Choose from a simple splitview, gridview, collapsable
panes or a full docking solution. Combine multiple for
more complex layouts.
complex layouts.
</p>
</div>
</>
@ -54,8 +54,8 @@ const FeatureList: FeatureItem[] = [
<div className="feature-banner">
<h3 className="feature-banner-header">Drag And Drop</h3>
<p className="feature-banner-content">
Drag and Drop to position your layout and interact with
external drag events too.
Drag and Drop tab to position your layout as well as
interacting with external drag events.
</p>
</div>
<div className="feature-banner">
@ -69,7 +69,7 @@ const FeatureList: FeatureItem[] = [
Code Quality and Transparency
</h3>
<p className="feature-banner-content">
All of the code is run through Sonarcloud Code Analyis
All of the code is run through Sonarcloud Code Analysis,
which along with the source code and high test coverage
can be viewed from the Github page.
</p>
@ -93,7 +93,7 @@ function Feature({ title, Svg, description }: FeatureItem) {
<Svg className={styles.featureSvg} role="img" />
<div style={{ maxWidth: '400px', padding: '0px 20px' }}>
<h3>{title}</h3>
<p>{description}</p>
{description}
</div>
</div>
);

44
packages/docs/src/components/browserHeader.tsx Normal file
View File

@ -0,0 +1,44 @@
import * as React from 'react';
export const BrowserHeader = () => (
<div
style={{
height: '30px',
borderBottom: '1px solid #BABABA',
backgroundColor: '#DCDCDC',
borderTopLeftRadius: '15px',
borderTopRightRadius: '15px',
padding: '0px 15px',
display: 'flex',
alignItems: 'center',
}}
>
<div
style={{
height: '14px',
width: '14px',
borderRadius: '100%',
backgroundColor: '#FD605E',
marginRight: 7,
}}
/>
<div
style={{
height: '14px',
width: '14px',
borderRadius: '100%',
backgroundColor: '#FBBC3F',
marginRight: 7,
}}
/>
<div
style={{
height: '14px',
width: '14px',
borderRadius: '100%',
backgroundColor: '#34C942',
marginRight: 7,
}}
/>
</div>
);

23
packages/docs/src/components/dockview/demo.tsx
View File

@ -57,6 +57,7 @@ const Currencies = () => {
};
import axios from 'axios';
import { BrowserHeader } from '../browserHeader';
type Article = {
id: 15255;
@ -177,10 +178,22 @@ export const DockviewDemo = () => {
};
return (
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-dark"
/>
<div
style={{
height: '530px',
margin: '40px 0px',
display: 'flex',
flexDirection: 'column',
}}
>
<BrowserHeader />
<div style={{ flexGrow: 1 }}>
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
/>
</div>
</div>
);
};

3
packages/docs/src/components/dockview/demo2.scss Normal file
View File

@ -0,0 +1,3 @@
.paneview-background {
background-color: var(--dv-group-view-background-color);
}

181
packages/docs/src/components/dockview/demo2.tsx Normal file
View File

@ -0,0 +1,181 @@
import {
GridviewReact,
GridviewReadyEvent,
IGridviewPanelProps,
IPaneviewPanelProps,
PaneviewReact,
PaneviewReadyEvent,
} from 'dockview';
import * as React from 'react';
import { BrowserHeader } from '../browserHeader';
import './demo2.scss';
const paneComponents = {
default: (props: IPaneviewPanelProps) => {
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
}}
>
{props.params.title}
</div>
);
},
};
const headerComponents = {
default: (props: IPaneviewPanelProps) => {
const [expanded, setExpanded] = React.useState<boolean>(
props.api.isExpanded
);
React.useEffect(() => {
const disposable = props.api.onDidExpansionChange((event) =>
setExpanded(event.isExpanded)
);
return () => {
disposable.dispose();
};
}, [props.api]);
const onClick = () => props.api.setExpanded(!props.api.isExpanded);
return (
<div
onClick={onClick}
style={{
background: '#1C1C2A',
height: '100%',
color: 'white',
padding: '0px 8px',
display: 'flex',
cursor: 'pointer',
}}
>
<span className="material-symbols-outlined">
{expanded ? 'expand_more' : 'chevron_right'}
</span>
{props.title}
</div>
);
},
};
const components = {
default: (props: IGridviewPanelProps<{ title: string }>) => {
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
}}
>
{props.params.title}
</div>
);
},
panes: (props: IGridviewPanelProps) => {
const onReady = (event: PaneviewReadyEvent) => {
event.api.addPanel({
id: 'pane_1',
component: 'default',
headerComponent: 'default',
title: 'Pane 1',
isExpanded: false,
});
event.api.addPanel({
id: 'pane_2',
component: 'default',
headerComponent: 'default',
title: 'Pane 2',
isExpanded: true,
});
event.api.addPanel({
id: 'pane_3',
component: 'default',
headerComponent: 'default',
title: 'Pane 3',
isExpanded: true,
});
event.api.addPanel({
id: 'pane_4',
component: 'default',
headerComponent: 'default',
title: 'Pane 4',
isExpanded: false,
});
};
return (
<PaneviewReact
onReady={onReady}
components={paneComponents}
headerComponents={headerComponents}
className="paneview-background"
/>
);
},
};
export const DockviewDemo2 = () => {
const onReady = (event: GridviewReadyEvent) => {
event.api.addPanel({
id: 'panes',
component: 'panes',
minimumHeight: 100,
minimumWidth: 100,
});
event.api.addPanel({
id: 'panel_1',
component: 'default',
position: { referencePanel: 'panes', direction: 'right' },
minimumHeight: 100,
minimumWidth: 100,
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
position: { referencePanel: 'panel_1', direction: 'below' },
minimumHeight: 100,
minimumWidth: 100,
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
position: { referencePanel: 'panel_2', direction: 'below' },
minimumHeight: 100,
minimumWidth: 100,
});
};
return (
<div
style={{
height: '530px',
margin: '40px 0px',
display: 'flex',
flexDirection: 'column',
}}
>
<BrowserHeader />
<div style={{ flexGrow: 1 }}>
<GridviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss"
/>
</div>
</div>
);
};

6
packages/docs/src/pages/index.scss
View File

@ -25,3 +25,9 @@
flex-direction: row-reverse;
}
}
.homepage {
.button {
margin: 0px 20px;
}
}

34
packages/docs/src/pages/index.tsx
View File

@ -8,6 +8,7 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
import { DockviewDemo } from '../components/dockview/demo';
import useBaseUrl from '@docusaurus/useBaseUrl';
import './index.scss';
import { DockviewDemo2 } from '../components/dockview/demo2';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
@ -19,7 +20,7 @@ function HomepageHeader() {
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs"
to={useBaseUrl('docs/')}
>
Get Started
</Link>
@ -33,7 +34,7 @@ function HomepageHeader2() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<div className="container homepage">
<img src={useBaseUrl('/img/dockview_logo.svg')} />
<h1 className="hero__title">{siteConfig.title}</h1>
{/* <div className="badge-container">
@ -46,10 +47,16 @@ function HomepageHeader2() {
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs"
to={useBaseUrl('docs/')}
>
Get Started
</Link>
<Link
className="button button--secondary button--lg"
to={'#live-demo'}
>
Live Demo
</Link>
</div>
</div>
</header>
@ -66,9 +73,26 @@ export default function Home(): JSX.Element {
<HomepageHeader2 />
<main className="container">
<HomepageFeatures />
<div style={{ height: '500px', margin: '20px 0px' }}>
<DockviewDemo />
<div
id="live-demo"
style={{
height: '30px',
display: 'flex',
alignItems: 'center',
fontSize: '1.5em',
fontWeight: 'bold',
}}
>
<img
src={useBaseUrl('/img/dockview_logo.svg')}
height={30}
/>
<span style={{ paddingLeft: '8px' }}>
Dockview Live Demos
</span>
</div>
<DockviewDemo />
<DockviewDemo2 />
</main>
</Layout>
);

1
packages/docs/versioned_docs/version-1.4.3/basics.mdx vendored
View File

@ -7,6 +7,7 @@ import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
# Basics
asd
This section will take you through a number of concepts that can be applied to all dockview components.
## Panels

4
packages/docs/versioned_docs/version-1.4.3/index.mdx vendored
View File

@ -7,9 +7,7 @@ import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
import { SimpleDockview } from '@site/src/components/simpleDockview';
# Dockview
## Introduction
# Introduction
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.