From 6988d07f0498bc18e927511d877bb41a789e6c8c Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 24 Aug 2023 11:10:04 +0300
Subject: [PATCH] UI fixes and Footer rework

---
 rsconcept/backend/apps/rsform/serializers.py  |  2 +-
 .../backend/apps/rsform/tests/t_views.py      |  4 +--
 rsconcept/frontend/src/App.tsx                |  2 +-
 .../src/components/Common/Divider.tsx         |  4 +--
 rsconcept/frontend/src/components/Footer.tsx  | 35 ++++++-------------
 rsconcept/frontend/src/index.css              | 14 +++++---
 .../src/pages/ManualsPage/TopicsList.tsx      |  2 +-
 .../src/pages/RSFormPage/EditorTermGraph.tsx  |  4 +--
 .../src/pages/RSFormPage/RSTabsMenu.tsx       | 18 ++++++++--
 .../elements/DependencyModePicker.tsx         |  2 +-
 .../RSFormPage/elements/MatchModePicker.tsx   |  4 +--
 .../elements/ViewSideConstituents.tsx         |  5 ++-
 rsconcept/frontend/src/utils/staticUI.ts      |  4 +--
 updateProd.sh                                 |  2 +-
 14 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/rsconcept/backend/apps/rsform/serializers.py b/rsconcept/backend/apps/rsform/serializers.py
