jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-11-03 22:03:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Single-note modes: switch-style display toggles (like phrase mode)

Browse Source 
Guitar/Piano and Hint show/hide controls in Learn Notes / Ear Training
now use the small switch buttons in a .display-toggles row instead of
the big hint-buttons. Play Note / Skip Note stay as action buttons.
This commit is contained in:
Jens Mohrmann
2026-09-20 00:15:55 +02:00
parent e43a17efb3
commit 7a030f2728
1 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/SingleNoteTrainer.tsx
View File

@@ -149,25 +149,43 @@ export const SingleNoteTrainer = forwardRef<SingleNoteHandle, SingleNoteTrainerP
)} )}
{!settings.zenMode && ( {!settings.zenMode && (
<div className="action-row" style={{ marginTop: '24px', display: 'flex', justifyContent: 'center', gap: '16px' }}> <>
{/* Display toggles — switch style (like phrase mode):
pure show/hide, no trainer actions. */}
<div className="display-toggles" style={{ marginTop: '24px' }}>
{currentInstrumentDef.showTuning && ( {currentInstrumentDef.showTuning && (
<div className="display-toggle">
<span className="display-toggle-label">
<Guitar size={15} />
{currentInstrumentDef.id === 'piano' ? 'Piano' : 'Guitar'}
</span>
<button <button
className={`hint-button ${settings.showFretboard ? 'active' : ''}`} className={`switch-button ${settings.showFretboard ? 'active' : ''}`}
onClick={() => setSettings(s => ({ ...s, showFretboard: !s.showFretboard }))} onClick={() => setSettings(s => ({ ...s, showFretboard: !s.showFretboard }))}
title={`Toggle Virtual ${currentInstrumentDef.displayName} (Keyboard Shortcut: V)`} title={`Toggle Virtual ${currentInstrumentDef.displayName} (Keyboard Shortcut: V)`}
aria-label={`Show virtual ${currentInstrumentDef.displayName}`}
> >
<Guitar size={18} /> <div className="switch-thumb" />
{currentInstrumentDef.id === 'piano' ? 'Piano' : 'Guitar'}
</button> </button>
</div>
)} )}
<div className="display-toggle">
<span className="display-toggle-label">
<HelpCircle size={15} />
Hint
</span>
<button <button
className={`hint-button ${settings.showHint ? 'active' : ''}`} className={`switch-button ${settings.showHint ? 'active' : ''}`}
onClick={() => setSettings(s => ({ ...s, showHint: !s.showHint }))} onClick={() => setSettings(s => ({ ...s, showHint: !s.showHint }))}
title="Keyboard Shortcut: H" title="Keyboard Shortcut: H"
aria-label="Show hint"
> >
<HelpCircle size={18} /> <div className="switch-thumb" />
{settings.showHint ? "Hide Hint" : "Show Hint"}
</button> </button>
</div>
</div>
<div className="action-row" style={{ marginTop: '16px', display: 'flex', justifyContent: 'center', gap: '16px' }}>
<button <button
className="hint-button" className="hint-button"
onClick={() => playNote(targetMidi, settings.referenceNoteDuration ?? 1.5, settings.autoPlayVolume ?? 0.5)} onClick={() => playNote(targetMidi, settings.referenceNoteDuration ?? 1.5, settings.autoPlayVolume ?? 0.5)}
@@ -181,6 +199,7 @@ export const SingleNoteTrainer = forwardRef<SingleNoteHandle, SingleNoteTrainerP
Skip Note Skip Note
</button> </button>
</div> </div>
</>
)} )}
</div> </div>
); );