cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish Timbre display

Browse Source
This commit is contained in:
Aoife
2021-04-06 13:44:07 -04:00
parent b1047e91ee
commit 3d8b11c44c
13 changed files with 737 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/Timbre.js
+13 -5
View File
@@ -115,10 +115,18 @@ export default function Timbre(props) {
/> />
<Mixer className='col-span-1' name='Mixer' id={ids.mixer} /> <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
<Pitch className='col-span-3' name='Pitch' id={ids.pitch} /> <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
<Filter className='col-span-2' name='Filter' id={ids.filter} /> <div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
<Amp className='col-span-2' name='Amp' id={ids.amp} /> <div />
<EG className='col-span-2' name='EG 1' id={ids.eg1} /> <Amp className='col-span-2' name='Amp' id={ids.amp} />
<EG className='col-span-2' name='EG 2' id={ids.eg2} /> <Filter className='col-span-2' name='Filter' id={ids.filter} />
<EG
className='col-span-3'
name='EG 1 / 2'
id1={ids.eg1}
id2={ids.eg2}
/>
<div />
</div>
<LFO <LFO
className='col-span-2' className='col-span-2'
name='LFO 1' name='LFO 1'
@@ -141,7 +149,7 @@ export default function Timbre(props) {
{ value: 'Sample & Hold' }, { value: 'Sample & Hold' },
]} ]}
/> />
<Patches className='col-span-2' name='Patches' id={ids.patches} /> <Patches className='col-span-4' name='Patches' id={ids.patches} />
</div> </div>
); );
} }
src/features/editor/parameters/Amp.js
+84 -75
View File
@@ -1,9 +1,8 @@
import React from 'react'; import React from 'react';
import { Knob } from '../../utils/components'; import { Knob, Checkbox } from '../../utils/components';
import Card from '../card'; import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, Checkbox } from '../../helpers/Helpers';
export default function Amp(props) { export default function Amp(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,7 +10,83 @@ export default function Amp(props) {
return ( return (
<Card className={props.className} header={props.name}> <Card className={props.className} header={props.name}>
<h3>Amp Level</h3> <div className='flex flex-row '>
<div className='flex flex-col items-center justify-evenly w-1/2'>
<h3>Amp Level</h3>
<Knob
value={parameters.ampLevel}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { ampLevel: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center justify-evenly w-1/2'>
<h3>Pan Pot</h3>
<Knob
value={parameters.panpot}
dual={true}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { panpot: value },
})
)
}
/>
</div>
</div>
<div className='flex flex-row'>
<div className='flex flex-col items-center justify-evenly w-1/2'>
<h3>Keyboard Track</h3>
<Knob
value={parameters.ampTrack}
dual={true}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { ampTrack: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center justify-start w-1/2'>
<h3>Distortion</h3>
<Checkbox
value={parameters.distortion}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { distortion: value },
})
)
}
/>
</div>
</div>
</Card>
);
}
export const VocoderAmp = (props) => {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={props.className}>
<span>{`${props.name}`}</span>
Amp Level
<Knob <Knob
value={parameters.ampLevel} value={parameters.ampLevel}
max={127} max={127}
@@ -24,21 +99,20 @@ export default function Amp(props) {
) )
} }
/> />
<h3>PanPot</h3> Direct Level
<Knob <Knob
value={parameters.panpot} value={parameters.directLevel}
dual={true} max={127}
max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { panpot: value }, changes: { directLevel: value },
}) })
) )
} }
/> />
<h3>Amp Keyboard Tracking</h3> Amp Keyboard Tracking
<Knob <Knob
value={parameters.ampTrack} value={parameters.ampTrack}
dual={true} dual={true}
@@ -53,72 +127,7 @@ export default function Amp(props) {
} }
/> />
<Checkbox <Checkbox
parameter={parameters.distortion} value={parameters.distortion}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { distortion: value },
})
)
}
/>
</Card>
);
}
export const VocoderAmp = (props) => {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div className={props.className}>
<span>{`${props.name}`}</span>
Amp Level
<Slider
parameter={parameters.ampLevel}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { ampLevel: value },
})
)
}
/>
Direct Level
<Slider
parameter={parameters.directLevel}
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { directLevel: value },
})
)
}
/>
Amp Keyboard Tracking
<Slider
parameter={parameters.ampTrack}
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { ampTrack: value },
})
)
}
/>
<Checkbox
name='Distortion'
parameter={parameters.distortion}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
src/features/editor/parameters/EG.js
+160 -73
View File
@@ -1,83 +1,170 @@
import React from 'react'; import React from 'react';
import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, Checkbox } from '../../helpers/Helpers'; import { Knob, Checkbox } from '../../utils/components';
export default function EG(props) { export default function EG(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
const parameters_eg_2 = useSelector((state) => selectById(state, props.id2));
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={props.className}> <Card className={props.className} header={props.name}>
<span>{`${props.name}`}</span> <div className='flex flex-row justify-evenly'>
Attack <div className='flex flex-col items-center'>
<Slider <h3>Attack</h3>
parameter={parameters.attack} <Knob
min={0} value={parameters_eg_1.attack}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id1,
changes: { attack: value }, changes: { attack: value },
}) })
) )
} }
/> />
Decay </div>
<Slider <div className='flex flex-col items-center'>
parameter={parameters.decay} <h3>Decay</h3>
min={0} <Knob
max={127} value={parameters_eg_1.decay}
onChange={(value) => max={127}
dispatch( onChange={(value) =>
parameterUpdated({ dispatch(
id: props.id, parameterUpdated({
changes: { decay: value }, id: props.id1,
}) changes: { decay: value },
) })
} )
/> }
Sustain />
<Slider </div>
parameter={parameters.sustain} <div className='flex flex-col items-center'>
min={0} <h3>Sustain</h3>
max={127} <Knob
onChange={(value) => value={parameters_eg_1.sustain}
dispatch( max={127}
parameterUpdated({ onChange={(value) =>
id: props.id, dispatch(
changes: { sustain: value }, parameterUpdated({
}) id: props.id1,
) changes: { sustain: value },
} })
/> )
Release }
<Slider />
parameter={parameters.release} </div>
min={0} <div className='flex flex-col items-center'>
max={127} <h3>Release</h3>
onChange={(value) => <Knob
dispatch( value={parameters_eg_1.release}
parameterUpdated({ max={127}
id: props.id, onChange={(value) =>
changes: { release: value }, dispatch(
}) parameterUpdated({
) id: props.id1,
} changes: { release: value },
/> })
<Checkbox )
name='EG Reset' }
parameter={parameters.egReset} />
onChange={(value) => </div>
dispatch( <div className='flex flex-col items-center'>
parameterUpdated({ <h3>EG 1 Reset</h3>
id: props.id, <Checkbox
changes: { egReset: value }, className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
}) value={parameters_eg_1.egReset}
) onChange={(value) =>
} dispatch(
/> parameterUpdated({
</div> id: props.id1,
changes: { egReset: value },
})
)
}
/>
</div>
</div>
<div className='flex flex-row justify-evenly'>
<div className='flex flex-col items-center'>
<h3>Attack</h3>
<Knob
value={parameters_eg_2.attack}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { attack: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Decay</h3>
<Knob
value={parameters_eg_2.decay}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { decay: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Sustain</h3>
<Knob
value={parameters_eg_2.sustain}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { sustain: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Release</h3>
<Knob
value={parameters_eg_2.release}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { release: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>EG 2 Reset</h3>
<Checkbox
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
value={parameters_eg_2.egReset}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { egReset: value },
})
)
}
/>
</div>
</div>
</Card>
); );
} }
src/features/editor/parameters/Filter.js
+8 -8
View File
@@ -11,8 +11,8 @@ export default function Filter(props) {
return ( return (
<Card className={props.className} header={props.name}> <Card className={props.className} header={props.name}>
<div className='-mt-4 flex items-center justify-between'> <div className='-mt-2 flex items-center justify-between'>
<h3 className='text-lg font-semibold text-gray-900'>Filter Type</h3> <h3>Filter Type</h3>
<Select <Select
className='select w-4/6' className='select w-4/6'
value={parameters.filterType} value={parameters.filterType}
@@ -32,9 +32,9 @@ export default function Filter(props) {
} }
/> />
</div> </div>
<div className='flex flex-row justify-evenly'> <div className='-mt-3 flex flex-row justify-evenly'>
<div className='flex flex-col w-1/2'> <div className='flex flex-col w-1/2'>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3> <h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
<Knob <Knob
value={parameters.cutoff} value={parameters.cutoff}
@@ -49,7 +49,7 @@ export default function Filter(props) {
} }
/> />
</div> </div>
<div className='pt-3'> <div className='pt-3 flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'>Resonance</h3> <h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
<Knob <Knob
value={parameters.resonance} value={parameters.resonance}
@@ -67,7 +67,7 @@ export default function Filter(props) {
</div> </div>
<div className='px-4'></div> <div className='px-4'></div>
<div className='flex flex-col w-1/2'> <div className='flex flex-col w-1/2'>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'> <h3 className='text-lg font-semibold text-gray-900'>
EG Intensity EG Intensity
</h3> </h3>
@@ -85,9 +85,9 @@ export default function Filter(props) {
} }
/> />
</div> </div>
<div className='pt-3'> <div className='pt-3 flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'> <h3 className='text-lg font-semibold text-gray-900'>
Keyboard Tracking Keyboard Track
</h3> </h3>
<Knob <Knob
value={parameters.keyboardTrack} value={parameters.keyboardTrack}
src/features/editor/parameters/LFO.js
+89 -75
View File
@@ -1,95 +1,109 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers'; import Card from '../card';
import { Select, Knob, Checkbox } from '../../utils/components';
export default function LFO(props) { export default function LFO(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={props.className}> <Card className={props.className} header={props.name}>
<span>{`${props.name}`}</span> <div className='flex items-center justify-between'>
LFO Waveform <h3>LFO Waveform</h3>
<SelectList <Select
value={parameters.waveform} className='select w-3/5'
list={props.waveforms} value={parameters.waveform}
onChange={(value) => list={props.waveforms}
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: value },
})
)
}
/>
Key Sync
<SelectList
value={parameters.keySync}
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { keySync: value },
})
)
}
/>
<div className='check-list'>
<Checkbox
name='Tempo Sync'
parameter={parameters.tempoSync}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { tempoSync: value }, changes: { waveform: value },
})
)
}
/>
<SelectList
value={parameters.syncNote}
list={[
{ value: '1/1' },
{ value: '3/4' },
{ value: '2/3' },
{ value: '1/2' },
{ value: '3/8' },
{ value: '1/3' },
{ value: '1/4' },
{ value: '3/16' },
{ value: '1/6' },
{ value: '1/8' },
{ value: '3/32' },
{ value: '1/12' },
{ value: '1/16' },
{ value: '1/24' },
{ value: '1/32' },
]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { syncNote: value },
}) })
) )
} }
/> />
</div> </div>
Frequency <div className='flex items-center justify-between'>
<Slider <h3>Key Sync</h3>
parameter={parameters.frequency} <Select
onChange={(value) => className='select w-3/5'
dispatch( value={parameters.keySync}
parameterUpdated({ list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
id: props.id, onChange={(value) =>
changes: { frequency: value }, dispatch(
}) parameterUpdated({
) id: props.id,
} changes: { keySync: value },
/> })
</div> )
}
/>
</div>
<div className='flex flex-row mb-4'>
<div className='flex flex-col w-1/2'>
<h3 className='self-center'>Tempo Sync</h3>
<div className='flex flex-row items-center justify-evenly'>
<Checkbox
value={parameters.tempoSync}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { tempoSync: value },
})
)
}
/>
<Select
className='select mt-2 w-2/3'
value={parameters.syncNote}
list={[
{ value: '1/1' },
{ value: '3/4' },
{ value: '2/3' },
{ value: '1/2' },
{ value: '3/8' },
{ value: '1/3' },
{ value: '1/4' },
{ value: '3/16' },
{ value: '1/6' },
{ value: '1/8' },
{ value: '3/32' },
{ value: '1/12' },
{ value: '1/16' },
{ value: '1/24' },
{ value: '1/32' },
]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { syncNote: value },
})
)
}
/>
</div>
</div>
<div className='flex flex-col items-center w-1/2'>
<h3>Frequency</h3>
<Knob
value={parameters.frequency}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { frequency: value },
})
)
}
/>
</div>
</div>
</Card>
); );
} }
src/features/editor/parameters/Mixer.js
+10 -13
View File
@@ -2,7 +2,7 @@ import React from 'react';
import Card from '../card'; import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider } from '../../helpers/Helpers'; import { Knob } from '../../utils/components';
export default function Mixer(props) { export default function Mixer(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,12 +11,11 @@ export default function Mixer(props) {
return ( return (
<Card header={props.name}> <Card header={props.name}>
<div className='-mt-3'> <div className='-mt-3'>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold'>Volume 1</h3> <h3 className='text-lg font-semibold'>Volume 1</h3>
<Slider <Knob
min={0}
max={127} max={127}
parameter={parameters.vol1} value={parameters.vol1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -27,12 +26,11 @@ export default function Mixer(props) {
} }
/> />
</div> </div>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold'>Volume 2</h3> <h3 className='text-lg font-semibold'>Volume 2</h3>
<Slider <Knob
min={0}
max={127} max={127}
parameter={parameters.vol2} value={parameters.vol2}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -43,12 +41,11 @@ export default function Mixer(props) {
} }
/> />
</div> </div>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold'>Volume 3</h3> <h3 className='text-lg font-semibold'>Volume 3</h3>
<Slider <Knob
min={0}
max={127} max={127}
parameter={parameters.vol3} value={parameters.vol3}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
src/features/editor/parameters/Patches.js
+117 -110
View File
@@ -1,66 +1,75 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import Card from '../card';
import { Select, Knob } from '../../utils/components';
import { Slider, SelectList } from '../../helpers/Helpers'; import { Slider, SelectList } from '../../helpers/Helpers';
const Patch = (props) => { const Patch = (props) => {
return ( return (
<div> <div className='-mt-3 w-1/4'>
Source <div className='flex flex-col items-center justify-between'>
<SelectList <h3>Source</h3>
value={props.patch.source} <Select
list={[ className='select w-2/3'
{ value: 'Filter EG' }, value={props.patch.source}
{ value: 'Amp Eg' }, list={[
{ value: 'LFO 1' }, { value: 'Filter EG' },
{ value: 'LFO 2' }, { value: 'Amp Eg' },
{ value: 'Velocity' }, { value: 'LFO 1' },
{ value: 'Keyboard Track' }, { value: 'LFO 2' },
{ value: 'Pitch Bend' }, { value: 'Velocity' },
{ value: 'Mod Wheel' }, { value: 'Keyboard Track' },
]} { value: 'Pitch Bend' },
onChange={(value) => { value: 'Mod Wheel' },
props.onChange({ ]}
source: value, onChange={(value) =>
destination: props.patch.destination, props.onChange({
modIntensity: props.patch.modIntensity, source: value,
}) destination: props.patch.destination,
} modIntensity: props.patch.modIntensity,
/> })
Destination }
<SelectList />
value={props.patch.destination} </div>
list={[ <div className='mt-1 flex flex-col items-center justify-between'>
{ value: 'Pitch' }, <h3>Destination</h3>
{ value: 'OSC 2 Tune' }, <Select
{ value: 'OSC 1 Control 1' }, className='select w-2/3'
{ value: 'Noise Level' }, value={props.patch.destination}
{ value: 'Cutoff' }, list={[
{ value: 'Amp' }, { value: 'Pitch' },
{ value: 'Pan' }, { value: 'OSC 2 Tune' },
{ value: 'LFO 2 Frequency' }, { value: 'OSC 1 Control 1' },
]} { value: 'Noise Level' },
onChange={(value) => { value: 'Cutoff' },
props.onChange({ { value: 'Amp' },
source: props.patch.source, { value: 'Pan' },
destination: value, { value: 'LFO 2 Frequency' },
modIntensity: props.patch.modIntensity, ]}
}) onChange={(value) =>
} props.onChange({
/> source: props.patch.source,
Mod Intensity destination: value,
<Slider modIntensity: props.patch.modIntensity,
min={0} })
max={127} }
parameter={props.patch.modIntensity} />
onChange={(value) => </div>
props.onChange({ <div className='mt-1 flex flex-col items-center'>
source: props.patch.source, <h3>Mod Intensity</h3>
destination: props.patch.destination, <Knob
modIntensity: value, max={127}
}) value={props.patch.modIntensity}
} onChange={(value) =>
/> props.onChange({
source: props.patch.source,
destination: props.patch.destination,
modIntensity: value,
})
}
/>
</div>
</div> </div>
); );
}; };
@@ -70,59 +79,57 @@ export default function Patches(props) {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={props.className} id='patches'> <Card className={props.className} id='patches' header={props.name}>
<span>{`${props.name}`}</span> <div className='flex flex-row justify-evenly'>
<Patch <Patch
patch={parameters.patch1} patch={parameters.patch1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { changes: {
patch1: value, patch1: value,
}, },
}) })
) )
} }
/> />
<div /> <Patch
<Patch patch={parameters.patch2}
patch={parameters.patch2} onChange={(value) =>
onChange={(value, parameter) => dispatch(
dispatch( parameterUpdated({
parameterUpdated({ id: props.id,
id: props.id, changes: {
changes: { patch2: value,
patch2: value, },
}, })
}) )
) }
} />
/> <Patch
<div /> patch={parameters.patch3}
<Patch onChange={(value) =>
patch={parameters.patch3} dispatch(
onChange={(value, parameter) => parameterUpdated({
dispatch( id: props.id,
parameterUpdated({ changes: { patch3: value },
id: props.id, })
changes: { patch3: value }, )
}) }
) />
} <Patch
/> patch={parameters.patch4}
<div /> onChange={(value) =>
<Patch dispatch(
patch={parameters.patch4} parameterUpdated({
onChange={(value, parameter) => id: props.id,
dispatch( changes: { patch4: value },
parameterUpdated({ })
id: props.id, )
changes: { patch4: value }, }
}) />
) </div>
} </Card>
/>
</div>
); );
} }
src/features/editor/parameters/Pitch.js
+64 -67
View File
@@ -2,7 +2,7 @@ import React from 'react';
import Card from '../card'; import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Select } from '../../utils/components'; import { Select, Knob } from '../../utils/components';
import { Slider } from '../../helpers/Helpers'; import { Slider } from '../../helpers/Helpers';
export default function Pitch(props) { export default function Pitch(props) {
@@ -11,31 +11,47 @@ export default function Pitch(props) {
return ( return (
<Card className={props.className} header={props.name}> <Card className={props.className} header={props.name}>
<div className='flex flex-row justify-evenly -mt-4'> <div className='flex flex-row justify-evenly'>
<div className='w-1/2'> <div className='px-4 flex items-center justify-between w-1/2'>
<div className='flex items-center justify-between'> <h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
<h3 className='text-lg font-semibold text-gray-900'> <Select
Voice Assign className='select w-2/4'
</h3> value={parameters.voiceAssign}
<Select list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
className='select w-2/4' onChange={(value) =>
value={parameters.voiceAssign} dispatch(
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]} parameterUpdated({
onChange={(value) => id: props.id,
dispatch( changes: { voiceAssign: value },
parameterUpdated({ })
id: props.id, )
changes: { voiceAssign: value }, }
}) />
) </div>
} <div className='px-4 flex items-center justify-between w-1/2'>
/> <h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
</div> <Select
<div className='mt-2'> className='select w-2/4'
value={parameters.triggerMode}
list={[{ value: 'Single' }, { value: 'Multiple' }]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { triggerMode: value },
})
)
}
/>
</div>
</div>
<div className='flex flex-row'>
<section className='w-1/3'>
<div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'>Transpose</h3> <h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
<Slider <Knob
parameter={parameters.transpose} value={parameters.transpose}
min={-24} dual={true}
max={24} max={24}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -47,11 +63,11 @@ export default function Pitch(props) {
} }
/> />
</div> </div>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'>Tune</h3> <h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
<Slider <Knob
parameter={parameters.tune} value={parameters.tune}
min={-50} dual={true}
max={50} max={50}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -63,13 +79,14 @@ export default function Pitch(props) {
} }
/> />
</div> </div>
<div> </section>
<section className='w-1/3'>
<div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'> <h3 className='text-lg font-semibold text-gray-900'>
Unison Detune Unison Detune
</h3> </h3>
<Slider <Knob
parameter={parameters.unisonDetune} value={parameters.unisonDetune}
min={0}
max={99} max={99}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -81,32 +98,10 @@ export default function Pitch(props) {
} }
/> />
</div> </div>
</div> <div className='flex flex-col items-center'>
<div className='px-4'></div>
<div className='w-1/2'>
<div className='flex items-center justify-between'>
<h3 className='text-lg font-semibold text-gray-900'>
Trigger Mode
</h3>
<Select
className='select w-2/4'
value={parameters.triggerMode}
list={[{ value: 'Single' }, { value: 'Multiple' }]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { triggerMode: value },
})
)
}
/>
</div>
<div className='mt-2'>
<h3 className='text-lg font-semibold text-gray-900'>Portamento</h3> <h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
<Slider <Knob
parameter={parameters.portamento} value={parameters.portamento}
min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -118,11 +113,13 @@ export default function Pitch(props) {
} }
/> />
</div> </div>
<div> </section>
<section className='w-1/3'>
<div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3> <h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
<Slider <Knob
parameter={parameters.bendRange} value={parameters.bendRange}
min={-12} dual={true}
max={12} max={12}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -134,13 +131,13 @@ export default function Pitch(props) {
} }
/> />
</div> </div>
<div> <div className='flex flex-col items-center'>
<h3 className='text-lg font-semibold text-gray-900'> <h3 className='text-lg font-semibold text-gray-900'>
Vibrato Intensity Vibrato Intensity
</h3> </h3>
<Slider <Knob
parameter={parameters.vibratoIntensity} value={parameters.vibratoIntensity}
min={-63} dual={true}
max={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -152,7 +149,7 @@ export default function Pitch(props) {
} }
/> />
</div> </div>
</div> </section>
</div> </div>
</Card> </Card>
); );
src/features/editor/parameters/VCO.js
+2 -2
View File
@@ -44,7 +44,7 @@ export default function VCO(props) {
/> />
</div> </div>
<div className='mb-2 flex flex-row'> <div className='mb-2 flex flex-row'>
<div className='w-1/2'> <div className='flex flex-col items-center w-1/2'>
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3> <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
<Knob <Knob
maxValue={127} maxValue={127}
@@ -59,7 +59,7 @@ export default function VCO(props) {
} }
/> />
</div> </div>
<div className='w-1/2'> <div className='flex flex-col items-center w-1/2'>
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3> <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
<Knob <Knob
maxValue={127} maxValue={127}
src/features/helpers/rcSelectTheme.css
+158 -167
View File
@@ -1,264 +1,255 @@
.rc-slider { .rc-slider {
position: relative; position: relative;
height: 14px; height: 14px;
padding: 5px 0; padding: 5px 0;
width: 100%; width: 100%;
border-radius: 6px; border-radius: 6px;
touch-action: none; touch-action: none;
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 5px 0; margin: 5px 0;
} }
.rc-slider * { .rc-slider * {
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.rc-slider-rail { .rc-slider-rail {
position: absolute; position: absolute;
width: 100%; width: 100%;
background-color: lightgray; background-color: lightgray;
height: 4px; height: 4px;
border-radius: 6px; border-radius: 6px;
} }
.rc-slider-track { .rc-slider-track {
position: absolute; position: absolute;
left: 0; left: 0;
height: 4px; height: 4px;
border-radius: 6px; border-radius: 6px;
background-color: lightgrey; background-color: lightgrey;
} }
.rc-slider-handle { .rc-slider-handle {
position: absolute; position: absolute;
width: 14px; width: 14px;
height: 14px; height: 14px;
cursor: pointer; cursor: pointer;
cursor: -webkit-grab; cursor: -webkit-grab;
margin-top: -5px; margin-top: -5px;
cursor: grab; cursor: grab;
border-radius: 50%; border-radius: 50%;
background-color: slategrey; background-color: slategrey;
touch-action: pan-x; touch-action: pan-x;
} }
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging { .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
background-color: slateblue; background-color: slateblue;
} }
.rc-slider-handle:focus { .rc-slider-handle:focus {
outline: none; outline: none;
} }
.rc-slider-handle-click-focused:focus { .rc-slider-handle-click-focused:focus {
background-color: slateblue; background-color: slateblue;
} }
.rc-slider-handle:hover { .rc-slider-handle:hover {
background-color: slateblue; background-color: slateblue;
} }
.rc-slider-handle:active { .rc-slider-handle:active {
background-color: slateblue; background-color: slateblue;
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
cursor: grabbing; cursor: grabbing;
} }
.rc-slider-mark { .rc-slider-mark {
position: absolute; position: absolute;
top: 18px; top: 18px;
left: 0; left: 0;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
} }
.rc-slider-mark-text { .rc-slider-mark-text {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: #999; color: #999;
} }
.rc-slider-mark-text-active { .rc-slider-mark-text-active {
color: #666; color: #666;
} }
.rc-slider-step { .rc-slider-step {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 4px; height: 4px;
background: transparent; background: transparent;
} }
.rc-slider-dot { .rc-slider-dot {
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
margin-left: -4px; margin-left: -4px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border: 2px solid #e9e9e9; border: 2px solid #e9e9e9;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
} }
.rc-slider-dot-active { .rc-slider-dot-active {
border-color: #96dbfa; border-color: #96dbfa;
} }
.rc-slider-dot-reverse { .rc-slider-dot-reverse {
margin-right: -4px; margin-right: -4px;
} }
.rc-slider-disabled { .rc-slider-disabled {
background-color: #e9e9e9; background-color: #e9e9e9;
} }
.rc-slider-disabled .rc-slider-track { .rc-slider-disabled .rc-slider-track {
background-color: #ccc; background-color: #ccc;
} }
.rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot { .rc-slider-disabled .rc-slider-dot {
border-color: #ccc; border-color: #ccc;
box-shadow: none; box-shadow: none;
background-color: #fff; background-color: #fff;
cursor: not-allowed; cursor: not-allowed;
} }
.rc-slider-disabled .rc-slider-mark-text, .rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot { .rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important; cursor: not-allowed !important;
} }
.rc-slider-vertical { .rc-slider-vertical {
width: 14px; width: 14px;
height: 100%; height: 100%;
padding: 0 5px; padding: 0 5px;
} }
.rc-slider-vertical .rc-slider-rail { .rc-slider-vertical .rc-slider-rail {
height: 100%; height: 100%;
width: 4px; width: 4px;
} }
.rc-slider-vertical .rc-slider-track { .rc-slider-vertical .rc-slider-track {
left: 5px; left: 5px;
bottom: 0; bottom: 0;
width: 4px; width: 4px;
} }
.rc-slider-vertical .rc-slider-handle { .rc-slider-vertical .rc-slider-handle {
margin-left: -5px; margin-left: -5px;
touch-action: pan-y; touch-action: pan-y;
} }
.rc-slider-vertical .rc-slider-mark { .rc-slider-vertical .rc-slider-mark {
top: 0; top: 0;
left: 18px; left: 18px;
height: 100%; height: 100%;
} }
.rc-slider-vertical .rc-slider-step { .rc-slider-vertical .rc-slider-step {
height: 100%; height: 100%;
width: 4px; width: 4px;
} }
.rc-slider-vertical .rc-slider-dot { .rc-slider-vertical .rc-slider-dot {
left: 2px; left: 2px;
margin-bottom: -4px; margin-bottom: -4px;
} }
.rc-slider-vertical .rc-slider-dot:first-child { .rc-slider-vertical .rc-slider-dot:first-child {
margin-bottom: -4px; margin-bottom: -4px;
} }
.rc-slider-vertical .rc-slider-dot:last-child { .rc-slider-vertical .rc-slider-dot:last-child {
margin-bottom: -4px; margin-bottom: -4px;
} }
.rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear { .rc-slider-tooltip-zoom-down-appear {
animation-duration: 0.3s; animation-duration: 0.3s;
animation-fill-mode: both; animation-fill-mode: both;
display: block !important; display: block !important;
animation-play-state: paused; animation-play-state: paused;
} }
.rc-slider-tooltip-zoom-down-leave { .rc-slider-tooltip-zoom-down-leave {
animation-duration: 0.3s; animation-duration: 0.3s;
animation-fill-mode: both; animation-fill-mode: both;
display: block !important; display: block !important;
animation-play-state: paused; animation-play-state: paused;
} }
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn; animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running; animation-play-state: running;
} }
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut; animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running; animation-play-state: running;
} }
.rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear { .rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0); transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
} }
.rc-slider-tooltip-zoom-down-leave { .rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
} }
@keyframes rcSliderTooltipZoomDownIn { @keyframes rcSliderTooltipZoomDownIn {
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scale(0, 0); transform: scale(0, 0);
} }
100% { 100% {
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scale(1, 1); transform: scale(1, 1);
} }
} }
@keyframes rcSliderTooltipZoomDownOut { @keyframes rcSliderTooltipZoomDownOut {
0% { 0% {
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scale(1, 1); transform: scale(1, 1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scale(0, 0); transform: scale(0, 0);
} }
} }
.rc-slider-tooltip { .rc-slider-tooltip {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
top: -9999px; top: -9999px;
visibility: visible; visibility: visible;
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.rc-slider-tooltip * { .rc-slider-tooltip * {
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.rc-slider-tooltip-hidden { .rc-slider-tooltip-hidden {
display: none; display: none;
} }
.rc-slider-tooltip-placement-top { .rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0; padding: 4px 0 8px 0;
} }
.rc-slider-tooltip-inner { .rc-slider-tooltip-inner {
padding: 6px 2px; padding: 6px 2px;
min-width: 24px; min-width: 24px;
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: #6c6c6c; background-color: #6c6c6c;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9; box-shadow: 0 0 4px #d9d9d9;
} }
.rc-slider-tooltip-arrow { .rc-slider-tooltip-arrow {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px; bottom: 4px;
left: 50%; left: 50%;
margin-left: -4px; margin-left: -4px;
border-width: 4px 4px 0; border-width: 4px 4px 0;
border-top-color: #6c6c6c; border-top-color: #6c6c6c;
} }
span { span {
font-size: 1em; font-size: 1em;
line-height: 1.5em; line-height: 1.5em;
} }
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
transform: matrix(1.5, 0, 0, 1.5, 0, 1.5);
margin: 0.75em 1em;
}
[type="checkbox"]:checked {
filter: hue-rotate(40deg);
}
src/features/menu/index.js
+3 -3
View File
@@ -34,7 +34,7 @@ export default function Menu() {
<div className='menu-patch-container'> <div className='menu-patch-container'>
<div className='patch-name'> <div className='patch-name'>
<input <input
className='block w-full rounded-md bg-gray-100 border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1' className='block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
placeholder='Patch Name' placeholder='Patch Name'
type='text' type='text'
maxLength='12' maxLength='12'
@@ -49,7 +49,7 @@ export default function Menu() {
}} }}
/> />
</div> </div>
<div className='my-1 flex flex-col items-center'> <div className='my-3 flex flex-col items-center space-y-2'>
<button <button
className='btn' className='btn'
onClick={() => { onClick={() => {
@@ -101,7 +101,7 @@ export default function Menu() {
/> />
</div> </div>
</div> </div>
<div className='my-1 flex flex-col items-center'> <div className='my-1 flex flex-col items-center space-y-2'>
<button <button
disabled={state.patch.mode === 'Vocoder'} disabled={state.patch.mode === 'Vocoder'}
className='btn' className='btn'
src/features/utils/components.js
+23 -10
View File
@@ -17,6 +17,21 @@ const Select = (props) => {
); );
}; };
const Checkbox = (props) => {
return (
<input
className={
props.className + ' rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
}
style={props.style}
type='checkbox'
onChange={(e) => props.onChange(e.target.checked)}
defaultChecked={props.value}
value={props.value}
/>
);
};
const RAD = Math.PI / 180; const RAD = Math.PI / 180;
const START_ANGLE = Math.PI * 1.5 - (RAD * 45) / 2; const START_ANGLE = Math.PI * 1.5 - (RAD * 45) / 2;
const END_ANGLE = Math.PI * -0.5 + (RAD * 45) / 2; const END_ANGLE = Math.PI * -0.5 + (RAD * 45) / 2;
@@ -54,7 +69,7 @@ function getKnobValue(dragStart, currentY, bipolar) {
const slope = 0.01; const slope = 0.01;
let newValue = value + deltaY * slope; let newValue = value + deltaY * slope;
if (bipolar) { if (bipolar) {
const zeroCrossingResistance = 0; //0.3 const zeroCrossingResistance = 0.2; //0.3
if (value >= 0 && newValue < 0) { if (value >= 0 && newValue < 0) {
newValue += Math.min(zeroCrossingResistance, -newValue); newValue += Math.min(zeroCrossingResistance, -newValue);
} else if (value < 0 && newValue > 0) { } else if (value < 0 && newValue > 0) {
@@ -169,15 +184,15 @@ function Knob({
cx={size / 2} cx={size / 2}
cy={size / 2} cy={size / 2}
r={size / 2} r={size / 2}
className='opacity-50' className='fill-current text-blue-900 opacity-50'
style={{ mask: `url(#value-track-mask-${uid})`, fill: 'black' }} style={{ mask: `url(#value-track-mask-${uid})` }}
/> />
{/* Value fill */} {/* Value fill */}
<circle <circle
cx={size / 2} cx={size / 2}
cy={size / 2} cy={size / 2}
r={size / 2} r={size / 2}
className='fill-current text-indigo-500' className='fill-current text-blue-500'
style={{ mask: `url(#value-mask-${uid})` }} style={{ mask: `url(#value-mask-${uid})` }}
/> />
</svg> </svg>
@@ -192,9 +207,7 @@ function Knob({
cx={radius} cx={radius}
cy={radius} cy={radius}
r={radius - fillWidth} r={radius - fillWidth}
style={{ className='fill-current text-gray-300'
fill: 'white',
}}
/> />
{/* Highlight */} {/* Highlight */}
<circle <circle
@@ -220,12 +233,12 @@ function Knob({
x2={size / 2} x2={size / 2}
y2={size / 2} y2={size / 2}
strokeLinecap='round' strokeLinecap='round'
strokeWidth='2' strokeWidth='3'
className='stroke-current text-indigo-900'></line> className='stroke-current text-blue-500'></line>
} }
</svg> </svg>
</svg> </svg>
</div> </div>
); );
} }
export { Select, Knob }; export { Select, Knob, Checkbox };
src/index.css
+6 -3
View File
@@ -20,18 +20,21 @@ code {
@layer base { @layer base {
h3 { h3 {
@apply pointer-events-none select-none; @apply pointer-events-none select-none text-lg font-semibold text-gray-900;
} }
} }
@layer components { @layer components {
.btn { .btn {
@apply mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200; @apply w-2/3 font-semibold text-gray-700 rounded-md border px-2 py-2 border-gray-300 shadow-sm hover:bg-gray-50 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500;
} }
.btn:disabled { .btn:disabled {
@apply opacity-60 hover:bg-gray-100 cursor-default; @apply line-through opacity-50 hover:bg-white cursor-default;
} }
.select { .select {
@apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50; @apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
} }
.checkbox {
@apply rounded-md border-2 text-blue-500 mt-2 w-6 h-6;
}
} }