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

fix horizontal button

Browse Source
This commit is contained in:
Jade (Rose) Rowland 2024-10-20 23:33:02 -07:00
parent df2d28f0e5
commit c4fe2c7497
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
website/src/repl/components/panel/Panel.jsx
View File

@ -20,15 +20,23 @@ export function HorizontalPanel({ context }) {
const { isPanelOpen, activeFooter: tab } = settings; const { isPanelOpen, activeFooter: tab } = settings;
return ( return (
<PanelNav settings={settings} className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}> <PanelNav
{isPanelOpen && <div className="flex h-full overflow-auto "> settings={settings}
<PanelContent context={context} tab={tab} /> className={cx(isPanelOpen ? `min-h-[360px] max-h-[360px]` : 'min-h-12 max-h-12', 'overflow-hidden flex flex-col')}
</div>} >
{isPanelOpen && (
<div className="flex h-full overflow-auto pr-10 ">
<PanelContent context={context} tab={tab} />
</div>
)}
<div className="flex justify-between min-h-12 max-h-12 pr-2 items-center"> <div className="absolute right-4 pt-4">
<Tabs setTab={setTab} tab={tab} />
<PanelActionButton settings={settings} /> <PanelActionButton settings={settings} />
</div> </div>
<div className="flex justify-between min-h-12 max-h-12 grid-cols-2 items-center">
<Tabs setTab={setTab} tab={tab} />
</div>
</PanelNav> </PanelNav>
); );
} }
@ -88,7 +96,7 @@ function PanelNav({ children, className, settings, ...props }) {
<nav <nav
onClick={() => { onClick={() => {
if (!settings.isPanelOpen) { if (!settings.isPanelOpen) {
setIsPanelOpened(true) setIsPanelOpened(true);
} }
}} }}
onMouseEnter={() => { onMouseEnter={() => {
@ -166,9 +174,9 @@ function PanelTab({ label, isSelected, onClick }) {
</> </>
); );
} }
function Tabs({ setTab, tab }) { function Tabs({ setTab, tab, className }) {
return ( return (
<div className={cx('flex select-none max-w-full overflow-auto pb-2')}> <div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
{Object.keys(tabNames).map((key) => { {Object.keys(tabNames).map((key) => {
const val = tabNames[key]; const val = tabNames[key];
return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />; return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;
@ -180,9 +188,10 @@ function Tabs({ setTab, tab }) {
function PanelActionButton({ settings }) { function PanelActionButton({ settings }) {
const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings; const { togglePanelTrigger, isPanelPinned, isPanelOpen } = settings;
const isHoverBehavior = togglePanelTrigger === 'hover'; const isHoverBehavior = togglePanelTrigger === 'hover';
if (!isPanelOpen && !isPanelPinned) { if (!isPanelOpen) {
return; return;
} }
if (isHoverBehavior) { if (isHoverBehavior) {
return <PinButton pinned={isPanelPinned} />; return <PinButton pinned={isPanelPinned} />;
} }