elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-27 05:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minirepl styles for package

Browse Source
This commit is contained in:
Felix Roos 2023-02-28 22:40:18 +01:00
parent 7e1351507a
commit 18c7e02609
2 changed files with 20 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/react/src/components/MiniRepl.jsx
View File

@ -7,7 +7,6 @@ import useHighlighting from '../hooks/useHighlighting.mjs';
import useStrudel from '../hooks/useStrudel.mjs'; import useStrudel from '../hooks/useStrudel.mjs';
import CodeMirror6, { flash } from './CodeMirror6'; import CodeMirror6, { flash } from './CodeMirror6';
import { Icon } from './Icon'; import { Icon } from './Icon';
import styles from './MiniRepl.module.css';
import './style.css'; import './style.css';
import { logger } from '@strudel.cycles/core'; import { logger } from '@strudel.cycles/core';
import useEvent from '../hooks/useEvent.mjs'; import useEvent from '../hooks/useEvent.mjs';
@ -129,19 +128,32 @@ export function MiniRepl({
); );
return ( return (
<div className={styles.container} ref={ref}> <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
<div className={styles.header}> <div className="flex justify-between bg-lineHighlight">
<div className={styles.buttons}> <div className="flex">
<button className={cx(styles.button, started ? 'animate-pulse' : '')} onClick={() => togglePlay()}> <button
className={cx(
'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
started ? 'animate-pulse' : '',
)}
onClick={() => togglePlay()}
>
<Icon type={started ? 'stop' : 'play'} /> <Icon type={started ? 'stop' : 'play'} />
</button> </button>
<button className={cx(isDirty ? styles.button : styles.buttonDisabled)} onClick={() => activateCode()}> <button
className={cx(
isDirty
? 'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background'
: 'w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight',
)}
onClick={() => activateCode()}
>
<Icon type="refresh" /> <Icon type="refresh" />
</button> </button>
</div> </div>
{error && <div className={styles.error}>{error.message}</div>} {error && <div className="text-right p-1 text-sm text-red-200">{error.message}</div>}
</div> </div>
<div className={styles.body}> <div className="overflow-auto relative">
{show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />} {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
</div> </div>
{drawTime && ( {drawTime && (

27
packages/react/src/components/MiniRepl.module.css
View File

@ -1,27 +0,0 @@
.container {
@apply overflow-hidden;
}
.header {
@apply flex justify-between bg-lineHighlight border-t border-l border-r border-lineHighlight rounded-t-md overflow-hidden;
}
.buttons {
@apply flex;
}
.button {
@apply cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground hover:bg-background;
}
.buttonDisabled {
@apply w-16 flex items-center justify-center p-1 opacity-50 cursor-not-allowed border-r border-lineHighlight;
}
.error {
@apply text-right p-1 text-sm text-red-200;
}
.body {
@apply overflow-auto relative;
}