mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-26 01:23:49 +01:00
made log box resizable
This commit is contained in:
parent
70796e7674
commit
227fbd7060
38
dist/vendor.bundle.js
vendored
38
dist/vendor.bundle.js
vendored
File diff suppressed because one or more lines are too long
@ -53,4 +53,5 @@
|
||||
<body>
|
||||
<div id="root"/>
|
||||
<script type="text/javascript" src="dist/vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
|
||||
<!-- http://plaza.dsolver.ca/m/hydroflame4418 -->
|
||||
</html>
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
39
package-lock.json
generated
39
package-lock.json
generated
@ -21,6 +21,7 @@
|
||||
"@types/numeral": "0.0.25",
|
||||
"@types/react": "^17.0.21",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-resizable": "^1.7.3",
|
||||
"acorn": "^8.4.1",
|
||||
"acorn-walk": "^8.1.1",
|
||||
"ajv": "^5.1.5",
|
||||
@ -55,6 +56,7 @@
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-modal": "^3.12.1",
|
||||
"react-resizable": "^3.0.4",
|
||||
"sprintf-js": "^1.1.1",
|
||||
"tapable": "^1.0.0",
|
||||
"treant-js": "^1.0.1",
|
||||
@ -4674,6 +4676,14 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-resizable": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-1.7.3.tgz",
|
||||
"integrity": "sha512-DAx+hdnHFMJHgl8geiKo3jLt1GCT838SwQixjCtbRRfqCBawAKriVLCZ1nvp7B/2Pxd94MWod8NyJEnAAmNHNA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
@ -22144,6 +22154,18 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-resizable": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz",
|
||||
"integrity": "sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==",
|
||||
"dependencies": {
|
||||
"prop-types": "15.x",
|
||||
"react-draggable": "^4.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
@ -31587,6 +31609,14 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-resizable": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-1.7.3.tgz",
|
||||
"integrity": "sha512-DAx+hdnHFMJHgl8geiKo3jLt1GCT838SwQixjCtbRRfqCBawAKriVLCZ1nvp7B/2Pxd94MWod8NyJEnAAmNHNA==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
@ -45544,6 +45574,15 @@
|
||||
"integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==",
|
||||
"dev": true
|
||||
},
|
||||
"react-resizable": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.4.tgz",
|
||||
"integrity": "sha512-StnwmiESiamNzdRHbSSvA65b0ZQJ7eVQpPusrSmcpyGKzC0gojhtO62xxH6YOBmepk9dQTBi9yxidL3W4s3EBA==",
|
||||
"requires": {
|
||||
"prop-types": "15.x",
|
||||
"react-draggable": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
|
@ -22,6 +22,7 @@
|
||||
"@types/numeral": "0.0.25",
|
||||
"@types/react": "^17.0.21",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-resizable": "^1.7.3",
|
||||
"acorn": "^8.4.1",
|
||||
"acorn-walk": "^8.1.1",
|
||||
"ajv": "^5.1.5",
|
||||
@ -56,6 +57,7 @@
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-modal": "^3.12.1",
|
||||
"react-resizable": "^3.0.4",
|
||||
"sprintf-js": "^1.1.1",
|
||||
"tapable": "^1.0.0",
|
||||
"treant-js": "^1.0.1",
|
||||
|
@ -53,4 +53,5 @@
|
||||
<body>
|
||||
<div id="root" />
|
||||
</body>
|
||||
<!-- http://plaza.dsolver.ca/m/hydroflame4418 -->
|
||||
</html>
|
||||
|
@ -7,6 +7,8 @@ import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Draggable from "react-draggable";
|
||||
import { ResizableBox } from "react-resizable";
|
||||
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
|
||||
|
||||
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
|
||||
|
||||
@ -106,12 +108,12 @@ function LogWindow(props: IProps): React.ReactElement {
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
backgroundColor: "gray",
|
||||
width: "50%",
|
||||
|
||||
position: "fixed",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
margin: "-10% 0 0 -25%",
|
||||
height: "auto",
|
||||
|
||||
maxHeight: "50%",
|
||||
zIndex: 10,
|
||||
border: "2px solid $hacker-green",
|
||||
@ -134,17 +136,27 @@ function LogWindow(props: IProps): React.ReactElement {
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Paper>
|
||||
<Box maxHeight="25vh" overflow="scroll" sx={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
|
||||
{props.script.logs.map(
|
||||
(line: string, i: number): JSX.Element => (
|
||||
<Typography key={i}>
|
||||
{line}
|
||||
<br />
|
||||
</Typography>
|
||||
),
|
||||
)}
|
||||
</Box>
|
||||
<Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-line" }}>
|
||||
<ResizableBox
|
||||
height={500}
|
||||
width={500}
|
||||
handle={
|
||||
<span style={{ position: "absolute", right: 0, bottom: 0 }}>
|
||||
<ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Box>
|
||||
{props.script.logs.map(
|
||||
(line: string, i: number): JSX.Element => (
|
||||
<Typography key={i}>
|
||||
{line}
|
||||
<br />
|
||||
</Typography>
|
||||
),
|
||||
)}
|
||||
</Box>
|
||||
</ResizableBox>
|
||||
</Paper>
|
||||
</Paper>
|
||||
</Draggable>
|
||||
|
Loading…
Reference in New Issue
Block a user