Further UI fixes for tab panels

2025-06-26 13:00:39 +03:00 · 2024-04-30 17:16:45 +03:00 · 2024-04-30 17:16:45 +03:00 · 930841e1be
commit 930841e1be
parent 66be97d0a6
10 changed files with 127 additions and 75 deletions
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
@ -9,6 +9,7 @@ import RSInput from '@/components/RSInput';
 import ConstituentaPicker from '@/components/select/ConstituentaPicker';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
@ -144,7 +145,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
  );

  return (
-    <>
+    <AnimateFade>
      <DataTable
        dense
        noFooter
@ -220,7 +221,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
        height='5.1rem'
        value={state.definition}
      />
-    </>
+    </AnimateFade>
  );
 }

--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@ -8,6 +8,7 @@ import BadgeHelp from '@/components/man/BadgeHelp';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
@ -101,23 +102,35 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
  }, [substitutes.arguments, template.prototype, updateConstituenta, updateSubstitutes]);

  const templatePanel = useMemo(
-    () => <TemplateTab state={template} partialUpdate={updateTemplate} />,
+    () => (
+      <TabPanel>
+        <TemplateTab state={template} partialUpdate={updateTemplate} />
+      </TabPanel>
+    ),
    [template, updateTemplate]
  );

  const argumentsPanel = useMemo(
-    () => <ArgumentsTab schema={schema} state={substitutes} partialUpdate={updateSubstitutes} />,
+    () => (
+      <TabPanel>
+        <ArgumentsTab schema={schema} state={substitutes} partialUpdate={updateSubstitutes} />
+      </TabPanel>
+    ),
    [schema, substitutes, updateSubstitutes]
  );

  const editorPanel = useMemo(
    () => (
-      <FormCreateCst
-        state={constituenta}
-        partialUpdate={updateConstituenta}
-        schema={schema}
-        setValidated={setValidated}
-      />
+      <TabPanel>
+        <AnimateFade className='cc-column'>
+          <FormCreateCst
+            state={constituenta}
+            partialUpdate={updateConstituenta}
+            schema={schema}
+            setValidated={setValidated}
+          />
+        </AnimateFade>
+      </TabPanel>
    ),
    [constituenta, updateConstituenta, schema]
  );
@ -135,7 +148,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
        <BadgeHelp topic={HelpTopic.RSTEMPLATES} className='max-w-[40rem]' offset={12} />
      </Overlay>
      <Tabs
-        forceRenderTabPanel
        selectedTabClassName='clr-selected'
        className='flex flex-col'
        selectedIndex={activeTab}
@ -147,13 +159,9 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
          <TabLabel label='Конституента' title='Редактирование атрибутов конституенты' className='w-[8rem]' />
        </TabList>

-        <TabPanel style={{ display: activeTab === TabID.TEMPLATE ? '' : 'none' }}>{templatePanel}</TabPanel>
-
-        <TabPanel style={{ display: activeTab === TabID.ARGUMENTS ? '' : 'none' }}>{argumentsPanel}</TabPanel>
-
-        <TabPanel className='cc-column' style={{ display: activeTab === TabID.CONSTITUENTA ? '' : 'none' }}>
-          {editorPanel}
-        </TabPanel>
+        {templatePanel}
+        {argumentsPanel}
+        {editorPanel}
      </Tabs>
    </Modal>
  );
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
@ -6,6 +6,7 @@ import RSInput from '@/components/RSInput';
 import ConstituentaPicker from '@/components/select/ConstituentaPicker';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
 import { applyFilterCategory } from '@/models/rsformAPI';
@ -84,8 +85,8 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
  }, [state.filterCategory, category]);

  return (
-    <>
-      <div className='flex divide-x border-x border-t rounded-t-md'>
+    <AnimateFade>
+      <div className='flex border-t divide-x border-x rounded-t-md'>
        <SelectSingle
          noBorder
          placeholder='Выберите категорию'
@ -139,7 +140,7 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
        height='5.1rem'
        value={state.prototype?.definition_formal}
      />
-    </>
+    </AnimateFade>
  );
 }

--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@ -1,7 +1,7 @@
 'use client';

 import clsx from 'clsx';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';

 import BadgeHelp from '@/components/man/BadgeHelp';
@ -44,6 +44,24 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere

  const handleSubmit = () => onSave(reference);

