Update help UI

This commit is contained in:
IRBorisov 2023-09-29 16:22:49 +03:00
parent edff9b640a
commit e8a6b2dd0f
10 changed files with 73 additions and 16 deletions

View File

@ -6,7 +6,8 @@ function HelpConstituenta() {
<div className=''>
<h1>Подсказки</h1>
<p><b className='text-warning'>Изменения сохраняются ПОСЛЕ нажатия на кнопку снизу или справа вверху</b></p>
<p><b>Клик на формальное выражение</b> - обратите внимание на кнопки снизу.<br/>Для каждой есть горячая клавиша в подсказке</p>
<p><b>Клик на формальное выражение</b> - обратите внимание на кнопки снизу<br/>Горячие клавиши указаны в подсказках при наведении</p>
<p><b>Поля Термин и Определение</b> - Ctrl+Пробел открывает диалог редактирования отсылок<br/>Перед открытием диалога переместите текстовый курсор на заменяемое слово или ссылку</p>
<p><b>Список конституент справа</b> - обратите внимание на настройки фильтрации</p>
<p>- слева от ввода текста настраивается набор атрибутов конституенты</p>
<p>- справа от ввода текста настраивается список конституент, которые фильтруются</p>

View File

@ -4,7 +4,7 @@ function HelpRSFormMeta() {
<h1>Паспорт схемы</h1>
<p><b>Владелец</b> - пользователь, обладающий правом редактирования</p>
<p>Для <b>общедоступных</b> схем владельцем может стать любой пользователь</p>
<p>Для <b>не</b> схем правом редактирования обладают только администраторы</p>
<p>Для <b>неизменных</b> схем правом редактирования обладают только администраторы</p>
<p><b>Клонировать</b> - создать копию схемы для дальнейшего редактирования</p>
<p><b>Отслеживание</b> - возможность видеть схему в Библиотеке и использовать фильтры</p>
<p><b>Загрузить/Выгрузить схему</b> - взаимодействие с Экстеор через файлы формата TRS</p>

View File

@ -0,0 +1,16 @@
function HelpTerminologyControl() {
return (
<div className='flex flex-col w-full gap-1 text-lef'>
<h1>Терминологизация: Контроль терминологии</h1>
<p>Портал позволяет контролировать употребление терминов, привязанных к сущностям в концептуальных схемах.</p>
<p>Для этого используется механизм текстовых отсылок: <i>использование термина</i> и <i>синтаксическая связь.</i></p>
<p>При отсылке к термину указывается параметры словоформы так, обеспечивающие корректное согласование слов.</p>
<p><b>Граммема</b> - минимальная единица грамматической информаци, например род, число, падеж.</p>
<p><b>Словоформа</b> - грамматическая форма словосочетания, которая может меняться в зависимости от его грамматических характеристик.</p>
<p><b>Лексема</b> - все грамматические формы и словосочетания, связанные с данным словосочетанием.</p>
<p>При работе со словосочетаниями определяется основное слово, которое определяет набор граммем и используется для согласования с другими словами в предложении.</p>
</div>);
}
export default HelpTerminologyControl;

View File

@ -10,12 +10,15 @@ import { colorfgCstStatus } from '../../utils/color';
import { prefixes } from '../../utils/constants';
import { labelReferenceType } from '../../utils/labels';
import { compareGrammemeOptions, IGrammemeOption, PremadeWordForms, SelectorGrammems, SelectorReferenceType } from '../../utils/selectors';
import ConceptTooltip from '../Common/ConceptTooltip';
import Label from '../Common/Label';
import Modal from '../Common/Modal';
import SelectMulti from '../Common/SelectMulti';
import SelectSingle from '../Common/SelectSingle';
import TextInput from '../Common/TextInput';
import DataTable, { IConditionalStyle } from '../DataTable';
import HelpTerminologyControl from '../Help/HelpTerminologyControl';
import { HelpIcon } from '../Icons';
import TermformButton from './TermformButton';
interface DlgEditReferenceProps {
@ -214,14 +217,26 @@ function DlgEditReference({ hideWindow, items, initialRef, initialText, initialT
onSubmit={handleSubmit}
>
<div className='min-w-[40rem] flex flex-col gap-4 mb-4 mt-2'>
<SelectSingle
className='z-modal-top min-w-[20rem] w-fit self-center'
options={SelectorReferenceType}
isSearchable={false}
placeholder='Тип ссылки'
value={{ value: type, label: labelReferenceType(type) }}
onChange={data => setType(data?.value ?? ReferenceType.ENTITY)}
/>
<div className='flex self-center flex-start'>
<SelectSingle
className='z-modal-top min-w-[20rem] w-fit'
options={SelectorReferenceType}
isSearchable={false}
placeholder='Тип ссылки'
value={{ value: type, label: labelReferenceType(type) }}
onChange={data => setType(data?.value ?? ReferenceType.ENTITY)}
/>
<div id='terminology-help' className='px-1 py-1'>
<HelpIcon color='text-primary' size={5} />
</div>
<ConceptTooltip
anchorSelect='#terminology-help'
className='max-w-[30rem]'
offset={4}
>
<HelpTerminologyControl />
</ConceptTooltip>
</div>
{type === ReferenceType.SYNTACTIC &&
<div className='flex gap-4 flex-start'>
<TextInput id='offset' type='number'

View File

@ -80,6 +80,9 @@
.z-modal-top {
z-index: 80;
}
.z-modal-tooltip {
z-index: 90;
}
:root {

View File

@ -21,12 +21,13 @@ export enum DependencyMode {
// Help manual topic compare mode
export enum HelpTopic {
MAIN = 'main',
RSLANG = 'rslang',
LIBRARY = 'library',
RSFORM = 'rsform',
CSTLIST = 'cstlist',
CONSTITUENTA = 'constituenta',
GRAPH_TERM = 'graph-term',
RSLANG = 'rslang',
TERM_CONTROL = 'terminology-control',
EXTEOR = 'exteor',
API = 'api'
}

View File

@ -109,7 +109,7 @@ function LoginPage() {
<div className='flex justify-center w-full gap-2 py-2'>
<SubmitButton
text='Вход'
text='Войти'
dimensions='w-[12rem]'
loading={loading}
/>

View File

@ -7,6 +7,7 @@ import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
import HelpRSFormMeta from '../../components/Help/HelpRSFormMeta';
import HelpRSLang from '../../components/Help/HelpRSLang';
import HelpTermGraph from '../../components/Help/HelpTermGraph';
import HelpTerminologyControl from '../../components/Help/HelpTerminologyControl';
import { HelpTopic } from '../../models/miscelanious';
interface ViewTopicProps {
@ -17,12 +18,13 @@ function ViewTopic({ topic }: ViewTopicProps) {
return (
<div className='w-full px-2 py-2'>
{topic === HelpTopic.MAIN && <HelpMain />}
{topic === HelpTopic.RSLANG && <HelpRSLang />}
{topic === HelpTopic.LIBRARY && <HelpLibrary />}
{topic === HelpTopic.RSFORM && <HelpRSFormMeta />}
{topic === HelpTopic.CSTLIST && <HelpRSFormItems />}
{topic === HelpTopic.CONSTITUENTA && <HelpConstituenta />}
{topic === HelpTopic.GRAPH_TERM && <HelpTermGraph />}
{topic === HelpTopic.RSLANG && <HelpRSLang />}
{topic === HelpTopic.TERM_CONTROL && <HelpTerminologyControl />}
{topic === HelpTopic.EXTEOR && <HelpExteor />}
{topic === HelpTopic.API && <HelpAPI />}
</div>

View File

@ -1,12 +1,14 @@
import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import ConceptTooltip from '../../components/Common/ConceptTooltip';
import Divider from '../../components/Common/Divider';
import MiniButton from '../../components/Common/MiniButton';
import Modal from '../../components/Common/Modal';
import SelectMulti from '../../components/Common/SelectMulti';
import TextArea from '../../components/Common/TextArea';
import DataTable, { createColumnHelper } from '../../components/DataTable';
import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon, CrossIcon } from '../../components/Icons';
import HelpTerminologyControl from '../../components/Help/HelpTerminologyControl';
import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon, CrossIcon, HelpIcon } from '../../components/Icons';
import { useConceptTheme } from '../../context/ThemeContext';
import useConceptText from '../../hooks/useConceptText';
import {
@ -215,6 +217,21 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
canSubmit
onSubmit={handleSubmit}
>
<div className='relative w-full'>
<div className='absolute top-0 right-0'>
<div id='terminology-help' className='px-1 py-1'>
<HelpIcon color='text-primary' size={5} />
</div>
<ConceptTooltip
anchorSelect='#terminology-help'
className='max-w-[30rem] z-modal-tooltip'
offset={4}
>
<HelpTerminologyControl />
</ConceptTooltip>
</div>
</div>
<div className='min-w-[40rem]'>
<TextArea id='nominal' label='Начальная форма'
placeholder='Начальная форма'

View File

@ -196,12 +196,13 @@ export function describeExpressionStatus(status: ExpressionStatus): string {
export function labelHelpTopic(topic: HelpTopic): string {
switch (topic) {
case HelpTopic.MAIN: return 'Портал';
case HelpTopic.RSLANG: return 'Экспликация';
case HelpTopic.LIBRARY: return 'Библиотека';
case HelpTopic.RSFORM: return '- паспорт схемы';
case HelpTopic.CSTLIST: return '- список конституент';
case HelpTopic.CONSTITUENTA: return '- конституента';
case HelpTopic.GRAPH_TERM: return '- граф термов';
case HelpTopic.RSLANG: return 'Экспликация';
case HelpTopic.TERM_CONTROL: return 'Терминологизация';
case HelpTopic.EXTEOR: return 'Экстеор';
case HelpTopic.API: return 'REST API';
}
@ -210,12 +211,13 @@ export function labelHelpTopic(topic: HelpTopic): string {
export function describeHelpTopic(topic: HelpTopic): string {
switch (topic) {
case HelpTopic.MAIN: return 'Общая справка по порталу';
case HelpTopic.RSLANG: return 'Справка по языку родов структур и экспликации';
case HelpTopic.LIBRARY: return 'Описание работы с библиотекой схем';
case HelpTopic.RSFORM: return 'Описание работы с описанием схемы';
case HelpTopic.CSTLIST: return 'Описание работы со списком конституентт';
case HelpTopic.CONSTITUENTA: return 'Описание редактирования конституенты';
case HelpTopic.GRAPH_TERM: return 'Описание работы с графом термов схемы';
case HelpTopic.RSLANG: return 'Справка по языку родов структур и экспликации';
case HelpTopic.TERM_CONTROL: return 'Справка по контролю терминов и текстовым отсылкам';
case HelpTopic.EXTEOR: return 'Справка по программе для экспликации "Экстеор" для Windows';
case HelpTopic.API: return 'Описание интерфейса для разработчиков';
}