fix: minor UI update
This commit is contained in:
@@ -186,48 +186,48 @@ const GlobalEventListTab: React.FC<GlobalEventListTabProps> = ({
|
|||||||
const markerRows = useMemo<MarkerRowData[]>(() => (
|
const markerRows = useMemo<MarkerRowData[]>(() => (
|
||||||
showMarkers && markerTrack
|
showMarkers && markerTrack
|
||||||
? markerTrack.getRegions().filter((region): region is KGMarkerRegion => region instanceof KGMarkerRegion).map(region => ({
|
? markerTrack.getRegions().filter((region): region is KGMarkerRegion => region instanceof KGMarkerRegion).map(region => ({
|
||||||
id: region.getId(),
|
id: region.getId(),
|
||||||
type: 'marker',
|
type: 'marker',
|
||||||
region,
|
region,
|
||||||
absoluteStartBeat: region.getStartFromBeat(),
|
absoluteStartBeat: region.getStartFromBeat(),
|
||||||
durationBeats: region.getLength(),
|
durationBeats: region.getLength(),
|
||||||
}))
|
}))
|
||||||
: []
|
: []
|
||||||
), [globalTracks, markerTrack, showMarkers]);
|
), [globalTracks, markerTrack, showMarkers]);
|
||||||
|
|
||||||
const tempoRows = useMemo<TempoRowData[]>(() => (
|
const tempoRows = useMemo<TempoRowData[]>(() => (
|
||||||
showTempo && tempoTrack
|
showTempo && tempoTrack
|
||||||
? getSortedTempoRegions(tempoTrack, timeSignature.numerator).map(region => ({
|
? getSortedTempoRegions(tempoTrack, timeSignature.numerator).map(region => ({
|
||||||
id: region.getId(),
|
id: region.getId(),
|
||||||
type: 'tempo',
|
type: 'tempo',
|
||||||
region,
|
region,
|
||||||
absoluteStartBeat: region.getStartFromBeat(),
|
absoluteStartBeat: region.getStartFromBeat(),
|
||||||
durationBeats: region.getLength(),
|
durationBeats: region.getLength(),
|
||||||
}))
|
}))
|
||||||
: []
|
: []
|
||||||
), [globalTracks, showTempo, tempoTrack, timeSignature.numerator]);
|
), [globalTracks, showTempo, tempoTrack, timeSignature.numerator]);
|
||||||
|
|
||||||
const keySignatureRows = useMemo<KeySignatureRowData[]>(() => (
|
const keySignatureRows = useMemo<KeySignatureRowData[]>(() => (
|
||||||
showKeySignature && signatureTrack
|
showKeySignature && signatureTrack
|
||||||
? getSortedKeySignatureRegions(signatureTrack, timeSignature.numerator).map(region => ({
|
? getSortedKeySignatureRegions(signatureTrack, timeSignature.numerator).map(region => ({
|
||||||
id: region.getId(),
|
id: region.getId(),
|
||||||
type: 'key-signature',
|
type: 'key-signature',
|
||||||
region,
|
region,
|
||||||
absoluteStartBeat: region.getStartFromBeat(),
|
absoluteStartBeat: region.getStartFromBeat(),
|
||||||
durationBeats: region.getLength(),
|
durationBeats: region.getLength(),
|
||||||
}))
|
}))
|
||||||
: []
|
: []
|
||||||
), [globalTracks, showKeySignature, signatureTrack, timeSignature.numerator]);
|
), [globalTracks, showKeySignature, signatureTrack, timeSignature.numerator]);
|
||||||
|
|
||||||
const chordRows = useMemo<ChordRowData[]>(() => (
|
const chordRows = useMemo<ChordRowData[]>(() => (
|
||||||
showChords && chordTrack
|
showChords && chordTrack
|
||||||
? chordTrack.getRegions().filter((region): region is KGChordRegion => region instanceof KGChordRegion).map(region => ({
|
? chordTrack.getRegions().filter((region): region is KGChordRegion => region instanceof KGChordRegion).map(region => ({
|
||||||
id: region.getId(),
|
id: region.getId(),
|
||||||
type: 'chord',
|
type: 'chord',
|
||||||
region,
|
region,
|
||||||
absoluteStartBeat: region.getStartFromBeat(),
|
absoluteStartBeat: region.getStartFromBeat(),
|
||||||
durationBeats: region.getLength(),
|
durationBeats: region.getLength(),
|
||||||
}))
|
}))
|
||||||
: []
|
: []
|
||||||
), [chordTrack, globalTracks, showChords]);
|
), [chordTrack, globalTracks, showChords]);
|
||||||
|
|
||||||
@@ -755,7 +755,7 @@ const GlobalEventListTab: React.FC<GlobalEventListTabProps> = ({
|
|||||||
<div className="event-list-tabs" role="tablist" aria-label="Global event filters">
|
<div className="event-list-tabs" role="tablist" aria-label="Global event filters">
|
||||||
<button className={`event-list-tab${showMarkers ? ' active' : ''}`} aria-pressed={showMarkers} type="button" onClick={() => setShowMarkers(value => !value)}>Marker</button>
|
<button className={`event-list-tab${showMarkers ? ' active' : ''}`} aria-pressed={showMarkers} type="button" onClick={() => setShowMarkers(value => !value)}>Marker</button>
|
||||||
<button className={`event-list-tab${showTempo ? ' active' : ''}`} aria-pressed={showTempo} type="button" onClick={() => setShowTempo(value => !value)}>Tempo</button>
|
<button className={`event-list-tab${showTempo ? ' active' : ''}`} aria-pressed={showTempo} type="button" onClick={() => setShowTempo(value => !value)}>Tempo</button>
|
||||||
<button className={`event-list-tab${showKeySignature ? ' active' : ''}`} aria-pressed={showKeySignature} type="button" onClick={() => setShowKeySignature(value => !value)}>Key Signature</button>
|
<button className={`event-list-tab${showKeySignature ? ' active' : ''}`} aria-pressed={showKeySignature} type="button" onClick={() => setShowKeySignature(value => !value)}>Key Sig.</button>
|
||||||
<button className={`event-list-tab${showChords ? ' active' : ''}`} aria-pressed={showChords} type="button" onClick={() => setShowChords(value => !value)}>Chord</button>
|
<button className={`event-list-tab${showChords ? ' active' : ''}`} aria-pressed={showChords} type="button" onClick={() => setShowChords(value => !value)}>Chord</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user