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

packages/dockview/src/theme.scss

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

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

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.
 

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

packages/docs/src/components/HomepageFeatures/index.tsx

@@ -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
+                        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,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
+                        Choose from a simple splitview, gridview, collapsable
-                        docking solution dockview has you covered
+                        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
+                        Drag and Drop tab to position your layout as well as
-                        well as providing the developer with an ability to
+                        interacting with external drag events.
-                        interact with 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
+                        All of the code is run through Sonarcloud Code Analysis,
-                        which along with our source code and high test coverage
+                        which along with the source code and high test coverage
-                        can be viewed from our Github page
+                        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>
     );

packages/docs/src/components/browserHeader.tsx

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

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 (
-        <DockviewReact
+        <div
-            components={components}
+            style={{
-            onReady={onReady}
+                height: '530px',
-            className="dockview-theme-dark"
+                margin: '40px 0px',
-        />
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+        >
+            <BrowserHeader />
+            <div style={{ flexGrow: 1 }}>
+                <DockviewReact
+                    components={components}
+                    onReady={onReady}
+                    className="dockview-theme-abyss"
+                />
+            </div>
+        </div>
     );
 };

packages/docs/src/components/dockview/demo2.scss

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

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

packages/docs/src/pages/index.scss

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

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() {
                 <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' }}>
+                <div
-                    <DockviewDemo />
+                    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>
     );

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

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.