From 0e031259ade1cf8ad85f9548f7f2888e35d09ea8 Mon Sep 17 00:00:00 2001
From: "duncan@dtail-design.nl" <duncan@dtail-design.nl>
Date: Tue, 2 Apr 2024 01:49:03 +0200
Subject: [PATCH] fix(visual): visualisation bar sizing/overflow
---
libs/shared/lib/vis/components/bar.tsx | 66 +++++++++++++-------------
1 file changed, 33 insertions(+), 33 deletions(-)
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index 5e79d8fd8..85d6d95a4 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -33,13 +33,44 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
<div className="flex items-center">
<h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">Visualization</h1>
</div>
- <div className="flex items-stretch divide-x divide-secondary-200 border-x border-secondary-200">
+ <div className="items-center shrink-0 px-0.5">
+ <DropdownMenu.Root>
+ <DropdownMenu.Trigger>
+ <TooltipProvider delayDuration={0}>
+ <Tooltip>
+ <TooltipTrigger>
+ <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
+ </TooltipTrigger>
+ <TooltipContent side={'top'}>
+ <p>Add visualization</p>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ </DropdownMenu.Trigger>
+ <DropdownMenu.Portal>
+ <DropdownMenu.Content className="bg-light p-1 rounded border">
+ {Object.keys(Visualizations).map((key) => (
+ <DropdownMenu.Item
+ key={key}
+ className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
+ onClick={(e) => {
+ manager.changeActive(key);
+ }}
+ >
+ {key}
+ </DropdownMenu.Item>
+ ))}
+ </DropdownMenu.Content>
+ </DropdownMenu.Portal>
+ </DropdownMenu.Root>
+ </div>
+ <div className="flex items-stretch divide-x divide-secondary-200 border-x border-secondary-200 overflow-x-auto -my-px">
{manager.tabs.map((visId: string) => {
const isActive = manager.active === visId;
return (
<div
key={visId}
- className={`flex items-center pl-2 pr-1 gap-1 cursor-pointer relative border-secondary-200 before:content-[''] before:absolute before:left-0 before:bottom-0 before:-mb-px before:h-[2px] before:w-full ${isActive && 'before:bg-primary-500'} ${!isActive && 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`}
+ className={`flex items-center pl-2 pr-1 gap-1 cursor-pointer relative border-secondary-200 before:content-[''] before:absolute before:left-0 before:bottom-0 before:h-[2px] before:w-full ${isActive && 'before:bg-primary-500'} ${!isActive && 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`}
onClick={() => manager.changeActive(visId)}
onDragStart={(e) => handleDragStart(e, visId)}
onDragOver={(e) => handleDragOver(e)}
@@ -61,37 +92,6 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
</div>
);
})}
- <div className="items-center px-0.5">
- <DropdownMenu.Root>
- <DropdownMenu.Trigger>
- <TooltipProvider delayDuration={0}>
- <Tooltip>
- <TooltipTrigger>
- <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
- </TooltipTrigger>
- <TooltipContent side={'top'}>
- <p>Add visualization</p>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
- </DropdownMenu.Trigger>
- <DropdownMenu.Portal>
- <DropdownMenu.Content className="bg-light p-1 rounded border">
- {Object.keys(Visualizations).map((key) => (
- <DropdownMenu.Item
- key={key}
- className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
- onClick={(e) => {
- manager.changeActive(key);
- }}
- >
- {key}
- </DropdownMenu.Item>
- ))}
- </DropdownMenu.Content>
- </DropdownMenu.Portal>
- </DropdownMenu.Root>
- </div>
</div>
<div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
<ControlContainer>
--
GitLab