Skip to content

Commit e1304ce

Browse files
mathuomathuo
committed
chore: docs
1 parent bdf81fd commit e1304ce

File tree

5 files changed

+183
-118
lines changed

5 files changed

+183
-118
lines changed

‎packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss‎

Lines changed: 77 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,29 @@
1-
.group-control {
2-
.action {
3-
padding: 4px;
4-
display: flex;
5-
align-items: center;
6-
justify-content: center;
7-
box-sizing: border-box;
8-
font-size: 18px;
9-
cursor: pointer;
1+
.dockview-demo {
2+
.group-control {
3+
.action {
4+
padding: 4px;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
box-sizing: border-box;
9+
font-size: 18px;
10+
cursor: pointer;
1011

11-
&:hover {
12-
border-radius: 2px;
13-
background-color: var(--dv-icon-hover-background-color);
12+
&:hover {
13+
border-radius: 2px;
14+
background-color: var(--dv-icon-hover-background-color);
15+
}
1416
}
1517
}
16-
}
1718

18-
.data-table {
19-
table {
20-
font-size: 11px;
21-
th {
22-
padding: 0px 8px;
19+
.data-table {
20+
table {
21+
font-size: 11px;
22+
th {
23+
padding: 0px 8px;
24+
}
2325
}
2426
}
25-
}
26-
27-
.action-container {
28-
display: flex;
29-
padding: 4px 0px;
30-
overflow: auto;
3127

3228
button {
3329
height: 25px;
@@ -40,57 +36,78 @@
4036
cursor: pointer;
4137
outline: 1px solid #4c65d4;
4238

39+
&:focus {
40+
outline: 1px solid #4c65d4 !important;
41+
}
42+
4343
&:hover {
4444
background-color: #222e62;
4545
}
4646
}
4747

48-
.text-button {
49-
margin: 0px 4px;
50-
}
51-
52-
.button-action {
53-
margin: 0px 4px;
54-
// display: flex;
48+
input {
49+
outline: 1px solid #4c65d4;
50+
border: none;
51+
margin: 0px;
52+
height: 25px;
5553

56-
.selected {
57-
background-color: #4864dc;
54+
&:focus {
55+
outline: 1px solid #4c65d4 !important;
5856
}
5957
}
6058

61-
.button-group {
62-
button {
63-
margin-right: 0px;
59+
.action-container {
60+
display: flex;
61+
padding: 4px;
62+
overflow: auto;
63+
64+
.text-button {
65+
margin: 0px 4px;
6466
}
65-
}
6667

67-
.demo-button {
68-
min-width: 50px;
69-
padding: 0px 2px;
70-
border-radius: 0px;
71-
display: flex;
72-
flex-grow: 1;
73-
align-items: center;
74-
outline: 1px solid #4c65d4;
75-
}
68+
.button-action {
69+
margin: 0px 4px;
70+
// display: flex;
7671

77-
.demo-icon-button {
78-
outline: 1px solid #4c65d4;
79-
flex-grow: 1;
80-
display: flex;
81-
align-items: center;
82-
border-radius: 0px;
83-
padding: 0px 4px;
84-
border: none;
85-
cursor: pointer;
72+
.selected {
73+
background-color: #4864dc;
74+
}
75+
}
8676

87-
&:disabled {
88-
color: gray;
89-
cursor: help;
77+
.button-group {
78+
button {
79+
margin-right: 0px;
80+
}
9081
}
9182

92-
span {
93-
font-size: 16px;
83+
.demo-button {
84+
min-width: 50px;
85+
padding: 0px 2px;
86+
border-radius: 0px;
87+
display: flex;
88+
flex-grow: 1;
89+
align-items: center;
90+
outline: 1px solid #4c65d4;
91+
}
92+
93+
.demo-icon-button {
94+
outline: 1px solid #4c65d4;
95+
flex-grow: 1;
96+
display: flex;
97+
align-items: center;
98+
border-radius: 0px;
99+
padding: 0px 4px;
100+
border: none;
101+
cursor: pointer;
102+
103+
&:disabled {
104+
color: gray;
105+
cursor: help;
106+
}
107+
108+
span {
109+
font-size: 16px;
110+
}
94111
}
95112
}
96113
}

‎packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx‎

Lines changed: 66 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@ const components = {
8989
event.api.addPanel({
9090
id: 'panel_3',
9191
component: 'default',
92-
floating: true,
92+
});
93+
94+
event.api.onDidRemovePanel((e) => {
95+
console.log('remove', e);
9396
});
9497
}}
9598
className={'dockview-theme-abyss'}
@@ -264,6 +267,7 @@ const DockviewDemo = (props: { theme?: string }) => {
264267

265268
return (
266269
<div
270+
className="dockview-demo"
267271
style={{
268272
height: '100%',
269273
display: 'flex',
@@ -381,61 +385,77 @@ const DockviewDemo = (props: { theme?: string }) => {
381385
width: '400px',
382386
backgroundColor: 'black',
383387
color: 'white',
384-
overflow: 'auto',
388+
overflow: 'hidden',
385389
fontFamily: 'monospace',
386390
marginLeft: '10px',
387391
flexShrink: 0,
392+
display: 'flex',
393+
flexDirection: 'column',
388394
}}
389395
>
390-
{logLines.map((line, i) => {
391-
return (
392-
<div
393-
style={{
394-
height: '30px',
395-
overflow: 'hidden',
396-
textOverflow: 'ellipsis',
397-
whiteSpace: 'nowrap',
398-
fontSize: '13px',
399-
display: 'flex',
400-
alignItems: 'center',
401-
402-
backgroundColor: line.backgroundColor,
403-
}}
404-
key={i}
405-
>
406-
<span
396+
<div style={{ flexGrow: 1, overflow: 'auto' }}>
397+
{logLines.map((line, i) => {
398+
return (
399+
<div
407400
style={{
401+
height: '30px',
402+
overflow: 'hidden',
403+
textOverflow: 'ellipsis',
404+
whiteSpace: 'nowrap',
405+
fontSize: '13px',
408406
display: 'flex',
409407
alignItems: 'center',
410-
minWidth: '20px',
411-
maxWidth: '20px',
412-
color: 'gray',
413-
borderRight: '1px solid gray',
414-
marginRight: '4px',
415-
paddingLeft: '4px',
416-
height: '100%',
408+
409+
backgroundColor:
410+
line.backgroundColor,
417411
}}
412+
key={i}
418413
>
419-
{logLines.length - i}
420-
</span>
421-
<span>
422-
{line.timestamp && (
423-
<span
424-
style={{
425-
fontSize: '0.7em',
426-
padding: '0px 2px',
427-
}}
428-
>
429-
{line.timestamp
430-
.toISOString()
431-
.substring(11, 23)}
432-
</span>
433-
)}
434-
<span>{line.text}</span>
435-
</span>
436-
</div>
437-
);
438-
})}
414+
<span
415+
style={{
416+
display: 'flex',
417+
alignItems: 'center',
418+
minWidth: '20px',
419+
maxWidth: '20px',
420+
color: 'gray',
421+
borderRight: '1px solid gray',
422+
marginRight: '4px',
423+
paddingLeft: '4px',
424+
height: '100%',
425+
}}
426+
>
427+
{logLines.length - i}
428+
</span>
429+
<span>
430+
{line.timestamp && (
431+
<span
432+
style={{
433+
fontSize: '0.7em',
434+
padding: '0px 2px',
435+
}}
436+
>
437+
{line.timestamp
438+
.toISOString()
439+
.substring(11, 23)}
440+
</span>
441+
)}
442+
<span>{line.text}</span>
443+
</span>
444+
</div>
445+
);
446+
})}
447+
</div>
448+
<div
449+
style={{
450+
padding: '4px',
451+
display: 'flex',
452+
justifyContent: 'flex-end',
453+
}}
454+
>
455+
<button onClick={() => setLogLines([])}>
456+
Clear
457+
</button>
458+
</div>
439459
</div>
440460
)}
441461
</div>

‎packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -132,15 +132,15 @@ export const GridActions = (props: {
132132

133133
const popover = usePopover();
134134

135-
const onAddPanel = (options?: { advanced: boolean }) => {
135+
const onAddPanel = (options?: { advanced?: boolean; nested?: boolean }) => {
136136
if (options?.advanced) {
137137
popover.open(({ close }) => {
138138
return <PanelBuilder api={props.api!} done={close} />;
139139
});
140140
} else {
141141
props.api?.addPanel({
142142
id: `id_${Date.now().toString()}`,
143-
component: 'default',
143+
component: options?.nested ? 'nested' : 'default',
144144
title: `Tab ${nextId()}`,
145145
renderer: 'always',
146146
});
@@ -170,6 +170,12 @@ export const GridActions = (props: {
170170
<span className="material-symbols-outlined">tune</span>
171171
</button>
172172
</div>
173+
<button
174+
className="text-button"
175+
onClick={() => onAddPanel({ nested: true })}
176+
>
177+
Add Nested Panel
178+
</button>
173179
<button className="text-button" onClick={onAddGroup}>
174180
Add Group
175181
</button>
@@ -198,8 +204,8 @@ export const GridActions = (props: {
198204
Reset
199205
</button>
200206
<span style={{ flexGrow: 1 }} />
201-
<div style={{ display: 'flex' }}>
202-
<span style={{ paddingRight: '4px' }}>Group Gap</span>
207+
<div style={{ display: 'flex', alignItems: 'center' }}>
208+
<span style={{ paddingRight: '4px' }}>Grid Gap</span>
203209
<input
204210
style={{ width: 40 }}
205211
type="number"
@@ -209,6 +215,7 @@ export const GridActions = (props: {
209215
value={gap}
210216
onChange={(event) => setGap(Number(event.target.value))}
211217
/>
218+
<button onClick={() => setGap(0)}>Reset</button>
212219
</div>
213220
</div>
214221
);

‎packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { IDockviewPanelProps } from 'dockview';
2+
import * as React from 'react';
3+
import Map from 'react-map-gl';
4+
5+
export const MapboxPanel = (props: IDockviewPanelProps) => {
6+
React.useEffect(() => {
7+
const subscription = props.api.onDidLocationChange((e) => {
8+
const isPopout = e.location.type === 'popout';
9+
});
10+
11+
return () => subscription.dispose();
12+
}, [props.api]);
13+
14+
return (
15+
<div style={{ overflow: 'auto', height: '100%' }}>
16+
<Map
17+
mapboxAccessToken="pk.eyJ1IjoibWF0aHVvIiwiYSI6ImNrMXo4bnJ1ajA5OXUzaXA5ODg3Nnc1M3YifQ.Il7zfYd-sZ113W6Fmmagjg"
18+
initialViewState={{
19+
longitude: -122.4,
20+
latitude: 37.8,
21+
zoom: 14,
22+
}}
23+
style={{ width: 600, height: 400 }}
24+
mapStyle="mapbox://styles/mapbox/streets-v9"
25+
/>
26+
</div>
27+
);
28+
};

0 commit comments

Comments
 (0)