From 00ea912a9e3a0e9a07fb4a9471f8842b8c400b0a Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 29 Oct 2023 23:24:58 +0300
Subject: [PATCH] UI fixes

---
 rsconcept/frontend/src/components/Icons.tsx   |  32 ++++++
 .../pages/RSFormPage/EditorConstituenta.tsx   |   2 +-
 .../src/pages/RSFormPage/EditorTermGraph.tsx  | 108 ++++++++----------
 3 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index 7b765df4..6a8f7cf3 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -327,6 +327,38 @@ export function ArrowsRotateIcon(props: IconProps) {
   );
 }
 
+export function ArrowsFocusIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M16.121 6.465L14 4.344V10h5.656l-2.121-2.121 3.172-3.172-1.414-1.414zM4.707 3.293L3.293 4.707l3.172 3.172L4.344 10H10V4.344L7.879 6.465zM19.656 14H14v5.656l2.121-2.121 3.172 3.172 1.414-1.414-3.172-3.172zM6.465 16.121l-3.172 3.172 1.414 1.414 3.172-3.172L10 19.656V14H4.344z' />
+    </IconSVG>
+  );
+}
+
+export function LetterAIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M11.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16h-2.387zm-1.239 9L12.5 6.515 14.932 13h-4.864z' />
+    </IconSVG>
+  );
+}
+
+export function LetterALinesIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M15 4h7v2h-7zm1 4h6v2h-6zm2 4h4v2h-4zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z' />
+    </IconSVG>
+  );
+}
+
+export function PlanetIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M2.76 20.2a2.73 2.73 0 002.15.85 8.86 8.86 0 003.37-.86 9 9 0 0012.27-10.9c1.31-2.23 1.75-4.26.67-5.48a2.94 2.94 0 00-2.57-1A5 5 0 0016.1 4 9 9 0 003.58 15.14c-1.06 1.21-2.05 3.68-.82 5.06zm1.5-1.32c-.22-.25 0-1.07.37-1.76a9.26 9.26 0 001.57 1.74c-1.03.3-1.71.28-1.94.02zm14.51-5.17A7 7 0 0115.58 18 7.12 7.12 0 0112 19a6.44 6.44 0 01-1.24-.13 30.73 30.73 0 004.42-3.29 31.5 31.5 0 003.8-4 6.88 6.88 0 01-.21 2.13zm.09-8.89a.94.94 0 01.87.32c.23.26.16.94-.26 1.93a9.2 9.2 0 00-1.61-1.86 2.48 2.48 0 011-.39zM5.22 10.31A6.94 6.94 0 018.41 6 7 7 0 0112 5a6.9 6.9 0 016 3.41 5.19 5.19 0 01.35.66 27.43 27.43 0 01-4.49 5A27.35 27.35 0 018.35 18a7 7 0 01-3.13-7.65z' />
+    </IconSVG>
+  );
+}
+
 export function SaveIcon(props: IconProps) {
   return (
     <IconSVG viewbox='0 0 24 24' {...props}>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index e2ad4e2f..1a199289 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -256,7 +256,7 @@ function EditorConstituenta({
           spellCheck
           onChange={event => setConvention(event.target.value)}
         />
-        <div className='flex justify-center w-full mt-2'>
+        <div className='flex justify-center w-full'>
           <SubmitButton
             text='Сохранить изменения'
             disabled={!isModified || !isEnabled}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 81315e55..2ec6efbf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -3,14 +3,12 @@ import { GraphCanvas, GraphCanvasRef, GraphEdge,
   GraphNode, LayoutTypes, Sphere, useSelection
 } from 'reagraph';
 
-import Button from '../../components/Common/Button';
-import Checkbox from '../../components/Common/Checkbox';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import MiniButton from '../../components/Common/MiniButton';
 import SelectSingle from '../../components/Common/SelectSingle';
 import HelpTermGraph from '../../components/Help/HelpTermGraph';
 import InfoConstituenta from '../../components/Help/InfoConstituenta';
-import { ArrowsRotateIcon, DumpBinIcon, FilterIcon, HelpIcon, SmallPlusIcon } from '../../components/Icons';
+import { ArrowsFocusIcon, DumpBinIcon, FilterIcon, HelpIcon, LetterAIcon, LetterALinesIcon, PlanetIcon, SmallPlusIcon } from '../../components/Icons';
 import { useRSForm } from '../../context/RSFormContext';
 import { useConceptTheme } from '../../context/ThemeContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
@@ -71,7 +69,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
   const [ orbit, setOrbit ] = useState(false);
   
   const [ noHermits, setNoHermits ] = useLocalStorage('graph_no_hermits', true);
-  const [ noTransitive, setNoTransitive ] = useLocalStorage('graph_no_transitive', false);
+  const [ noTransitive, setNoTransitive ] = useLocalStorage('graph_no_transitive', true);
   const [ noTemplates, setNoTemplates ] = useLocalStorage('graph_no_templates', false);
   const [ noTerms, setNoTerms ] = useLocalStorage('graph_no_terms', false);
   const [ allowBase, setAllowBase ] = useLocalStorage('graph_allow_base', true);
@@ -344,7 +342,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
 
   const canvasWidth = useMemo(
   () => {
-    return 'calc(100vw - 14.6rem)';
+    return 'calc(100vw - 1.1rem)';
   }, []);
 
   const canvasHeight = useMemo(
@@ -374,8 +372,25 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       onConfirm={handleChangeOptions}
     />}
 
+    { allSelected.length > 0 && 
+    <div className='relative w-full z-pop'>
+    <div className='absolute left-0 top-0 px-2 whitespace-nowrap small-caps clr-app select-none'>
+      Выбор {allSelected.length} из {schema?.stats?.count_all ?? 0}
+    </div>
+    </div>}
+
     <div className='relative w-full z-pop'>
     <div className='absolute right-0 flex items-start justify-center w-full top-1'>
+      <MiniButton
+        tooltip='Настройки фильтрации узлов и связей'
+        icon={<FilterIcon color='text-primary' size={5}/>}
+        onClick={() => setShowOptions(true)}
+      />
+      <MiniButton
+        tooltip={ !noTerms ? 'Скрыть текст' : 'Отобразить текст' }
+        icon={ !noTerms ? <LetterALinesIcon color='text-success' size={5}/> : <LetterAIcon color='text-primary' size={5}/> }
+        onClick={() => setNoTerms(prev => !prev)}
+      />
       <MiniButton
         tooltip='Новая конституента'
         icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={5}/>}
@@ -389,48 +404,40 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         onClick={handleDeleteCst}
       />
       <MiniButton
-        icon={<ArrowsRotateIcon size={5} />}
+        icon={<ArrowsFocusIcon color='text-primary' size={5} />}
         tooltip='Восстановить камеру'
         onClick={handleResetViewpoint}
       />
+      <MiniButton
+        icon={<PlanetIcon color={ !is3D ? '' : orbit ? 'text-success' : 'text-primary'} size={5} />}
+        tooltip='Анимация вращения'
+        disabled={!is3D}
+        onClick={() => setOrbit(prev => !prev) }
+      />
       <div className='px-1 py-1' id='items-graph-help' >
         <HelpIcon color='text-primary' size={5} />
       </div>
+      <ConceptTooltip anchorSelect='#items-graph-help'>
+        <div className='text-sm max-w-[calc(100vw-20rem)] z-tooltip'>
+          <HelpTermGraph />
+        </div>
+      </ConceptTooltip>
     </div>
     </div>
 
-    <ConceptTooltip anchorSelect='#items-graph-help'>
-      <div className='text-sm max-w-[calc(100vw-20rem)]'>
-        <HelpTermGraph />
-      </div>
-    </ConceptTooltip>
-    
-    <div className='flex justify-between w-full outline-none' tabIndex={0} onKeyDown={handleKeyDown}>
-    <div className='flex flex-col gap-4 max-w-[13.5rem] min-w-[13.5rem]'>
-      <div className='flex flex-col px-2 pb-2 mt-4 text-sm border select-none h-fit'>
-        {hoverCst && 
-        <div className='relative'>
-          <InfoConstituenta
-            data={hoverCst}
-            className='absolute top-[2.2rem] left-[2.6rem] z-tooltip w-[25rem] min-h-[11rem] overflow-y-auto border h-fit clr-app px-3' 
-          />
-        </div>}
-        
-        <div className='flex items-center justify-between py-1'>
-          <div className='mr-3 text-base small-caps'>
-            Выбор {allSelected.length} из {schema?.stats?.count_all ?? 0}
-          </div>
-        </div>
-        <div className='flex items-center w-full gap-1'>
-          <Button
-            icon={<FilterIcon size={6} />}
-            dense
-            tooltip='Настройки фильтрации узлов и связей'
-            dimensions='min-h-[2.3rem] min-w-[2.3rem]'
-            onClick={() => setShowOptions(true)}
-          />
+    {hoverCst && 
+    <div className='relative'>
+      <InfoConstituenta
+        data={hoverCst}
+        className='absolute top-[1.6rem] left-[2.6rem] z-tooltip w-[25rem] min-h-[11rem] shadow-md overflow-y-auto border h-fit clr-app px-3' 
+      />
+    </div>}
+
+    <div className='relative z-pop'>
+    <div className='absolute top-0 left-0 flex flex-col max-w-[13.5rem] min-w-[13.5rem]'>
+      <div className='flex flex-col px-2 pb-2 mt-8 text-sm select-none h-fit'>        
+        <div className='flex items-center w-full gap-1 text-sm'>
           <SelectSingle
-            className='min-w-[9.8rem]'
             options={SelectorGraphColoring}
             isSearchable={false}
             placeholder='Выберите цвет'
@@ -446,27 +453,9 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
           value={layout ? { value: layout, label: mapLableLayout.get(layout) } : null}
           onChange={data => handleChangeLayout(data?.value ?? SelectorGraphLayout[0].value)}
         />
-        <div className='flex flex-col gap-1 mt-2'>
-          <Checkbox
-            label='Скрыть текст' 
-            value={noTerms} 
-            setValue={ value => setNoTerms(value) }
-          />
-          <Checkbox
-            label='Транзитивная редукция' 
-            value={noTransitive} 
-            setValue={ value => setNoTransitive(value) }
-          />
-          <Checkbox
-            disabled={!is3D}
-            label='Анимация вращения' 
-            value={orbit} 
-            setValue={ value => setOrbit(value) }
-          />
-        </div>
       </div>
       {dismissed.length > 0 &&
-      <div className='flex flex-col text-sm border'>
+      <div className='flex flex-col text-sm ml-2 border clr-app max-w-[12.5rem] min-w-[12.5rem]'>
         <p className='py-2 text-center'><b>Скрытые конституенты</b></p>
         <div className='flex flex-wrap justify-center gap-2 pb-2 overflow-y-auto' style={{maxHeight: dismissedHeight}}>
         {dismissed.map(cstID => {
@@ -494,8 +483,10 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         })}
         </div>
       </div>}
-    </div>    
-    <div className='w-full h-full overflow-auto'>
+    </div>
+    </div>
+
+    <div className='h-full overflow-auto w-full outline-none' tabIndex={0} onKeyDown={handleKeyDown}>
     <div 
       className='relative'
       style={{width: canvasWidth, height: canvasHeight}}
@@ -524,7 +515,6 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         )}
       />
     </div>
-    </div>
   </div></>);
 }