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

Remove icon buttons

Browse source
This commit is contained in:
John Björk 2026-02-05 16:31:03 +01:00
parent b2cfd3dc3d
commit 7b58bbf12b
No known key found for this signature in database
GPG key ID: 303B6ADF2F569B0A
3 changed files with 18 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

16
website/src/repl/components/button/action-button.jsx
View file

@ -33,23 +33,15 @@ export function IconButton(props) {
); );
} }
export function ActionInput({ Icon, label, className, ...props }) { export function ActionInput({ label, className, ...props }) {
return ( return (
<label className={cx('space-x-1 inline-flex items-center cursor-pointer ', className)}> <label className={cx('space-x-1 inline-flex items-center cursor-pointer ', className)}>
<input {...props} className="sr-only peer" /> <input {...props} className="sr-only peer" />
<Icon className="w-5 h-5 peer-hover:opacity-50" /> <span className="inline-flex items-center peer-hover:opacity-50 text-xs">{label}</span>
<span className="inline-flex items-center peer-hover:opacity-50">{label}</span>
</label> </label>
); );
} }
export function SpecialActionInput({ Icon, className, ...props }) { export function SpecialActionInput({ className, ...props }) {
return ( return <ActionInput {...props} className={className} label={<span className="max-w-[300px]">{props.label}</span>} />;
<ActionInput
{...props}
Icon={Icon}
className={className}
label={<span className="max-w-[300px]">{props.label}</span>}
/>
);
} }

1
website/src/repl/components/panel/ImportPrebakeScriptButton.jsx
View file

@ -35,7 +35,6 @@ export function ImportPrebakeScriptButton({ updateEditor }) {
return ( return (
<SpecialActionInput <SpecialActionInput
Icon={DocumentArrowDownIcon}
type="file" type="file"
label="import" label="import"
accept=".strudel,.js" accept=".strudel,.js"

32
website/src/repl/components/panel/SettingsTab.jsx
View file

@ -6,7 +6,7 @@ import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx'; import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
import { confirmDialog } from '../../util.mjs'; import { confirmDialog } from '../../util.mjs';
import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio'; import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
import { IconButton, SpecialActionButton } from '../button/action-button.jsx'; import { ActionButton, IconButton, SpecialActionButton } from '../button/action-button.jsx';
import { exportScript, ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx'; import { exportScript, ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { Code } from '../Code.jsx'; import { Code } from '../Code.jsx';
@ -395,29 +395,25 @@ function PrebakeSettingsContent() {
}, []); }, []);
return ( return (
<div className="text-foreground w-full overflow-auto" style={{ fontFamily }}> <div className="text-foreground w-full overflow-auto" style={{ fontFamily }}>
<div className="px-4 py-1 flex flex-row items-center space-x-4 justify-between"> <div className="px-4 py-2 flex flex-row items-center space-x-3">
<IconButton <ActionButton
Icon={DocumentCheckIcon}
onClick={async () => { onClick={async () => {
await editorRef.current?.savePrebake(); await editorRef.current?.savePrebake();
}} }}
> >
save save
</IconButton> </ActionButton>
<div className="flex flex-row space-x-2"> <ImportPrebakeScriptButton updateEditor={handleSetCode} />
<ImportPrebakeScriptButton updateEditor={handleSetCode} /> <ActionButton
<IconButton onClick={async () => {
Icon={DocumentArrowUpIcon} console.log('Exporting');
onClick={async () => { await exportScript(prebakeScript);
console.log('Exporting'); }}
await exportScript(prebakeScript); >
}} export
> </ActionButton>
export
</IconButton>
</div>
<Checkbox <Checkbox
label="Include prebake script in share" label="include prebake script in share"
onChange={(cbEvent) => settingsMap.setKey('includePrebakeScriptInShare', cbEvent.target.checked)} onChange={(cbEvent) => settingsMap.setKey('includePrebakeScriptInShare', cbEvent.target.checked)}
value={includePrebakeScriptInShare} value={includePrebakeScriptInShare}
/> />