From ba658d4d0ef34263364da23396f02e220a800daa Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Thu, 22 Feb 2024 15:07:05 +0300 Subject: [PATCH] UI improvements for small screens --- .../src/components/Help/HelpExteor.tsx | 32 +++---- .../src/components/Help/HelpLibrary.tsx | 5 +- .../frontend/src/components/Help/HelpMain.tsx | 10 +-- .../src/components/Help/HelpPrivacy.tsx | 6 +- .../src/components/Help/HelpRSLang.tsx | 3 +- .../src/components/Help/HelpRSTemplates.tsx | 18 ++-- .../src/components/PDFViewer/PDFViewer.tsx | 9 +- .../src/components/PDFViewer/PageControls.tsx | 2 +- .../src/pages/ManualsPage/TopicsList.tsx | 44 +++------- .../pages/ManualsPage/TopicsListDropdown.tsx | 84 +++++++++++++++++++ .../pages/ManualsPage/TopicsListStatic.tsx | 44 ++++++++++ .../src/pages/ManualsPage/ViewTopic.tsx | 2 +- rsconcept/frontend/src/styling/animations.ts | 21 +++++ rsconcept/frontend/src/styling/setup.css | 7 +- 14 files changed, 213 insertions(+), 74 deletions(-) create mode 100644 rsconcept/frontend/src/pages/ManualsPage/TopicsListDropdown.tsx create mode 100644 rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx diff --git a/rsconcept/frontend/src/components/Help/HelpExteor.tsx b/rsconcept/frontend/src/components/Help/HelpExteor.tsx index c9ec58d7..e111a312 100644 --- a/rsconcept/frontend/src/components/Help/HelpExteor.tsx +++ b/rsconcept/frontend/src/components/Help/HelpExteor.tsx @@ -4,24 +4,24 @@ import { urls } from '@/utils/constants'; function HelpExteor() { // prettier-ignore return ( -
+

Экстеор

-

Экстеор 4.9 — редактор текстов систем понятий эксплицированных в родах структур, используемых для создания проектов систем организационного управления. Экстеор является идейным предком Портала.

-

Портал превосходит Экстеор в части редактирования экспликаций, но функции синтеза и вычисления интерпретации пока доступны только в Экстеоре. Также следует использовать Экстеор для выгрузки экспликаций в Word для последующей печати.

-

Экстеор доступен на операционной системы Windows 10 и выше.

+

Экстеор 4.9 — редактор текстов систем понятий эксплицированных в родах структур

+

Портал превосходит Экстеор в части редактирования экспликаций, но функции синтеза и вычисления интерпретации пока доступны только в Экстеоре. Также следует использовать Экстеор для выгрузки экспликаций в Word для последующей печати

+

Экстеор доступен на операционной системы Windows 10+

Скачать установщик: |

-

Основные функции

-
  • Работа с РС-формой системы понятий.
    • -
  • Автоматическое определение типизации выражений языка родов структур.
    • -
  • Проверка корректности РС-формы.
    • -
  • Контекстный поиск с учетом словоформ терминов.
    • -
  • Терминологический контроль вхождений терминов в тексты других терминов и текстовые определения.
    • -
  • Автоматическое выполнение операций синтеза РС-форм.
    • -
  • Синтез РС-форм с помощью операционной схемы синтеза (ОСС).
    • -
  • Автоматическое сквозное внесение изменений в ОСС (пересинтез).
    • -
  • Вычисление объектной интерпретации для производных понятий для заданных интерпретаций базовых понятий.
    • -
  • Выгрузка концептуальных схем в Word.
    • -
  • Импорт/экспорт данных объектных интерпретаций из/в Excel.
    • +

    Основные функции

    +
  • Работа с РС-формой системы понятий
    • +
  • Автоматическое определение типизации выражений
    • +
  • Проверка корректности РС-формы
    • +
  • Контекстный поиск с учетом словоформ терминов
    • +
  • Терминологический контроль вхождений терминов
    • +
  • Автоматическое выполнение операций синтеза РС-форм
    • +
  • Синтез с помощью операционной схемы синтеза (ОСС)
    • +
  • Автоматическое сквозное внесение изменений в ОСС
    • +
  • Вычисление объектной интерпретации
    • +
  • Выгрузка концептуальных схем в Word
    • +
  • Импорт/экспорт интерпретаций через Excel
    • ); } diff --git a/rsconcept/frontend/src/components/Help/HelpLibrary.tsx b/rsconcept/frontend/src/components/Help/HelpLibrary.tsx index f2ba0517..8425fa14 100644 --- a/rsconcept/frontend/src/components/Help/HelpLibrary.tsx +++ b/rsconcept/frontend/src/components/Help/HelpLibrary.tsx @@ -6,13 +6,14 @@ function HelpLibrary() { return (

    Библиотека схем

    -

    В библиотеки собраны концептуальные схемы - системы понятий, используемые в теории и практике концептуального проектирования систем организационного управления

    +

    В библиотеки собраны концептуальные схемы, используемые в теории и практике концептуального проектирования систем организационного управления

    Фильтрация с помощью инструментов в верхней части страницы

    Сортировка по клику на заголовок таблицы

    +

    Отображение статусов

    отслеживаемая обозначает отслеживание схемы

    - p
    +

    общедоступная отображает схему всем пользователям

    diff --git a/rsconcept/frontend/src/components/Help/HelpMain.tsx b/rsconcept/frontend/src/components/Help/HelpMain.tsx index dc587730..997daf9b 100644 --- a/rsconcept/frontend/src/components/Help/HelpMain.tsx +++ b/rsconcept/frontend/src/components/Help/HelpMain.tsx @@ -6,16 +6,16 @@ function HelpMain() { return (

    Портал

    -

    Портал позволяет анализировать предметные области, формально записывать системы определений и синтезировать их с помощью математического аппарата родов структур.

    -

    Основные разделы

    +

    Портал позволяет анализировать предметные области, формально записывать системы определений и синтезировать их с помощью математического аппарата родов структур

    +

    Основные разделы

  • - библиотека концептуальных схем
  • - данные пользователя и смена пароля
    • -

    Навигация

    +

    Навигация

    Навигационную панель можно скрыть с помощью кнопки в правом верхнем углу

    -

    В меню пользователя (правый верхний угол) доступно редактирование данных пользователя и изменение цветовой темы

    +

    В меню пользователя (правый угол) доступно редактирование пользователя и изменение цветовой темы

    -

    Поддержка

    +

    Поддержка

    Портал разрабатывается и является проектом с открытым исходным кодом, доступным на

    Ваши пожелания по доработке, найденные ошибки и иные предложения можно направлять по email:

    ); diff --git a/rsconcept/frontend/src/components/Help/HelpPrivacy.tsx b/rsconcept/frontend/src/components/Help/HelpPrivacy.tsx index 2b272b4e..85b69783 100644 --- a/rsconcept/frontend/src/components/Help/HelpPrivacy.tsx +++ b/rsconcept/frontend/src/components/Help/HelpPrivacy.tsx @@ -2,7 +2,11 @@ import PDFViewer from '@/components/PDFViewer'; import { resources } from '@/utils/constants'; function HelpPrivacy() { - return ; + return ( +
    + +
    + ); } export default HelpPrivacy; diff --git a/rsconcept/frontend/src/components/Help/HelpRSLang.tsx b/rsconcept/frontend/src/components/Help/HelpRSLang.tsx index dfa1f1f2..b6cea5d4 100644 --- a/rsconcept/frontend/src/components/Help/HelpRSLang.tsx +++ b/rsconcept/frontend/src/components/Help/HelpRSLang.tsx @@ -12,7 +12,8 @@ function HelpRSLang() { const videoHeight = useMemo(() => { const viewH = windowSize.height ?? 0; const viewW = windowSize.width ?? 0; - return Math.min(OPT_VIDEO_H, viewH - 320, Math.floor(((viewW - 290) * 9) / 16)); + const availableWidth = viewW - (windowSize.isSmall ? 35 : 290); + return Math.min(OPT_VIDEO_H, viewH - 320, Math.floor((availableWidth * 9) / 16)); }, [windowSize]); // prettier-ignore diff --git a/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx b/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx index c6d550cc..baae2107 100644 --- a/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx +++ b/rsconcept/frontend/src/components/Help/HelpRSTemplates.tsx @@ -1,16 +1,16 @@ function HelpRSTemplates() { // prettier-ignore return ( -
    +

    Банк выражений

    -

    Портал предоставляет быстрый доступ к часто используемым выражениям с помощью функции создания конституенты из шаблона.

    -

    Источником шаблонов является Банк выражений, содержащий параметризованные понятия и утверждения, сгруппированные по разделам.

    -

    Сначала выбирается шаблон выражения (вкладка Шаблон).

    -

    Далее для аргументов можно зафиксировать значения, выбрав из конституент текущей схемы или указав выражения (вкладка Аргументы).

    -

    Значения аргументов будут подставлены в выражение, включая корректировку перечня аргументов.

    -

    Если значения указаны для всех аргументов, то тип создаваемой конституенты будет автоматически обновлён.

    -

    На вкладке Конституента можно скорректировать все атрибуты, создаваемой конституенты.

    -

    Кнопка Создать инициирует добавление выбранной конституенты в схему.

    +

    Портал предоставляет быстрый доступ к часто используемым выражениям с помощью функции создания конституенты из шаблона

    +

    Источником шаблонов является Банк выражений, содержащий параметризованные понятия и утверждения, сгруппированные по разделам

    +

    Сначала выбирается шаблон выражения (вкладка Шаблон)

    +

    Далее для аргументов можно зафиксировать значения, выбрав из конституент текущей схемы или указав выражения (вкладка Аргументы)

    +

    Значения аргументов будут подставлены в выражение, включая корректировку перечня аргументов

    +

    Если значения указаны для всех аргументов, то тип создаваемой конституенты будет автоматически обновлён

    +

    На вкладке Конституента можно скорректировать все атрибуты, создаваемой конституенты

    +

    Кнопка Создать инициирует добавление выбранной конституенты в схему

    ); } diff --git a/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx b/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx index 2621fa6f..4579f24c 100644 --- a/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx +++ b/rsconcept/frontend/src/components/PDFViewer/PDFViewer.tsx @@ -11,7 +11,7 @@ import Overlay from '../ui/Overlay'; import PageControls from './PageControls'; const MAXIMUM_WIDTH = 1000; -const MINIMUM_WIDTH = 600; +const MINIMUM_WIDTH = 320; interface PDFViewerProps { file?: string | ArrayBuffer | Blob; @@ -24,7 +24,7 @@ function PDFViewer({ file }: PDFViewerProps) { const [pageNumber, setPageNumber] = useState(1); const pageWidth = useMemo(() => { - return Math.max(MINIMUM_WIDTH, Math.min((windowSize?.width ?? 0) - 300, MAXIMUM_WIDTH)); + return Math.max(MINIMUM_WIDTH, Math.min((windowSize?.width ?? 0) - 10, MAXIMUM_WIDTH)); }, [windowSize]); function onDocumentLoadSuccess({ numPages }: PDFDocumentProxy) { @@ -35,15 +35,14 @@ function PDFViewer({ file }: PDFViewerProps) { - + -

    +

    Страница {pageNumber} из {pageCount}

    - ); + const size = useWindowSize(); + + if (!size.isSmall) { + return ; + } else { + return ; + } } export default TopicsList; diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsListDropdown.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsListDropdown.tsx new file mode 100644 index 00000000..d228fbaa --- /dev/null +++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsListDropdown.tsx @@ -0,0 +1,84 @@ +'use client'; + +import clsx from 'clsx'; +import { motion } from 'framer-motion'; +import { useCallback } from 'react'; +import { RiMenuFoldFill, RiMenuUnfoldFill } from 'react-icons/ri'; + +import Button from '@/components/ui/Button'; +import { useConceptTheme } from '@/context/ThemeContext'; +import useDropdown from '@/hooks/useDropdown'; +import { HelpTopic } from '@/models/miscellaneous'; +import { animateSlideLeft } from '@/styling/animations'; +import { prefixes } from '@/utils/constants'; +import { describeHelpTopic, labelHelpTopic } from '@/utils/labels'; + +interface TopicsListDropDownProps { + activeTopic: HelpTopic; + onChangeTopic: (newTopic: HelpTopic) => void; +} + +function TopicsListDropDown({ activeTopic, onChangeTopic }: TopicsListDropDownProps) { + const menu = useDropdown(); + const { noNavigation } = useConceptTheme(); + + const selectTheme = useCallback( + (topic: HelpTopic) => { + menu.hide(); + onChangeTopic(topic); + }, + [onChangeTopic, menu] + ); + + return ( +
    +
    + ); +} + +export default TopicsListDropDown; diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx new file mode 100644 index 00000000..bf210084 --- /dev/null +++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsListStatic.tsx @@ -0,0 +1,44 @@ +import clsx from 'clsx'; + +import { HelpTopic } from '@/models/miscellaneous'; +import { prefixes } from '@/utils/constants'; +import { describeHelpTopic, labelHelpTopic } from '@/utils/labels'; + +interface TopicsListStaticProps { + activeTopic: HelpTopic; + onChangeTopic: (newTopic: HelpTopic) => void; +} + +function TopicsListStatic({ activeTopic, onChangeTopic }: TopicsListStaticProps) { + return ( +
    + {Object.values(HelpTopic).map((topic, index) => ( +
    onChangeTopic(topic)} + > + {labelHelpTopic(topic)} +
    + ))} +
    + ); +} + +export default TopicsListStatic; diff --git a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx index dba070c3..e4b21ee6 100644 --- a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx +++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx @@ -8,7 +8,7 @@ interface ViewTopicProps { function ViewTopic({ topic }: ViewTopicProps) { return ( - + ); diff --git a/rsconcept/frontend/src/styling/animations.ts b/rsconcept/frontend/src/styling/animations.ts index b6dc0d3b..83a8f867 100644 --- a/rsconcept/frontend/src/styling/animations.ts +++ b/rsconcept/frontend/src/styling/animations.ts @@ -53,6 +53,27 @@ export const animateNavigationToggle: Variants = { } }; +export const animateSlideLeft: Variants = { + open: { + clipPath: 'inset(0% 0% 0% 0%)', + transition: { + type: 'spring', + bounce: 0, + duration: 0.4, + delayChildren: 0.2, + staggerChildren: 0.05 + } + }, + closed: { + clipPath: 'inset(0% 100% 0% 0%)', + transition: { + type: 'spring', + bounce: 0, + duration: 0.3 + } + } +}; + export const animateDropdown: Variants = { open: { clipPath: 'inset(0% 0% 0% 0%)', diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css index 058444cb..eda69165 100644 --- a/rsconcept/frontend/src/styling/setup.css +++ b/rsconcept/frontend/src/styling/setup.css @@ -112,13 +112,18 @@ li { } h2 { - @apply font-semibold text-center; + @apply [&:not(:first-child)]:mt-2 font-semibold text-center; } b { @apply font-semibold; } + li, + p { + @apply [&:not(:last-child)]:mb-2; + } + .border { @apply rounded; }