buttons for switching between modes

This commit is contained in:
Kieran 2025-06-30 10:19:42 +02:00
parent bbcfd8faab
commit 286a43b0b2
2 changed files with 17 additions and 6 deletions

View File

@ -205,7 +205,15 @@ h5 {
#pulse { #pulse {
animation: pulse-animation 0.2s normal; animation: pulse-animation 0.2s normal;
} }
/* :::::::::::::: SELECTING MODULATORS/ENUMERATORS */
.highlighted-button {
background-color: gray;
}
.unhighlighted-button {
background-color: white;
}
/* :::::::::::::: LOCK CSS */ /* :::::::::::::: LOCK CSS */
.locked-component { .locked-component {
@ -217,7 +225,7 @@ h5 {
.header { .header {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; flex-direction: flex;
} }
/* Locked */ /* Locked */

View File

@ -534,16 +534,19 @@ function MasterLfoHandler() {
var grid; var grid;
var title; var modButtonClass;
var enumButtonClass;
var labels; var labels;
if (viewMode === ViewModes.MOD) { if (viewMode === ViewModes.MOD) {
grid = modContents; grid = modContents;
title = "MODULATORS"; modButtonClass = "highlighted-button";
enumButtonClass = "unhighlighted-button";
labels = MODULATORLABELS; labels = MODULATORLABELS;
} }
else { else {
grid = enumContents; grid = enumContents;
title = "ENUMERATORS"; modButtonClass = "unhighlighted-button";
enumButtonClass = "highlighted-button";
labels = ENUMERATORLABELS; labels = ENUMERATORLABELS;
} }
@ -557,12 +560,12 @@ function MasterLfoHandler() {
return e('div', null, return e('div', null,
e('div', { className: 'header' }, e('div', { className: 'header' },
e(Switch, { ontoggle: toggleViewMode }, null), e('button', { onClick: () => setViewMode(ViewModes.MOD), className: modButtonClass}, 'Modulators'),
e('button', { onClick: () => setViewMode(ViewModes.ENUM), className: enumButtonClass }, 'Enumerators'),
//allows lock mode //allows lock mode
//e('span', { className: lockClass, onClick: toggleLockMode }, null) //e('span', { className: lockClass, onClick: toggleLockMode }, null)
), ),
//e('h5', null, title),
e('table', { id: 'table' }, e('table', { id: 'table' },
e('thead', null, e('tr', { id: 'headers' }, ...labels.map(x => e('th', null, x)))), e('thead', null, e('tr', { id: 'headers' }, ...labels.map(x => e('th', null, x)))),
e('tbody', null, ...grid) e('tbody', null, ...grid)