index 784b73a8..9e2cf5c0 100644
--- a/rsconcept/backend/apps/rsform/serializers.py
+++ b/rsconcept/backend/apps/rsform/serializers.py
@@ -326,7 +326,7 @@ class ResolverSerializer(serializers.Serializer):
             'input': instance.input,
             'output': instance.output,
             'refs': [{
-                'type': str(ref.ref.get_type()),
+                'type': ref.ref.get_type().value,
                 'data': self._get_reference_data(ref.ref),
                 'resolved': ref.resolved,
                 'pos_input': {
diff --git a/rsconcept/backend/apps/rsform/tests/t_views.py b/rsconcept/backend/apps/rsform/tests/t_views.py
index c5a68a14..72aa0ecf 100644
--- a/rsconcept/backend/apps/rsform/tests/t_views.py
+++ b/rsconcept/backend/apps/rsform/tests/t_views.py
@@ -204,7 +204,7 @@ class TestRSFormViewset(APITestCase):
         self.assertEqual(response.data['input'], '@{1|редкий} @{X1|plur,datv}')
         self.assertEqual(response.data['output'], 'редким синим слонам')
         self.assertEqual(len(response.data['refs']), 2)
-        self.assertEqual(response.data['refs'][0]['type'], str(ReferenceType.syntactic))
+        self.assertEqual(response.data['refs'][0]['type'], ReferenceType.syntactic.value)
         self.assertEqual(response.data['refs'][0]['resolved'], 'редким')
         self.assertEqual(response.data['refs'][0]['data']['offset'], 1)
         self.assertEqual(response.data['refs'][0]['data']['nominal'], 'редкий')
@@ -212,7 +212,7 @@ class TestRSFormViewset(APITestCase):
         self.assertEqual(response.data['refs'][0]['pos_input']['finish'], 11)
         self.assertEqual(response.data['refs'][0]['pos_output']['start'], 0)
         self.assertEqual(response.data['refs'][0]['pos_output']['finish'], 6)
-        self.assertEqual(response.data['refs'][1]['type'], str(ReferenceType.entity))
+        self.assertEqual(response.data['refs'][1]['type'], ReferenceType.entity.value)
         self.assertEqual(response.data['refs'][1]['resolved'], 'синим слонам')
         self.assertEqual(response.data['refs'][1]['data']['entity'], 'X1')
         self.assertEqual(response.data['refs'][1]['data']['form'], 'plur,datv')
diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index b4c7b1e1..dabdcd51 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -28,7 +28,7 @@ function App () {
   const mainSize = useMemo(
   () => {
     return !noNavigation ? 
-      'calc(100vh - 12rem)'
+      'calc(100vh - 9.2rem)'
     : '100vh'; 
   }, [noNavigation]);
   
diff --git a/rsconcept/frontend/src/components/Common/Divider.tsx b/rsconcept/frontend/src/components/Common/Divider.tsx
index 050fe18c..4ea01383 100644
--- a/rsconcept/frontend/src/components/Common/Divider.tsx
+++ b/rsconcept/frontend/src/components/Common/Divider.tsx
@@ -6,8 +6,8 @@ interface DividerProps {
 function Divider({ vertical, margins = 'mx-2' }: DividerProps) {
   return (
     <>
-    {vertical && <div className={`${margins} border-x-2`} />}
-    {!vertical && <div className={`${margins} border-y-2`} />}
+    {vertical && <div className={`${margins} border-x-2 clr-border`} />}
+    {!vertical && <div className={`${margins} border-y-2 clr-border`} />}
     </>
   );
 }
diff --git a/rsconcept/frontend/src/components/Footer.tsx b/rsconcept/frontend/src/components/Footer.tsx
index 60148088..71f4ca2c 100644
--- a/rsconcept/frontend/src/components/Footer.tsx
+++ b/rsconcept/frontend/src/components/Footer.tsx
@@ -1,37 +1,24 @@
 import { Link } from 'react-router-dom';
 
 import { urls } from '../utils/constants';
-import { GithubIcon } from './Icons';
 
 function Footer() {
   return (
-    <footer className='z-50 px-4 pt-2 pb-4 border-t-2 clr-footer'>
-      <div className='flex items-stretch justify-center w-full mx-auto'>
-        <div className='px-4 underline whitespace-nowrap'>
+    <footer className='z-50 px-4 pt-2 pb-4 text-sm select-none whitespace-nowrap clr-footer'>
+      <div className='flex items-stretch justify-center w-full gap-4 mx-auto'>
+        <div className='underline'>
           <Link to='/manuals' tabIndex={-1}>Справка</Link> <br/>
-          <Link to='/library?filter=common' tabIndex={-1}>Библиотека КС</Link> <br/>
-          <a href={urls.gitrepo} className='flex' tabIndex={-1}>
-            <GithubIcon />
-            <span className='ml-1'>Репозиторий</span>
-          </a>
+          <Link to='/library?filter=common' tabIndex={-1}>Библиотека</Link> <br/>
+          
         </div>
-        <div className='px-4 underline border-gray-400 border-x dark:border-gray-300'>
-          <ul>
-            <li>
-              <a href={urls.concept} tabIndex={-1}>Центр Концепт</a>
-            </li>
-            <li>
-              <a href={urls.exteor64} tabIndex={-1}>Exteor64bit</a>
-            </li>
-            <li>
-              <a href={urls.exteor32} tabIndex={-1}>Exteor32bit</a>
-            </li>
-          </ul>
+        <div className=''>
+          <a href={urls.concept} tabIndex={-1} className='underline'>Центр Концепт</a>
+          <p className='mt-0.5 text-center'>© 2023 ЦИВТ КОНЦЕПТ</p>
         </div>
-        <div className='max-w-[28rem] px-4 text-sm'>
-          <p className='mt-0.5'>© 2023 ЦИВТ КОНЦЕПТ</p>
-          <p>Портал позволяет анализировать предметные области, формально записывать системы определений и синтезировать их с помощью математического аппарата родов структур</p>
+        <div className='flex flex-col underline'>
+          <a href={urls.exteor64} tabIndex={-1}>Экстеор</a>
         </div>
+        
       </div>
     </footer >
   );
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index 8faa70d3..7ab21149 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -26,6 +26,14 @@
 }
 
 @layer components {
+  :root {
+    @apply bg-gray-50
+  }
+
+  .dark {
+    @apply text-zinc-200 bg-gray-800
+  }
+
   h1 {
     @apply text-lg font-bold text-center
   }
@@ -34,10 +42,6 @@
     @apply clr-border rounded
   }
 
-  .dark {
-    @apply text-zinc-200 bg-gray-900
-  }
-
   .clr-border {
     @apply border-gray-300 dark:border-gray-400
   }
@@ -67,7 +71,7 @@
   }
 
   .clr-footer {
-    @apply text-gray-600 bg-white border-gray-400 dark:bg-gray-900 dark:border-gray-300 dark:text-gray-300
+    @apply clr-app text-gray-600 border-gray-400 dark:border-gray-300 dark:text-gray-300
   }
 
   .clr-card {
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
index 4ab16e12..26e8466b 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
@@ -9,7 +9,7 @@ interface TopicsListProps {
 
 function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
   return (
-    <div className='sticky top-0 left-0 border-r min-w-[13rem] pt-2 select-none flex flex-col clr-bg-pop'>
+    <div className='sticky top-0 left-0 border-r border-b min-w-[13rem] pt-2 select-none flex flex-col clr-bg-pop'>
       <div className='mb-2 font-bold text-center'>Справка</div>
       { [... mapTopicInfo.entries()].map(
       ([topic, info], index) => {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 0dba25df..db9f9306 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -340,7 +340,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
   const canvasHeight = useMemo(
   () => {
     return !noNavigation ? 
-      'calc(100vh - 13rem)'
+      'calc(100vh - 10.5rem)'
     : 'calc(100vh - 2rem)';
   }, [noNavigation]);
 
@@ -461,7 +461,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
     </div>
     <div className='w-full h-full overflow-auto'>
     <div 
-      className='relative border-t border-r'
+      className='relative border-r border-y'
       style={{width: canvasWidth, height: canvasHeight, borderBottomWidth: noNavigation ? '1px': ''}}
     >
       <div className='relative top-0 right-0 z-10 flex mt-1 ml-2 flex-start'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index 94accba1..30cfadec 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import Button from '../../components/Common/Button';
 import Checkbox from '../../components/Common/Checkbox';
 import Dropdown from '../../components/Common/Dropdown';
 import DropdownButton from '../../components/Common/DropdownButton';
-import { CloneIcon, CrownIcon, DownloadIcon, DumpBinIcon, EyeIcon, EyeOffIcon, MenuIcon, PenIcon, ShareIcon, UploadIcon } from '../../components/Icons';
+import { CloneIcon, CrownIcon, DownloadIcon, DumpBinIcon, EyeIcon, EyeOffIcon, MenuIcon, PenIcon, PlusIcon, ShareIcon, UploadIcon } from '../../components/Icons';
 import { useAuth } from '../../context/AuthContext';
 import { useRSForm } from '../../context/RSFormContext';
 import useDropdown from '../../hooks/useDropdown';
@@ -17,6 +18,7 @@ interface RSTabsMenuProps {
 }
 
 function RSTabsMenu({showUploadDialog, showCloneDialog, onDestroy}: RSTabsMenuProps) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const {
     schema,
@@ -53,10 +55,14 @@ function RSTabsMenu({showUploadDialog, showCloneDialog, onDestroy}: RSTabsMenuPr
     showCloneDialog();
   }, [schemaMenu, showCloneDialog]);
 
-  const handleShare = useCallback(() => {
+  function handleShare() {
     schemaMenu.hide();
     shareCurrentURLProc();
-  }, [schemaMenu]);
+  }
+
+  function handleCreateNew() {
+    navigate('/rsform-create');
+  }
 
   return (    
     <div className='flex items-stretch w-fit'>
@@ -101,6 +107,12 @@ function RSTabsMenu({showUploadDialog, showCloneDialog, onDestroy}: RSTabsMenuPr
               <p>Удалить схему</p>
             </span>
           </DropdownButton>
+          <DropdownButton onClick={handleCreateNew}>
+            <span className='inline-flex items-center justify-start gap-2'>
+              <PlusIcon color='text-url' size={4} />
+              <p>Создать новую схему</p>
+            </span>
+          </DropdownButton>
         </Dropdown>}
       </div>
       <div ref={editMenu.ref}>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/DependencyModePicker.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/DependencyModePicker.tsx
index c1883899..b5655873 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/DependencyModePicker.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/DependencyModePicker.tsx
@@ -21,7 +21,7 @@ function DependencyModePicker({ value, onChange }: DependencyModePickerProps) {
   }, [pickerMenu, onChange]);
 
   return (
-  <div ref={pickerMenu.ref} className='h-full'>
+  <div ref={pickerMenu.ref} className='h-full min-w-[5.8rem] text-right'>
     <span
       className='text-sm font-semibold underline cursor-pointer select-none whitespace-nowrap'
       tabIndex={-1}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/MatchModePicker.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/MatchModePicker.tsx
index 1d790c72..50fbbba9 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/MatchModePicker.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/MatchModePicker.tsx
@@ -21,7 +21,7 @@ function MatchModePicker({ value, onChange }: MatchModePickerProps) {
   }, [pickerMenu, onChange]);
 
   return (
-  <div ref={pickerMenu.ref} className='h-full'>
+  <div ref={pickerMenu.ref} className='h-full min-w-[3.4rem]'>
     <span
       className='text-sm font-semibold underline cursor-pointer select-none whitespace-nowrap'
       tabIndex={-1}
@@ -44,7 +44,7 @@ function MatchModePicker({ value, onChange }: MatchModePickerProps) {
           <p><b>текст:</b> искать в определениях и конвенциях</p>
         </DropdownButton>
         <DropdownButton onClick={() => handleChange(CstMatchMode.NAME)}>
-          <p><b>ID:</b> искать в идентификаторах конституент</p>
+          <p><b>имя:</b> искать в идентификаторах конституент</p>
         </DropdownButton>
       </Dropdown>
     }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index bba4aad3..33bad802 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
@@ -167,7 +167,10 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
         value={filterText}
         onChange={event => setFilterText(event.target.value)}
       />
-      <DependencyModePicker value={filterSource} onChange={setFilterSource}/>
+      <DependencyModePicker
+        value={filterSource}
+        onChange={setFilterSource}
+      />
     </div>
     <div className='overflow-y-auto' style={{maxHeight : `${maxHeight}`}}>
       <ConceptDataTable
diff --git a/rsconcept/frontend/src/utils/staticUI.ts b/rsconcept/frontend/src/utils/staticUI.ts
index f87f31fc..ca78348b 100644
--- a/rsconcept/frontend/src/utils/staticUI.ts
+++ b/rsconcept/frontend/src/utils/staticUI.ts
@@ -261,10 +261,10 @@ export const CstTypeSelector = (Object.values(CstType)).map(
 export function getCstCompareLabel(mode: CstMatchMode): string {
   switch(mode) {
     case CstMatchMode.ALL: return 'везде';
-    case CstMatchMode.EXPR: return 'ФВ';
+    case CstMatchMode.EXPR: return 'выраж';
     case CstMatchMode.TERM: return 'термин';
     case CstMatchMode.TEXT: return 'текст';
-    case CstMatchMode.NAME: return 'ID';
+    case CstMatchMode.NAME: return 'имя';
   }
 }
 
diff --git a/updateProd.sh b/updateProd.sh
index 85a52831..779a8b2d 100644
--- a/updateProd.sh
+++ b/updateProd.sh
@@ -1,3 +1,3 @@
 git pull
 docker compose -f "docker-compose-prod.yml" up --build -d
-docker image prune -a -f
+docker image prune -a -f
\ No newline at end of file