diff --git a/lfogui.css b/lfogui.css index 1552124..5c78e99 100644 --- a/lfogui.css +++ b/lfogui.css @@ -205,7 +205,15 @@ h5 { #pulse { animation: pulse-animation 0.2s normal; } +/* :::::::::::::: SELECTING MODULATORS/ENUMERATORS */ +.highlighted-button { + background-color: gray; +} + +.unhighlighted-button { + background-color: white; +} /* :::::::::::::: LOCK CSS */ .locked-component { @@ -217,7 +225,7 @@ h5 { .header { display: flex; width: 100%; - justify-content: space-between; + flex-direction: flex; } /* Locked */ diff --git a/lfogui.js b/lfogui.js index 049b08c..c1952d2 100644 --- a/lfogui.js +++ b/lfogui.js @@ -534,16 +534,19 @@ function MasterLfoHandler() { var grid; - var title; + var modButtonClass; + var enumButtonClass; var labels; if (viewMode === ViewModes.MOD) { grid = modContents; - title = "MODULATORS"; + modButtonClass = "highlighted-button"; + enumButtonClass = "unhighlighted-button"; labels = MODULATORLABELS; } else { grid = enumContents; - title = "ENUMERATORS"; + modButtonClass = "unhighlighted-button"; + enumButtonClass = "highlighted-button"; labels = ENUMERATORLABELS; } @@ -557,12 +560,12 @@ function MasterLfoHandler() { return e('div', null, 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 //e('span', { className: lockClass, onClick: toggleLockMode }, null) ), - //e('h5', null, title), e('table', { id: 'table' }, e('thead', null, e('tr', { id: 'headers' }, ...labels.map(x => e('th', null, x)))), e('tbody', null, ...grid)