Skip to content

Commit bd8f11a

Browse files
smeijersmeijer
authored
feat: update layout, add settings menu and group links (#226)
1 parent 4b13299 commit bd8f11a

22 files changed

+1046
-509
lines changed

‎devtools/src/devtools/pane.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function Panel() {
2424
};
2525

2626
return (
27-
<div className="p-2 w-screen h-screen">
27+
<div className="bg-white p-2 w-screen h-screen">
2828
{result && <Result result={result} dispatch={dispatch} />}
2929
</div>
3030
);

‎package-lock.json

Lines changed: 274 additions & 133 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
},
4040
"dependencies": {
4141
"@primer/octicons-react": "^10.0.0",
42+
"@reach/dialog": "^0.10.5",
43+
"@reach/menu-button": "^0.9.1",
4244
"@testing-library/dom": "^7.18.1",
4345
"@testing-library/user-event": "^12.0.11",
4446
"codemirror": "5.54.0",
@@ -57,8 +59,10 @@
5759
"react-dom": "^16.13.1",
5860
"react-router-dom": "^5.2.0",
5961
"react-toastify": "^6.0.5",
62+
"react-toggle": "^4.1.1",
6063
"react-virtualized-auto-sizer": "^1.0.2",
61-
"react-window": "^1.8.5"
64+
"react-window": "^1.8.5",
65+
"use-effect-reducer": "^0.6.1"
6266
},
6367
"devDependencies": {
6468
"@babel/core": "^7.10.2",
@@ -100,7 +104,7 @@
100104
"jest": {
101105
"verbose": true,
102106
"moduleNameMapper": {
103-
"\\.(jpg|jpeg|png|svg)$": "<rootDir>/src/__mocks__/fileMock.js"
107+
"\\.(jpg|jpeg|png|svg|css)$": "<rootDir>/src/__mocks__/fileMock.js"
104108
},
105109
"setupFilesAfterEnv": [
106110
"./tests/setupTests.js"

‎src/components/App.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
33
import Playground from './Playground';
4-
import Layout from './Layout';
54
import Embedded from './Embedded';
65
import DomEvents from './DomEvents';
76

@@ -13,14 +12,10 @@ function App() {
1312
<Embedded />
1413
</Route>
1514
<Route path="/events">
16-
<Layout>
17-
<DomEvents />
18-
</Layout>
15+
<DomEvents />
1916
</Route>
2017
<Route path="/">
21-
<Layout>
22-
<Playground />
23-
</Layout>
18+
<Playground />
2419
</Route>
2520
</Switch>
2621
</Router>

‎src/components/DomEvents.js

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import IconButton from './IconButton';
1414
import CopyButton from './CopyButton';
1515
import EmptyStreetImg from '../images/EmptyStreetImg';
1616
import StickyList from './StickyList';
17+
import Layout from './Layout';
1718

1819
function onStateChange({ markup, query, result }) {
1920
state.save({ markup, query });
@@ -114,7 +115,7 @@ function DomEvents() {
114115

115116
const sortDirection = useRef('asc');
116117
const [appendMode, setAppendMode] = useState('bottom');
117-
const [{ markup, result }, dispatch] = usePlayground({
118+
const [{ markup, result, settings }, dispatch] = usePlayground({
118119
onChange: onStateChange,
119120
...initialValues,
120121
});
@@ -185,82 +186,84 @@ function DomEvents() {
185186
}, []);
186187

187188
return (
188-
<div className="flex flex-col h-auto md:h-full w-full">
189-
<div className="editor p-4 markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
190-
<div className="flex-auto relative h-56 md:h-full">
191-
<MarkupEditor markup={markup} dispatch={dispatch} />
192-
</div>
189+
<Layout dispatch={dispatch} status={status} settings={settings}>
190+
<div className="flex flex-col h-auto md:h-full w-full">
191+
<div className="editor p-4 markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
192+
<div className="flex-auto relative h-56 md:h-full">
193+
<MarkupEditor markup={markup} dispatch={dispatch} />
194+
</div>
193195

194-
<div className="flex-auto h-56 md:h-full">
195-
<Preview
196-
forwardedRef={setPreviewRef}
197-
markup={markup}
198-
elements={result.elements}
199-
accessibleRoles={result.accessibleRoles}
200-
dispatch={dispatch}
201-
variant="minimal"
202-
/>
196+
<div className="flex-auto h-56 md:h-full">
197+
<Preview
198+
forwardedRef={setPreviewRef}
199+
markup={markup}
200+
elements={result.elements}
201+
accessibleRoles={result.accessibleRoles}
202+
dispatch={dispatch}
203+
variant="minimal"
204+
/>
205+
</div>
203206
</div>
204-
</div>
205207

206-
<div className="flex-none h-8" />
208+
<div className="flex-none h-8" />
207209

208-
<div className="editor p-4 md:h-56 flex-auto overflow-hidden">
209-
<div className="h-56 md:h-full w-full flex flex-col">
210-
<div className="h-8 flex items-center w-full text-sm font-bold">
211-
<div
212-
className="p-2 w-16 cursor-pointer flex justify-between items-center"
213-
onClick={changeSortDirection}
214-
>
215-
# {getSortIcon()}
216-
</div>
210+
<div className="editor p-4 md:h-56 flex-auto overflow-hidden">
211+
<div className="h-56 md:h-full w-full flex flex-col">
212+
<div className="h-8 flex items-center w-full text-sm font-bold">
213+
<div
214+
className="p-2 w-16 cursor-pointer flex justify-between items-center"
215+
onClick={changeSortDirection}
216+
>
217+
# {getSortIcon()}
218+
</div>
217219

218-
<div className="p-2 w-32 ">type</div>
219-
<div className="p-2 w-32 ">name</div>
220-
221-
<div className="p-2 w-40 ">element</div>
222-
<div className="flex-auto p-2 flex justify-between">
223-
<span>selector</span>
224-
<div>
225-
<CopyButton
226-
text={getTextToCopy}
227-
title="copy log"
228-
className="mr-5"
229-
/>
230-
<IconButton title="clear event log" onClick={reset}>
231-
<TrashcanIcon />
232-
</IconButton>
220+
<div className="p-2 w-32 ">type</div>
221+
<div className="p-2 w-32 ">name</div>
222+
223+
<div className="p-2 w-40 ">element</div>
224+
<div className="flex-auto p-2 flex justify-between">
225+
<span>selector</span>
226+
<div>
227+
<CopyButton
228+
text={getTextToCopy}
229+
title="copy log"
230+
className="mr-5"
231+
/>
232+
<IconButton title="clear event log" onClick={reset}>
233+
<TrashcanIcon />
234+
</IconButton>
235+
</div>
233236
</div>
234237
</div>
235-
</div>
236238

237-
<div className="flex-auto relative overflow-hidden">
238-
{buffer.current.length === 0 ? (
239-
<div className="flex w-full h-full opacity-50 items-end justify-center">
240-
<EmptyStreetImg height="80%" />
241-
</div>
242-
) : (
243-
<AutoSizer>
244-
{({ width, height }) => (
245-
<StickyList
246-
mode={appendMode}
247-
ref={listRef}
248-
height={height}
249-
itemCount={eventCount}
250-
itemData={buffer.current}
251-
itemSize={32}
252-
width={width}
253-
outerElementType={VirtualScrollable}
254-
>
255-
{EventRecord}
256-
</StickyList>
257-
)}
258-
</AutoSizer>
259-
)}
239+
<div className="flex-auto relative overflow-hidden">
240+
{buffer.current.length === 0 ? (
241+
<div className="flex w-full h-full opacity-50 items-end justify-center">
242+
<EmptyStreetImg height="80%" />
243+
</div>
244+
) : (
245+
<AutoSizer>
246+
{({ width, height }) => (
247+
<StickyList
248+
mode={appendMode}
249+
ref={listRef}
250+
height={height}
251+
itemCount={eventCount}
252+
itemData={buffer.current}
253+
itemSize={32}
254+
width={width}
255+
outerElementType={VirtualScrollable}
256+
>
257+
{EventRecord}
258+
</StickyList>
259+
)}
260+
</AutoSizer>
261+
)}
262+
</div>
260263
</div>
261264
</div>
262265
</div>
263-
</div>
266+
</Layout>
264267
);
265268
}
266269

‎src/components/Footer.js

Lines changed: 0 additions & 56 deletions
This file was deleted.

0 commit comments

Comments
 (0)