mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 13:00:39 +03:00
F: Improve Help UI for dialogs
This commit is contained in:
parent
9761cc2c9d
commit
8d5ce8b0cf
|
@ -40,7 +40,7 @@ export { LuFolderEdit as IconFolderEdit } from 'react-icons/lu';
|
||||||
export { LuFolderOpen as IconFolderOpened } from 'react-icons/lu';
|
export { LuFolderOpen as IconFolderOpened } from 'react-icons/lu';
|
||||||
export { LuFolderClosed as IconFolderClosed } from 'react-icons/lu';
|
export { LuFolderClosed as IconFolderClosed } from 'react-icons/lu';
|
||||||
export { LuFolderDot as IconFolderEmpty } from 'react-icons/lu';
|
export { LuFolderDot as IconFolderEmpty } from 'react-icons/lu';
|
||||||
export { LuLightbulb as IconHelp } from 'react-icons/lu';
|
export { TbHelpOctagon as IconHelp } from 'react-icons/tb';
|
||||||
export { LuLightbulbOff as IconHelpOff } from 'react-icons/lu';
|
export { LuLightbulbOff as IconHelpOff } from 'react-icons/lu';
|
||||||
export { RiPushpinFill as IconPin } from 'react-icons/ri';
|
export { RiPushpinFill as IconPin } from 'react-icons/ri';
|
||||||
export { RiUnpinLine as IconUnpin } from 'react-icons/ri';
|
export { RiUnpinLine as IconUnpin } from 'react-icons/ri';
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
import clsx from 'clsx';
|
|
||||||
|
|
||||||
import TextURL from '@/components/ui/TextURL';
|
import TextURL from '@/components/ui/TextURL';
|
||||||
import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
|
import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
|
||||||
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||||||
|
@ -16,14 +14,14 @@ interface BadgeHelpProps extends CProps.Styling {
|
||||||
place?: PlacesType;
|
place?: PlacesType;
|
||||||
}
|
}
|
||||||
|
|
||||||
function BadgeHelp({ topic, padding, ...restProps }: BadgeHelpProps) {
|
function BadgeHelp({ topic, padding = 'p-1', ...restProps }: BadgeHelpProps) {
|
||||||
const { showHelp } = useConceptOptions();
|
const { showHelp } = useConceptOptions();
|
||||||
|
|
||||||
if (!showHelp) {
|
if (!showHelp) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div tabIndex={-1} id={`help-${topic}`} className={clsx('p-1', padding)}>
|
<div tabIndex={-1} id={`help-${topic}`} className={padding}>
|
||||||
<IconHelp size='1.25rem' className='icon-primary' />
|
<IconHelp size='1.25rem' className='icon-primary' />
|
||||||
<Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modalTooltip' {...restProps}>
|
<Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modalTooltip' {...restProps}>
|
||||||
<div className='relative' onClick={event => event.stopPropagation()}>
|
<div className='relative' onClick={event => event.stopPropagation()}>
|
||||||
|
|
|
@ -92,7 +92,7 @@ function PickConstituenta({
|
||||||
<div className='border divide-y'>
|
<div className='border divide-y'>
|
||||||
<SearchBar
|
<SearchBar
|
||||||
id={id ? `${id}__search` : undefined}
|
id={id ? `${id}__search` : undefined}
|
||||||
className='clr-input'
|
className='clr-input rounded-t-md'
|
||||||
noBorder
|
noBorder
|
||||||
value={filterText}
|
value={filterText}
|
||||||
onChange={newValue => setFilterText(newValue)}
|
onChange={newValue => setFilterText(newValue)}
|
||||||
|
|
|
@ -5,10 +5,13 @@ import { motion } from 'framer-motion';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
|
|
||||||
import useEscapeKey from '@/hooks/useEscapeKey';
|
import useEscapeKey from '@/hooks/useEscapeKey';
|
||||||
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { animateModal } from '@/styling/animations';
|
import { animateModal } from '@/styling/animations';
|
||||||
|
import { PARAMETER } from '@/utils/constants';
|
||||||
import { prepareTooltip } from '@/utils/labels';
|
import { prepareTooltip } from '@/utils/labels';
|
||||||
|
|
||||||
import { IconClose } from '../Icons';
|
import { IconClose } from '../Icons';
|
||||||
|
import BadgeHelp from '../info/BadgeHelp';
|
||||||
import { CProps } from '../props';
|
import { CProps } from '../props';
|
||||||
import Button from './Button';
|
import Button from './Button';
|
||||||
import MiniButton from './MiniButton';
|
import MiniButton from './MiniButton';
|
||||||
|
@ -27,21 +30,30 @@ export interface ModalProps extends CProps.Styling {
|
||||||
beforeSubmit?: () => boolean;
|
beforeSubmit?: () => boolean;
|
||||||
onSubmit?: () => void;
|
onSubmit?: () => void;
|
||||||
onCancel?: () => void;
|
onCancel?: () => void;
|
||||||
|
|
||||||
|
helpTopic?: HelpTopic;
|
||||||
|
hideHelpWhen?: () => boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
function Modal({
|
function Modal({
|
||||||
|
children,
|
||||||
|
|
||||||
header,
|
header,
|
||||||
|
submitText = 'Продолжить',
|
||||||
|
submitInvalidTooltip,
|
||||||
|
|
||||||
|
readonly,
|
||||||
|
canSubmit,
|
||||||
|
overflowVisible,
|
||||||
|
|
||||||
hideWindow,
|
hideWindow,
|
||||||
beforeSubmit,
|
beforeSubmit,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
readonly,
|
|
||||||
onCancel,
|
onCancel,
|
||||||
canSubmit,
|
|
||||||
submitInvalidTooltip,
|
|
||||||
className,
|
className,
|
||||||
children,
|
|
||||||
overflowVisible,
|
helpTopic,
|
||||||
submitText = 'Продолжить',
|
hideHelpWhen,
|
||||||
...restProps
|
...restProps
|
||||||
}: React.PropsWithChildren<ModalProps>) {
|
}: React.PropsWithChildren<ModalProps>) {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
@ -61,7 +73,7 @@ function Modal({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='fixed top-0 left-0 w-full h-full z-modal'>
|
<div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
|
||||||
<div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
|
<div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
|
||||||
<div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')} />
|
<div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')} />
|
||||||
<motion.div
|
<motion.div
|
||||||
|
@ -85,6 +97,11 @@ function Modal({
|
||||||
onClick={handleCancel}
|
onClick={handleCancel}
|
||||||
/>
|
/>
|
||||||
</Overlay>
|
</Overlay>
|
||||||
|
{helpTopic && !hideHelpWhen?.() ? (
|
||||||
|
<Overlay position='left-2 top-2'>
|
||||||
|
<BadgeHelp topic={helpTopic} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} padding='p-0' />
|
||||||
|
</Overlay>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
|
{header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
|
||||||
|
|
||||||
|
|
|
@ -4,9 +4,7 @@ import clsx from 'clsx';
|
||||||
import { useLayoutEffect, useMemo, useState } from 'react';
|
import { useLayoutEffect, useMemo, useState } from 'react';
|
||||||
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import Modal, { ModalProps } from '@/components/ui/Modal';
|
import Modal, { ModalProps } from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
|
||||||
import TabLabel from '@/components/ui/TabLabel';
|
import TabLabel from '@/components/ui/TabLabel';
|
||||||
import AnimateFade from '@/components/wrap/AnimateFade';
|
import AnimateFade from '@/components/wrap/AnimateFade';
|
||||||
import { useLibrary } from '@/context/LibraryContext';
|
import { useLibrary } from '@/context/LibraryContext';
|
||||||
|
@ -15,7 +13,6 @@ import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
|
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
|
||||||
import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
|
import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
|
||||||
import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
|
import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
import { prompts } from '@/utils/labels';
|
import { prompts } from '@/utils/labels';
|
||||||
|
|
||||||
import FormCreateCst from '../DlgCreateCst/FormCreateCst';
|
import FormCreateCst from '../DlgCreateCst/FormCreateCst';
|
||||||
|
@ -165,14 +162,8 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
|
||||||
canSubmit={validated}
|
canSubmit={validated}
|
||||||
beforeSubmit={handlePrompt}
|
beforeSubmit={handlePrompt}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
|
helpTopic={HelpTopic.RSL_TEMPLATES}
|
||||||
>
|
>
|
||||||
<Overlay position='top-0 right-[5.9rem]'>
|
|
||||||
<BadgeHelp
|
|
||||||
topic={HelpTopic.RSL_TEMPLATES}
|
|
||||||
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
|
|
||||||
offset={12}
|
|
||||||
/>
|
|
||||||
</Overlay>
|
|
||||||
<Tabs
|
<Tabs
|
||||||
selectedTabClassName='clr-selected'
|
selectedTabClassName='clr-selected'
|
||||||
className='flex flex-col'
|
className='flex flex-col'
|
||||||
|
|
|
@ -4,15 +4,12 @@ import clsx from 'clsx';
|
||||||
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
||||||
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import Modal from '@/components/ui/Modal';
|
import Modal from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
|
||||||
import TabLabel from '@/components/ui/TabLabel';
|
import TabLabel from '@/components/ui/TabLabel';
|
||||||
import { useLibrary } from '@/context/LibraryContext';
|
import { useLibrary } from '@/context/LibraryContext';
|
||||||
import { LibraryItemID } from '@/models/library';
|
import { LibraryItemID } from '@/models/library';
|
||||||
import { HelpTopic } from '@/models/miscellaneous';
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { IOperationCreateData, IOperationSchema, OperationID, OperationType } from '@/models/oss';
|
import { IOperationCreateData, IOperationSchema, OperationID, OperationType } from '@/models/oss';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
import { describeOperationType, labelOperationType } from '@/utils/labels';
|
import { describeOperationType, labelOperationType } from '@/utils/labels';
|
||||||
|
|
||||||
import TabInputOperation from './TabInputOperation';
|
import TabInputOperation from './TabInputOperation';
|
||||||
|
@ -148,11 +145,8 @@ function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCre
|
||||||
canSubmit={isValid}
|
canSubmit={isValid}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className='w-[40rem] px-6 h-[32rem]'
|
className='w-[40rem] px-6 h-[32rem]'
|
||||||
|
helpTopic={HelpTopic.CC_OSS}
|
||||||
>
|
>
|
||||||
<Overlay position='top-0 right-0'>
|
|
||||||
<BadgeHelp topic={HelpTopic.CC_OSS} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} offset={14} />
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
selectedTabClassName='clr-selected'
|
selectedTabClassName='clr-selected'
|
||||||
className='flex flex-col pt-2'
|
className='flex flex-col pt-2'
|
||||||
|
|
|
@ -3,14 +3,11 @@
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import Checkbox from '@/components/ui/Checkbox';
|
import Checkbox from '@/components/ui/Checkbox';
|
||||||
import Modal, { ModalProps } from '@/components/ui/Modal';
|
import Modal, { ModalProps } from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
|
||||||
import TextInput from '@/components/ui/TextInput';
|
import TextInput from '@/components/ui/TextInput';
|
||||||
import { HelpTopic } from '@/models/miscellaneous';
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { IOperation } from '@/models/oss';
|
import { IOperation } from '@/models/oss';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
|
|
||||||
interface DlgDeleteOperationProps extends Pick<ModalProps, 'hideWindow'> {
|
interface DlgDeleteOperationProps extends Pick<ModalProps, 'hideWindow'> {
|
||||||
target: IOperation;
|
target: IOperation;
|
||||||
|
@ -34,15 +31,8 @@ function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperation
|
||||||
canSubmit={true}
|
canSubmit={true}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className={clsx('w-[35rem]', 'pb-3 px-6 cc-column', 'select-none')}
|
className={clsx('w-[35rem]', 'pb-3 px-6 cc-column', 'select-none')}
|
||||||
|
helpTopic={HelpTopic.CC_PROPAGATION}
|
||||||
>
|
>
|
||||||
<Overlay position='top-[-2rem] right-[4rem]'>
|
|
||||||
<BadgeHelp
|
|
||||||
topic={HelpTopic.CC_PROPAGATION}
|
|
||||||
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
|
|
||||||
offset={14}
|
|
||||||
/>
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
<TextInput disabled dense noBorder id='operation_alias' label='Операция' value={target.alias} />
|
<TextInput disabled dense noBorder id='operation_alias' label='Операция' value={target.alias} />
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label='Сохранить наследованные конституенты'
|
label='Сохранить наследованные конституенты'
|
||||||
|
|
|
@ -4,9 +4,7 @@ import clsx from 'clsx';
|
||||||
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
|
||||||
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import Modal from '@/components/ui/Modal';
|
import Modal from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
|
||||||
import TabLabel from '@/components/ui/TabLabel';
|
import TabLabel from '@/components/ui/TabLabel';
|
||||||
import useRSFormCache from '@/hooks/useRSFormCache';
|
import useRSFormCache from '@/hooks/useRSFormCache';
|
||||||
import { HelpTopic } from '@/models/miscellaneous';
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
|
@ -19,7 +17,6 @@ import {
|
||||||
OperationType
|
OperationType
|
||||||
} from '@/models/oss';
|
} from '@/models/oss';
|
||||||
import { SubstitutionValidator } from '@/models/ossAPI';
|
import { SubstitutionValidator } from '@/models/ossAPI';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
|
|
||||||
import TabArguments from './TabArguments';
|
import TabArguments from './TabArguments';
|
||||||
import TabOperation from './TabOperation';
|
import TabOperation from './TabOperation';
|
||||||
|
@ -195,11 +192,9 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
|
||||||
canSubmit={canSubmit}
|
canSubmit={canSubmit}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className='w-[40rem] px-6 h-[32rem]'
|
className='w-[40rem] px-6 h-[32rem]'
|
||||||
|
helpTopic={HelpTopic.UI_SUBSTITUTIONS}
|
||||||
|
hideHelpWhen={() => activeTab !== TabID.SUBSTITUTION}
|
||||||
>
|
>
|
||||||
<Overlay position='top-0 right-0'>
|
|
||||||
<BadgeHelp topic={HelpTopic.CC_OSS} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} offset={14} />
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
selectedTabClassName='clr-selected'
|
selectedTabClassName='clr-selected'
|
||||||
className='flex flex-col'
|
className='flex flex-col'
|
||||||
|
|
|
@ -4,14 +4,11 @@ import clsx from 'clsx';
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
import { TabList, TabPanel, Tabs } from 'react-tabs';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import Modal from '@/components/ui/Modal';
|
import Modal from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
|
||||||
import TabLabel from '@/components/ui/TabLabel';
|
import TabLabel from '@/components/ui/TabLabel';
|
||||||
import { ReferenceType } from '@/models/language';
|
import { ReferenceType } from '@/models/language';
|
||||||
import { HelpTopic } from '@/models/miscellaneous';
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { IRSForm } from '@/models/rsform';
|
import { IRSForm } from '@/models/rsform';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
import { labelReferenceType } from '@/utils/labels';
|
import { labelReferenceType } from '@/utils/labels';
|
||||||
|
|
||||||
import TabEntityReference from './TabEntityReference';
|
import TabEntityReference from './TabEntityReference';
|
||||||
|
@ -71,15 +68,8 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
|
||||||
canSubmit={isValid}
|
canSubmit={isValid}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className='w-[40rem] px-6 h-[32rem]'
|
className='w-[40rem] px-6 h-[32rem]'
|
||||||
|
helpTopic={HelpTopic.TERM_CONTROL}
|
||||||
>
|
>
|
||||||
<Overlay position='top-0 right-0'>
|
|
||||||
<BadgeHelp
|
|
||||||
topic={HelpTopic.TERM_CONTROL}
|
|
||||||
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
|
|
||||||
offset={14}
|
|
||||||
/>
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
selectedTabClassName='clr-selected'
|
selectedTabClassName='clr-selected'
|
||||||
className='flex flex-col'
|
className='flex flex-col'
|
||||||
|
|
|
@ -4,19 +4,16 @@ import clsx from 'clsx';
|
||||||
import { useLayoutEffect, useState } from 'react';
|
import { useLayoutEffect, useState } from 'react';
|
||||||
|
|
||||||
import { IconAccept, IconMoveDown, IconMoveLeft, IconMoveRight, IconRemove } from '@/components/Icons';
|
import { IconAccept, IconMoveDown, IconMoveLeft, IconMoveRight, IconRemove } from '@/components/Icons';
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import SelectMultiGrammeme from '@/components/select/SelectMultiGrammeme';
|
import SelectMultiGrammeme from '@/components/select/SelectMultiGrammeme';
|
||||||
import Label from '@/components/ui/Label';
|
import Label from '@/components/ui/Label';
|
||||||
import MiniButton from '@/components/ui/MiniButton';
|
import MiniButton from '@/components/ui/MiniButton';
|
||||||
import Modal from '@/components/ui/Modal';
|
import Modal from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
|
||||||
import TextArea from '@/components/ui/TextArea';
|
import TextArea from '@/components/ui/TextArea';
|
||||||
import useConceptText from '@/hooks/useConceptText';
|
import useConceptText from '@/hooks/useConceptText';
|
||||||
import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/language';
|
import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/language';
|
||||||
import { parseGrammemes, wordFormEquals } from '@/models/languageAPI';
|
import { parseGrammemes, wordFormEquals } from '@/models/languageAPI';
|
||||||
import { HelpTopic } from '@/models/miscellaneous';
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { IConstituenta, TermForm } from '@/models/rsform';
|
import { IConstituenta, TermForm } from '@/models/rsform';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
import { prompts } from '@/utils/labels';
|
import { prompts } from '@/utils/labels';
|
||||||
import { IGrammemeOption, SelectorGrammemes, SelectorGrammemesList } from '@/utils/selectors';
|
import { IGrammemeOption, SelectorGrammemes, SelectorGrammemesList } from '@/utils/selectors';
|
||||||
|
|
||||||
|
@ -130,15 +127,8 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
|
||||||
submitText='Сохранить'
|
submitText='Сохранить'
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className='flex flex-col w-[40rem] px-6'
|
className='flex flex-col w-[40rem] px-6'
|
||||||
|
helpTopic={HelpTopic.TERM_CONTROL}
|
||||||
>
|
>
|
||||||
<Overlay position='top-[-0.2rem] left-[8rem]'>
|
|
||||||
<BadgeHelp
|
|
||||||
topic={HelpTopic.TERM_CONTROL}
|
|
||||||
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
|
|
||||||
offset={3}
|
|
||||||
/>
|
|
||||||
</Overlay>
|
|
||||||
|
|
||||||
<TextArea
|
<TextArea
|
||||||
disabled
|
disabled
|
||||||
spellCheck
|
spellCheck
|
||||||
|
|
|
@ -12,6 +12,7 @@ import DataLoader from '@/components/wrap/DataLoader';
|
||||||
import { useLibrary } from '@/context/LibraryContext';
|
import { useLibrary } from '@/context/LibraryContext';
|
||||||
import useRSFormDetails from '@/hooks/useRSFormDetails';
|
import useRSFormDetails from '@/hooks/useRSFormDetails';
|
||||||
import { ILibraryItem, LibraryItemID } from '@/models/library';
|
import { ILibraryItem, LibraryItemID } from '@/models/library';
|
||||||
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { ICstRelocateData, IOperation, IOperationSchema } from '@/models/oss';
|
import { ICstRelocateData, IOperation, IOperationSchema } from '@/models/oss';
|
||||||
import { getRelocateCandidates } from '@/models/ossAPI';
|
import { getRelocateCandidates } from '@/models/ossAPI';
|
||||||
import { ConstituentaID } from '@/models/rsform';
|
import { ConstituentaID } from '@/models/rsform';
|
||||||
|
@ -85,12 +86,13 @@ function DlgRelocateConstituents({ oss, hideWindow, initialTarget, onSubmit }: D
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
header='Перемещение конституент'
|
header='Перенос конституент'
|
||||||
submitText='Переместить'
|
submitText='Переместить'
|
||||||
hideWindow={hideWindow}
|
hideWindow={hideWindow}
|
||||||
canSubmit={isValid}
|
canSubmit={isValid}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className={clsx('w-[40rem] h-[33rem]', 'py-3 px-6')}
|
className={clsx('w-[40rem] h-[33rem]', 'py-3 px-6')}
|
||||||
|
helpTopic={HelpTopic.UI_RELOCATE_CST}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col border'>
|
<div className='flex flex-col border'>
|
||||||
<div className='flex gap-1 items-center clr-input border-b rounded-t-md'>
|
<div className='flex gap-1 items-center clr-input border-b rounded-t-md'>
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useLayoutEffect, useState } from 'react';
|
import { useLayoutEffect, useState } from 'react';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import Modal, { ModalProps } from '@/components/ui/Modal';
|
import Modal, { ModalProps } from '@/components/ui/Modal';
|
||||||
import SelectSingle from '@/components/ui/SelectSingle';
|
import SelectSingle from '@/components/ui/SelectSingle';
|
||||||
import TextInput from '@/components/ui/TextInput';
|
import TextInput from '@/components/ui/TextInput';
|
||||||
|
@ -12,7 +11,6 @@ import usePartialUpdate from '@/hooks/usePartialUpdate';
|
||||||
import { HelpTopic } from '@/models/miscellaneous';
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { CstType, ICstRenameData } from '@/models/rsform';
|
import { CstType, ICstRenameData } from '@/models/rsform';
|
||||||
import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
|
import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
|
||||||
import { PARAMETER } from '@/utils/constants';
|
|
||||||
import { labelCstType } from '@/utils/labels';
|
import { labelCstType } from '@/utils/labels';
|
||||||
import { SelectorCstType } from '@/utils/selectors';
|
import { SelectorCstType } from '@/utils/selectors';
|
||||||
|
|
||||||
|
@ -48,6 +46,7 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
|
||||||
canSubmit={validated}
|
canSubmit={validated}
|
||||||
onSubmit={() => onRename(cstData)}
|
onSubmit={() => onRename(cstData)}
|
||||||
className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center ')}
|
className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center ')}
|
||||||
|
helpTopic={HelpTopic.CC_CONSTITUENTA}
|
||||||
>
|
>
|
||||||
<SelectSingle
|
<SelectSingle
|
||||||
id='dlg_cst_type'
|
id='dlg_cst_type'
|
||||||
|
@ -70,11 +69,6 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
|
||||||
value={cstData.alias}
|
value={cstData.alias}
|
||||||
onChange={event => updateData({ alias: event.target.value })}
|
onChange={event => updateData({ alias: event.target.value })}
|
||||||
/>
|
/>
|
||||||
<BadgeHelp
|
|
||||||
topic={HelpTopic.CC_CONSTITUENTA}
|
|
||||||
offset={16}
|
|
||||||
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
|
|
||||||
/>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
import { useCallback, useMemo, useState } from 'react';
|
import { useCallback, useMemo, useState } from 'react';
|
||||||
|
|
||||||
import BadgeHelp from '@/components/info/BadgeHelp';
|
|
||||||
import GraphUI, { GraphEdge, GraphNode } from '@/components/ui/GraphUI';
|
import GraphUI, { GraphEdge, GraphNode } from '@/components/ui/GraphUI';
|
||||||
import Modal, { ModalProps } from '@/components/ui/Modal';
|
import Modal, { ModalProps } from '@/components/ui/Modal';
|
||||||
import Overlay from '@/components/ui/Overlay';
|
import Overlay from '@/components/ui/Overlay';
|
||||||
|
@ -11,7 +10,7 @@ import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { SyntaxTree } from '@/models/rslang';
|
import { SyntaxTree } from '@/models/rslang';
|
||||||
import { graphDarkT, graphLightT } from '@/styling/color';
|
import { graphDarkT, graphLightT } from '@/styling/color';
|
||||||
import { colorBgSyntaxTree } from '@/styling/color';
|
import { colorBgSyntaxTree } from '@/styling/color';
|
||||||
import { PARAMETER, resources } from '@/utils/constants';
|
import { resources } from '@/utils/constants';
|
||||||
import { labelSyntaxTree } from '@/utils/labels';
|
import { labelSyntaxTree } from '@/utils/labels';
|
||||||
|
|
||||||
interface DlgShowASTProps extends Pick<ModalProps, 'hideWindow'> {
|
interface DlgShowASTProps extends Pick<ModalProps, 'hideWindow'> {
|
||||||
|
@ -57,10 +56,8 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
|
||||||
readonly
|
readonly
|
||||||
hideWindow={hideWindow}
|
hideWindow={hideWindow}
|
||||||
className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
|
className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
|
||||||
|
helpTopic={HelpTopic.UI_FORMULA_TREE}
|
||||||
>
|
>
|
||||||
<Overlay position='left-[0.5rem] top-[0.25rem]'>
|
|
||||||
<BadgeHelp topic={HelpTopic.UI_FORMULA_TREE} className={PARAMETER.TOOLTIP_WIDTH} />
|
|
||||||
</Overlay>
|
|
||||||
<Overlay
|
<Overlay
|
||||||
position='top-2 right-1/2 translate-x-1/2'
|
position='top-2 right-1/2 translate-x-1/2'
|
||||||
className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
|
className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
|
||||||
|
|
||||||
import PickSubstitutions from '@/components/select/PickSubstitutions';
|
import PickSubstitutions from '@/components/select/PickSubstitutions';
|
||||||
import Modal, { ModalProps } from '@/components/ui/Modal';
|
import Modal, { ModalProps } from '@/components/ui/Modal';
|
||||||
|
import { HelpTopic } from '@/models/miscellaneous';
|
||||||
import { ICstSubstitute, ICstSubstituteData } from '@/models/oss';
|
import { ICstSubstitute, ICstSubstituteData } from '@/models/oss';
|
||||||
import { IRSForm } from '@/models/rsform';
|
import { IRSForm } from '@/models/rsform';
|
||||||
import { prefixes } from '@/utils/constants';
|
import { prefixes } from '@/utils/constants';
|
||||||
|
@ -35,6 +36,7 @@ function DlgSubstituteCst({ hideWindow, onSubstitute, schema }: DlgSubstituteCst
|
||||||
canSubmit={canSubmit}
|
canSubmit={canSubmit}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
className={clsx('w-[40rem]', 'px-6 pb-3')}
|
className={clsx('w-[40rem]', 'px-6 pb-3')}
|
||||||
|
helpTopic={HelpTopic.UI_SUBSTITUTIONS}
|
||||||
>
|
>
|
||||||
<PickSubstitutions
|
<PickSubstitutions
|
||||||
allowSelfSubstitution
|
allowSelfSubstitution
|
||||||
|
|
|
@ -74,6 +74,8 @@ export enum HelpTopic {
|
||||||
UI_CST_STATUS = 'ui-rsform-cst-status',
|
UI_CST_STATUS = 'ui-rsform-cst-status',
|
||||||
UI_CST_CLASS = 'ui-rsform-cst-class',
|
UI_CST_CLASS = 'ui-rsform-cst-class',
|
||||||
UI_OSS_GRAPH = 'ui-oss-graph',
|
UI_OSS_GRAPH = 'ui-oss-graph',
|
||||||
|
UI_SUBSTITUTIONS = 'ui-substitutions',
|
||||||
|
UI_RELOCATE_CST = 'ui-relocate-cst',
|
||||||
|
|
||||||
CONCEPTUAL = 'concept',
|
CONCEPTUAL = 'concept',
|
||||||
CC_SYSTEM = 'concept-rsform',
|
CC_SYSTEM = 'concept-rsform',
|
||||||
|
@ -122,6 +124,8 @@ export const topicParent = new Map<HelpTopic, HelpTopic>([
|
||||||
[HelpTopic.UI_CST_STATUS, HelpTopic.INTERFACE],
|
[HelpTopic.UI_CST_STATUS, HelpTopic.INTERFACE],
|
||||||
[HelpTopic.UI_CST_CLASS, HelpTopic.INTERFACE],
|
[HelpTopic.UI_CST_CLASS, HelpTopic.INTERFACE],
|
||||||
[HelpTopic.UI_OSS_GRAPH, HelpTopic.INTERFACE],
|
[HelpTopic.UI_OSS_GRAPH, HelpTopic.INTERFACE],
|
||||||
|
[HelpTopic.UI_SUBSTITUTIONS, HelpTopic.INTERFACE],
|
||||||
|
[HelpTopic.UI_RELOCATE_CST, HelpTopic.INTERFACE],
|
||||||
|
|
||||||
[HelpTopic.CONCEPTUAL, HelpTopic.CONCEPTUAL],
|
[HelpTopic.CONCEPTUAL, HelpTopic.CONCEPTUAL],
|
||||||
[HelpTopic.CC_SYSTEM, HelpTopic.CONCEPTUAL],
|
[HelpTopic.CC_SYSTEM, HelpTopic.CONCEPTUAL],
|
||||||
|
|
|
@ -31,11 +31,13 @@ import HelpCstStatus from './items/ui/HelpCstStatus';
|
||||||
import HelpFormulaTree from './items/ui/HelpFormulaTree';
|
import HelpFormulaTree from './items/ui/HelpFormulaTree';
|
||||||
import HelpLibrary from './items/ui/HelpLibrary';
|
import HelpLibrary from './items/ui/HelpLibrary';
|
||||||
import HelpOssGraph from './items/ui/HelpOssGraph';
|
import HelpOssGraph from './items/ui/HelpOssGraph';
|
||||||
|
import HelpRelocateCst from './items/ui/HelpRelocateCst';
|
||||||
import HelpRSCard from './items/ui/HelpRSCard';
|
import HelpRSCard from './items/ui/HelpRSCard';
|
||||||
import HelpRSEditor from './items/ui/HelpRSEditor';
|
import HelpRSEditor from './items/ui/HelpRSEditor';
|
||||||
import HelpRSGraphTerm from './items/ui/HelpRSGraphTerm';
|
import HelpRSGraphTerm from './items/ui/HelpRSGraphTerm';
|
||||||
import HelpRSList from './items/ui/HelpRSList';
|
import HelpRSList from './items/ui/HelpRSList';
|
||||||
import HelpRSMenu from './items/ui/HelpRSMenu';
|
import HelpRSMenu from './items/ui/HelpRSMenu';
|
||||||
|
import HelpSubstitutions from './items/ui/HelpSubstitutions';
|
||||||
|
|
||||||
// PDF Viewer setup
|
// PDF Viewer setup
|
||||||
const OFFSET_X_SMALL = 32;
|
const OFFSET_X_SMALL = 32;
|
||||||
|
@ -65,6 +67,8 @@ function TopicPage({ topic }: TopicPageProps) {
|
||||||
if (topic === HelpTopic.UI_CST_STATUS) return <HelpCstStatus />;
|
if (topic === HelpTopic.UI_CST_STATUS) return <HelpCstStatus />;
|
||||||
if (topic === HelpTopic.UI_CST_CLASS) return <HelpCstClass />;
|
if (topic === HelpTopic.UI_CST_CLASS) return <HelpCstClass />;
|
||||||
if (topic === HelpTopic.UI_OSS_GRAPH) return <HelpOssGraph />;
|
if (topic === HelpTopic.UI_OSS_GRAPH) return <HelpOssGraph />;
|
||||||
|
if (topic === HelpTopic.UI_SUBSTITUTIONS) return <HelpSubstitutions />;
|
||||||
|
if (topic === HelpTopic.UI_RELOCATE_CST) return <HelpRelocateCst />;
|
||||||
|
|
||||||
if (topic === HelpTopic.CONCEPTUAL) return <HelpConcept />;
|
if (topic === HelpTopic.CONCEPTUAL) return <HelpConcept />;
|
||||||
if (topic === HelpTopic.CC_SYSTEM) return <HelpConceptSystem />;
|
if (topic === HelpTopic.CC_SYSTEM) return <HelpConceptSystem />;
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
function HelpRelocateCst() {
|
||||||
|
return (
|
||||||
|
<div className='text-justify'>
|
||||||
|
<h1>Перенос конституент</h1>
|
||||||
|
<p>Раздел в разработке...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HelpRelocateCst;
|
|
@ -0,0 +1,10 @@
|
||||||
|
function HelpSubstitutions() {
|
||||||
|
return (
|
||||||
|
<div className='text-justify'>
|
||||||
|
<h1>Таблица отождествлений</h1>
|
||||||
|
<p>Раздел в разработке...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HelpSubstitutions;
|
|
@ -174,7 +174,7 @@ function NodeContextMenu({
|
||||||
{controller.isMutable && operation.result ? (
|
{controller.isMutable && operation.result ? (
|
||||||
<DropdownButton
|
<DropdownButton
|
||||||
text='Конституенты'
|
text='Конституенты'
|
||||||
titleHtml='Перемещение конституент</br>между схемами'
|
titleHtml='Перенос конституент</br>между схемами'
|
||||||
icon={<IconChild size='1rem' className='icon-green' />}
|
icon={<IconChild size='1rem' className='icon-green' />}
|
||||||
disabled={controller.isProcessing}
|
disabled={controller.isProcessing}
|
||||||
onClick={handleRelocateConstituents}
|
onClick={handleRelocateConstituents}
|
||||||
|
|
|
@ -135,7 +135,7 @@ function MenuOssTabs({ onDestroy }: MenuOssTabsProps) {
|
||||||
<Dropdown isOpen={editMenu.isOpen}>
|
<Dropdown isOpen={editMenu.isOpen}>
|
||||||
<DropdownButton
|
<DropdownButton
|
||||||
text='Конституенты'
|
text='Конституенты'
|
||||||
titleHtml='Перемещение конституент</br>между схемами'
|
titleHtml='Перенос конституент</br>между схемами'
|
||||||
icon={<IconChild size='1rem' className='icon-green' />}
|
icon={<IconChild size='1rem' className='icon-green' />}
|
||||||
disabled={controller.isProcessing}
|
disabled={controller.isProcessing}
|
||||||
onClick={handleRelocate}
|
onClick={handleRelocate}
|
||||||
|
|
|
@ -377,6 +377,8 @@ export function labelHelpTopic(topic: HelpTopic): string {
|
||||||
case HelpTopic.UI_CST_STATUS: return 'Статус конституенты';
|
case HelpTopic.UI_CST_STATUS: return 'Статус конституенты';
|
||||||
case HelpTopic.UI_CST_CLASS: return 'Класс конституенты';
|
case HelpTopic.UI_CST_CLASS: return 'Класс конституенты';
|
||||||
case HelpTopic.UI_OSS_GRAPH: return 'Граф синтеза';
|
case HelpTopic.UI_OSS_GRAPH: return 'Граф синтеза';
|
||||||
|
case HelpTopic.UI_SUBSTITUTIONS:return 'Отождествления';
|
||||||
|
case HelpTopic.UI_RELOCATE_CST: return 'Перенос конституент';
|
||||||
|
|
||||||
case HelpTopic.CONCEPTUAL: return '♨️ Концептуализация';
|
case HelpTopic.CONCEPTUAL: return '♨️ Концептуализация';
|
||||||
case HelpTopic.CC_SYSTEM: return 'Система определений';
|
case HelpTopic.CC_SYSTEM: return 'Система определений';
|
||||||
|
@ -428,6 +430,8 @@ export function describeHelpTopic(topic: HelpTopic): string {
|
||||||
case HelpTopic.UI_CST_STATUS: return 'нотация статуса конституенты';
|
case HelpTopic.UI_CST_STATUS: return 'нотация статуса конституенты';
|
||||||
case HelpTopic.UI_CST_CLASS: return 'нотация класса конституенты';
|
case HelpTopic.UI_CST_CLASS: return 'нотация класса конституенты';
|
||||||
case HelpTopic.UI_OSS_GRAPH: return 'графическая форма <br/>операционной схемы синтеза';
|
case HelpTopic.UI_OSS_GRAPH: return 'графическая форма <br/>операционной схемы синтеза';
|
||||||
|
case HelpTopic.UI_SUBSTITUTIONS:return 'таблица отождествлений конституент';
|
||||||
|
case HelpTopic.UI_RELOCATE_CST: return 'перенос конституент<br/>в рамках ОСС';
|
||||||
|
|
||||||
case HelpTopic.CONCEPTUAL: return 'основы концептуализации';
|
case HelpTopic.CONCEPTUAL: return 'основы концептуализации';
|
||||||
case HelpTopic.CC_SYSTEM: return 'концептуальная схема <br/>как система понятий';
|
case HelpTopic.CC_SYSTEM: return 'концептуальная схема <br/>как система понятий';
|
||||||
|
@ -435,7 +439,7 @@ export function describeHelpTopic(topic: HelpTopic): string {
|
||||||
case HelpTopic.CC_RELATIONS: return 'отношения между конституентами';
|
case HelpTopic.CC_RELATIONS: return 'отношения между конституентами';
|
||||||
case HelpTopic.CC_SYNTHESIS: return 'операция синтеза концептуальных схем';
|
case HelpTopic.CC_SYNTHESIS: return 'операция синтеза концептуальных схем';
|
||||||
case HelpTopic.CC_OSS: return 'операционная схема синтеза';
|
case HelpTopic.CC_OSS: return 'операционная схема синтеза';
|
||||||
case HelpTopic.CC_PROPAGATION: return 'протаскивание изменений в ОСС';
|
case HelpTopic.CC_PROPAGATION: return 'сквозные изменения в ОСС';
|
||||||
|
|
||||||
case HelpTopic.RSLANG: return 'экспликация и язык родов структур';
|
case HelpTopic.RSLANG: return 'экспликация и язык родов структур';
|
||||||
case HelpTopic.RSL_TYPES: return 'система типов в <br/>родоструктурной экспликации';
|
case HelpTopic.RSL_TYPES: return 'система типов в <br/>родоструктурной экспликации';
|
||||||
|
|
Loading…
Reference in New Issue
Block a user