+  const entityPanel = useMemo(
+    () => (
+      <TabPanel>
+        <EntityTab initial={initial} schema={schema} setReference={setReference} setIsValid={setIsValid} />
+      </TabPanel>
+    ),
+    [initial, schema]
+  );
+
+  const syntacticPanel = useMemo(
+    () => (
+      <TabPanel>
+        <SyntacticTab initial={initial} setReference={setReference} setIsValid={setIsValid} />
+      </TabPanel>
+    ),
+    [initial]
+  );
+
  return (
    <Modal
      header='Редактирование ссылки'
@ -76,13 +94,8 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
          />
        </TabList>

-        <TabPanel>
-          <EntityTab initial={initial} schema={schema} setReference={setReference} setIsValid={setIsValid} />
-        </TabPanel>
-
-        <TabPanel>
-          <SyntacticTab initial={initial} setReference={setReference} setIsValid={setIsValid} />
-        </TabPanel>
+        {entityPanel}
+        {syntacticPanel}
      </Tabs>
    </Modal>
  );
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx
@ -4,9 +4,9 @@ import { useEffect, useLayoutEffect, useState } from 'react';

 import ConstituentaPicker from '@/components/select/ConstituentaPicker';
 import SelectGrammeme from '@/components/select/SelectGrammeme';
-import FlexColumn from '@/components/ui/FlexColumn';
 import Label from '@/components/ui/Label';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { ReferenceType } from '@/models/language';
 import { parseEntityReference, parseGrammemes } from '@/models/languageAPI';
 import { CstMatchMode } from '@/models/miscellaneous';
@ -59,7 +59,7 @@ function EntityTab({ initial, schema, setIsValid, setReference }: EntityTabProps
  }

  return (
-    <FlexColumn>
+    <AnimateFade className='cc-column'>
      <ConstituentaPicker
        id='dlg_reference_entity_picker'
        initialFilter={initial.text}
@ -108,7 +108,7 @@ function EntityTab({ initial, schema, setIsValid, setReference }: EntityTabProps
          setValue={setSelectedGrams}
        />
      </div>
-    </FlexColumn>
+    </AnimateFade>
  );
 }

--- a/rsconcept/frontend/src/dialogs/DlgEditReference/SyntacticTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/SyntacticTab.tsx
@ -3,6 +3,7 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';

 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { ReferenceType } from '@/models/language';
 import { parseSyntacticReference } from '@/models/languageAPI';

@ -43,7 +44,7 @@ function SyntacticTab({ initial, setIsValid, setReference }: SyntacticTabProps)
  }, [nominal, offset, setIsValid, setReference]);

  return (
-    <div className='flex flex-col gap-2'>
+    <AnimateFade className='flex flex-col gap-2'>
      <TextInput
        id='dlg_reference_offset'
        type='number'
@ -69,7 +70,7 @@ function SyntacticTab({ initial, setIsValid, setReference }: SyntacticTabProps)
        value={nominal}
        onChange={event => setNominal(event.target.value)}
      />
-    </div>
+    </AnimateFade>
  );
 }

--- a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
@ -58,23 +58,39 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
    setSubstitutions([]);
  }, [source.schema]);

-  const schemaPanel = useMemo(() => <SchemaTab selected={donorID} setSelected={setDonorID} />, [donorID]);
+  const schemaPanel = useMemo(
+    () => (
+      <TabPanel>
+        <SchemaTab selected={donorID} setSelected={setDonorID} />
+      </TabPanel>
+    ),
+    [donorID]
+  );
  const itemsPanel = useMemo(
    () => (
-      <ConstituentsTab schema={source.schema} loading={source.loading} selected={selected} setSelected={setSelected} />
+      <TabPanel>
+        <ConstituentsTab
+          schema={source.schema}
+          loading={source.loading}
+          selected={selected}
+          setSelected={setSelected}
+        />
+      </TabPanel>
    ),
    [source.schema, source.loading, selected]
  );
  const substitutesPanel = useMemo(
    () => (
-      <SubstitutionsTab
-        receiver={receiver}
-        source={source.schema}
-        selected={selected}
-        loading={source.loading}
-        substitutions={substitutions}
-        setSubstitutions={setSubstitutions}
-      />
+      <TabPanel>
+        <SubstitutionsTab
+          receiver={receiver}
+          source={source.schema}
+          selected={selected}
+          loading={source.loading}
+          substitutions={substitutions}
+          setSubstitutions={setSubstitutions}
+        />
+      </TabPanel>
    ),
    [source.schema, source.loading, receiver, selected, substitutions]
  );
