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

Better pair editor delete button

Browse Source
This commit is contained in:
Gregory Schier
2023-03-20 00:30:42 -07:00
parent 333b9319b6
commit 24ed6f0ee2
3 changed files with 49 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-web/components/core/Checkbox.tsx
View File

@@ -18,7 +18,7 @@ export function Checkbox({ checked, onChange, className, disabled }: Props) {
onCheckedChange={onChange} onCheckedChange={onChange}
className={classnames( className={classnames(
className, className,
'w-5 h-5 border border-gray-200 rounded', 'flex-shrink-0 w-5 h-5 border border-gray-200 rounded',
'focus:border-focus', 'focus:border-focus',
'disabled:opacity-disabled', 'disabled:opacity-disabled',
'outline-none', 'outline-none',

2
src-web/components/core/IconButton.tsx
View File

@@ -47,7 +47,7 @@ const _IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
onClick={handleClick} onClick={handleClick}
className={classnames( className={classnames(
className, className,
'text-gray-700 hover:text-gray-1000', 'flex-shrink-0 text-gray-700 hover:text-gray-1000',
'!px-0', '!px-0',
size === 'md' && 'w-9', size === 'md' && 'w-9',
size === 'sm' && 'w-8', size === 'sm' && 'w-8',

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

@@ -10,6 +10,7 @@ import type { GenericCompletionConfig } from './Editor/genericCompletion';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { IconButton } from './IconButton'; import { IconButton } from './IconButton';
import { Input } from './Input'; import { Input } from './Input';
import { HStack } from './Stacks';
export type PairEditorProps = { export type PairEditorProps = {
pairs: Pair[]; pairs: Pair[];
@@ -235,27 +236,28 @@ const FormRow = memo(function FormRow({
<div <div
ref={ref} ref={ref}
className={classnames( className={classnames(
'pb-2 group grid grid-cols-[auto_auto_minmax(0,1fr)_minmax(0,1fr)_auto]', 'pb-2 group grid grid-cols-[auto_minmax(0,1fr)_auto]',
'grid-rows-1 gap-2 items-center', 'grid-rows-1 items-center',
!pairContainer.pair.enabled && 'opacity-60', !pairContainer.pair.enabled && 'opacity-60',
)} )}
> >
{!isLast ? ( {!isLast ? (
<div <div
className={classnames( className={classnames(
'-mr-2 py-2 h-9 w-3 flex items-center', 'py-2 h-9 w-3 flex items-center',
'justify-center opacity-0 hover:opacity-100', 'justify-center opacity-0 hover:opacity-100',
)} )}
> >
<Icon icon="drag" className="pointer-events-none" /> <Icon icon="drag" className="pointer-events-none" />
</div> </div>
) : ( ) : (
<span className="w-1" /> <span className="w-3" />
)} )}
<HStack space={2} alignItems="center">
<Checkbox <Checkbox
disabled={isLast || !pairContainer.pair.name} disabled={isLast}
checked={isLast || !pairContainer.pair.name ? false : !!pairContainer.pair.enabled} checked={isLast ? false : !!pairContainer.pair.enabled}
className={isLast ? '!opacity-disabled' : undefined} className={classnames(isLast && '!opacity-disabled')}
onChange={handleChangeEnabled} onChange={handleChangeEnabled}
/> />
<Input <Input
@@ -283,17 +285,17 @@ const FormRow = memo(function FormRow({
useTemplating useTemplating
autocomplete={valueAutocomplete?.(pairContainer.pair.name)} autocomplete={valueAutocomplete?.(pairContainer.pair.name)}
/> />
{onDelete ? ( </HStack>
<IconButton <IconButton
icon="trash" aria-hidden={!onDelete}
disabled={!onDelete}
color="custom"
icon={onDelete ? 'trash' : 'empty'}
size="sm"
title="Delete header" title="Delete header"
onClick={handleDelete} onClick={handleDelete}
tabIndex={-1} className="ml-0.5 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
className={classnames('opacity-0 group-hover:opacity-100')}
/> />
) : (
<IconButton title="" icon="empty" />
)}
</div> </div>
); );
}); });