test window.opwn

src/components/UIWin.jsx

@@ -14,11 +14,18 @@ const UIWin = () => {
   const [Content, name] = COMPONENTS[windowType];
 
   return (
-    <>
+    <div
+      className="window show"
+      style={{
+        width: '100%',
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
       {(windowType)
         ? <Content />
         : <h1>Loading</h1>}
-    </>
+    </div>
   );
 };
 

src/components/Window.jsx

@@ -75,6 +75,32 @@ const Window = ({ id }) => {
     dispatch(closeWindow(id));
   }, [dispatch]);
 
+  const {
+    xPos, yPos,
+    width, height,
+  } = position;
+
+  const popUp = useCallback((evt) => {
+    let left;
+    let top;
+    try {
+      left = Math.round(window.top.screenX + xPos);
+      top = Math.round(window.top.screenY + yPos);
+      if (Number.isNaN(left) || Number.isNaN(top)) {
+        throw new Error('NaN');
+      }
+    } catch {
+      left = 0;
+      top = 0;
+    }
+    window.lmao = window.open(
+      './win',
+      'lol',
+      `popup=yes,width=${width},height=${height},left=${left},top=${top},toolbar=no,status=no,directories=no,menubar=no`,
+    );
+    close(evt);
+  }, [xPos, yPos, width, height]);
+
   useDrag(
     titleBarRef,
     focus,
@@ -117,15 +143,8 @@ const Window = ({ id }) => {
     return null;
   }
 
-  const {
+  const { title, windowType } = win;
-    windowType,
+  const { z } = position;
-    title,
-  } = win;
-  const {
-    xPos, yPos,
-    width, height,
-    z,
-  } = position;
 
   const [Content, name] = COMPONENTS[windowType];
 
@@ -146,17 +165,26 @@ const Window = ({ id }) => {
         <h2>{windowTitle}</h2>
         <div
           onClick={close}
-          className="ModalClose"
+          className="modal-topbtn close"
           role="button"
           label="close"
           key="closebtn"
           title={t`Close`}
           tabIndex={-1}
         >✕</div>
+        <div
+          onClick={popUp}
+          className="modal-topbtn pop"
+          role="button"
+          label="close"
+          key="popbtn"
+          title={t`PopUp`}
+          tabIndex={-1}
+        >G</div>
         {(showWindows) && (
           <div
             onClick={toggleMaximize}
-            className="ModalRestore"
+            className="modal-topbtn restore"
             key="resbtn"
             role="button"
             label="restore"
@@ -207,6 +235,13 @@ const Window = ({ id }) => {
         >
           {windowTitle}
         </span>
+        <span
+          className="win-topbtn"
+          key="pobtn"
+          onClick={popUp}
+        >
+          G
+        </span>
         <span
           className="win-topbtn"
           key="maxbtn"

src/core/utils.js

@@ -496,5 +496,3 @@ export function parseInterval(interval) {
   }
   return (num * factor);
 }
-
-

src/store/reducers/windows.js

@@ -537,7 +537,13 @@ export default function windows(
           showWindows,
         };
       }
-      return correctPositions(state);
+      const newState = (showWindows === state.showWindows)
+        ? state
+        : {
+          ...state,
+          showWindows,
+        };
+      return correctPositions(newState);
     }
 
 

src/styles/default.css

@@ -635,7 +635,7 @@ tr:nth-child(even) {
   flex-direction: row;
 }
 
-.ModalClose, .ModalRestore {
+.modal-topbtn {
   position: fixed;
   display: flex;
   justify-content: center;
@@ -652,15 +652,19 @@ tr:nth-child(even) {
   z-index: 5;
 }
 
-.ModalClose {
+.modal-topbtn.close {
   right: 14px;
 }
 
-.ModalRestore {
+.modal-topbtn.restore {
   right: 52px;
 }
 
-.ModalClose:hover, .ModalRestore:hover {
+.modal-topbtn.pop {
+  right: 90px;
+}
+
+.modal-topbtn:hover {
   background-color: #e3e3e4;
 }
 
@@ -679,6 +683,10 @@ tr:nth-child(even) {
     border-radius: inherit !important;
   }
 
+  .modal-topbtn.pop {
+    right: 52px;
+  }
+
   .modal {
     height: 100%;
     width: 100%;