@ -89,7 +105,6 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
      onSubmit={handleSubmit}
    >
      <Tabs
-        forceRenderTabPanel
        selectedTabClassName='clr-selected'
        className='flex flex-col'
        selectedIndex={activeTab}
@ -101,9 +116,9 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
          <TabLabel label='Отождествления' title='Таблица отождествлений' className='w-[8rem]' />
        </TabList>

-        <TabPanel style={{ display: activeTab === TabID.SCHEMA ? '' : 'none' }}>{schemaPanel}</TabPanel>
-        <TabPanel style={{ display: activeTab === TabID.SELECTIONS ? '' : 'none' }}>{itemsPanel}</TabPanel>
-        <TabPanel style={{ display: activeTab === TabID.SUBSTITUTIONS ? '' : 'none' }}>{substitutesPanel}</TabPanel>
+        {schemaPanel}
+        {itemsPanel}
+        {substitutesPanel}
      </Tabs>
    </Modal>
  );
--- a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx
@ -4,6 +4,7 @@ import { useMemo } from 'react';

 import SchemaPicker from '@/components/select/SchemaPicker';
 import TextInput from '@/components/ui/TextInput';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID } from '@/models/library';

@ -17,7 +18,7 @@ function SchemaTab({ selected, setSelected }: SchemaTabProps) {
  const selectedInfo = useMemo(() => library.items.find(item => item.id === selected), [selected, library.items]);

  return (
-    <div className='flex flex-col'>
+    <AnimateFade className='flex flex-col'>
      <div className='flex items-center gap-6'>
        <span className='select-none'>Выбрана</span>
        <TextInput
@ -36,7 +37,7 @@ function SchemaTab({ selected, setSelected }: SchemaTabProps) {
        value={selected}
        onSelectValue={setSelected}
      />
-    </div>
+    </AnimateFade>
  );
 }

--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@ -166,28 +166,49 @@ function RSTabs() {

  const cardPanel = useMemo(
    () => (
-      <EditorRSForm
-        isModified={isModified} // prettier: split lines
-        setIsModified={setIsModified}
-        onDestroy={onDestroySchema}
-      />
+      <TabPanel>
+        <EditorRSForm
+          isModified={isModified} // prettier: split lines
+          setIsModified={setIsModified}
+          onDestroy={onDestroySchema}
+        />
+      </TabPanel>
    ),
    [isModified, onDestroySchema]
  );

-  const listPanel = useMemo(() => <EditorRSList onOpenEdit={onOpenCst} />, [onOpenCst]);
+  const listPanel = useMemo(
+    () => (
+      <TabPanel>
+        <EditorRSList onOpenEdit={onOpenCst} />
+      </TabPanel>
+    ),
+    [onOpenCst]
+  );
+
  const editorPanel = useMemo(
    () => (
-      <EditorConstituenta
-        isModified={isModified}
-        setIsModified={setIsModified}
-        activeCst={activeCst}
-        onOpenEdit={onOpenCst}
-      />
+      <TabPanel>
+        <EditorConstituenta
+          isModified={isModified}
+          setIsModified={setIsModified}
+          activeCst={activeCst}
+          onOpenEdit={onOpenCst}
+        />
+      </TabPanel>
    ),
    [isModified, setIsModified, activeCst, onOpenCst]
  );

+  const graphPanel = useMemo(
+    () => (
+      <TabPanel>
+        <EditorTermGraph onOpenEdit={onOpenCst} />
+      </TabPanel>
+    ),
+    [onOpenCst]
+  );
+
  return (
    <RSEditState
      selected={selected}
@ -221,15 +242,10 @@ function RSTabs() {
          </TabList>

          <AnimateFade className='overflow-y-auto' style={{ maxHeight: panelHeight }}>
-            <TabPanel>{cardPanel}</TabPanel>
-
-            <TabPanel>{listPanel}</TabPanel>
-
-            <TabPanel>{editorPanel}</TabPanel>
-
-            <TabPanel>
-              <EditorTermGraph onOpenEdit={onOpenCst} />
-            </TabPanel>
+            {cardPanel}
+            {listPanel}
+            {editorPanel}
+            {graphPanel}
          </AnimateFade>
        </Tabs>
      ) : null}
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@ -32,7 +32,3 @@
    color: var(--cd-fg-60);
  }
 }
-
-.rdt_TableCell {
-  font-size: 0.875rem;
-}