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

Merge branch 'master' of https://github.com/mathuo/dockview into 126-remove-dockview-ontabcontextmenu

Browse Source
This commit is contained in:
mathuo 2022-05-31 20:49:01 +01:00
commit cb354445ac
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
13 changed files with 336 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/dockview/src/theme.scss
View File

@ -82,3 +82,31 @@
}
}
}
@mixin dockview-theme-abyss-mixin {
@include dockview-theme-core-mixin();
//
--dv-group-view-background-color: #000c18;
//
--dv-tabs-and-actions-container-background-color: #1c1c2a;
//
--dv-activegroup-visiblepanel-tab-background-color: #000c18;
--dv-activegroup-hiddenpanel-tab-background-color: #10192c;
--dv-inactivegroup-visiblepanel-tab-background-color: #000c18;
--dv-inactivegroup-hiddenpanel-tab-background-color: #10192c;
--dv-tab-divider-color: #2b2b4a;
//
--dv-activegroup-visiblepanel-tab-color: white;
--dv-activegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.5);
--dv-inactivegroup-visiblepanel-tab-color: rgba(255, 255, 255, 0.5);
--dv-inactivegroup-hiddenpanel-tab-color: rgba(255, 255, 255, 0.25);
//
--dv-separator-border: #2b2b4a;
--dv-paneview-header-border-color: #2b2b4a;
--dv-paneview-active-outline-color: #596f99;
}
.dockview-theme-abyss {
@include dockview-theme-abyss-mixin();
}

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) => {

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

@ -16,11 +16,11 @@ const FeatureList: FeatureItem[] = [
<>
<div className="feature-banner">
<h3 className="feature-banner-header">
Serialziable layouts
Serialziable Layouts
</h3>
<p className="feature-banner-content">
Add and remove panels using the provided api or use our
serialization method to persist layouts
Add and remove panels using the provided api or use the
serialziation methods to persist layouts.
</p>
</div>
<div className="feature-banner">
@ -28,18 +28,19 @@ const FeatureList: FeatureItem[] = [
Customizable Theme
</h3>
<p className="feature-banner-content">
Overide a number 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
approach.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">
Variety of Controls
Choose Your Control
</h3>
<p className="feature-banner-content">
Whether you want a simple splitview or a complete
docking solution dockview has you covered
Choose from a simple splitview, gridview, collapsable
panes or a full docking solution. Combine multiple for
complex layouts.
</p>
</div>
</>
@ -51,17 +52,16 @@ const FeatureList: FeatureItem[] = [
description: (
<>
<div className="feature-banner">
<h3 className="feature-banner-header">Drag and Drop</h3>
<h3 className="feature-banner-header">Drag And Drop</h3>
<p className="feature-banner-content">
Supports a variety of drag and drop functionailties as
well as providing the developer with an ability to
interact with drag events
Drag and Drop tab to position your layout as well as
interacting with external drag events.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">Zero Dependencies</h3>
<p className="feature-banner-content">
Zero dependencies, that's all
Zero dependencies, that's all.
</p>
</div>
<div className="feature-banner">
@ -69,9 +69,9 @@ const FeatureList: FeatureItem[] = [
Code Quality and Transparency
</h3>
<p className="feature-banner-content">
All our code is run through Sonarcloud Code Analyis
which along with our source code and high test coverage
can be viewed from our Github page
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>
</div>
</>
@ -91,9 +91,9 @@ function Feature({ title, Svg, description }: FeatureItem) {
className="dockview-feature"
>
<Svg className={styles.featureSvg} role="img" />
<div style={{ maxWidth: '400px', paddingLeft: '20px' }}>
<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.