From 9cd6b4899d5591e03988affb83db4dfd4a5a95f1 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Fri, 27 Nov 2020 02:46:02 -0500
Subject: [PATCH] added simple file modal toggle

---
 src/App.js                 |  2 --
 src/features/io/IO.css     | 24 ++++++++++++++++++++++++
 src/features/io/IO.js      | 28 +++++++++++++++++-----------
 src/features/menu/Menu.css |  2 +-
 src/features/menu/Menu.js  | 34 ++++++++++++++++++++++++----------
 5 files changed, 66 insertions(+), 24 deletions(-)
 create mode 100644 src/features/io/IO.css

diff --git a/src/App.js b/src/App.js
index cce8456..06d8513 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import MainMenu from './features/menu/Menu';
 import TimbreSwitcher from './features/timbre/timbreSwitcher';
-import IO from './features/io/IO';
 import './App.css';
 
 function App() {
@@ -9,7 +8,6 @@ function App() {
         <div className="App">
             <header className="App-header">
                 <MainMenu />
-                <IO />
                 <TimbreSwitcher />
             </header>
         </div>
diff --git a/src/features/io/IO.css b/src/features/io/IO.css
new file mode 100644
index 0000000..4be86df
--- /dev/null
+++ b/src/features/io/IO.css
@@ -0,0 +1,24 @@
+.dropzone-container {
+    background: white;
+    padding: 0.95em;
+    position: fixed;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: calc(7.5em);
+    box-sizing: border-box;
+    width: 14em;
+    z-index: 100;
+    border: 0.09em solid slategray;
+    border-radius: 6px;
+}
+
+.show {
+    display: flex;
+}
+
+.hide {
+    display: none;
+}
diff --git a/src/features/io/IO.js b/src/features/io/IO.js
index 05db08e..477e501 100644
--- a/src/features/io/IO.js
+++ b/src/features/io/IO.js
@@ -1,32 +1,34 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
+import './IO.css';
 
 const baseStyle = {
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: '20px',
+    height: '4.25em',
+    padding: '0.5em',
     borderWidth: 2,
     borderRadius: 2,
-    borderColor: '#eeeeee',
+    borderColor: 'slategrey',
     borderStyle: 'dashed',
-    backgroundColor: '#fafafa',
-    color: '#bdbdbd',
+    backgroundColor: 'ghostwhite',
+    color: 'slategray',
     outline: 'none',
     transition: 'border .24s ease-in-out',
 };
 
 const activeStyle = {
-    borderColor: '#2196f3',
+    borderColor: 'slateblue',
 };
 
 const acceptStyle = {
-    borderColor: '#00e676',
+    borderColor: 'mediumseagreen',
 };
 
 const rejectStyle = {
-    borderColor: '#ff1744',
+    borderColor: 'crimson',
 };
 
 const Dropzone = ({ setFile }) => {
@@ -54,16 +56,20 @@ const Dropzone = ({ setFile }) => {
     );
 
     return (
-        <section className="dropzone-container">
+        <div className="dropzone-container">
             <div {...getRootProps({ style })}>
                 <input {...getInputProps()} />
                 <p>Drag and drop file here, or click to select</p>
             </div>
-        </section>
+        </div>
     );
 };
 
-export default function IO(props) {
+export default function IO({ show }) {
+    const display = show
+        ? 'dropzone-container show'
+        : 'dropzone-container hide';
+
     const [file, setFile] = useState(null);
 
     useEffect(() => {
@@ -71,7 +77,7 @@ export default function IO(props) {
     });
 
     return (
-        <div className="io">
+        <div className={display}>
             <Dropzone className="dropzone-modal" setFile={setFile} />
         </div>
     );
diff --git a/src/features/menu/Menu.css b/src/features/menu/Menu.css
index c5cf019..63119c4 100644
--- a/src/features/menu/Menu.css
+++ b/src/features/menu/Menu.css
@@ -182,7 +182,7 @@ h2 {
 .modal-main {
     background: white;
     padding: 0.75em 0 1em;
-    border: solid 1pt slategrey;
+    border: solid 0.09em slategrey;
     border-radius: 6px;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/features/menu/Menu.js b/src/features/menu/Menu.js
index 8fb56c5..fe55c48 100644
--- a/src/features/menu/Menu.js
+++ b/src/features/menu/Menu.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import IO from '../io/IO';
 import { useDispatch, useSelector } from 'react-redux'; // probably temporarily here
 import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here
 import logo from '../../1f3b9.svg';
@@ -40,7 +41,10 @@ export default function MainMenu() {
         className: '',
         openState: true,
     });
-    const [showModal, setShowModal] = useState(false);
+    const [showModal, setShowModal] = useState({
+        saveCheck: false,
+        ioModal: false,
+    });
     const dispatch = useDispatch();
 
     const HandleClick = () => {
@@ -59,22 +63,26 @@ export default function MainMenu() {
         });
     };
 
-    const modalState = () => {
-        setShowModal(!showModal);
+    const showSaveCheck = () => {
+        setShowModal({ ...showModal, saveCheck: !showModal.saveCheck });
+    };
+
+    const showIOModal = () => {
+        setShowModal({ ...showModal, ioModal: !showModal.ioModal });
     };
 
     return (
         <div>
             <Modal
-                show={showModal}
-                handleClose={modalState}
+                show={showModal.saveCheck}
+                handleClose={showSaveCheck}
                 handleSave={() => {
-                    modalState();
+                    showSaveCheck();
                     HandleClick(); // temporary while I implement the binary parsing stuff
                 }}
                 handleNoSave={() => {
                     dispatch(parameterRefreshAll());
-                    modalState();
+                    showSaveCheck();
                     HandleClick();
                 }}
             />
@@ -90,14 +98,20 @@ export default function MainMenu() {
                     <button
                         className="menu-button"
                         onClick={() => {
-                            !unsaved ? HandleClick() : modalState();
+                            !unsaved ? HandleClick() : showSaveCheck();
                         }}>
                         New Patch
                     </button>
-                    <button className="menu-button">Load Patch</button>
+                    <button
+                        className="menu-button"
+                        onClick={() => {
+                            !unsaved ? showIOModal() : showSaveCheck();
+                        }}>
+                        Load Patch
+                    </button>
                 </div>
             </div>
-
+            <IO show={showModal.ioModal} />
             <button className="menu-open-button" onClick={HandleClick} />
         </div>
     );