merge dev

src/ui/React/CodingContractModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { KEY } from "../../utils/helpers/keyCodes";
 
-import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
+import { CodingContract, CodingContractTypes } from "../../CodingContracts";
 import { CopyableText } from "./CopyableText";
 import { Modal } from "./Modal";
 import { EventEmitter } from "../../utils/EventEmitter";
@@ -49,7 +49,7 @@ export function CodingContractModal(): React.ReactElement {
     setProps(null);
   }
 
-  const contractType: CodingContractType = CodingContractTypes[props.c.type];
+  const contractType = CodingContractTypes[props.c.type];
   const description = [];
   for (const [i, value] of contractType.desc(props.c.data).split("\n").entries())
     description.push(<span key={i} dangerouslySetInnerHTML={{ __html: value + "<br />" }}></span>);

src/ui/React/LogBoxManager.tsx

@@ -12,6 +12,8 @@ import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
+let layerCounter = 0;
+
 export const LogBoxEvents = new EventEmitter<[RunningScript]>();
 
 interface Log {
@@ -86,9 +88,18 @@ function LogWindow(props: IProps): React.ReactElement {
     killWorkerScript(props.script, props.script.server, true);
     props.onClose();
   }
+  //useEffect(() => TerminalEvents.subscribe(_.debounce(async () => rerender(), 25, { maxWait: 50 })), []);
+
+  function updateLayer(): void {
+    const c = container.current;
+    if (c === null) return;
+    c.style.zIndex = 1500 + layerCounter + "";
+    layerCounter++;
+    rerender();
+  }
 
   return (
-    <Draggable handle="#drag">
+    <Draggable handle=".drag">
       <Paper
         style={{
           display: "flex",
@@ -100,45 +111,47 @@ function LogWindow(props: IProps): React.ReactElement {
         }}
         ref={container}
       >
-        <Paper
-          style={{
-            cursor: "grab",
-          }}
-        >
-          <Box id="drag" display="flex" alignItems="center">
-            <Typography color="primary" variant="h6">
-              {props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
-            </Typography>
-
-            <Box position="absolute" right={0}>
-              <Button onClick={kill}>Kill Script</Button>
-              <Button onClick={props.onClose}>Close</Button>
-            </Box>
-          </Box>
-        </Paper>
-        <Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-line" }}>
-          <ResizableBox
-            className={classes.logs}
-            height={500}
-            width={500}
-            handle={
-              <span style={{ position: "absolute", right: "-10px", bottom: "-13px", cursor: "nw-resize" }}>
-                <ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} />
-              </span>
-            }
+        <div onMouseDown={updateLayer}>
+          <Paper
+            style={{
+              cursor: "grab",
+            }}
           >
-            <Box>
-              {props.script.logs.map(
-                (line: string, i: number): JSX.Element => (
-                  <Typography key={i}>
-                    {line}
-                    <br />
-                  </Typography>
-                ),
-              )}
+            <Box className="drag" display="flex" alignItems="center">
+              <Typography color="primary" variant="h6">
+                {props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
+              </Typography>
+
+              <Box position="absolute" right={0}>
+                <Button onClick={kill}>Kill Script</Button>
+                <Button onClick={props.onClose}>Close</Button>
+              </Box>
             </Box>
-          </ResizableBox>
-        </Paper>
+          </Paper>
+          <Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-line" }}>
+            <ResizableBox
+              className={classes.logs}
+              height={500}
+              width={500}
+              handle={
+                <span style={{ position: "absolute", right: "-10px", bottom: "-13px", cursor: "nw-resize" }}>
+                  <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>
+        </div>
       </Paper>
     </Draggable>
   );

src/ui/React/Popup.tsx

@@ -1,32 +0,0 @@
-/**
- * React component for a popup content container
- *
- * Takes in a prop for rendering the content inside the popup
- */
-import React, { useEffect } from "react";
-
-interface IProps<T> {
-  content: (props: T) => React.ReactElement;
-  id: string;
-  props: T;
-  removePopup: () => void;
-}
-
-export function Popup<T>(props: IProps<T>): React.ReactElement {
-  function keyDown(event: KeyboardEvent): void {
-    if (event.key === "Escape") props.removePopup();
-  }
-
-  useEffect(() => {
-    document.addEventListener("keydown", keyDown);
-    return () => {
-      document.removeEventListener("keydown", keyDown);
-    };
-  });
-
-  return (
-    <div className={"popup-box-content"} id={`${props.id}-content`}>
-      {React.createElement(props.content, props.props)}
-    </div>
-  );
-}