Merge pull request #3548 from Snarling/TailButtonFix

UI: Positioning improved for tail titlebar buttons, and tail window has minimum size constraints.
This commit is contained in:
hydroflame 2022-04-25 11:27:27 -04:00 committed by GitHub
commit 471cbc2040
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -96,6 +96,9 @@ const useStyles = makeStyles((theme: Theme) =>
display: "flex", display: "flex",
flexDirection: "column-reverse", flexDirection: "column-reverse",
}, },
titleButton: {
padding: "1px 6px",
},
success: { success: {
color: theme.colors.success, color: theme.colors.success,
}, },
@ -260,35 +263,33 @@ function LogWindow(props: IProps): React.ReactElement {
}} }}
> >
<Box className="drag" display="flex" alignItems="center" ref={draggableRef}> <Box className="drag" display="flex" alignItems="center" ref={draggableRef}>
<Typography color="primary" variant="h6" title={title(true)}> <Typography color="primary" variant="h6" sx={{ marginRight: "auto" }} title={title(true)}>
{title()} {title()}
</Typography> </Typography>
<Box position="absolute" right={0}> {!workerScripts.has(script.pid) ? (
{!workerScripts.has(script.pid) && ( <Button className={classes.titleButton} onClick={run} onTouchEnd={run}>
<Button onClick={run} onTouchEnd={run}>
Run Run
</Button> </Button>
)} ) : (
{workerScripts.has(script.pid) && ( <Button className={classes.titleButton} onClick={kill} onTouchEnd={kill}>
<Button onClick={kill} onTouchEnd={kill}>
Kill Kill
</Button> </Button>
)} )}
<Button onClick={minimize} onTouchEnd={minimize}> <Button className={classes.titleButton} onClick={minimize} onTouchEnd={minimize}>
{minimized ? "\u{1F5D6}" : "\u{1F5D5}"} {minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
</Button> </Button>
<Button onClick={props.onClose} onTouchEnd={props.onClose}> <Button className={classes.titleButton} onClick={props.onClose} onTouchEnd={props.onClose}>
Close Close
</Button> </Button>
</Box> </Box>
</Box>
</Paper> </Paper>
<Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-wrap" }}> <Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-wrap" }}>
<ResizableBox <ResizableBox
className={classes.logs} className={classes.logs}
height={500} height={500}
width={500} width={500}
minConstraints={[250, 30]}
handle={ handle={
<span style={{ position: "absolute", right: "-10px", bottom: "-13px", cursor: "nw-resize" }}> <span style={{ position: "absolute", right: "-10px", bottom: "-13px", cursor: "nw-resize" }}>
<ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} /> <ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} />