mirror of
https://github.com/mathuo/dockview
synced 2025-01-22 17:35:57 +00:00
chore: docs
This commit is contained in:
mathuo
parent
bdf81fd5b5
commit
e1304ce694
@ -1,33 +1,29 @@
|
||||
.group-control {
|
||||
.action {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
.dockview-demo {
|
||||
.group-control {
|
||||
.action {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
background-color: var(--dv-icon-hover-background-color);
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
background-color: var(--dv-icon-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
table {
|
||||
font-size: 11px;
|
||||
th {
|
||||
padding: 0px 8px;
|
||||
.data-table {
|
||||
table {
|
||||
font-size: 11px;
|
||||
th {
|
||||
padding: 0px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-container {
|
||||
display: flex;
|
||||
padding: 4px 0px;
|
||||
overflow: auto;
|
||||
|
||||
button {
|
||||
height: 25px;
|
||||
@ -40,57 +36,78 @@
|
||||
cursor: pointer;
|
||||
outline: 1px solid #4c65d4;
|
||||
|
||||
&:focus {
|
||||
outline: 1px solid #4c65d4 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #222e62;
|
||||
}
|
||||
}
|
||||
|
||||
.text-button {
|
||||
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;
|
||||
input {
|
||||
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;
|
||||
margin: 0px;
|
||||
height: 25px;
|
||||
|
||||
&:disabled {
|
||||
color: gray;
|
||||
cursor: help;
|
||||
&:focus {
|
||||
outline: 1px solid #4c65d4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.action-container {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
overflow: auto;
|
||||
|
||||
.text-button {
|
||||
margin: 0px 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +89,10 @@ const components = {
|
||||
event.api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
floating: true,
|
||||
});
|
||||
|
||||
event.api.onDidRemovePanel((e) => {
|
||||
console.log('remove', e);
|
||||
});
|
||||
}}
|
||||
className={'dockview-theme-abyss'}
|
||||
@ -264,6 +267,7 @@ const DockviewDemo = (props: { theme?: string }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="dockview-demo"
|
||||
style={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
@ -381,61 +385,77 @@ const DockviewDemo = (props: { theme?: string }) => {
|
||||
width: '400px',
|
||||
backgroundColor: 'black',
|
||||
color: 'white',
|
||||
overflow: 'auto',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'monospace',
|
||||
marginLeft: '10px',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{logLines.map((line, i) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: '30px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '13px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
backgroundColor: line.backgroundColor,
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<span
|
||||
<div style={{ flexGrow: 1, overflow: 'auto' }}>
|
||||
{logLines.map((line, i) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: '30px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '13px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minWidth: '20px',
|
||||
maxWidth: '20px',
|
||||
color: 'gray',
|
||||
borderRight: '1px solid gray',
|
||||
marginRight: '4px',
|
||||
paddingLeft: '4px',
|
||||
height: '100%',
|
||||
|
||||
backgroundColor:
|
||||
line.backgroundColor,
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
{logLines.length - i}
|
||||
</span>
|
||||
<span>
|
||||
{line.timestamp && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.7em',
|
||||
padding: '0px 2px',
|
||||
}}
|
||||
>
|
||||
{line.timestamp
|
||||
.toISOString()
|
||||
.substring(11, 23)}
|
||||
</span>
|
||||
)}
|
||||
<span>{line.text}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<span
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minWidth: '20px',
|
||||
maxWidth: '20px',
|
||||
color: 'gray',
|
||||
borderRight: '1px solid gray',
|
||||
marginRight: '4px',
|
||||
paddingLeft: '4px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{logLines.length - i}
|
||||
</span>
|
||||
<span>
|
||||
{line.timestamp && (
|
||||
<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>
|
||||
|
||||
@ -132,7 +132,7 @@ export const GridActions = (props: {
|
||||
|
||||
const popover = usePopover();
|
||||
|
||||
const onAddPanel = (options?: { advanced: boolean }) => {
|
||||
const onAddPanel = (options?: { advanced?: boolean; nested?: boolean }) => {
|
||||
if (options?.advanced) {
|
||||
popover.open(({ close }) => {
|
||||
return <PanelBuilder api={props.api!} done={close} />;
|
||||
@ -140,7 +140,7 @@ export const GridActions = (props: {
|
||||
} else {
|
||||
props.api?.addPanel({
|
||||
id: `id_${Date.now().toString()}`,
|
||||
component: 'default',
|
||||
component: options?.nested ? 'nested' : 'default',
|
||||
title: `Tab ${nextId()}`,
|
||||
renderer: 'always',
|
||||
});
|
||||
@ -170,6 +170,12 @@ export const GridActions = (props: {
|
||||
<span className="material-symbols-outlined">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="text-button"
|
||||
onClick={() => onAddPanel({ nested: true })}
|
||||
>
|
||||
Add Nested Panel
|
||||
</button>
|
||||
<button className="text-button" onClick={onAddGroup}>
|
||||
Add Group
|
||||
</button>
|
||||
@ -198,8 +204,8 @@ export const GridActions = (props: {
|
||||
Reset
|
||||
</button>
|
||||
<span style={{ flexGrow: 1 }} />
|
||||
<div style={{ display: 'flex' }}>
|
||||
<span style={{ paddingRight: '4px' }}>Group Gap</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<span style={{ paddingRight: '4px' }}>Grid Gap</span>
|
||||
<input
|
||||
style={{ width: 40 }}
|
||||
type="number"
|
||||
@ -209,6 +215,7 @@ export const GridActions = (props: {
|
||||
value={gap}
|
||||
onChange={(event) => setGap(Number(event.target.value))}
|
||||
/>
|
||||
<button onClick={() => setGap(0)}>Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -74,14 +74,7 @@ const PanelAction = (props: {
|
||||
onClick={() => {
|
||||
const panel = props.api.getPanel(props.panelId);
|
||||
if (panel) {
|
||||
props.api.addFloatingGroup(panel, {
|
||||
position: {
|
||||
width: 400,
|
||||
height: 300,
|
||||
bottom: 50,
|
||||
right: 50,
|
||||
},
|
||||
});
|
||||
props.api.addFloatingGroup(panel);
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user