diff --git a/README.md b/README.md index 8c2029b..0dbb4bb 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,15 @@ Alapatch currently only supports loading and saving patch files in the .SYSEX fo # Branch TODO List -- [x] implement React Redux Correctly -- [x] finish implementing for each component -- [x] finish one timbre as an example -- [x] update state and components to handle multiple timbres -- [x] implement switching between currently viewed timbre -- [ ] make a home screen! -- [ ] style components -- [ ] merge with main branch +- [x] implement React Redux Correctly +- [x] finish implementing for each component +- [x] finish one timbre as an example +- [x] update state and components to handle multiple timbres +- [x] implement switching between currently viewed timbre +- [x] make a home screen! +- [ ] implement popup to confirm new patch if a patch is currently being worked on. +- [ ] style components +- [ ] merge with main branch # Link to the MicroKORG Midi Implementation diff --git a/src/App.css b/src/App.css index caffd66..e65aaf8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,5 @@ .App { text-align: center; - } .App-logo { diff --git a/src/features/menu/Menu.css b/src/features/menu/Menu.css index e93a12d..c5cf019 100644 --- a/src/features/menu/Menu.css +++ b/src/features/menu/Menu.css @@ -1,21 +1,23 @@ .menu, .menu-true, .menu-false { - position: absolute; + position: fixed; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; - z-index: 9999; + z-index: 99; top: 0; left: 0; + bottom: 0; + right: 0; min-height: 100vh; min-width: 100vw; } .menu-false { - left: -100vw; + display: none; } .menu-true-animation { @@ -83,16 +85,28 @@ .menu-logo { height: 40vmin; pointer-events: none; + padding: 0.5em; } .menu-title { color: #1c1d21; font-family: 'Lato', sans-serif; - font-weight: 700; line-height: 1em; - font-size: calc(10px + 10vmin); margin: 0 0 0.5em 0; } +h1 { + margin: 0.25em; + font-weight: 700; + line-height: 0.85em; + font-size: 2.5em; +} + +h2 { + margin: 0.25em; + font-weight: 500; + line-height: 1em; + font-size: 1em; +} .menu-button, .menu-open-button { @@ -109,6 +123,12 @@ text-align: center; outline: none; transition: all 0.2s ease-in-out; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; } .menu-button:hover { color: white; @@ -121,10 +141,11 @@ } .menu-open-button { - height: 1.5em; + z-index: 100; + height: 1.495em; line-height: 0.9em; position: absolute; - padding: 0.13em 0.3em; + padding: 0em 0.3em; color: #ef476f; border: 0.09em solid #ef476f; margin: 0; @@ -137,3 +158,81 @@ .menu-open-button::before { content: '\2630'; } + +.modal { + margin: auto; + height: 8em; + width: 14em; + position: fixed; + z-index: 100; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.modal-hide { + display: none; +} + +.modal-display { + display: block; +} + +.modal-main { + background: white; + padding: 0.75em 0 1em; + border: solid 1pt slategrey; + border-radius: 6px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.modal-header { + font-size: 0.75em; + line-height: 1.25em; + text-align: left; + margin: 0em 9em 0 0; +} + +.modal-text { + flex-grow: 3; + margin: 0.5em 0em 1em 1.85em; + text-align: left; + line-height: 1.5em; + font-size: 0.65em; + font-weight: 300; +} + +.button-save, +.button-no-save, +.button-cancel { + width: 25%; + font-size: 0.5em; + margin: 0 0.5em; + border-radius: 0.2em; + padding: 0.35em 0; +} + +.button-save { + color: mediumseagreen; + border-color: mediumseagreen; +} +.button-save:hover { + background: mediumseagreen; +} +.button-no-save { + color: crimson; + border-color: crimson; +} +.button-no-save:hover { + background: crimson; +} +.button-cancel { + color: slategray; + border-color: grey; +} +.button-cancel:hover { + background: slategray; +} diff --git a/src/features/menu/Menu.js b/src/features/menu/Menu.js index 6028bc2..03ad864 100644 --- a/src/features/menu/Menu.js +++ b/src/features/menu/Menu.js @@ -1,16 +1,56 @@ -import React, { useState } from 'react'; -import { useDispatch } from 'react-redux'; // probably temporarily here -import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here +import React, { useState, useCallback } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; // probably temporarily here +import { + parameterRefreshAll, + parameterFlipUnsaved, +} from '../timbre/parameters/parameterSlice'; // probably temporarily here import logo from '../../1f3b9.svg'; import './Menu.css'; -export default function MainMenu(props) { +// for things such as (do you want to save? or do you want to reset things?) +const Modal = ({ show, handleSave, handleNoSave, handleClose }) => { + const modalDisplay = show ? 'modal modal-display' : 'modal modal-hide'; + const dispatch = useDispatch(); + return ( +
+
+ Save Changes + + Do you want to save your changes? + + + + +
+
+ ); +}; + +export default function MainMenu() { + const unsaved = useSelector((state) => state.parameters.unsaved); const [open, setOpen] = useState({ className: '', openState: true, }); + const [showModal, setShowModal] = useState(false); const dispatch = useDispatch(); + const unSavedUpdate = useCallback(() => dispatch(parameterFlipUnsaved), [ + dispatch, + ]); + const HandleClick = () => { setOpen({ className: open.openState @@ -27,28 +67,46 @@ export default function MainMenu(props) { }); }; + const modalState = () => { + setShowModal(!showModal); + }; + return (
+ { + modalState(); + HandleClick(); // temporary while I implement the binary parsing stuff + }} + handleNoSave={() => { + dispatch(parameterRefreshAll()); + modalState(); + HandleClick(); + }} + />
logo -
Alapatch
+
+

Alapatch

+

A microKORG Patch Editor

+
- {!open.openState && ( -
); } diff --git a/src/features/timbre/parameters/parameterSlice.js b/src/features/timbre/parameters/parameterSlice.js index 1a41224..133c0df 100644 --- a/src/features/timbre/parameters/parameterSlice.js +++ b/src/features/timbre/parameters/parameterSlice.js @@ -372,6 +372,7 @@ const defaultState = { target: 'Both', }, }, + unsaved: false, }; const parametersAdapter = createEntityAdapter({}); @@ -380,9 +381,14 @@ const parametersSlice = createSlice({ name: 'parameters', initialState: parametersAdapter.getInitialState(defaultState), reducers: { - parameterAdded: parametersAdapter.addOne, - parameterUpdated: parametersAdapter.updateOne, + parameterUpdated(state, action) { + parametersAdapter.updateOne(state, action.payload); + state.unsaved = true; + }, parameterRefreshAll: () => defaultState, + parameterFlipUnsaved(state) { + state.unsaved = !state.unsaved; + }, }, }); @@ -397,6 +403,7 @@ export const { parameterAdded, parameterUpdated, parameterRefreshAll, + parameterFlipUnsaved, } = parametersSlice.actions; export default parametersSlice.reducer;