UI fixes and Footer rework

2025-06-26 04:50:36 +03:00 · 2023-08-24 11:10:04 +03:00 · 2023-08-24 11:10:04 +03:00 · 6988d07f04
commit 6988d07f04
parent ad5a879225
14 changed files with 54 additions and 48 deletions
--- 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': {
--- 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')
--- 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]);
  
--- 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`} />}
    </>
  );
 }
--- 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 >
  );
--- 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 {
--- 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) => {
--- 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'>
--- 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}>
--- 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}
--- 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>
    }
--- 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
--- 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 'имя';
  }
 }