From 238c11f969a90d95857bbd325728dd4ddbc3d393 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 31 May 2022 19:55:19 +0100 Subject: [PATCH 1/2] chore: docs --- packages/docs/docs/basics.mdx | 1 + packages/docs/docs/index.mdx | 4 +- packages/docs/docusaurus.config.js | 5 + .../src/components/HomepageFeatures/index.tsx | 16 +- .../docs/src/components/browserHeader.tsx | 44 +++++ .../docs/src/components/dockview/demo.tsx | 23 ++- .../docs/src/components/dockview/demo2.scss | 3 + .../docs/src/components/dockview/demo2.tsx | 181 ++++++++++++++++++ packages/docs/src/pages/index.tsx | 10 +- .../versioned_docs/version-1.4.3/basics.mdx | 1 + .../versioned_docs/version-1.4.3/index.mdx | 4 +- 11 files changed, 268 insertions(+), 24 deletions(-) create mode 100644 packages/docs/src/components/browserHeader.tsx create mode 100644 packages/docs/src/components/dockview/demo2.scss create mode 100644 packages/docs/src/components/dockview/demo2.tsx diff --git a/packages/docs/docs/basics.mdx b/packages/docs/docs/basics.mdx index 2cadf65bf..c854beff1 100644 --- a/packages/docs/docs/basics.mdx +++ b/packages/docs/docs/basics.mdx @@ -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 diff --git a/packages/docs/docs/index.mdx b/packages/docs/docs/index.mdx index 5f680279d..fd50f5912 100644 --- a/packages/docs/docs/index.mdx +++ b/packages/docs/docs/index.mdx @@ -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. diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js index 6998b891a..25f8a2bdd 100644 --- a/packages/docs/docusaurus.config.js +++ b/packages/docs/docusaurus.config.js @@ -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) => { diff --git a/packages/docs/src/components/HomepageFeatures/index.tsx b/packages/docs/src/components/HomepageFeatures/index.tsx index 05b0bb854..cd8efbf61 100644 --- a/packages/docs/src/components/HomepageFeatures/index.tsx +++ b/packages/docs/src/components/HomepageFeatures/index.tsx @@ -20,7 +20,7 @@ const FeatureList: FeatureItem[] = [

Add and remove panels using the provided api or use the - serialization method to persist layouts. + serialziation methods to persist layouts.

@@ -28,7 +28,7 @@ const FeatureList: FeatureItem[] = [ Customizable Theme

- 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.

@@ -38,9 +38,9 @@ const FeatureList: FeatureItem[] = [ Choose Your Control

- 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.

@@ -54,8 +54,8 @@ const FeatureList: FeatureItem[] = [

Drag And Drop

- 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.

@@ -69,7 +69,7 @@ const FeatureList: FeatureItem[] = [ Code Quality and Transparency

- 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.

@@ -93,7 +93,7 @@ function Feature({ title, Svg, description }: FeatureItem) {

{title}

-

{description}

+ {description}
); diff --git a/packages/docs/src/components/browserHeader.tsx b/packages/docs/src/components/browserHeader.tsx new file mode 100644 index 000000000..94343da81 --- /dev/null +++ b/packages/docs/src/components/browserHeader.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; + +export const BrowserHeader = () => ( +
+
+
+
+
+); diff --git a/packages/docs/src/components/dockview/demo.tsx b/packages/docs/src/components/dockview/demo.tsx index 4683de1cc..b3bcfb003 100644 --- a/packages/docs/src/components/dockview/demo.tsx +++ b/packages/docs/src/components/dockview/demo.tsx @@ -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 ( - +
+ +
+ +
+
); }; diff --git a/packages/docs/src/components/dockview/demo2.scss b/packages/docs/src/components/dockview/demo2.scss new file mode 100644 index 000000000..826695941 --- /dev/null +++ b/packages/docs/src/components/dockview/demo2.scss @@ -0,0 +1,3 @@ +.paneview-background { + background-color: var(--dv-group-view-background-color); +} diff --git a/packages/docs/src/components/dockview/demo2.tsx b/packages/docs/src/components/dockview/demo2.tsx new file mode 100644 index 000000000..9cec0aa80 --- /dev/null +++ b/packages/docs/src/components/dockview/demo2.tsx @@ -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 ( +
+ {props.params.title} +
+ ); + }, +}; + +const headerComponents = { + default: (props: IPaneviewPanelProps) => { + const [expanded, setExpanded] = React.useState( + 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 ( +
+ + {expanded ? 'expand_more' : 'chevron_right'} + + {props.title} +
+ ); + }, +}; + +const components = { + default: (props: IGridviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, + 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 ( + + ); + }, +}; + +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 ( +
+ +
+ +
+
+ ); +}; diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx index 2aa59dde5..3e1ff5408 100644 --- a/packages/docs/src/pages/index.tsx +++ b/packages/docs/src/pages/index.tsx @@ -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() {
Get Started @@ -46,7 +47,7 @@ function HomepageHeader2() {
Get Started @@ -66,9 +67,8 @@ export default function Home(): JSX.Element {
-
- -
+ +
); diff --git a/packages/docs/versioned_docs/version-1.4.3/basics.mdx b/packages/docs/versioned_docs/version-1.4.3/basics.mdx index 2cadf65bf..c854beff1 100644 --- a/packages/docs/versioned_docs/version-1.4.3/basics.mdx +++ b/packages/docs/versioned_docs/version-1.4.3/basics.mdx @@ -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 diff --git a/packages/docs/versioned_docs/version-1.4.3/index.mdx b/packages/docs/versioned_docs/version-1.4.3/index.mdx index 5f680279d..fd50f5912 100644 --- a/packages/docs/versioned_docs/version-1.4.3/index.mdx +++ b/packages/docs/versioned_docs/version-1.4.3/index.mdx @@ -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. From 878452e9d30411c538b30763d3dff544423a1504 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 31 May 2022 20:04:37 +0100 Subject: [PATCH 2/2] chore: docs --- packages/docs/src/pages/index.scss | 6 ++++++ packages/docs/src/pages/index.tsx | 26 +++++++++++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/docs/src/pages/index.scss b/packages/docs/src/pages/index.scss index b85b289b7..b438d0060 100644 --- a/packages/docs/src/pages/index.scss +++ b/packages/docs/src/pages/index.scss @@ -25,3 +25,9 @@ flex-direction: row-reverse; } } + +.homepage { + .button { + margin: 0px 20px; + } +} diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx index 3e1ff5408..9911bd008 100644 --- a/packages/docs/src/pages/index.tsx +++ b/packages/docs/src/pages/index.tsx @@ -34,7 +34,7 @@ function HomepageHeader2() { const { siteConfig } = useDocusaurusContext(); return (
-
+

{siteConfig.title}

{/*
@@ -51,6 +51,12 @@ function HomepageHeader2() { > Get Started + + Live Demo +
@@ -67,6 +73,24 @@ export default function Home(): JSX.Element {
+
+ + + Dockview Live Demos + +