Fix UI processing issues

This commit is contained in:
IRBorisov 2024-03-08 19:37:36 +03:00
parent 953a8d4700
commit 292f695bb8
22 changed files with 98 additions and 82 deletions

View File

@ -19,7 +19,7 @@ function UserMenu() {
{!user ? (
<NavigationButton
title='Перейти на страницу логина'
icon={<InDoorIcon size='1.5rem' className='clr-text-primary' />}
icon={<InDoorIcon size='1.5rem' className='icon-primary' />}
onClick={navigateLogin}
/>
) : null}

View File

@ -16,7 +16,7 @@ interface HelpButtonProps extends CProps.Styling {
function HelpButton({ topic, ...restProps }: HelpButtonProps) {
return (
<div id={`help-${topic}`} className='p-1'>
<BiInfoCircle size='1.25rem' className='clr-text-primary' />
<BiInfoCircle size='1.25rem' className='icon-primary' />
<Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
<div className='relative' onClick={event => event.stopPropagation()}>
<div className='absolute right-0 text-sm top-[0.4rem] clr-input'>

View File

@ -110,7 +110,14 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
header: 'Типизация',
enableHiding: true,
cell: props => (
<div className={clsx('min-w-[9.3rem] max-w-[9.3rem]', 'text-sm break-words')}>{props.getValue()}</div>
<div
className={clsx(
'min-w-[9.3rem] max-w-[9.3rem]', // prettier: split lines
'text-sm break-words'
)}
>
{props.getValue()}
</div>
)
}),
argumentsHelper.display({
@ -123,7 +130,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
{props.row.original.value ? (
<MiniButton
title='Очистить значение'
icon={<BiX size='0.75rem' className='clr-text-red' />}
icon={<BiX size='0.75rem' className='icon-red' />}
noHover
onClick={() => handleClearArgument(props.row.original)}
/>
@ -150,7 +157,13 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
<DataTable
dense
noFooter
className={clsx('max-h-[5.8rem] min-h-[5.8rem]', 'overflow-y-auto', 'text-sm', 'border', 'select-none')}
className={clsx(
'max-h-[5.8rem] min-h-[5.8rem]', // prettier: split lines
'overflow-y-auto',
'text-sm',
'border',
'select-none'
)}
data={state.arguments}
columns={columns}
conditionalRowStyles={conditionalRowStyles}
@ -158,7 +171,13 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
onRowClicked={handleSelectArgument}
/>
<div className={clsx('my-4', 'flex gap-2 justify-center items-center', 'select-none')}>
<div
className={clsx(
'my-4', // prettier: split lines
'flex gap-2 justify-center items-center',
'select-none'
)}
>
<span
title='Выберите аргумент из списка сверху и значение из списка снизу'
className='font-semibold text-center'
@ -175,7 +194,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
<div className='flex'>
<MiniButton
title='Подставить значение аргумента'
icon={<BiCheck size='1.25rem' className={!!argumentValue && !!selectedArgument ? 'clr-text-green' : ''} />}
icon={<BiCheck size='1.25rem' className='icon-green' />}
disabled={!argumentValue || !selectedArgument}
onClick={() => handleAssignArgument(selectedArgument!, argumentValue)}
/>
@ -183,12 +202,12 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
title='Откатить значение'
disabled={!isModified}
onClick={handleReset}
icon={<BiRefresh size='1.25rem' className={isModified ? 'clr-text-primary' : ''} />}
icon={<BiRefresh size='1.25rem' className='icon-primary' />}
/>
<MiniButton
title='Очистить значение аргумента'
disabled={!selectedClearable}
icon={<BiX size='1.25rem' className={selectedClearable ? 'clr-text-red' : ''} />}
icon={<BiX size='1.25rem' className='icon-red' />}
onClick={() => (selectedArgument ? handleClearArgument(selectedArgument) : undefined)}
/>
</div>

View File

@ -158,14 +158,14 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
<MiniButton
noHover
title='Определить граммемы'
icon={<BiRightArrow size='1.25rem' className={inputText ? 'clr-text-primary' : ''} />}
icon={<BiRightArrow size='1.25rem' className='icon-primary' />}
disabled={textProcessor.loading || !inputText}
onClick={handleParse}
/>
<MiniButton
noHover
title='Генерировать словоформу'
icon={<BiLeftArrow size='1.25rem' className={inputGrams.length !== 0 ? 'clr-text-primary' : ''} />}
icon={<BiLeftArrow size='1.25rem' className='icon-primary' />}
disabled={textProcessor.loading || inputGrams.length == 0}
onClick={handleInflect}
/>
@ -182,14 +182,14 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
<MiniButton
noHover
title='Внести словоформу'
icon={<BiCheck size='1.25rem' className={inputText && inputGrams.length !== 0 ? 'clr-text-green' : ''} />}
icon={<BiCheck size='1.25rem' className='icon-green' />}
disabled={textProcessor.loading || !inputText || inputGrams.length == 0}
onClick={handleAddForm}
/>
<MiniButton
noHover
title='Генерировать стандартные словоформы'
icon={<BiChevronsDown size='1.25rem' className={inputText ? 'clr-text-primary' : ''} />}
icon={<BiChevronsDown size='1.25rem' className='icon-primary' />}
disabled={textProcessor.loading || !inputText}
onClick={handleGenerateLexeme}
/>
@ -200,7 +200,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
<MiniButton
noHover
title='Сбросить все словоформы'
icon={<BiX size='1rem' className={forms.length !== 0 ? 'clr-text-red' : ''} />}
icon={<BiX size='1rem' className='icon-red' />}
disabled={textProcessor.loading || forms.length === 0}
onClick={handleResetAll}
/>

View File

@ -50,9 +50,9 @@ function DlgSubstituteCst({ hideWindow, onSubstitute }: DlgSubstituteCstProps) {
<Label text='Удаляемая конституента' />
<ConstituentaSelector items={schema?.items} value={original} onSelectValue={setOriginal} />
</FlexColumn>
<div className=''>
<LuReplace size='3rem' className='clr-text-primary' />
</div>
<LuReplace size='3rem' className='icon-primary' />
<FlexColumn>
<Label text='Подставляемая конституента' />
<ConstituentaSelector items={schema?.items} value={substitution} onSelectValue={setSubstitution} />

View File

@ -93,7 +93,7 @@ function CreateRSFormPage() {
/>
<MiniButton
title='Загрузить из Экстеор'
icon={<BiDownload size='1.25rem' className='clr-text-primary' />}
icon={<BiDownload size='1.25rem' className='icon-primary' />}
onClick={() => inputRef.current?.click()}
/>
</Overlay>

View File

@ -55,7 +55,7 @@ function ConstituentaToolbar({
/>
<MiniButton
title='Клонировать конституенту [Alt + V]'
disabled={!isMutable}
disabled={!isMutable || isModified}
onClick={onClone}
icon={<BiDuplicate size='1.25rem' className='icon-green' />}
/>

View File

@ -7,16 +7,17 @@ import { IConstituenta } from '@/models/rsform';
interface ControlsOverlayProps {
constituenta?: IConstituenta;
isMutable?: boolean;
isMutable: boolean;
processing: boolean;
onRename: () => void;
onEditTerm: () => void;
}
function ControlsOverlay({ constituenta, isMutable, onRename, onEditTerm }: ControlsOverlayProps) {
function ControlsOverlay({ constituenta, isMutable, processing, onRename, onEditTerm }: ControlsOverlayProps) {
return (
<Overlay position='top-1 left-[4.1rem]' className='flex select-none'>
{isMutable ? (
{isMutable || processing ? (
<MiniButton
title={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
noHover
@ -28,13 +29,13 @@ function ControlsOverlay({ constituenta, isMutable, onRename, onEditTerm }: Cont
className={clsx(
'pt-1 pl-[1.375rem]', // prettier: split lines
'text-sm font-medium whitespace-nowrap',
!isMutable && 'pl-[2.8rem]'
!isMutable && !processing && 'pl-[2.8rem]'
)}
>
<span>Имя </span>
<span className='ml-1'>{constituenta?.alias ?? ''}</span>
</div>
{isMutable ? (
{isMutable || processing ? (
<MiniButton
noHover
title='Переименовать конституенту'

View File

@ -76,7 +76,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
return (
<>
{controller.isContentEditable ? (
{controller.isContentEditable || controller.isProcessing ? (
<ConstituentaToolbar
isMutable={!disabled}
isModified={isModified}

View File

@ -22,7 +22,7 @@ import ControlsOverlay from './ControlsOverlay';
export const ROW_SIZE_IN_CHARACTERS = 70;
interface FormConstituentaProps {
isMutable?: boolean;
isMutable: boolean;
showList: boolean;
id?: string;
@ -114,7 +114,13 @@ function FormConstituenta({
return (
<>
<ControlsOverlay isMutable={isMutable} constituenta={constituenta} onEditTerm={onEditTerm} onRename={onRename} />
<ControlsOverlay
isMutable={isMutable}
processing={processing}
constituenta={constituenta}
onEditTerm={onEditTerm}
onRename={onRename}
/>
<form
id={id}
className={clsx('mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1', classnames.flex_col)}
@ -174,7 +180,7 @@ function FormConstituenta({
rows={convention.length > ROW_SIZE_IN_CHARACTERS ? 3 : 2}
onChange={event => setConvention(event.target.value)}
/>
{isMutable ? (
{isMutable || processing ? (
<SubmitButton
text='Сохранить изменения'
className='self-center'

View File

@ -159,19 +159,19 @@ function EditorRSExpression({
noHover
title='Отображение специальной клавиатуры'
onClick={() => setShowControls(prev => !prev)}
icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'clr-text-primary' : ''} />}
icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'icon-primary' : ''} />}
/>
<MiniButton
noHover
title='Отображение списка конституент'
onClick={onToggleList}
icon={<BiListUl size='1.25rem' className={showList ? 'clr-text-primary' : ''} />}
icon={<BiListUl size='1.25rem' className={showList ? 'icon-primary' : ''} />}
/>
<MiniButton
noHover
title='Дерево разбора выражения'
onClick={handleShowAST}
icon={<RiNodeTree size='1.25rem' className='clr-text-primary' />}
icon={<RiNodeTree size='1.25rem' className='icon-primary' />}
/>
</Overlay>

View File

@ -20,7 +20,7 @@ interface EditorRSFormProps {
}
function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProps) {
const { schema, isClaimable, isSubscribed, processing } = useRSForm();
const { schema, isClaimable, isSubscribed } = useRSForm();
const { user } = useAuth();
function initiateSubmit() {
@ -42,7 +42,6 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
return (
<>
<RSFormToolbar
processing={processing}
subscribed={isSubscribed}
modified={isModified}
claimable={isClaimable}

View File

@ -117,7 +117,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
onChange={event => setAlias(event.target.value)}
/>
<div className='flex flex-col'>
{controller.isMutable ? (
{controller.isMutable || controller.isProcessing ? (
<Overlay position='top-[-0.25rem] right-[-0.25rem] flex'>
<MiniButton
noHover
@ -166,12 +166,12 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
setValue={value => setCanonical(value)}
/>
</div>
{controller.isContentEditable ? (
{controller.isContentEditable || controller.isProcessing ? (
<SubmitButton
text='Сохранить изменения'
className='self-center'
loading={processing}
disabled={!isModified}
disabled={!isModified || controller.isProcessing}
icon={<FiSave size='1.25rem' />}
/>
) : null}

View File

@ -17,25 +17,16 @@ interface RSFormToolbarProps {
subscribed: boolean;
anonymous: boolean;
claimable: boolean;
processing: boolean;
onSubmit: () => void;
onDestroy: () => void;
}
function RSFormToolbar({
modified,
anonymous,
subscribed,
claimable,
processing,
onSubmit,
onDestroy
}: RSFormToolbarProps) {
function RSFormToolbar({ modified, anonymous, subscribed, claimable, onSubmit, onDestroy }: RSFormToolbarProps) {
const controller = useRSEdit();
const canSave = useMemo(() => modified && controller.isMutable, [modified, controller.isMutable]);
return (
<Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
{controller.isContentEditable ? (
{controller.isContentEditable || controller.isProcessing ? (
<MiniButton
title='Сохранить изменения [Ctrl + S]'
disabled={!canSave}
@ -56,7 +47,7 @@ function RSFormToolbar({
{!anonymous ? (
<MiniButton
title={`Отслеживание ${subscribed ? 'включено' : 'выключено'}`}
disabled={processing}
disabled={controller.isProcessing}
icon={
subscribed ? (
<FiBell size='1.25rem' className='icon-primary' />
@ -71,11 +62,11 @@ function RSFormToolbar({
<MiniButton
title='Стать владельцем'
icon={<LuCrown size='1.25rem' className='icon-green' />}
disabled={processing}
disabled={controller.isProcessing}
onClick={controller.claim}
/>
) : null}
{controller.isContentEditable ? (
{controller.isContentEditable || controller.isProcessing ? (
<MiniButton
title='Удалить схему'
disabled={!controller.isMutable}

View File

@ -93,7 +93,7 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)
return (
<div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
{controller.isContentEditable ? (
{controller.isContentEditable || controller.isProcessing ? (
<SelectedCounter
totalCount={controller.schema?.stats?.count_all ?? 0}
selectedCount={selected.length}
@ -101,16 +101,18 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)
/>
) : null}
{controller.isContentEditable ? <RSListToolbar selectedCount={selected.length} /> : null}
{controller.isContentEditable || controller.isProcessing ? (
<RSListToolbar selectedCount={selected.length} />
) : null}
<div
className={clsx('border-b', {
'pt-[2.3rem]': controller.isContentEditable,
'relative top-[-1px]': !controller.isContentEditable
'pt-[2.3rem]': controller.isContentEditable || controller.isProcessing,
'relative top-[-1px]': !controller.isContentEditable && !controller.isProcessing
})}
/>
<RSTable
enableSelection={controller.isContentEditable}
enableSelection={controller.isContentEditable || controller.isProcessing}
items={controller.schema?.items}
selected={rowSelection}
setSelected={handleRowSelection}

View File

@ -30,31 +30,25 @@ function RSListToolbar({ selectedCount }: RSListToolbarProps) {
<Overlay position='top-1 right-1/2 translate-x-1/2' className='flex items-start'>
<MiniButton
title='Переместить вверх [Alt + вверх]'
icon={
<BiUpvote size='1.25rem' className={controller.isMutable && !nothingSelected ? 'clr-text-primary' : ''} />
}
icon={<BiUpvote size='1.25rem' className='icon-primary' />}
disabled={!controller.isMutable || nothingSelected}
onClick={controller.moveUp}
/>
<MiniButton
title='Переместить вниз [Alt + вниз]'
icon={
<BiDownvote size='1.25rem' className={controller.isMutable && !nothingSelected ? 'clr-text-primary' : ''} />
}
icon={<BiDownvote size='1.25rem' className='icon-primary' />}
disabled={!controller.isMutable || nothingSelected}
onClick={controller.moveDown}
/>
<MiniButton
title='Клонировать конституенту [Alt + V]'
icon={
<BiDuplicate size='1.25rem' className={controller.isMutable && selectedCount === 1 ? 'clr-text-green' : ''} />
}
icon={<BiDuplicate size='1.25rem' className='icon-green' />}
disabled={!controller.isMutable || selectedCount !== 1}
onClick={controller.cloneCst}
/>
<MiniButton
title='Добавить новую конституенту... [Alt + `]'
icon={<BiPlusCircle size='1.25rem' className={controller.isMutable ? 'clr-text-green' : ''} />}
icon={<BiPlusCircle size='1.25rem' className='icon-green' />}
disabled={!controller.isMutable}
onClick={() => controller.createCst(undefined, false)}
/>
@ -62,7 +56,7 @@ function RSListToolbar({ selectedCount }: RSListToolbarProps) {
<MiniButton
title='Добавить пустую конституенту'
hideTitle={insertMenu.isOpen}
icon={<BiDownArrowCircle size='1.25rem' className={controller.isMutable ? 'clr-text-green' : ''} />}
icon={<BiDownArrowCircle size='1.25rem' className='icon-green' />}
disabled={!controller.isMutable}
onClick={insertMenu.toggle}
/>
@ -79,7 +73,7 @@ function RSListToolbar({ selectedCount }: RSListToolbarProps) {
</div>
<MiniButton
title='Удалить выбранные [Delete]'
icon={<BiTrash size='1.25rem' className={controller.isMutable && !nothingSelected ? 'clr-text-red' : ''} />}
icon={<BiTrash size='1.25rem' className='icon-red' />}
disabled={!controller.isMutable || nothingSelected}
onClick={controller.deleteCst}
/>

View File

@ -195,7 +195,6 @@ function EditorTermGraph({ selected, setSelected, onOpenEdit }: EditorTermGraphP
/>
<GraphToolbar
isMutable={controller.isMutable}
nothingSelected={nothingSelected}
is3D={is3D}
orbit={orbit}

View File

@ -7,8 +7,9 @@ import MiniButton from '@/components/ui/MiniButton';
import Overlay from '@/components/ui/Overlay';
import { HelpTopic } from '@/models/miscellaneous';
import { useRSEdit } from '../RSEditContext';
interface GraphToolbarProps {
isMutable: boolean;
nothingSelected: boolean;
is3D: boolean;
@ -25,7 +26,6 @@ interface GraphToolbarProps {
}
function GraphToolbar({
isMutable,
nothingSelected,
is3D,
noText,
@ -37,26 +37,28 @@ function GraphToolbar({
onDelete,
onResetViewpoint
}: GraphToolbarProps) {
const controller = useRSEdit();
return (
<Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
<MiniButton
title='Настройки фильтрации узлов и связей'
icon={<BiFilterAlt size='1.25rem' className='clr-text-primary' />}
icon={<BiFilterAlt size='1.25rem' className='icon-primary' />}
onClick={showParamsDialog}
/>
<MiniButton
title={!noText ? 'Скрыть текст' : 'Отобразить текст'}
icon={
!noText ? (
<BiFontFamily size='1.25rem' className='clr-text-green' />
<BiFontFamily size='1.25rem' className='icon-green' />
) : (
<BiFont size='1.25rem' className='clr-text-primary' />
<BiFont size='1.25rem' className='icon-primary' />
)
}
onClick={toggleNoText}
/>
<MiniButton
icon={<BiCollapse size='1.25rem' className='clr-text-primary' />}
icon={<BiCollapse size='1.25rem' className='icon-primary' />}
title='Восстановить камеру'
onClick={onResetViewpoint}
/>
@ -66,18 +68,19 @@ function GraphToolbar({
disabled={!is3D}
onClick={toggleOrbit}
/>
{isMutable ? (
{controller.isMutable || controller.isProcessing ? (
<MiniButton
title='Новая конституента'
icon={<BiPlusCircle size='1.25rem' className='icon-green' />}
disabled={!controller.isMutable}
onClick={onCreate}
/>
) : null}
{isMutable ? (
{controller.isMutable || controller.isProcessing ? (
<MiniButton
title='Удалить выбранные'
icon={<BiTrash size='1.25rem' className='icon-red' />}
disabled={nothingSelected}
disabled={nothingSelected || !controller.isMutable}
onClick={onDelete}
/>
) : null}

View File

@ -45,6 +45,7 @@ interface IRSEditContext {
schema?: IRSForm;
isMutable: boolean;
isContentEditable: boolean;
isProcessing: boolean;
viewVersion: (version?: number) => void;
@ -429,6 +430,7 @@ export const RSEditState = ({
schema: model.schema,
isMutable,
isContentEditable,
isProcessing: model.processing,
viewVersion,

View File

@ -122,7 +122,7 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
<DropdownButton
disabled={!model.isClaimable && !model.isOwned}
text={model.isOwned ? 'Вы — владелец' : 'Стать владельцем'}
icon={<LuCrown size='1rem' className={model.isOwned ? 'clr-text-green' : ''} />}
icon={<LuCrown size='1rem' className='icon-green' />}
onClick={!model.isOwned && model.isClaimable ? handleClaimOwner : undefined}
/>
) : null}

View File

@ -75,7 +75,7 @@ function RegisterPage() {
<FlexColumn>
<div className='absolute'>
<Overlay id={globalIDs.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
<BiInfoCircle size='1.25rem' className='clr-text-primary' />
<BiInfoCircle size='1.25rem' className='icon-primary' />
</Overlay>
<Tooltip anchorSelect={`#${globalIDs.password_tooltip}`} offset={6}>
<p>- используйте уникальный пароль</p>

View File

@ -29,7 +29,7 @@ function UserTabs() {
return (
<DataLoader
id='profile-page' //
id='profile-page' // prettier: split lines
isLoading={loading}
error={error}
hasNoData={!user}
@ -41,9 +41,9 @@ function UserTabs() {
title='Показать/Скрыть отслеживаемые схемы'
icon={
showSubs ? (
<FiBell size='1.25rem' className='clr-text-primary' />
<FiBell size='1.25rem' className='icon-primary' />
) : (
<FiBellOff size='1.25rem' className='clr-text-primary' />
<FiBellOff size='1.25rem' className='icon-primary' />
)
}
onClick={() => setShowSubs(prev => !prev)}