Skip to content

Commit

Permalink
chore: docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mathuo
mathuo committed Dec 22, 2024
1 parent bdf81fd commit e1304ce
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 118 deletions.
137 changes: 77 additions & 60 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
input {
outline: 1px solid #4c65d4;
border: none;
margin: 0px;
height: 25px;

.selected {
background-color: #4864dc;
&:focus {
outline: 1px solid #4c65d4 !important;
}
}

.button-group {
button {
margin-right: 0px;
.action-container {
display: flex;
padding: 4px;
overflow: auto;

.text-button {
margin: 0px 4px;
}
}

.demo-button {
min-width: 50px;
padding: 0px 2px;
border-radius: 0px;
display: flex;
flex-grow: 1;
align-items: center;
outline: 1px solid #4c65d4;
}
.button-action {
margin: 0px 4px;
// display: flex;

.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;
.selected {
background-color: #4864dc;
}
}

&:disabled {
color: gray;
cursor: help;
.button-group {
button {
margin-right: 0px;
}
}

span {
font-size: 16px;
.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 changes: 66 additions & 46 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand Down Expand Up @@ -264,6 +267,7 @@ const DockviewDemo = (props: { theme?: string }) => {

return (
<div
className="dockview-demo"
style={{
height: '100%',
display: 'flex',
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 11 additions & 4 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,15 +132,15 @@ 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} />;
});
} else {
props.api?.addPanel({
id: `id_${Date.now().toString()}`,
component: 'default',
component: options?.nested ? 'nested' : 'default',
title: `Tab ${nextId()}`,
renderer: 'always',
});
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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>
);
Expand Down
28 changes: 28 additions & 0 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading

0 comments on commit e1304ce

Please sign in to comment.