rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 17:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: docs

Browse Source
This commit is contained in:
mathuo 2024-12-22 19:20:24 +00:00
parent bdf81fd5b5
commit e1304ce694
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
5 changed files with 188 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
View File

@ -1,33 +1,29 @@
.group-control { .dockview-demo {
.action { .group-control {
padding: 4px; .action {
display: flex; padding: 4px;
align-items: center; display: flex;
justify-content: center; align-items: center;
box-sizing: border-box; justify-content: center;
font-size: 18px; box-sizing: border-box;
cursor: pointer; font-size: 18px;
cursor: pointer;
&:hover { &:hover {
border-radius: 2px; border-radius: 2px;
background-color: var(--dv-icon-hover-background-color); background-color: var(--dv-icon-hover-background-color);
}
} }
} }
}
.data-table { .data-table {
table { table {
font-size: 11px; font-size: 11px;
th { th {
padding: 0px 8px; padding: 0px 8px;
}
} }
} }
}
.action-container {
display: flex;
padding: 4px 0px;
overflow: auto;
button { button {
height: 25px; height: 25px;
@ -40,57 +36,78 @@
cursor: pointer; cursor: pointer;
outline: 1px solid #4c65d4; outline: 1px solid #4c65d4;
&:focus {
outline: 1px solid #4c65d4 !important;
}
&:hover { &:hover {
background-color: #222e62; background-color: #222e62;
} }
} }
.text-button { input {
margin: 0px 4px;
}
.button-action {
margin: 0px 4px;
// display: flex;
.selected {
background-color: #4864dc;
}
}
.button-group {
button {
margin-right: 0px;
}
}
.demo-button {
min-width: 50px;
padding: 0px 2px;
border-radius: 0px;
display: flex;
flex-grow: 1;
align-items: center;
outline: 1px solid #4c65d4; outline: 1px solid #4c65d4;
}
.demo-icon-button {
outline: 1px solid #4c65d4;
flex-grow: 1;
display: flex;
align-items: center;
border-radius: 0px;
padding: 0px 4px;
border: none; border: none;
cursor: pointer; margin: 0px;
height: 25px;
&:disabled { &:focus {
color: gray; outline: 1px solid #4c65d4 !important;
cursor: help; }
}
.action-container {
display: flex;
padding: 4px;
overflow: auto;
.text-button {
margin: 0px 4px;
} }
span { .button-action {
font-size: 16px; margin: 0px 4px;
// display: flex;
.selected {
background-color: #4864dc;
}
}
.button-group {
button {
margin-right: 0px;
}
}
.demo-button {
min-width: 50px;
padding: 0px 2px;
border-radius: 0px;
display: flex;
flex-grow: 1;
align-items: center;
outline: 1px solid #4c65d4;
}
.demo-icon-button {
outline: 1px solid #4c65d4;
flex-grow: 1;
display: flex;
align-items: center;
border-radius: 0px;
padding: 0px 4px;
border: none;
cursor: pointer;
&:disabled {
color: gray;
cursor: help;
}
span {
font-size: 16px;
}
} }
} }
} }

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

@ -89,7 +89,10 @@ const components = {
event.api.addPanel({ event.api.addPanel({
id: 'panel_3', id: 'panel_3',
component: 'default', component: 'default',
floating: true, });
event.api.onDidRemovePanel((e) => {
console.log('remove', e);
}); });
}} }}
className={'dockview-theme-abyss'} className={'dockview-theme-abyss'}
@ -264,6 +267,7 @@ const DockviewDemo = (props: { theme?: string }) => {
return ( return (
<div <div
className="dockview-demo"
style={{ style={{
height: '100%', height: '100%',
display: 'flex', display: 'flex',
@ -381,61 +385,77 @@ const DockviewDemo = (props: { theme?: string }) => {
width: '400px', width: '400px',
backgroundColor: 'black', backgroundColor: 'black',
color: 'white', color: 'white',
overflow: 'auto', overflow: 'hidden',
fontFamily: 'monospace', fontFamily: 'monospace',
marginLeft: '10px', marginLeft: '10px',
flexShrink: 0, flexShrink: 0,
display: 'flex',
flexDirection: 'column',
}} }}
> >
{logLines.map((line, i) => { <div style={{ flexGrow: 1, overflow: 'auto' }}>
return ( {logLines.map((line, i) => {
<div return (
style={{ <div
height: '30px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: '13px',
display: 'flex',
alignItems: 'center',
backgroundColor: line.backgroundColor,
}}
key={i}
>
<span
style={{ style={{
height: '30px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: '13px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
minWidth: '20px',
maxWidth: '20px', backgroundColor:
color: 'gray', line.backgroundColor,
borderRight: '1px solid gray',
marginRight: '4px',
paddingLeft: '4px',
height: '100%',
}} }}
key={i}
> >
{logLines.length - i} <span
</span> style={{
<span> display: 'flex',
{line.timestamp && ( alignItems: 'center',
<span minWidth: '20px',
style={{ maxWidth: '20px',
fontSize: '0.7em', color: 'gray',
padding: '0px 2px', borderRight: '1px solid gray',
}} marginRight: '4px',
> paddingLeft: '4px',
{line.timestamp height: '100%',
.toISOString() }}
.substring(11, 23)} >
</span> {logLines.length - i}
)} </span>
<span>{line.text}</span> <span>
</span> {line.timestamp && (
</div> <span
); style={{
})} fontSize: '0.7em',
padding: '0px 2px',
}}
>
{line.timestamp
.toISOString()
.substring(11, 23)}
</span>
)}
<span>{line.text}</span>
</span>
</div>
);
})}
</div>
<div
style={{
padding: '4px',
display: 'flex',
justifyContent: 'flex-end',
}}
>
<button onClick={() => setLogLines([])}>
Clear
</button>
</div>
</div> </div>
)} )}
</div> </div>

