xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #4 from SimonBrandner/feature/resizable-devtools/3

Browse source 
Make devtools resizable
This commit is contained in:
Robert Long 2021-08-23 14:16:54 -07:00 • committed by GitHub
commit f93103c2a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
package-lock.json generated
View file

@ -13,6 +13,7 @@
"events": "^3.3.0",
"lodash-move": "^1.1.1",
"matrix-js-sdk": "^12.0.1",
"re-resizable": "^6.9.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-router-dom": "^5.2.0",
@ -1021,6 +1022,11 @@
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
},
"node_modules/fast-memoize": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
},
"node_modules/forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@ -1570,6 +1576,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/re-resizable": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
"integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
"dependencies": {
"fast-memoize": "^2.5.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0"
}
},
"node_modules/react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
@ -2688,6 +2706,11 @@
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
},
"fast-memoize": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
},
"forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@ -3096,6 +3119,14 @@
"side-channel": "^1.0.4"
}
},
"re-resizable": {
"version": "6.9.0",
"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
"integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
"requires": {
"fast-memoize": "^2.5.1"
}
},
"react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",

1
package.json
View file

@ -12,6 +12,7 @@
"events": "^3.3.0",
"lodash-move": "^1.1.1",
"matrix-js-sdk": "^12.0.1",
"re-resizable": "^6.9.0",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-router-dom": "^5.2.0",

17
src/DevTools.jsx
View file

@ -18,6 +18,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
import ColorHash from "color-hash";
import classNames from "classnames";
import styles from "./DevTools.module.css";
import { Resizable } from "re-resizable";
const colorHash = new ColorHash({ lightness: 0.8 });
@ -77,7 +78,19 @@ export function DevTools({ manager }) {
}
return (
<div className={styles.devTools}>
<Resizable
enable={{
top: true,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
}}
className={styles.devTools}
>
<div className={styles.toolbar}>
<div
className={classNames(styles.tab, {
@ -128,7 +141,7 @@ export function DevTools({ manager }) {
onClose={() => setSelectedEvent(null)}
/>
)}
</div>
</Resizable>
);
}