From 930841e1be940d07e5aae0cdd9a2414ebee4173f Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Tue, 30 Apr 2024 17:16:45 +0300 Subject: [PATCH] Further UI fixes for tab panels --- .../DlgConstituentaTemplate/ArgumentsTab.tsx | 5 +- .../DlgConstituentaTemplate.tsx | 40 ++++++++----- .../DlgConstituentaTemplate/TemplateTab.tsx | 7 ++- .../DlgEditReference/DlgEditReference.tsx | 29 +++++++--- .../dialogs/DlgEditReference/EntityTab.tsx | 6 +- .../dialogs/DlgEditReference/SyntacticTab.tsx | 5 +- .../DlgInlineSynthesis/DlgInlineSynthesis.tsx | 43 +++++++++----- .../dialogs/DlgInlineSynthesis/SchemaTab.tsx | 5 +- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 58 ++++++++++++------- rsconcept/frontend/src/styling/overrides.css | 4 -- 10 files changed, 127 insertions(+), 75 deletions(-) diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx index b9e0812e..2b499f78 100644 --- 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 ( - <> + - + ); } diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx index 78620078..b322a8cc 100644 --- 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( - () => , + () => ( + + + + ), [template, updateTemplate] ); const argumentsPanel = useMemo( - () => , + () => ( + + + + ), [schema, substitutes, updateSubstitutes] ); const editorPanel = useMemo( () => ( - + + + + + ), [constituenta, updateConstituenta, schema] ); @@ -135,7 +148,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }: - {templatePanel} - - {argumentsPanel} - - - {editorPanel} - + {templatePanel} + {argumentsPanel} + {editorPanel} ); diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx index 381f384c..54d36e47 100644 --- 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 ( - <> -
+ +
- + ); } diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx index fcbc97ae..a38112a6 100644 --- 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( + () => ( + + + + ), + [initial, schema] + ); + + const syntacticPanel = useMemo( + () => ( + + + + ), + [initial] + ); + return ( - - - - - - - + {entityPanel} + {syntacticPanel} ); diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx index 1d83cd52..6fc71ee5 100644 --- 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 ( - +
- + ); } diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/SyntacticTab.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/SyntacticTab.tsx index 1bcc5900..6e132743 100644 --- 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 ( -
+ setNominal(event.target.value)} /> -
+ ); } diff --git a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx index 58376751..f15a4e7c 100644 --- 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(() => , [donorID]); + const schemaPanel = useMemo( + () => ( + + + + ), + [donorID] + ); const itemsPanel = useMemo( () => ( - + + + ), [source.schema, source.loading, selected] ); const substitutesPanel = useMemo( () => ( - + + + ), [source.schema, source.loading, receiver, selected, substitutions] ); @@ -89,7 +105,6 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli onSubmit={handleSubmit} > - {schemaPanel} - {itemsPanel} - {substitutesPanel} + {schemaPanel} + {itemsPanel} + {substitutesPanel} ); diff --git a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx index 58660fdb..978cea14 100644 --- 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 ( -
+
Выбрана -
+ ); } diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx index 3b3bdecf..ce08e80b 100644 --- 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( () => ( - + + + ), [isModified, onDestroySchema] ); - const listPanel = useMemo(() => , [onOpenCst]); + const listPanel = useMemo( + () => ( + + + + ), + [onOpenCst] + ); + const editorPanel = useMemo( () => ( - + + + ), [isModified, setIsModified, activeCst, onOpenCst] ); + const graphPanel = useMemo( + () => ( + + + + ), + [onOpenCst] + ); + return ( - {cardPanel} - - {listPanel} - - {editorPanel} - - - - + {cardPanel} + {listPanel} + {editorPanel} + {graphPanel} ) : null} diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css index ee03cdfe..d625f562 100644 --- 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; -}