Add hover feature for search filters

This commit is contained in:
IRBorisov 2023-10-06 15:09:23 +03:00
parent 8d062baa8b
commit c2f7d5d045
4 changed files with 6 additions and 3 deletions

View File

@ -21,7 +21,7 @@ function SelectorButton({
const position = `px-1 flex flex-start items-center gap-1 ${dimensions}` const position = `px-1 flex flex-start items-center gap-1 ${dimensions}`
return ( return (
<button type='button' <button type='button'
className={`text-sm small-caps ${!transparent && 'border'} ${cursor} ${position} text-btn text-controls ${!transparent && colorClass}`} className={`text-sm small-caps ${!transparent && 'border'} ${cursor} ${position} text-btn text-controls ${transparent ? 'clr-hover' : colorClass}`}
title={tooltip} title={tooltip}
{...props} {...props}
> >

View File

@ -41,6 +41,7 @@ function PickerStrategy({ value, onChange }: PickerStrategyProps) {
<div ref={strategyMenu.ref} className='h-full text-right'> <div ref={strategyMenu.ref} className='h-full text-right'>
<SelectorButton <SelectorButton
tooltip='Список фильтров' tooltip='Список фильтров'
dimensions='w-fit h-full'
transparent transparent
icon={<FilterCogIcon size={5} />} icon={<FilterCogIcon size={5} />}
text={labelLibraryFilter(value)} text={labelLibraryFilter(value)}

View File

@ -69,7 +69,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setStrategy,
}, [strategy, navigateTo]); }, [strategy, navigateTo]);
return ( return (
<div className='sticky top-0 left-0 right-0 flex items-center justify-start w-full border-b clr-input max-h-[2.3rem]'> <div className='sticky top-0 left-0 right-0 flex items-stretch justify-start w-full border-b clr-input max-h-[2.3rem]'>
<div className='px-2 py-1 select-none whitespace-nowrap min-w-[10rem]'> <div className='px-2 py-1 select-none whitespace-nowrap min-w-[10rem]'>
Фильтр Фильтр
<span className='ml-2'> <span className='ml-2'>

View File

@ -211,7 +211,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
}, [noNavigation, baseHeight]); }, [noNavigation, baseHeight]);
return (<> return (<>
<div className='sticky top-0 left-0 right-0 flex items-center justify-start w-full gap-1 px-2 border-b rounded clr-input'> <div className='sticky top-0 left-0 right-0 flex items-stretch justify-start w-full gap-1 px-2 border-b rounded clr-input'>
<div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-controls'> <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-controls'>
<MagnifyingGlassIcon /> <MagnifyingGlassIcon />
</div> </div>
@ -224,6 +224,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
<div ref={matchModeMenu.ref}> <div ref={matchModeMenu.ref}>
<SelectorButton <SelectorButton
tooltip='Настройка атрибутов для фильтрации' tooltip='Настройка атрибутов для фильтрации'
dimensions='w-fit h-full'
transparent transparent
icon={<FilterCogIcon size={5} />} icon={<FilterCogIcon size={5} />}
text={labelCstMathchMode(filterMatch)} text={labelCstMathchMode(filterMatch)}
@ -249,6 +250,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
<div ref={sourceMenu.ref}> <div ref={sourceMenu.ref}>
<SelectorButton <SelectorButton
tooltip='Настройка фильтрации по графу термов' tooltip='Настройка фильтрации по графу термов'
dimensions='w-fit h-full'
transparent transparent
icon={<CogIcon size={4} />} icon={<CogIcon size={4} />}
text={labelCstSource(filterSource)} text={labelCstSource(filterSource)}