mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-26 01:23:49 +01:00
Merge pull request #3641 from nickofolas/fix/log-box-ellipsis
UI: Minor improvements to log boxes
This commit is contained in:
commit
a8a302fc0a
@ -18,6 +18,7 @@ import { Theme } from "@mui/material";
|
||||
import { findRunningScript } from "../../Script/ScriptHelpers";
|
||||
import { Player } from "../../Player";
|
||||
import { debounce } from "lodash";
|
||||
import { Settings } from "../../Settings/Settings";
|
||||
|
||||
let layerCounter = 0;
|
||||
|
||||
@ -77,42 +78,18 @@ interface IProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
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",
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
whiteSpace: "pre-wrap",
|
||||
},
|
||||
titleButton: {
|
||||
padding: "1px 6px",
|
||||
},
|
||||
success: {
|
||||
color: theme.colors.success,
|
||||
},
|
||||
error: {
|
||||
color: theme.palette.error.main,
|
||||
},
|
||||
primary: {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
info: {
|
||||
color: theme.palette.info.main,
|
||||
},
|
||||
warning: {
|
||||
color: theme.palette.warning.main,
|
||||
padding: "1px 0",
|
||||
height: "100%",
|
||||
},
|
||||
}),
|
||||
);
|
||||
@ -190,20 +167,20 @@ 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 classes.error;
|
||||
return Settings.theme.error;
|
||||
}
|
||||
if (s.match(/(^\[[^\]]+\] )?SUCCESS/)) {
|
||||
return classes.success;
|
||||
return Settings.theme.success;
|
||||
}
|
||||
if (s.match(/(^\[[^\]]+\] )?WARN/)) {
|
||||
return classes.warning;
|
||||
return Settings.theme.warning;
|
||||
}
|
||||
if (s.match(/(^\[[^\]]+\] )?INFO/)) {
|
||||
return classes.info;
|
||||
return Settings.theme.info;
|
||||
}
|
||||
return classes.primary;
|
||||
return Settings.theme.primary;
|
||||
}
|
||||
|
||||
// And trigger fakeDrag when the window is resized
|
||||
@ -242,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: "-16px",
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user