diff --git a/website/src/repl/components/EmbeddedReplEditor.jsx b/website/src/repl/components/EmbeddedReplEditor.jsx index 74db2c655..100d5ad95 100644 --- a/website/src/repl/components/EmbeddedReplEditor.jsx +++ b/website/src/repl/components/EmbeddedReplEditor.jsx @@ -2,7 +2,7 @@ import Loader from '@src/repl/components/Loader'; import { Code } from '@src/repl/components/Code'; import BigPlayButton from '@src/repl/components/BigPlayButton'; import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'; -import { Header } from './Header'; +import { MainPanel } from './panel/Panel'; // type Props = { // context: replcontext, @@ -14,7 +14,7 @@ export default function EmbeddedReplEditor(Props) { return (
-
+
diff --git a/website/src/repl/components/Header.jsx b/website/src/repl/components/Header.jsx deleted file mode 100644 index 1ed8915c0..000000000 --- a/website/src/repl/components/Header.jsx +++ /dev/null @@ -1,136 +0,0 @@ -import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; -import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon'; -import cx from '@src/cx.mjs'; -import { useSettings, setIsZen } from '../../settings.mjs'; -import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon'; -import '../Repl.css'; -import { PanelToggle } from '@src/repl/components/panel/Panel'; -import { PlayIcon, StopIcon } from '@heroicons/react/16/solid'; - -const { BASE_URL } = import.meta.env; -const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; - -export function Header({ context, isEmbedded = false }) { - const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context; - const { isZen, isButtonRowHidden, isCSSAnimationDisabled, fontFamily } = useSettings(); - - return ( - - ); -} - -export function Footer({ context, isEmbedded = false }) { - return ( -
- -
- ); -} - -function MainMenu({ context, isEmbedded = false }) { - const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context; - const { isCSSAnimationDisabled } = useSettings(); - return ( -
- - - {!isEmbedded && ( - - )} - {!isEmbedded && ( - - learn - - )} -
- ); -} diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx index d2981d2a4..fe2e00acd 100644 --- a/website/src/repl/components/ReplEditor.jsx +++ b/website/src/repl/components/ReplEditor.jsx @@ -1,8 +1,7 @@ -import Loader from '@src/repl/components/Loader'; -import { HorizontalPanel, VerticalPanel, PanelToggle } from '@src/repl/components/panel/Panel'; import { Code } from '@src/repl/components/Code'; +import Loader from '@src/repl/components/Loader'; +import { HorizontalPanel, MainPanel, VerticalPanel } from '@src/repl/components/panel/Panel'; import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'; -import { Footer, Header } from './Header'; import { useSettings } from '@src/settings.mjs'; // type Props = { @@ -13,23 +12,23 @@ export default function ReplEditor(Props) { const { context, ...editorProps } = Props; const { containerRef, editorRef, error, init, pending } = context; const settings = useSettings(); - const { panelPosition, isZen, isButtonRowHidden } = settings; + const { panelPosition, isZen } = settings; const isEmbedded = typeof window !== 'undefined' && window.location !== window.parent.location; return (
-
-
-
+
+ {/* */} + +
- {/*
*/} + {!isZen && panelPosition === 'right' && }
- {!isZen && panelPosition === 'right' && }
- {!isButtonRowHidden &&
} {!isZen && panelPosition === 'bottom' && } + {/* */}
); } diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx index bca283ae7..b34568d39 100644 --- a/website/src/repl/components/panel/Panel.jsx +++ b/website/src/repl/components/panel/Panel.jsx @@ -1,18 +1,161 @@ +import { Bars3Icon, PlayIcon, StopIcon, XMarkIcon } from '@heroicons/react/16/solid'; import cx from '@src/cx.mjs'; -import { setActiveFooter as setTab, setIsPanelOpened, useSettings } from '../../../settings.mjs'; +import { StrudelIcon } from '@src/repl/components/icons/StrudelIcon'; +import { useSettings, setIsZen, setIsPanelOpened, setActiveFooter as setTab } from '../../../settings.mjs'; +import '../../Repl.css'; +import { useLogger } from '../useLogger'; import { ConsoleTab } from './ConsoleTab'; +import ExportTab from './ExportTab'; import { FilesTab } from './FilesTab'; +import { PatternsTab } from './PatternsTab'; import { Reference } from './Reference'; import { SettingsTab } from './SettingsTab'; import { SoundsTab } from './SoundsTab'; -import { useLogger } from '../useLogger'; import { WelcomeTab } from './WelcomeTab'; -import { PatternsTab } from './PatternsTab'; -import { Bars3Icon, XMarkIcon } from '@heroicons/react/16/solid'; -import ExportTab from './ExportTab'; const TAURI = typeof window !== 'undefined' && window.__TAURI__; +const { BASE_URL } = import.meta.env; +const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; + +export function LogoButton({ context, isEmbedded }) { + const { started } = context; + const { isZen, isCSSAnimationDisabled, fontFamily } = useSettings(); + return ( +
{ + if (!isEmbedded) { + setIsZen(!isZen); + } + }} + > + + + +
+ ); +} + +export function MainPanel({ context, isEmbedded = false, className }) { + const { isZen, isButtonRowHidden, fontFamily } = useSettings(); + return ( + + ); +} + +export function Footer({ context, isEmbedded = false }) { + return ( +
+ {/* block lg:hidden */} + +
+ ); +} + +function MainMenu({ context, isEmbedded = false, className }) { + const { started, pending, isDirty, activeCode, handleTogglePlay, handleEvaluate, handleShare } = context; + const { isCSSAnimationDisabled } = useSettings(); + return ( +
+ + + {!isEmbedded && ( + + )} + {!isEmbedded && ( + + learn + + )} +
+ ); +} + function PanelCloseButton() { const { isPanelOpen } = useSettings(); return ( @@ -33,13 +176,13 @@ export function HorizontalPanel({ context }) { return ( -
- +
+
{isPanelOpen && (
@@ -61,14 +204,21 @@ export function VerticalPanel({ context }) { settings={settings} className={cx( //'border-l border-muted shrink-0', - 'border-0 border-muted shrink-0', - isPanelOpen ? `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` : 'min-w-12 max-w-12', + 'border-0 border-muted shrink-0 h-full overflow-hidden', + isPanelOpen + ? //? `min-w-full max-w-full lg:min-w-[min(600px,100vw)] lg:max-w-[min(600px,80vw)]` + `min-w-[min(600px,100vw)] max-w-[min(600px,80vw)]` + : 'min-w-12 max-w-12', )} >
-
- +
+ {/*
+ +
*/} + + {/* */}
@@ -101,7 +251,7 @@ function PanelNav({ children, className, ...props }) { } }} aria-label="Menu Panel" - className={cx('bg-lineHighlight group overflow-x-auto', className)} + className={cx('h-full bg-lineHighlight group overflow-x-auto', className)} {...props} > {children} @@ -171,10 +321,13 @@ export function PanelToggle({ isEmbedded, isZen }) { panelPosition === 'right' && ( ) diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx index f9733b354..d29534468 100644 --- a/website/src/repl/components/panel/SettingsTab.jsx +++ b/website/src/repl/components/panel/SettingsTab.jsx @@ -323,7 +323,7 @@ export function SettingsTab({ started }) { value={isSyncEnabled} /> settingsMap.setKey('isButtonRowHidden', cbEvent.target.checked)} value={isButtonRowHidden} />