modal style, import-export configurator style

packages/web/src/modals/ImportExportModal.js

@@ -12,12 +12,76 @@ import { openNewTab } from '../utility/common';
 import { useCurrentArchive, useSetOpenedTabs } from '../utility/globalState';
 import RunnerOutputPane from '../query/RunnerOutputPane';
 import axios from '../utility/axios';
+import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
+import SocketMessagesView from '../query/SocketMessagesView';
+import RunnerOutputFiles from '../query/RunnerOuputFiles';
+
+const headerHeight = '60px';
+const footerHeight = '60px';
 
 const OutputContainer = styled.div`
   position: relative;
   height: 150px;
 `;
 
+const Wrapper = styled.div`
+  display: flex;
+  // flex: 1;
+
+  position: fixed;
+  top: ${headerHeight};
+  left: 0;
+  right: 0;
+  bottom: ${footerHeight};
+`;
+
+const WidgetColumnWrapper = styled.div`
+  max-width: 40%;
+  // flex-basis: 50%;
+  // flow-grow: 0;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  border-left: 1px solid #ccc;
+`;
+
+const StyledForm = styled(Form)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const ContentWrapper = styled.div`
+  // border-bottom: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+  // padding: 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+`;
+
+const Footer = styled.div`
+  position: fixed;
+  height: ${footerHeight};
+  left: 0;
+  right: 0;
+  bottom: 0px;
+  background-color: #eeffff;
+
+  border-top: 1px solid #ccc;
+  // padding: 15px;
+`;
+
+const FooterButtons = styled.div`
+  margin: 15px;
+`;
+
 function GenerateSctriptButton({ modalState }) {
   const setOpenedTabs = useSetOpenedTabs();
   const { values } = useFormikContext();
@@ -55,7 +119,7 @@ export default function ImportExportModal({ modalState, initialValues, uploadedF
   };
 
   return (
-    <ModalBase modalState={modalState}>
+    <ModalBase modalState={modalState} fullScreen isFlex>
       <Formik
         onSubmit={handleExecute}
         initialValues={{
@@ -66,22 +130,37 @@ export default function ImportExportModal({ modalState, initialValues, uploadedF
           ...initialValues,
         }}
       >
-        <Form>
+        <StyledForm>
           <ModalHeader modalState={modalState}>Import/Export</ModalHeader>
-          <ModalContent>
-            <ImportExportConfigurator uploadedFile={uploadedFile} />
-          </ModalContent>
-          <ModalFooter>
-            <FormStyledButton type="submit" value="Run" />
-            <GenerateSctriptButton modalState={modalState} />
-            <FormStyledButton type="button" value="Close" onClick={modalState.close} />
-          </ModalFooter>
-          {runnerId && (
-            <OutputContainer>
-              <RunnerOutputPane runnerId={runnerId} executeNumber={executeNumber} />
-            </OutputContainer>
-          )}
-        </Form>
+          <Wrapper>
+            <ContentWrapper>
+              <ImportExportConfigurator uploadedFile={uploadedFile} />
+            </ContentWrapper>
+            <WidgetColumnWrapper>
+              <WidgetColumnBar>
+                {/* <WidgetColumnBarItem title="Preview" name="preview">
+                  Preview
+                </WidgetColumnBarItem> */}
+                <WidgetColumnBarItem title="Messages" name="messages">
+                  <SocketMessagesView
+                    eventName={runnerId ? `runner-info-${runnerId}` : null}
+                    executeNumber={executeNumber}
+                  />
+                </WidgetColumnBarItem>
+                <WidgetColumnBarItem title="Output files" name="output">
+                  <RunnerOutputFiles runnerId={runnerId} executeNumber={executeNumber} />
+                </WidgetColumnBarItem>
+              </WidgetColumnBar>
+            </WidgetColumnWrapper>
+          </Wrapper>
+          <Footer>
+            <FooterButtons>
+              <FormStyledButton type="submit" value="Run" />
+              <GenerateSctriptButton modalState={modalState} />
+              <FormStyledButton type="button" value="Close" onClick={modalState.close} />
+            </FooterButtons>
+          </Footer>
+        </StyledForm>
       </Formik>
     </ModalBase>
   );

packages/web/src/modals/ModalBase.js

@@ -22,27 +22,51 @@ const StyledModal = styled(Modal)`
   background: #fff;
   overflow: auto;
   webkitoverflowscrolling: touch;
-  borderradius: 4px;
   outline: none;
 
-  width: 50%;
-  max-width: 900px;
-  margin: auto;
-  margin-top: 15vh;
+  ${(props) =>
+    props.fullScreen &&
+    `
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+      // width: 100%;
+      // height: 100%;
+    `}
 
-  // z-index:1200;
+  ${(props) =>
+    !props.fullScreen &&
+    `
+    border-radius: 10px;
+    width: 50%;
+    max-width: 900px;
+    margin: auto;
+    margin-top: 15vh;
+        `} 
+        
+        // z-index:1200;
+
+  ${(props) =>
+    props.isFlex &&
+    `
+          display: flex;
+              `}
 `;
 
 const ModalContent = styled.div`
   padding: 20px;
 `;
 
-export default function ModalBase({ modalState, children }) {
+export default function ModalBase({ modalState, children, isFlex = false, fullScreen = false }) {
   return (
     <StyledModal
       isOpen={modalState.isOpen}
       onRequestClose={modalState.close}
       overlayClassName="RactModalOverlay"
+      fullScreen={fullScreen}
+      isFlex={isFlex}
       // style={{
       //   overlay: {
       //     backgroundColor: '#000',

packages/web/src/modals/ModalFooter.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   border-bottom: 1px solid #ccc;
   padding: 15px;
+  background-color: #eeffff;
 `;
 
 export default function ModalFooter({ children }) {

packages/web/src/modals/ModalHeader.js

@@ -6,13 +6,16 @@ const Wrapper = styled.div`
   padding: 15px;
   display: flex;
   justify-content: space-between;
+  background-color: #eeffff;
 `;
 
 const CloseWrapper = styled.div`
   font-size: 12pt;
   &:hover {
-    background-color: #blue;
+    background-color: #ccccff;
   }
+  padding: 5px 10px;
+  border-radius: 10px; 
 `;
 
 export default function ModalHeader({ children, modalState }) {