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

feat: docs

Browse Source
This commit is contained in:
mathuo 2023-07-10 21:57:03 +01:00
parent 30e035b2f3
commit 07df1b48ba
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
36 changed files with 501 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -27,6 +27,7 @@ Please see the website: https://dockview.dev
- Themable and customizable
- Serialization / deserialization support
- Tabular docking and Drag and Drop support
- Floating groups, customized header bars and tab
- Documentation and examples
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/

1
packages/dockview-core/README.md
View File

@ -25,6 +25,7 @@ Please see the website: https://dockview.dev
- Themable and customizable
- Serialization / deserialization support
- Tabular docking and Drag and Drop support
- Floating groups, customized header bars and tab
- Documentation and examples
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview-core@latest/

1
packages/dockview/README.md
View File

@ -25,6 +25,7 @@ Please see the website: https://dockview.dev
- Themable and customizable
- Serialization / deserialization support
- Tabular docking and Drag and Drop support
- Floating groups, customized header bars and tab
- Documentation and examples
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/

25
packages/docs/blog/2023-08-01-dockview-1.8.0.md Normal file
View File

@ -0,0 +1,25 @@
---
slug: dockview-1.8.0-release
title: Dockview 1.8.0
tags: [release]
---
Preemptive documation for the upcoming `1.8.0` release.
# Release Notes
Please reference to docs @ [dockview.dev](https://dockview.dev).
## 🚀 Features
- Support for Floating Groups [#262](https://github.com/mathuo/dockview/pull/262)
- Left hand header changes [#264](https://github.com/mathuo/dockview/pull/264)
- Retain layout size [#285](https://github.com/mathuo/dockview/pull/285)
- Expose `removePanel` [#293](https://github.com/mathuo/dockview/issues/293)
- Additional themes
## 🛠 Miscs
## 🔥 Breaking changes
- `groupControlComponent` renamed to `rightHeaderActionsComponent` [#264](https://github.com/mathuo/dockview/pull/264)

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

@ -1,114 +0,0 @@
---
sidebar_position: 1
description: How to get started with Dockview
---
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
import { SimpleSplitview2 } from '@site/src/components/simpleSplitview2';
# Basics
This section will take you through a number of concepts that can be applied to all dockview components.
## Panels
The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
All components require you to provide an `onReady` prop which you can use to build and control your component.
### Adding a panel with parameters
You can pass parameters to a panel through the `params` object
```tsx
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'myComponent',
params: {
title: 'My Title',
},
});
};
```
and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};
```
## API
There are two types of API you will interact with using `dockview`.
- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
React.useEffect(() => {
const disposable = props.api.onDidActiveChange((event) => {
console.log(`is panel active: ${event.isActive}`);
});
return () => {
disposable.dispose(); // remember to dispose of any subscriptions
};
}, [props.api]);
const addAnotherPanel = React.useCallback(() => {
props.containerApi.addPanel({
id: 'another_id',
component: 'anotherComponent',
});
}, [props.containerApi]);
return (
<div>
<span>{`My first panel has the title: ${props.params.title}`}</span>
<button onClick={addAnotherPanel}>Add Panel</button>
</div>
);
};
```
### Serialization
All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
## Auto resizing
`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
You can disable this by settings the `disableAutoResizing` prop to be `true`.
You can manually resize a component using the API method `layout(width: number, height: number): void`.
An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
## Events
Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
You should dispose of any event listeners you create cleaning up any listeners you would have created.
```tsx
React.useEffect(() => {
const disposable = api.onDidFocusChange(() => {
// write some code
});
return () => {
disposable.dispose();
};
}, []);
```
## Proportional layout
The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
<SimpleSplitview2 proportional={false} />
<SimpleSplitview2 proportional={true} />
## Browser support
dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

171
packages/docs/docs/components/dockview.mdx
View File

@ -2,10 +2,7 @@
description: Dockview Documentation
---
import {
Container,
MultiFrameworkContainer,
} from '@site/src/components/ui/container';
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
@ -168,6 +165,25 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
| close | `(): void` | |
| setTitle | `(title: string): void` | |
## Theme
As well as importing the `dockview` stylesheet you must provide a class-based theme somewhere in your application. For example.
```tsx
// Providing a theme directly through the DockviewReact component props
<DockviewReact className="dockview-theme-dark" />
// Providing a theme somewhere in the DOM tree
<div className="dockview-theme-dark">
<div>
{/**... */}
<DockviewReact />
</div>
</div>
```
You can find more details on theming <Link to="../theme">here</Link>.
## Layout Persistance
Layouts are loaded and saved via to `fromJSON` and `toJSON` methods on the Dockview api.
@ -220,9 +236,10 @@ const onReady = (event: DockviewReadyEvent) => {
Here is an example using the above code loading from and saving to localStorage.
If you refresh the page you should notice your layout is loaded as you left it.
<Container sandboxId="layout-dockview">
<DockviewPersistance />
</Container>
<MultiFrameworkContainer
sandboxId="layout-dockview"
react={DockviewPersistance}
/>
## Resizing
@ -251,17 +268,16 @@ props.api.group.api.setSize({
You can see an example invoking both approaches below.
<Container sandboxId="resize-dockview">
<ResizeDockview />
</Container>
<MultiFrameworkContainer sandboxId="resize-dockview" react={ResizeDockview} />
### Container Resizing
The component will automatically resize to it's container.
<Container sandboxId="resizecontainer-dockview">
<DockviewResizeContainer />
</Container>
<MultiFrameworkContainer
sandboxId="resizecontainer-dockview"
react={DockviewResizeContainer}
/>
## Watermark
@ -269,9 +285,10 @@ When the dockview is empty you may want to display some fallback content, this i
By default there the watermark has no content but you can provide as a prop to `DockviewReact` a `watermarkComponent`
which will be rendered when there are no panels or groups.
<Container sandboxId="watermark-dockview">
<DockviewWatermark />
</Container>
<MultiFrameworkContainer
sandboxId="watermark-dockview"
react={DockviewWatermark}
/>
## Drag And Drop
@ -348,9 +365,7 @@ return (
);
```
<Container sandboxId="dnd-dockview">
<DndDockview />
</Container>
<MultiFrameworkContainer sandboxId="dnd-dockview" react={DndDockview} />
### Third Party Dnd Libraries
@ -358,9 +373,10 @@ This shows a simple example of a third-party library used inside a panel that re
and drop functionalities. This examples serves to show that `dockview` doesn't interfer with
any drag and drop logic for other controls.
<Container>
<DockviewExternalDnd />
</Container>
<MultiFrameworkContainer
sandboxId="externaldnd-dockview"
react={DockviewExternalDnd}
/>
## Floating Groups
@ -385,9 +401,11 @@ Floating groups can be interacted with whilst holding the `shift` key activating
Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)` and you can check whether
a group is floating via the `group.api.isFloating` property. See examples for full code.
<Container height={600} sandboxId="floatinggroup-dockview">
<DockviewFloating />
</Container>
<MultiFrameworkContainer
height={600}
sandboxId="floatinggroup-dockview"
react={DockviewFloating}
/>
## Panels
@ -465,6 +483,23 @@ const panel2 = api.addPanel({
});
```
To add a floating panel you should include the `floating` variable which can be either a `boolean` or an object defining it's bounds.
These bounds are relative to the dockview component.
```ts
const panel1 = api.addPanel({
id: 'panel_2',
component: 'default',
floating: true,
});
const panel2 = api.addPanel({
id: 'panel_2',
component: 'default',
floating: { x: 10, y: 10, width: 300, height: 300 },
});
```
### Update Panel
You can programatically update the `params` passed through to the panel through the panal api using `api.updateParameters`.
@ -514,6 +549,21 @@ const group = panel.api.group;
group.api.moveTo({ group, position });
```
### Remove panel
You can programatically remove a panel using the panel `api`.
```ts
panel.api.close();
```
Given a reference to the panel you can also use the component `api` to remove it.
```ts
const panel = api.getPanel('myPanel');
api.removePanel(panel);
```
### Panel Rendering
By default `DockviewReact` only adds to the DOM those panels that are visible,
@ -568,9 +618,10 @@ const components = { default: RenderWhenVisible(MyComponent) };
Toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
<Container sandboxId="rendering-dockview">
<RenderingDockview renderVisibleOnly={false} />
</Container>
<MultiFrameworkContainer
sandboxId="rendering-dockview"
react={RenderingDockview}
/>
## Headers
@ -624,9 +675,10 @@ As a simple example the below attaches a custom event handler for the context me
The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab.
This still makes use of the `DockviewDefaultTab` since it's only a minor change.
<Container sandboxId="customheader-dockview">
<CustomHeadersDockview />
</Container>
<MultiFrameworkContainer
sandboxId="customheader-dockview"
react={CustomHeadersDockview}
/>
### Default Tab Title
@ -649,9 +701,10 @@ api.setTitle('my_new_custom_title');
> Note this only works when using the default tab implementation.
<Container sandboxId="updatetitle-dockview">
<DockviewSetTitle />
</Container>
<MultiFrameworkContainer
sandboxId="updatetitle-dockview"
react={DockviewSetTitle}
/>
### Custom Tab Title
@ -764,9 +817,10 @@ const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
};
```
<Container sandboxId="groupcontrol-dockview">
<DockviewGroupControl />
</Container>
<MultiFrameworkContainer
sandboxId="groupcontrol-dockview"
react={DockviewGroupControl}
/>
### Constraints
@ -780,9 +834,11 @@ api.group.api.setConstraints(...)
> If you specific a constraint on a group and move a panel within that group to another group it will no
> longer be subject to those constraints since those constraints were on the group and not on the individual panel.
<Container height={500} sandboxId="constraints-dockview">
<DockviewConstraints />
</Container>
<MultiFrameworkContainer
height={500}
sandboxId="constraints-dockview"
react={DockviewConstraints}
/>
## iFrames
@ -803,17 +859,21 @@ The visibility of these hoisted elements is then controlled through some exposed
You should open this example in CodeSandbox using the provided link to understand the code and make use of this implemention if required.
<Container sandboxId="iframe-dockview" height={600}>
<DockviewWithIFrames />
</Container>
<MultiFrameworkContainer
sandboxId="iframe-dockview"
height={600}
react={DockviewWithIFrames}
/>
## Events
A simple example showing events fired by `dockviewz that can be interacted with.
<Container height={600} sandboxId="events-dockview">
<EventsDockview />
</Container>
<MultiFrameworkContainer
height={600}
sandboxId="events-dockview"
react={EventsDockview}
/>
## Advanced Examples
@ -822,25 +882,8 @@ A simple example showing events fired by `dockviewz that can be interacted with.
You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
<Container sandboxId="nested-dockview">
<NestedDockview />
</Container>
<MultiFrameworkContainer sandboxId="nested-dockview" react={NestedDockview} />
### Window-like mananger with tabs
<DockviewNative2 />
## Vanilla JS
> Note: This section is experimental and support for Vanilla JS is a work in progress.
The `dockview` package contains `ReactJS` wrappers for the core library.
The core library is published as an independant package under the name `dockview-core` which you can install standalone.
> When using `dockview` there is no need to also install `dockview-core`.
> `dockview-core` is a dependency of `dockview` and automatically installed during the installation process of `dockview` via `npm install dockview`.
<Container
sandboxId="typescript/vanilla-dockview"
injectVanillaJS={attachDockviewVanilla}
/>

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

@ -1,23 +1,18 @@
---
sidebar_position: 0
description: A zero dependency layout manager built for React
description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
---
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
import { SimpleGridview } from '@site/src/components/simpleGridview';
import { SimplePaneview } from '@site/src/components/simplePaneview';
import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
import Link from '@docusaurus/Link';
# Introduction
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
## Features
- Themable and customizable
- Support for the serialization and deserialization of layouts
- Drag and drop support
## Quick start
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
@ -33,53 +28,11 @@ depending on your solution this might be:
@import './node_modules/dockview/dist/styles/dockview.css';
```
A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
```html
<body classname="dockview-theme-abyss">
...
</body>
<body classname="dockview-theme-light">
...
</body>
```
There are 4 components you may want to use:
Splitview
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview />
</div>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleGridview />
</div>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimplePaneview />
</div>
<Link to="./components/dockview">
<h2>Dockview</h2>
</Link>
<div
style={{
@ -92,58 +45,47 @@ Splitview
<SimpleDockview />
</div>
```tsx
import {
DockviewReact,
DockviewReadyEvent,
PanelCollection,
IDockviewPanelProps,
IDockviewPanelHeaderProps,
} from 'dockview';
<Link to="./components/splitview">
<h2>Splitview</h2>
</Link>
const components: PanelCollection<IDockviewPanelProps> = {
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
return <div>{props.params.someProps}</div>;
},
};
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview />
</div>
const headers: PanelCollection<IDockviewPanelHeaderProps> = {
customTab: (props: IDockviewPanelHeaderProps) => {
return (
<div>
<span>{props.api.title}</span>
<span onClick={() => props.api.close()}>{'[x]'}</span>
</div>
);
},
};
<Link to="./components/gridview">
<h2>Gridview</h2>
</Link>
const Component = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel1',
component: 'default',
tabComponent: 'customTab', // optional custom header
params: {
someProps: 'Hello',
},
});
event.api.addPanel({
id: 'panel2',
component: 'default',
params: {
someProps: 'World',
},
position: { referencePanel: 'panel1', direction: 'below' },
});
};
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleGridview />
</div>
return (
<DockviewReact
components={components}
tabComponents={headers} // optional headers renderer
onReady={onReady}
/>
);
};
```
<Link to="./components/paneview">
<h2>Paneview</h2>
</Link>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimplePaneview />
</div>

37
packages/docs/docs/theme.mdx
View File

@ -3,27 +3,29 @@ sidebar_position: 3
description: Theming Dockview Components
---
import { CustomCSSDockview } from '@site/src/components/dockview/customCss';
# Theme
## Introduction
`dockview` requires some css to work correctly.
The css is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css)
and depending can be imported
`dockview` requires some CSS to work correctly.
The CSS is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css)
and should be imported at some point in your application
```css
```css title="Example import with .css file"
@import './node_modules/dockview/dist/styles/dockview.css';
```
## Provided themes
The following are provided as classes that you can attached to your components for themeing
`dockview` comes with a number of themes which are all CSS classes and can be found [here](https://github.com/mathuo/dockview/blob/master/packages/dockview-core/src/theme.scss).
To use a `dockview` theme the CSS must encapsulate the component. The current list of themes is:
- `.dockview-theme-light`
- `.dockview-theme-dark`
- `.dockview-theme-abyss`
- `dockview-theme-dark`
- `dockview-theme-light`
- `dockview-theme-vs`
- `dockview-theme-abyss`
- `dockview-theme-dracula`
- `dockview-theme-replit`
## Customizing Theme
@ -60,9 +62,9 @@ and are free to build your own themes based on these css properties.
| --dv-paneview-header-border-color | |
You can further customise the theme through adjusting class properties but this is up you.
As an example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write:
For example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write:
```css
```css title="Additional CSS to show a bottom border on active groups"
.groupview {
&.active-group {
> .tabs-and-actions-container {
@ -76,14 +78,3 @@ As an example if you wanted to add a bottom border to the tab container for an a
}
}
```
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<CustomCSSDockview />
</div>

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

@ -11,7 +11,8 @@ console.log(`isCI: ${process.env.CI}`);
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Dockview',
tagline: 'A zero dependency layout manager built for React',
tagline:
'A zero dependency layout manager supporting ReactJS and Vanilla TypeScript',
url: 'https://dockview.dev',
baseUrl: process.env.CI ? `/` : '/',
onBrokenLinks: 'throw',
@ -140,6 +141,11 @@ const config = {
label: 'Docs',
},
{ to: '/blog', label: 'Blog', position: 'left' },
{
to: 'https://dockview.dev/typedocs',
label: 'TSDoc',
position: 'left',
},
{
type: 'docsVersionDropdown',
position: 'right',

5
packages/docs/sandboxes/constraints-dockview/src/app.tsx
View File

@ -1,6 +1,5 @@
import {
DockviewApi,
DockviewMutableDisposable,
DockviewReact,
DockviewReadyEvent,
GridConstraintChangeEvent,
@ -101,7 +100,7 @@ const components = {
},
};
const App = () => {
const App = (props: { theme?: string }) => {
const [api, setApi] = React.useState<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
@ -141,7 +140,7 @@ const App = () => {
<DockviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss "
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

6
packages/docs/sandboxes/customheader-dockview/src/app.tsx
View File

@ -31,10 +31,8 @@ const headerComponents = {
},
};
const CustomHeadersDockview = () => {
const CustomHeadersDockview = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const d = localStorage.getItem('test');
event.api.addPanel({
id: 'panel_1',
component: 'default',
@ -116,7 +114,7 @@ const CustomHeadersDockview = () => {
components={components}
defaultTabComponent={headerComponents.default}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

16
packages/docs/sandboxes/demo-dockview/src/app.tsx
View File

@ -220,7 +220,7 @@ const DockviewDemo = (props: { theme?: string }) => {
title: 'Panel 5',
position: { referencePanel: 'panel_4', direction: 'within' },
});
const panel6 = event.api.addPanel({
event.api.addPanel({
id: 'panel_6',
component: 'default',
title: 'Panel 6',
@ -239,6 +239,20 @@ const DockviewDemo = (props: { theme?: string }) => {
position: { referencePanel: 'panel_7', direction: 'within' },
});
event.api.addPanel({
id: 'panel_9',
component: 'default',
title: 'Panel 9',
floating: { width: 450, height: 250 },
});
event.api.addPanel({
id: 'panel_10',
component: 'default',
title: 'Panel 10',
position: { referencePanel: 'panel_9' },
});
event.api.getPanel('panel_1')!.api.setActive();
};

4
packages/docs/sandboxes/dnd-dockview/src/app.tsx
View File

@ -41,7 +41,7 @@ const DraggableElement = () => (
</span>
);
const DndDockview = (props: { renderVisibleOnly: boolean }) => {
const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -106,7 +106,7 @@ const DndDockview = (props: { renderVisibleOnly: boolean }) => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
onDidDrop={onDidDrop}
showDndOverlay={showDndOverlay}
/>

4
packages/docs/sandboxes/dockview-app/src/app.tsx
View File

@ -73,7 +73,7 @@ const components = {
},
};
const DockviewDemo2 = () => {
const DockviewDemo2 = (props: { theme?: string }) => {
const onReady = (event: GridviewReadyEvent) => {
event.api.addPanel({
id: 'panes',
@ -111,7 +111,7 @@ const DockviewDemo2 = () => {
<GridviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

5
packages/docs/sandboxes/events-dockview/src/app.tsx
View File

@ -14,7 +14,7 @@ const components = {
},
};
const EventsDockview = () => {
const EventsDockview = (props: { theme?: string }) => {
const [lines, setLines] = React.useState<Line[]>([]);
const [checked, setChecked] = React.useState<boolean>(false);
@ -230,7 +230,6 @@ const EventsDockview = () => {
},
},
activeGroup: '80',
options: {},
});
return;
}
@ -331,7 +330,7 @@ const EventsDockview = () => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
<div style={{ flexGrow: 1, paddingTop: '5px' }}>

3
packages/docs/sandboxes/externaldnd-dockview/src/app.scss
View File

@ -1,3 +0,0 @@
.externaldnd-dockview {
color: white;
}

5
packages/docs/sandboxes/externaldnd-dockview/src/app.tsx
View File

@ -7,7 +7,6 @@ import * as React from 'react';
import TreeComponent from './treeview';
import { getBackendOptions, MultiBackend } from '@minoru/react-dnd-treeview';
import { DndProvider } from 'react-dnd';
import './app.scss';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
@ -26,7 +25,7 @@ const components = {
},
};
export const App: React.FC = () => {
export const App: React.FC = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const panel = event.api.addPanel({
id: 'panel_1',
@ -97,7 +96,7 @@ export const App: React.FC = () => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss externaldnd-dockview"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</DndProvider>
);

4
packages/docs/sandboxes/floatinggroup-dockview/src/app.tsx
View File

@ -127,7 +127,7 @@ const useLocalStorage = <T,>(
];
};
export const DockviewPersistance = () => {
export const DockviewPersistance = (props: { theme?: string }) => {
const [api, setApi] = React.useState<DockviewApi>();
const [layout, setLayout] =
useLocalStorage<SerializedDockview>('floating.layout');
@ -207,7 +207,7 @@ export const DockviewPersistance = () => {
watermarkComponent={Watermark}
leftHeaderActionsComponent={LeftComponent}
rightHeaderActionsComponent={RightComponent}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
</div>

4
packages/docs/sandboxes/fullwidthtab-dockview/src/app.tsx
View File

@ -47,7 +47,7 @@ const tabComponents = {
},
};
const DockviewNative = () => {
const DockviewNative = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
@ -91,7 +91,7 @@ const DockviewNative = () => {
onReady={onReady}
components={components}
tabComponents={tabComponents}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
singleTabMode="fullwidth"
/>
);

4
packages/docs/sandboxes/headeractions-dockview/src/app.tsx
View File

@ -55,7 +55,7 @@ const LeftHeaderActions = (props: IDockviewHeaderActionsProps) => {
);
};
const DockviewGroupControl = () => {
const DockviewGroupControl = (props: { theme: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
@ -97,7 +97,7 @@ const DockviewGroupControl = () => {
components={components}
leftHeaderActionsComponent={LeftHeaderActions}
rightHeaderActionsComponent={RightHeaderActions}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

4
packages/docs/sandboxes/iframe-dockview/src/app.tsx
View File

@ -31,7 +31,7 @@ const components = {
},
};
export const App: React.FC = () => {
export const App: React.FC = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -53,7 +53,7 @@ export const App: React.FC = () => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

4
packages/docs/sandboxes/layout-dockview/src/app.tsx
View File

@ -47,7 +47,7 @@ function loadDefaultLayout(api: DockviewApi) {
});
}
export const DockviewPersistance = () => {
export const DockviewPersistance = (props: { theme?: string }) => {
const [api, setApi] = React.useState<DockviewApi>();
const clearLayout = () => {
@ -118,7 +118,7 @@ export const DockviewPersistance = () => {
onReady={onReady}
components={components}
watermarkComponent={Watermark}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
</div>

4
packages/docs/sandboxes/nativeapp-dockview/src/app.tsx
View File

@ -82,7 +82,7 @@ const tabComponents = {
},
};
const DockviewNative2 = () => {
const DockviewNative2 = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const panel1 = event.api.addPanel({
id: 'panel_1',
@ -133,7 +133,7 @@ const DockviewNative2 = () => {
onReady={onReady}
components={components}
tabComponents={tabComponents}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
singleTabMode="fullwidth"
/>
</div>

6
packages/docs/sandboxes/nested-dockview/src/app.tsx
View File

@ -30,7 +30,7 @@ const InnerDockview = () => {
<DockviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss nested-dockview"
className="nested-dockview"
/>
);
};
@ -52,7 +52,7 @@ const components = {
innerDockview: InnerDockview,
};
const NestedDockview = () => {
const NestedDockview = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -85,7 +85,7 @@ const NestedDockview = () => {
<DockviewReact
onReady={onReady}
components={components}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
showDndOverlay={showDndOverlay}
onDidDrop={onDidDrop}
/>

9
packages/docs/sandboxes/rendering-dockview/src/app.tsx
View File

@ -104,14 +104,9 @@ const Checkbox = () => {
);
};
const RenderingDockview = (props: { renderVisibleOnly: boolean }) => {
const RenderingDockview = (props: { theme?: string }) => {
const [render, setRender] = useRecoilState(renderVisibleComponentsOnlyAtom);
React.useEffect(
() => setRender(props.renderVisibleOnly),
[props.renderVisibleOnly]
);
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -160,7 +155,7 @@ const RenderingDockview = (props: { renderVisibleOnly: boolean }) => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
</div>

4
packages/docs/sandboxes/resize-dockview/src/app.tsx
View File

@ -81,7 +81,7 @@ const components = {
default: Default,
};
const ResizeDockview = () => {
const ResizeDockview = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -117,7 +117,7 @@ const ResizeDockview = () => {
return (
<DockviewReact
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
onReady={onReady}
components={components}
/>

4
packages/docs/sandboxes/resizecontainer-dockview/src/app.tsx
View File

@ -15,7 +15,7 @@ const components = {
},
};
export const App: React.FC = () => {
export const App: React.FC = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const panel = event.api.addPanel({
id: 'panel_1',
@ -88,7 +88,7 @@ export const App: React.FC = () => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

4
packages/docs/sandboxes/tabheight-dockview/src/app.tsx
View File

@ -16,7 +16,7 @@ const components = {
},
};
export const App: React.FC = () => {
export const App: React.FC = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -75,7 +75,7 @@ export const App: React.FC = () => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss skinny-tabs"
className={`${props.theme || 'dockview-theme-abyss'} skinny-tabs`}
/>
);
};

4
packages/docs/sandboxes/updatetitle-dockview/src/app.tsx
View File

@ -31,7 +31,7 @@ const components = {
},
};
export const App: React.FC = () => {
export const App: React.FC = (props: { theme?: string }) => {
const onReady = (event: DockviewReadyEvent) => {
const panel = event.api.addPanel({
id: 'panel_1',
@ -66,7 +66,7 @@ export const App: React.FC = () => {
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-abyss"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
);
};

4
packages/docs/sandboxes/watermark-dockview/src/app.tsx
View File

@ -81,7 +81,7 @@ const Watermark = (props: IWatermarkPanelProps) => {
);
};
const DockviewWatermark = () => {
const DockviewWatermark = (props: { theme?: string }) => {
const [api, setApi] = React.useState<DockviewApi>();
const onReady = (event: DockviewReadyEvent) => {
@ -126,7 +126,7 @@ const DockviewWatermark = () => {
onReady={onReady}
components={components}
watermarkComponent={Watermark}
className="dockview-theme-abyss nested-dockview"
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
);

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

@ -48,9 +48,27 @@ const FeatureList: FeatureItem[] = [
},
{
title: '',
Svg: require('@site/static/img/dockview_splash_2.svg').default,
Svg: require('@site/static/img/dockview_grid_4.svg').default,
description: (
<>
<div className="feature-banner">
<h3 className="feature-banner-header">
Rich Feature Control
</h3>
<p className="feature-banner-content">
Customize header features to add additional icons and
more as well as custom tab rendering.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">
Floating Group Support
</h3>
<p className="feature-banner-content">
Built-in support for floating groups with a supporting
api for progmatic control.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">Drag And Drop</h3>
<p className="feature-banner-content">
@ -58,6 +76,14 @@ const FeatureList: FeatureItem[] = [
interacting with external drag events.
</p>
</div>
</>
),
},
{
title: '',
Svg: require('@site/static/img/dockview_splash_2.svg').default,
description: (
<>
<div className="feature-banner">
<h3 className="feature-banner-header">Zero Dependencies</h3>
<p className="feature-banner-content">
@ -74,6 +100,15 @@ const FeatureList: FeatureItem[] = [
can be viewed from the Github page.
</p>
</div>
<div className="feature-banner">
<h3 className="feature-banner-header">
React or Vanilla TypeScript
</h3>
<p className="feature-banner-content">
Exposes native support for both ReactJS components and
Vanilla TypeScript.
</p>
</div>
</>
),
},

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

@ -0,0 +1,44 @@
import useBaseUrl from '@docusaurus/useBaseUrl';
import HomepageFeatures from '.';
import { BrowserHeader } from '../ui/browserHeader';
import { MultiFrameworkContainer } from '../ui/container';
import * as React from 'react';
import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
import DockviewDemo2 from '@site/sandboxes/dockview-app/src/app';
export const Introduction = () => {
return (
<>
<HomepageFeatures />
<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>
<div style={{ padding: '20px' }}>
<BrowserHeader />
<MultiFrameworkContainer
height={500}
sandboxId="demo-dockview"
react={DockviewDemo}
/>
</div>
<div style={{ padding: '20px' }}>
<BrowserHeader />
<MultiFrameworkContainer
height={500}
react={DockviewDemo2}
sandboxId="dockview-app"
/>
</div>
</>
);
};

114
packages/docs/src/components/ui/container.tsx
View File

@ -3,6 +3,7 @@ import { CodeSandboxButton } from './codeSandboxButton';
import useBaseUrl from '@docusaurus/useBaseUrl';
import './container.scss';
import { Spinner } from './spinner';
import BrowserOnly from '@docusaurus/BrowserOnly';
export const Container = (props: {
children?: React.ReactNode;
@ -21,27 +22,35 @@ export const Container = (props: {
}, [props.injectVanillaJS]);
return (
<>
<div
ref={ref}
style={{
height: props.height ? `${props.height}px` : '300px',
}}
>
{props.children}
</div>
<div
style={{
padding: '2px 0px',
display: 'flex',
alignItems: 'center',
fontSize: '14px',
}}
>
<span style={{ flexGrow: 1 }} />
{props.sandboxId && <CodeSandboxButton id={props.sandboxId} />}
</div>
</>
<BrowserOnly>
{() => (
<>
<div
ref={ref}
style={{
height: props.height
? `${props.height}px`
: '300px',
}}
>
{props.children}
</div>
<div
style={{
padding: '2px 0px',
display: 'flex',
alignItems: 'center',
fontSize: '14px',
}}
>
<span style={{ flexGrow: 1 }} />
{props.sandboxId && (
<CodeSandboxButton id={props.sandboxId} />
)}
</div>
</>
)}
</BrowserOnly>
);
};
@ -70,6 +79,7 @@ const JavascriptIcon = (props: { height: number; width: number }) => {
};
const themes = [
'dockview-theme-abyss',
'dockview-theme-dark',
'dockview-theme-light',
'dockview-theme-vs',
@ -134,9 +144,9 @@ export const ThemePicker = () => {
);
};
export const MultiFrameworkContainer = (props: {
export const MultiFrameworkContainer2 = (props: {
react: React.FC;
typescript: (parent: HTMLElement) => { dispose: () => void };
typescript?: (parent: HTMLElement) => { dispose: () => void };
sandboxId: string;
height?: number;
}) => {
@ -229,28 +239,31 @@ export const MultiFrameworkContainer = (props: {
cursor: 'pointer',
}}
>
{framework === 'React' ? (
<ReactIcon height={16} width={16} />
) : (
<JavascriptIcon height={16} width={16} />
{props.typescript &&
(framework === 'React' ? (
<ReactIcon height={16} width={16} />
) : (
<JavascriptIcon height={16} width={16} />
))}
{props.typescript && (
<select
style={{
border: 'none',
fontWeight: 'bold',
backgroundColor: 'inherit',
cursor: 'inherit',
color: 'inherit',
height: '24px',
}}
onChange={(e) => {
const target = e.target as HTMLSelectElement;
setFramework(target.value);
}}
>
<option value="React">{'React'}</option>
<option value="Javascript">{'Javascript'}</option>
</select>
)}
<select
style={{
border: 'none',
fontWeight: 'bold',
backgroundColor: 'inherit',
cursor: 'inherit',
color: 'inherit',
height: '24px',
}}
onChange={(e) => {
const target = e.target as HTMLSelectElement;
setFramework(target.value);
}}
>
<option value="React">{'React'}</option>
<option value="Javascript">{'Javascript'}</option>
</select>
</div>
<span style={{ flexGrow: 1 }} />
<CodeSandboxButton id={sandboxId} />
@ -258,3 +271,16 @@ export const MultiFrameworkContainer = (props: {
</>
);
};
export const MultiFrameworkContainer = (props: {
react: React.FC;
typescript?: (parent: HTMLElement) => { dispose: () => void };
sandboxId: string;
height?: number;
}) => {
return (
<BrowserOnly>
{() => <MultiFrameworkContainer2 {...props} />}
</BrowserOnly>
);
};

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

@ -8,9 +8,10 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
import useBaseUrl from '@docusaurus/useBaseUrl';
import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
import DockviewDemo2 from '@site/sandboxes/dockview-app/src/app';
import { Container } from '../components/ui/container';
import { MultiFrameworkContainer } from '../components/ui/container';
import { BrowserHeader } from '../components/ui/browserHeader';
import './index.scss';
import { Introduction } from '../components/HomepageFeatures/introduction';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
@ -74,37 +75,7 @@ export default function Home(): JSX.Element {
>
<HomepageHeader2 />
<main className="container">
<HomepageFeatures />
<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>
<div style={{ padding: '20px' }}>
<BrowserHeader />
<Container height={500} sandboxId="demo-dockview">
<DockviewDemo />
</Container>
</div>
<div style={{ padding: '20px' }}>
<BrowserHeader />
<Container height={500} sandboxId="dockview-app">
<DockviewDemo2 />
</Container>
</div>
<Introduction />
</main>
</Layout>
);

93
packages/docs/static/img/dockview_grid_4.svg vendored Normal file
View File

@ -0,0 +1,93 @@
<svg width="312" height="200" viewBox="0 0 312 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="311.504" height="200" rx="5" fill="white"/>
<path d="M0 5C0 2.23858 2.23858 0 5 0H307C309.761 0 312 2.23858 312 5V11H0V5Z" fill="#DCDCDC"/>
<rect y="10" width="312" height="1" fill="#BABABA"/>
<rect y="11" width="156" height="189" fill="#A8A8A8"/>
<rect x="188" y="11" width="124" height="91" fill="#000C18"/>
<rect x="188" y="102" width="124" height="98" fill="#000C18"/>
<rect y="24" width="187" height="176" fill="#000C18"/>
<rect x="188" y="102" width="124" height="1" fill="#2B2B4A"/>
<rect width="1" height="189" transform="matrix(-1 0 0 1 188 11)" fill="#2B2B4A"/>
<rect y="11" width="187" height="14" fill="#1C1C2A"/>
<rect y="11" width="35.9615" height="14" fill="#10192C"/>
<rect x="37.1603" y="11" width="35.9615" height="14" fill="#10192C"/>
<rect x="74.3205" y="11" width="35.9615" height="14" fill="#000C18"/>
<rect x="35.9615" y="11" width="1.19872" height="14" fill="#2B2B4A"/>
<rect x="73.1218" y="11" width="1.19872" height="14" fill="#2B2B4A"/>
<rect x="110.282" y="11" width="1.19872" height="14" fill="#2B2B4A"/>
<rect x="188" y="11" width="124" height="14" fill="#1C1C2A"/>
<rect x="188" y="11" width="30" height="14" fill="#10192C"/>
<rect x="219" y="11" width="30" height="14" fill="#000C18"/>
<rect x="218" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="249" y="11" width="1" height="14" fill="#2B2B4A"/>
<rect x="188" y="103" width="124" height="14" fill="#1C1C2A"/>
<rect x="188" y="103" width="24" height="14" fill="#10192C"/>
<rect x="212" y="103" width="24" height="14" fill="#000C18"/>
<rect x="212" y="103" width="0.503226" height="14" fill="#2B2B4A"/>
<rect x="236" y="103" width="0.503226" height="14" fill="#2B2B4A"/>
<path d="M76 18C76 16.8954 76.8954 16 78 16H81C82.1046 16 83 16.8954 83 18V18C83 19.1046 82.1046 20 81 20H78C76.8954 20 76 19.1046 76 18V18Z" fill="white"/>
<rect x="85" y="16" width="12" height="4" rx="2" fill="white"/>
<rect x="222" y="16" width="12" height="4" rx="2" fill="#777777"/>
<rect x="214" y="108" width="7" height="4" rx="2" fill="#777777"/>
<rect x="222" y="108" width="11" height="4" rx="2" fill="#777777"/>
<rect x="237" y="16" width="4" height="4" rx="2" fill="#777777"/>
<rect x="191" y="16" width="5" height="4" rx="2" fill="#282828"/>
<rect x="197" y="16" width="16" height="4" rx="2" fill="#282828"/>
<rect x="191" y="108" width="16" height="4" rx="2" fill="#282828"/>
<path d="M39 18C39 16.8954 39.8954 16 41 16H52C53.1046 16 54 16.8954 54 18V18C54 19.1046 53.1046 20 52 20H41C39.8954 20 39 19.1046 39 18V18Z" fill="#777777"/>
<rect x="4" y="3" width="4" height="4" rx="2" fill="#FD605E"/>
<rect x="10" y="3" width="4" height="4" rx="2" fill="#FBBC3F"/>
<rect x="16" y="3" width="4" height="4" rx="2" fill="#34C942"/>
<rect x="2" y="16" width="6" height="4" rx="2" fill="#777777"/>
<rect x="10" y="16" width="18" height="4" rx="2" fill="#777777"/>
<rect x="173" y="11" width="14" height="14" fill="#10192C"/>
<circle cx="176" cy="18" r="1" transform="rotate(-90 176 18)" fill="white"/>
<circle cx="184" cy="18" r="1" transform="rotate(-90 184 18)" fill="white"/>
<circle cx="180" cy="18" r="1" transform="rotate(-90 180 18)" fill="white"/>
<rect x="298" y="11" width="14" height="14" fill="#10192C"/>
<circle cx="301" cy="18" r="1" transform="rotate(-90 301 18)" fill="white"/>
<circle cx="309" cy="18" r="1" transform="rotate(-90 309 18)" fill="white"/>
<circle cx="305" cy="18" r="1" transform="rotate(-90 305 18)" fill="white"/>
<rect x="111" y="11" width="14" height="14" fill="#10192C"/>
<rect x="117.333" y="14" width="1.33333" height="8" rx="0.666667" fill="white"/>
<rect x="114" y="18.6665" width="1.33333" height="8" rx="0.666667" transform="rotate(-90 114 18.6665)" fill="white"/>
<rect x="298" y="103" width="14" height="14" fill="#10192C"/>
<circle cx="301" cy="110" r="1" transform="rotate(-90 301 110)" fill="white"/>
<circle cx="309" cy="110" r="1" transform="rotate(-90 309 110)" fill="white"/>
<circle cx="305" cy="110" r="1" transform="rotate(-90 305 110)" fill="white"/>
<rect x="285" y="103" width="14" height="14" fill="#10192C"/>
<rect x="288.5" y="106.5" width="7" height="7" rx="1.5" stroke="white"/>
<rect x="288" y="109" width="8" height="2" fill="white"/>
<g opacity="0.35">
<rect x="40" y="45" width="128.769" height="91" fill="#000C18"/>
<rect x="40" y="136" width="128.769" height="1" fill="#2B2B4A"/>
<rect x="40" y="45" width="128.769" height="14" fill="#1C1C2A"/>
<rect x="40" y="45" width="31.1538" height="14" fill="#10192C"/>
<rect x="72.1923" y="45" width="31.1538" height="14" fill="#000C18"/>
<rect x="71.1538" y="45" width="1.03846" height="14" fill="#2B2B4A"/>
<rect x="40" y="45" width="1" height="92" fill="#2B2B4A"/>
<rect x="168" y="45" width="1" height="92" fill="#2B2B4A"/>
<rect x="103.346" y="45" width="1.03846" height="14" fill="#2B2B4A"/>
<rect x="75.3077" y="50" width="12.4615" height="4" rx="2" fill="#777777"/>
<rect x="90.8846" y="50" width="4.15385" height="4" rx="2" fill="#777777"/>
<rect x="43.1154" y="50" width="5.19231" height="4" rx="2" fill="#282828"/>
<rect x="49.3461" y="50" width="16.6154" height="4" rx="2" fill="#282828"/>
<rect x="40" y="45" width="128.769" height="1" fill="#2B2B4A"/>
</g>
<rect x="29" y="54" width="128.769" height="91" fill="#000C18"/>
<rect x="29" y="145" width="128.769" height="1" fill="#2B2B4A"/>
<rect x="29" y="54" width="128.769" height="14" fill="#1C1C2A"/>
<rect x="29" y="54" width="31.1538" height="14" fill="#10192C"/>
<rect x="61.1923" y="54" width="31.1538" height="14" fill="#000C18"/>
<rect x="60.1538" y="54" width="1.03846" height="14" fill="#2B2B4A"/>
<rect x="29" y="54" width="1" height="92" fill="#2B2B4A"/>
<rect x="157" y="54" width="1" height="92" fill="#2B2B4A"/>
<rect x="92.3461" y="54" width="1.03846" height="14" fill="#2B2B4A"/>
<rect x="64.3077" y="59" width="12.4615" height="4" rx="2" fill="#777777"/>
<rect x="79.8846" y="59" width="4.15385" height="4" rx="2" fill="#777777"/>
<rect x="32.1154" y="59" width="5.19231" height="4" rx="2" fill="#282828"/>
<rect x="38.3461" y="59" width="16.6154" height="4" rx="2" fill="#282828"/>
<rect x="29" y="54" width="128.769" height="1" fill="#2B2B4A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.344 61.2654C128.52 61.1426 128.51 60.8799 128.327 60.77L124.18 58.2905C123.961 58.1595 123.691 58.3492 123.739 58.5997L124.651 63.344C124.691 63.5542 124.935 63.653 125.11 63.5302L125.772 63.067C125.867 63.0002 125.914 62.8836 125.892 62.7693L125.602 61.2612C125.554 61.0106 125.825 60.821 126.044 60.952L127.362 61.7401C127.462 61.7999 127.588 61.7954 127.683 61.7286L128.344 61.2654Z" fill="white"/>
<rect x="127.5" y="62.5" width="4" height="2" stroke="white" stroke-dasharray="0.25 0.25"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
packages/docs/static/img/splashscreen.gif vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 455 KiB