From c2f7d5d045c67bff77f2f73688971dab118b0ebd Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 6 Oct 2023 15:09:23 +0300
Subject: [PATCH] Add hover feature for search filters

---
 rsconcept/frontend/src/components/Common/SelectorButton.tsx   | 2 +-
 rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx   | 1 +
 rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx      | 2 +-
 .../src/pages/RSFormPage/elements/ViewSideConstituents.tsx    | 4 +++-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/SelectorButton.tsx b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
index 665d6117..26a7c7b8 100644
--- a/rsconcept/frontend/src/components/Common/SelectorButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
@@ -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}
     >
diff --git a/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx b/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx
index 3c81ccd9..8f512f26 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx
@@ -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)}
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index 0b67df5b..f8d0f95a 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -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'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index d6b7fba0..5fcf920b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
@@ -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)}