cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Menu modal

Browse Source
This commit is contained in:
[poww10s]
2020-11-24 15:10:41 -05:00
parent 9363f7932e
commit 5865400d5b
5 changed files with 192 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -8
View File
@@ -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
src/App.css
-1
View File
@@ -1,6 +1,5 @@
.App {
text-align: center;
}
.App-logo {
src/features/menu/Menu.css
+106 -7
View File
@@ -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;
}
src/features/menu/Menu.js
+68 -10
View File
@@ -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 (
<div className={modalDisplay}>
<div className="modal-main">
<span className="modal-header">Save Changes</span>
<span className="modal-text">
Do you want to save your changes?
</span>
<button
className="menu-button button-save"
onClick={handleSave}>
Save Changes
</button>
<button
className="menu-button button-no-save"
onClick={handleNoSave}>
Don't Save
</button>
<button
className="menu-button button-cancel"
onClick={handleClose}>
Cancel
</button>
</div>
</div>
);
};
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 (
<div>
<Modal
show={showModal}
handleClose={modalState}
handleSave={() => {
modalState();
HandleClick(); // temporary while I implement the binary parsing stuff
}}
handleNoSave={() => {
dispatch(parameterRefreshAll());
modalState();
HandleClick();
}}
/>
<div
className={`menu ${open.className}`}
onAnimationEnd={AnimationEnd}>
<img src={logo} className="menu-logo" alt="logo" />
<header className="menu-title">Alapatch</header>
<header className="menu-title">
<h1>Alapatch</h1>
<h2>A microKORG Patch Editor</h2>
</header>
<div className="menu-button-container">
<button
className="menu-button"
onClick={() => {
HandleClick();
dispatch(parameterRefreshAll());
!unsaved ? HandleClick() : modalState();
}}>
New Patch
</button>
<button className="menu-button">Load Patch</button>
</div>
</div>
{!open.openState && (
<button className="menu-open-button" onClick={HandleClick} />
)}
<button className="menu-open-button" onClick={HandleClick} />
</div>
);
}
src/features/timbre/parameters/parameterSlice.js
+9 -2
View File
@@ -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;