15
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -132,7 +132,7 @@ export const GridActions = (props: {
const popover = usePopover(); const popover = usePopover();
const onAddPanel = (options?: { advanced: boolean }) => { const onAddPanel = (options?: { advanced?: boolean; nested?: boolean }) => {
if (options?.advanced) { if (options?.advanced) {
popover.open(({ close }) => { popover.open(({ close }) => {
return <PanelBuilder api={props.api!} done={close} />; return <PanelBuilder api={props.api!} done={close} />;
@ -140,7 +140,7 @@ export const GridActions = (props: {
} else { } else {
props.api?.addPanel({ props.api?.addPanel({
id: `id_${Date.now().toString()}`, id: `id_${Date.now().toString()}`,
component: 'default', component: options?.nested ? 'nested' : 'default',
title: `Tab ${nextId()}`, title: `Tab ${nextId()}`,
renderer: 'always', renderer: 'always',
}); });
@ -170,6 +170,12 @@ export const GridActions = (props: {
<span className="material-symbols-outlined">tune</span> <span className="material-symbols-outlined">tune</span>
</button> </button>
</div> </div>
<button
className="text-button"
onClick={() => onAddPanel({ nested: true })}
>
Add Nested Panel
</button>
<button className="text-button" onClick={onAddGroup}> <button className="text-button" onClick={onAddGroup}>
Add Group Add Group
</button> </button>
@ -198,8 +204,8 @@ export const GridActions = (props: {
Reset Reset
</button> </button>
<span style={{ flexGrow: 1 }} /> <span style={{ flexGrow: 1 }} />
<div style={{ display: 'flex' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<span style={{ paddingRight: '4px' }}>Group Gap</span> <span style={{ paddingRight: '4px' }}>Grid Gap</span>
<input <input
style={{ width: 40 }} style={{ width: 40 }}
type="number" type="number"
@ -209,6 +215,7 @@ export const GridActions = (props: {
value={gap} value={gap}
onChange={(event) => setGap(Number(event.target.value))} onChange={(event) => setGap(Number(event.target.value))}
/> />
<button onClick={() => setGap(0)}>Reset</button>
</div> </div>
</div> </div>
); );

28
packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx Normal file
View File

@ -0,0 +1,28 @@
import { IDockviewPanelProps } from 'dockview';
import * as React from 'react';
import Map from 'react-map-gl';
export const MapboxPanel = (props: IDockviewPanelProps) => {
React.useEffect(() => {
const subscription = props.api.onDidLocationChange((e) => {
const isPopout = e.location.type === 'popout';
});
return () => subscription.dispose();
}, [props.api]);
return (
<div style={{ overflow: 'auto', height: '100%' }}>
<Map
mapboxAccessToken="pk.eyJ1IjoibWF0aHVvIiwiYSI6ImNrMXo4bnJ1ajA5OXUzaXA5ODg3Nnc1M3YifQ.Il7zfYd-sZ113W6Fmmagjg"
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14,
}}
style={{ width: 600, height: 400 }}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
</div>
);
};

9
packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
View File

@ -74,14 +74,7 @@ const PanelAction = (props: {
onClick={() => { onClick={() => {
const panel = props.api.getPanel(props.panelId); const panel = props.api.getPanel(props.panelId);
if (panel) { if (panel) {
props.api.addFloatingGroup(panel, { props.api.addFloatingGroup(panel);
position: {
width: 400,
height: 300,
bottom: 50,
right: 50,
},
});
} }
}} }}
> >