navigation bar
This commit is contained in:
parent
c1a0a4d919
commit
a7b0de9e66
@ -38,22 +38,23 @@ body {
|
|||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
justify-content: flex-start;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
|
border-bottom: 1px solid var(--active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header button {
|
.header button {
|
||||||
background-color: var(--background);
|
|
||||||
border: 1px solid var(--active);
|
border: 1px solid var(--active);
|
||||||
color: var(--active);
|
color: var(--active);
|
||||||
|
background-color: white;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 13px;
|
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
border-radius: 25px;
|
font-size: 0.9em;
|
||||||
|
min-width: 4.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
td button {
|
td button {
|
||||||
|
24
lfogui.html
24
lfogui.html
@ -7,23 +7,21 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="./lfogui.css">
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="./lfogui.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="lfo-container"></div>
|
<div id="lfo-container"></div>
|
||||||
|
|
||||||
<script src="./react.js"></script>
|
<script src="./react.js"></script>
|
||||||
<script src="./react-dom.js"></script>
|
<script src="./react-dom.js"></script>
|
||||||
<script src="./moment.js"></script>
|
<script src="./moment.js"></script>
|
||||||
<script src="./common.js"></script>
|
<script src="./common.js"></script>
|
||||||
<script src="./enums.js"></script>
|
<script src="./enums.js"></script>
|
||||||
<script src="./modulators.js"></script>
|
<script src="./modulators.js"></script>
|
||||||
<script src="./lfogui.js">
|
<script src="./lfogui.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
10
lfogui.js
10
lfogui.js
@ -84,7 +84,7 @@ function MasterLfoHandler() {
|
|||||||
return content
|
return content
|
||||||
}
|
}
|
||||||
|
|
||||||
let toggleEnabledText = enabled ? "Hide" : "Show";
|
let toggleEnabledText = enabled ? `Hide \u{25BE}` : `Show \u{25B8}`;
|
||||||
|
|
||||||
/// MODULATOR ARRAYS
|
/// MODULATOR ARRAYS
|
||||||
let userDefinedWavesBase = [];
|
let userDefinedWavesBase = [];
|
||||||
@ -576,9 +576,11 @@ function MasterLfoHandler() {
|
|||||||
|
|
||||||
return e('div', null,
|
return e('div', null,
|
||||||
e('div', { className: 'header' },
|
e('div', { className: 'header' },
|
||||||
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.MOD), className: modButtonClass}, 'Modulators')),
|
e('div', {className: 'nav'},
|
||||||
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.ENUM), className: enumButtonClass }, 'Enumerators')),
|
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.MOD), className: modButtonClass}, 'Modulators')),
|
||||||
e('button', { onClick: toggleEnabled, }, toggleEnabledText),
|
displayIfEnabled(e('button', { onClick: () => setViewMode(ViewModes.ENUM), className: enumButtonClass }, 'Enumerators'))
|
||||||
|
),
|
||||||
|
e('button', { onClick: toggleEnabled, id: 'hide-button'}, toggleEnabledText),
|
||||||
|
|
||||||
//allows lock mode
|
//allows lock mode
|
||||||
//e('span', { className: lockClass, onClick: toggleLockMode }, null)
|
//e('span', { className: lockClass, onClick: toggleLockMode }, null)
|
||||||
|
Loading…
Reference in New Issue
Block a user