Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-27 16:37:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Various log box improvements

Browse Source
This commit is contained in:
nickofolas 2022-05-09 18:15:23 -05:00
parent bc9bce0d2c
commit d4e97d786c
1 changed files with 73 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/ui/React/LogBoxManager.tsx
View File

@ -80,21 +80,12 @@ interface IProps {
const useStyles = makeStyles((_theme: Theme) =>
createStyles({
title: {
"&.is-minimized + *": {
border: "none",
margin: 0,
"max-height": 0,
padding: 0,
"pointer-events": "none",
visibility: "hidden",
},
},
logs: {
overflowY: "scroll",
overflowX: "hidden",
scrollbarWidth: "auto",
flexDirection: "column-reverse",
whiteSpace: "pre-wrap",
},
titleButton: {
padding: "1px 0",
@ -176,7 +167,7 @@ function LogWindow(props: IProps): React.ReactElement {
setMinimized(!minimized);
}
function lineClass(s: string): string {
function lineColor(s: string): string {
if (s.match(/(^\[[^\]]+\] )?ERROR/) || s.match(/(^\[[^\]]+\] )?FAIL/)) {
return Settings.theme.error;
}
@ -228,74 +219,99 @@ function LogWindow(props: IProps): React.ReactElement {
if (e.clientX < 0 || e.clientY < 0 || e.clientX > innerWidth || e.clientY > innerHeight) return false;
};
// Max [width, height]
const minConstraints: [number, number] = [250, 33];
return (
<Draggable handle=".drag" onDrag={boundToBody} ref={rootRef}>
<Paper
style={{
display: "flex",
<Draggable handle=".drag" onDrag={boundToBody} ref={rootRef} onMouseDown={updateLayer}>
<Box
display="flex"
sx={{
flexFlow: "column",
position: "fixed",
left: "40%",
top: "30%",
zIndex: 1400,
minWidth: `${minConstraints[0]}px`,
minHeight: `${minConstraints[1]}px`,
...(minimized
? {
border: "none",
margin: 0,
maxHeight: 0,
padding: 0,
}
: {
border: `1px solid ${Settings.theme.welllight}`,
}),
}}
ref={container}
>
<div onMouseDown={updateLayer}>
<Paper
className={classes.title + " " + (minimized ? "is-minimized" : "")}
style={{
cursor: "grab",
}}
>
<Box className="drag" display="flex" alignItems="center" ref={draggableRef}>
<Typography color="primary" variant="h6" sx={{ marginRight: "auto" }} title={title(true)}>
{title()}
<ResizableBox
height={500}
width={500}
minConstraints={minConstraints}
handle={
<span
style={{
position: "absolute",
right: "-10px",
bottom: "-13px",
cursor: "nw-resize",
display: minimized ? "none" : "inline-block",
}}
>
<ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)", fontSize: "1.75rem" }} />
</span>
}
>
<>
<Paper className="drag" sx={{ display: "flex", alignItems: "center", cursor: "grab" }} ref={draggableRef}>
<Typography
variant="h6"
sx={{ marginRight: "auto", textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }}
title={title(true)}
>
{title(true)}
</Typography>
{!workerScripts.has(script.pid) ? (
<Button className={classes.titleButton} onClick={run} onTouchEnd={run}>
Run
<span style={{ minWidth: "fit-content", height: `${minConstraints[1]}px` }}>
{!workerScripts.has(script.pid) ? (
<Button className={classes.titleButton} onClick={run} onTouchEnd={run}>
Run
</Button>
) : (
<Button className={classes.titleButton} onClick={kill} onTouchEnd={kill}>
Kill
</Button>
)}
<Button className={classes.titleButton} onClick={minimize} onTouchEnd={minimize}>
{minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
</Button>
) : (
<Button className={classes.titleButton} onClick={kill} onTouchEnd={kill}>
Kill
<Button className={classes.titleButton} onClick={props.onClose} onTouchEnd={props.onClose}>
Close
</Button>
)}
<Button className={classes.titleButton} onClick={minimize} onTouchEnd={minimize}>
{minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
</Button>
<Button className={classes.titleButton} onClick={props.onClose} onTouchEnd={props.onClose}>
Close
</Button>
</Box>
</Paper>
<Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-wrap" }}>
<ResizableBox
</span>
</Paper>
<Paper
className={classes.logs}
height={500}
width={500}
minConstraints={[250, 30]}
handle={
<span style={{ position: "absolute", right: "-10px", bottom: "-13px", cursor: "nw-resize" }}>
<ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} />
</span>
}
sx={{ height: `calc(100% - ${minConstraints[1]}px)`, display: minimized ? "none" : "flex" }}
>
<Box>
<span style={{ display: "flex", flexDirection: "column" }}>
{script.logs.map(
(line: string, i: number): JSX.Element => (
<Typography key={i} className={lineClass(line)}>
<Typography key={i} sx={{ color: lineColor(line) }}>
{line}
<br />
</Typography>
),
)}
</Box>
</ResizableBox>
</Paper>
</div>
</Paper>
</span>
</Paper>
</>
</ResizableBox>
</Box>
</Draggable>
);
}