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}`
return (
<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}
{...props}
>

View File

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

View File

@ -69,7 +69,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setStrategy,
}, [strategy, navigateTo]);
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]'>
Фильтр
<span className='ml-2'>

View File

@ -211,7 +211,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
}, [noNavigation, baseHeight]);
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'>
<MagnifyingGlassIcon />
</div>
@ -224,6 +224,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
<div ref={matchModeMenu.ref}>
<SelectorButton
tooltip='Настройка атрибутов для фильтрации'
dimensions='w-fit h-full'
transparent
icon={<FilterCogIcon size={5} />}
text={labelCstMathchMode(filterMatch)}
@ -249,6 +250,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
<div ref={sourceMenu.ref}>
<SelectorButton
tooltip='Настройка фильтрации по графу термов'
dimensions='w-fit h-full'
transparent
icon={<CogIcon size={4} />}
text={labelCstSource(filterSource)}