F: Improve Help UI for dialogs

This commit is contained in:
Ivan 2024-10-29 12:06:43 +03:00
parent 9761cc2c9d
commit 8d5ce8b0cf
21 changed files with 78 additions and 86 deletions

View File

@ -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';

View File

@ -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()}>

View File

@ -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)}

View File

@ -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}

View File

@ -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'

View File

@ -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'

View File

@ -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='Сохранить наследованные конституенты'

View File

@ -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'

View File

@ -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'

View File

@ -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

View File

@ -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'>

View File

@ -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>
); );
} }

View File

@ -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'

View File

@ -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

View File

@ -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],

View File

@ -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 />;

View File

@ -0,0 +1,10 @@
function HelpRelocateCst() {
return (
<div className='text-justify'>
<h1>Перенос конституент</h1>
<p>Раздел в разработке...</p>
</div>
);
}
export default HelpRelocateCst;

View File

@ -0,0 +1,10 @@
function HelpSubstitutions() {
return (
<div className='text-justify'>
<h1>Таблица отождествлений</h1>
<p>Раздел в разработке...</p>
</div>
);
}
export default HelpSubstitutions;

View File

@ -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}

View File

@ -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}

View File

@ -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/>родоструктурной экспликации';