From 22ef6b1886119c6e527745cc24201ef8718b9c50 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Tue, 14 May 2024 19:16:04 +0300 Subject: [PATCH] UI topics list refactoring --- TODO.txt | 2 +- .../src/components/info/InfoTopic.tsx | 5 ++- .../src/components/man/HelpCstAttributes.tsx | 2 +- .../src/components/ui/DataTable/TableBody.tsx | 2 +- ...icsListDropdown.tsx => TopicsDropdown.tsx} | 36 ++++++------------- .../src/pages/ManualsPage/TopicsList.tsx | 8 ++--- .../src/pages/ManualsPage/TopicsStatic.tsx | 33 +++++++++++++++++ .../{TopicsListStatic.tsx => TopicsTree.tsx} | 27 ++++++-------- rsconcept/frontend/src/styling/styles.css | 2 +- 9 files changed, 66 insertions(+), 51 deletions(-) rename rsconcept/frontend/src/pages/ManualsPage/{TopicsListDropdown.tsx => TopicsDropdown.tsx} (59%) create mode 100644 rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx rename rsconcept/frontend/src/pages/ManualsPage/{TopicsListStatic.tsx => TopicsTree.tsx} (61%) diff --git a/TODO.txt b/TODO.txt index eed0b9e0..5da26944 100644 --- a/TODO.txt +++ b/TODO.txt @@ -19,7 +19,7 @@ For more specific TODOs see comments in code - User notifications on edit - consider spam prevention and change aggregation - Static analyzer for RSForm - Content based search in Library -- User profile: Settings +- User profile: Settings + settings persistency - Export PDF (Items list, Graph) - ARIA (accessibility considerations) - for now machine reading not supported diff --git a/rsconcept/frontend/src/components/info/InfoTopic.tsx b/rsconcept/frontend/src/components/info/InfoTopic.tsx index d05d5e59..27d2de57 100644 --- a/rsconcept/frontend/src/components/info/InfoTopic.tsx +++ b/rsconcept/frontend/src/components/info/InfoTopic.tsx @@ -1,6 +1,7 @@ import { HelpTopic } from '@/models/miscellaneous'; import HelpAPI from '../man/HelpAPI'; +import HelpConcept from '../man/HelpConcept'; import HelpConceptRelations from '../man/HelpConceptRelations'; import HelpConceptSystem from '../man/HelpConceptSystem'; import HelpCstAttributes from '../man/HelpCstAttributes'; @@ -42,10 +43,12 @@ function InfoTopic({ topic }: InfoTopicProps) { if (topic === HelpTopic.CST_STATUS) return ; if (topic === HelpTopic.CST_CLASS) return ; - if (topic === HelpTopic.RSLANG) return ; + if (topic === HelpTopic.CONCEPTUAL) return ; if (topic === HelpTopic.CC_SYSTEM) return ; if (topic === HelpTopic.CC_CONSTITUENTA) return ; if (topic === HelpTopic.CC_RELATIONS) return ; + + if (topic === HelpTopic.RSLANG) return ; if (topic === HelpTopic.RSL_TYPES) return ; if (topic === HelpTopic.RSL_CORRECT) return ; if (topic === HelpTopic.RSL_INTERPRET) return ; diff --git a/rsconcept/frontend/src/components/man/HelpCstAttributes.tsx b/rsconcept/frontend/src/components/man/HelpCstAttributes.tsx index 0ce39a66..b4725f34 100644 --- a/rsconcept/frontend/src/components/man/HelpCstAttributes.tsx +++ b/rsconcept/frontend/src/components/man/HelpCstAttributes.tsx @@ -7,7 +7,7 @@ function HelpCstAttributes() { // prettier-ignore return (
-

Аттрибуты конституенты

+

Атрибуты конституенты

Термин может быть присвоен любой конституенте. Он используется в других Терминах и в Текстовых определениях

Формальное определение строится с помощью формального аппарата

Типизация вычисляется автоматически на основе Формального определения и отражает структуру элементов множества, задаваемого этим определением

diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx index ca6fd9d7..f860fc3a 100644 --- a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx +++ b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx @@ -71,7 +71,7 @@ function TableBody({ void; } -function TopicsListDropDown({ activeTopic, onChangeTopic }: TopicsListDropDownProps) { +function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) { const menu = useDropdown(); - const { noNavigation } = useConceptOptions(); + const { noNavigation, calculateHeight } = useConceptOptions(); const selectTheme = useCallback( (topic: HelpTopic) => { @@ -34,7 +34,7 @@ function TopicsListDropDown({ activeTopic, onChangeTopic }: TopicsListDropDownPr
: } - className='w-[3rem] h-7' + className='w-[3rem] h-7 rounded-none' onClick={menu.toggle} /> - {Object.values(HelpTopic).map((topic, index) => ( -
selectTheme(topic)} - > - {labelHelpTopic(topic)} -
- ))} +
); } -export default TopicsListDropDown; +export default TopicsDropdown; diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx index 86e84334..5a3b1075 100644 --- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx +++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx @@ -3,8 +3,8 @@ import useWindowSize from '@/hooks/useWindowSize'; import { HelpTopic } from '@/models/miscellaneous'; -import TopicsListDropDown from './TopicsListDropdown'; -import TopicsListStatic from './TopicsListStatic'; +import TopicsDropdown from './TopicsDropdown'; +import TopicsStatic from './TopicsStatic'; interface TopicsListProps { activeTopic: HelpTopic; @@ -15,9 +15,9 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) { const size = useWindowSize(); if (!size.isSmall) { - return ; + return ; } else { - return ; + return ; } } diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx new file mode 100644 index 00000000..3ecb6a75 --- /dev/null +++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx @@ -0,0 +1,33 @@ +import clsx from 'clsx'; + +import { useConceptOptions } from '@/context/OptionsContext'; +import { HelpTopic } from '@/models/miscellaneous'; + +import TopicsTree from './TopicsTree'; + +interface TopicsStaticProps { + activeTopic: HelpTopic; + onChangeTopic: (newTopic: HelpTopic) => void; +} + +function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) { + const { calculateHeight } = useConceptOptions(); + return ( +
+ +
+ ); +} + +export default TopicsStatic; diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsTree.tsx similarity index 61% rename from rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx rename to rsconcept/frontend/src/pages/ManualsPage/TopicsTree.tsx index bf210084..fbaba992 100644 --- a/rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx +++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsTree.tsx @@ -1,33 +1,26 @@ +'use client'; + import clsx from 'clsx'; +import { AnimatePresence } from 'framer-motion'; import { HelpTopic } from '@/models/miscellaneous'; import { prefixes } from '@/utils/constants'; import { describeHelpTopic, labelHelpTopic } from '@/utils/labels'; -interface TopicsListStaticProps { +interface TopicsTreeProps { activeTopic: HelpTopic; onChangeTopic: (newTopic: HelpTopic) => void; } -function TopicsListStatic({ activeTopic, onChangeTopic }: TopicsListStaticProps) { +function TopicsTree({ activeTopic, onChangeTopic }: TopicsTreeProps) { return ( -
+ {Object.values(HelpTopic).map((topic, index) => (
))} -
+
); } -export default TopicsListStatic; +export default TopicsTree; diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css index b3faf5d6..6b125921 100644 --- a/rsconcept/frontend/src/styling/styles.css +++ b/rsconcept/frontend/src/styling/styles.css @@ -231,7 +231,7 @@ @apply flex gap-1; } - .cc-table-row { + .cc-scroll-row { scroll-snap-align: start; scroll-snap-stop: always; }