hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/main' into workshop-new

Browse source
This commit is contained in:
Felix Roos 2023-06-07 20:19:34 +02:00
commit 02d793e9e0
5 changed files with 30 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

32
website/src/repl/Footer.jsx
View file

@ -273,6 +273,15 @@ function SoundsTab() {
);
}
function Checkbox({ label, value, onChange }) {
return (
<label>
<input type="checkbox" checked={value} onChange={onChange} />
{' ' + label}
</label>
);
}
function ButtonGroup({ value, onChange, items }) {
return (
<div className="flex max-w-lg">
@ -355,7 +364,7 @@ const fontFamilyOptions = {
};
function SettingsTab({ scheduler }) {
const { theme, keybindings, fontSize, fontFamily } = useSettings();
const { theme, keybindings, isLineNumbersDisplayed, fontSize, fontFamily } = useSettings();
return (
<div className="text-foreground p-4 space-y-4">
{/* <FormItem label="Tempo">
@ -397,13 +406,20 @@ function SettingsTab({ scheduler }) {
/>
</FormItem>
</div>
<FormItem label="Keybindings">
<ButtonGroup
value={keybindings}
onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
></ButtonGroup>
</FormItem>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormItem label="Keybindings">
<ButtonGroup
value={keybindings}
onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
></ButtonGroup>
</FormItem>
<Checkbox
label="Display line numbers"
onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
value={isLineNumbersDisplayed}
/>
</div>
<FormItem label="Reset Settings">
<button
className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"

3
website/src/repl/Repl.jsx
View file

@ -105,7 +105,7 @@ export function Repl({ embedded = false }) {
const [lastShared, setLastShared] = useState();
const [pending, setPending] = useState(true);
const { theme, keybindings, fontSize, fontFamily } = useSettings();
const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
useStrudel({
@ -271,6 +271,7 @@ export function Repl({ embedded = false }) {
theme={themes[theme] || themes.strudelTheme}
value={code}
keybindings={keybindings}
isLineNumbersDisplayed={isLineNumbersDisplayed}
fontSize={fontSize}
fontFamily={fontFamily}
onChange={handleChangeCode}