starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-22 08:38:29 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix pair editor container

Browse Source
This commit is contained in:
Gregory Schier
2023-03-20 01:18:44 -07:00
parent b487938ffb
commit c5b50c10f4
3 changed files with 66 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-web/components/core/PairEditor.tsx
View File

@@ -263,9 +263,9 @@ const FormRow = memo(function FormRow({
/> />
<div <div
className={classNames( className={classNames(
'grid gap-2 items-center', 'grid items-center',
'@xs:!grid-rows-1 @sm:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]', '@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',
'grid-cols-1 grid-rows-2', 'gap-0.5 grid-cols-1 grid-rows-2',
)} )}
> >
<Input <Input

8
src-web/components/core/ScrollArea.tsx
View File

@@ -5,11 +5,15 @@ import type { ReactNode } from 'react';
interface Props { interface Props {
children: ReactNode; children: ReactNode;
className?: string; className?: string;
type?: S.ScrollAreaProps['type'];
} }
export function ScrollArea({ children, className }: Props) { export function ScrollArea({ children, className, type }: Props) {
return ( return (
<S.Root className={classnames(className, 'group/scroll overflow-hidden')} type="hover"> <S.Root
className={classnames(className, 'group/scroll overflow-hidden')}
type={type ?? 'hover'}
>
<S.Viewport className="h-full w-full">{children}</S.Viewport> <S.Viewport className="h-full w-full">{children}</S.Viewport>
<ScrollBar orientation="vertical" /> <ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />

107
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from '../Button';
import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown'; import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown'; import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown';
import { Icon } from '../Icon'; import { Icon } from '../Icon';
import { ScrollArea } from '../ScrollArea';
import { HStack } from '../Stacks'; import { HStack } from '../Stacks';
import './Tabs.css'; import './Tabs.css';
@@ -47,24 +48,43 @@ export const Tabs = memo(function Tabs({
> >
<T.List <T.List
aria-label={label} aria-label={label}
className={classnames(tabListClassName, 'h-auto flex items-center overflow-x-auto pb-1')} className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
> >
<HStack space={1}> <ScrollArea>
{tabs.map((t) => { <HStack space={1}>
const isActive = t.value === value; {tabs.map((t) => {
if (t.options && isActive) { const isActive = t.value === value;
return ( if (t.options && isActive) {
<DropdownMenuRadio return (
key={t.value} <DropdownMenuRadio
items={t.options.items} key={t.value}
value={t.options.value} items={t.options.items}
onValueChange={t.options.onValueChange} value={t.options.value}
> onValueChange={t.options.onValueChange}
<DropdownMenuTrigger> >
<DropdownMenuTrigger>
<Button
color="custom"
size="sm"
onClick={(e) => e.stopPropagation()}
className={classnames(
isActive
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:text-gray-900',
)}
>
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5" />
</Button>
</DropdownMenuTrigger>
</DropdownMenuRadio>
);
} else if (t.options && !isActive) {
return (
<T.Trigger asChild key={t.value} value={t.value}>
<Button <Button
color="custom" color="custom"
size="sm" size="sm"
onClick={(e) => e.stopPropagation()}
className={classnames( className={classnames(
isActive isActive
? 'bg-gray-100 text-gray-900' ? 'bg-gray-100 text-gray-900'
@@ -72,43 +92,30 @@ export const Tabs = memo(function Tabs({
)} )}
> >
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''} {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5" /> <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
</Button> </Button>
</DropdownMenuTrigger> </T.Trigger>
</DropdownMenuRadio> );
); } else {
} else if (t.options && !isActive) { return (
return ( <T.Trigger asChild key={t.value} value={t.value}>
<T.Trigger asChild key={t.value} value={t.value}> <Button
<Button color="custom"
color="custom" size="sm"
size="sm" className={classnames(
className={classnames( isActive
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900', ? 'bg-gray-100 text-gray-900'
)} : 'text-gray-600 hover:text-gray-900',
> )}
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''} >
<Icon icon="triangleDown" className="-mr-1.5 opacity-40" /> {t.label}
</Button> </Button>
</T.Trigger> </T.Trigger>
); );
} else { }
return ( })}
<T.Trigger asChild key={t.value} value={t.value}> </HStack>
<Button </ScrollArea>
color="custom"
size="sm"
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
>
{t.label}
</Button>
</T.Trigger>
);
}
})}
</HStack>
</T.List> </T.List>
{children} {children}
</T.Root> </T.Root>