mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 21:10:38 +03:00
Change editor layout
This commit is contained in:
parent
5fab8522a6
commit
11dbf2bcd4
|
@ -136,8 +136,8 @@ function EditorConstituenta({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex w-full gap-2 mb-2 justify-stretch'>
|
<div className='flex w-full max-w-[1500px] gap-2 mt-2 justify-stretch'>
|
||||||
<form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2 border-y border-r'>
|
<form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2 border'>
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<div className='absolute top-0 right-0 flex items-start justify-between w-full'>
|
<div className='absolute top-0 right-0 flex items-start justify-between w-full'>
|
||||||
{activeCst &&
|
{activeCst &&
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { toast } from 'react-toastify';
|
||||||
|
|
||||||
import Button from '../../components/Common/Button';
|
import Button from '../../components/Common/Button';
|
||||||
import ConceptTooltip from '../../components/Common/ConceptTooltip';
|
import ConceptTooltip from '../../components/Common/ConceptTooltip';
|
||||||
import Divider from '../../components/Common/Divider';
|
|
||||||
import DataTable, { createColumnHelper, type RowSelectionState,VisibilityState } from '../../components/DataTable';
|
import DataTable, { createColumnHelper, type RowSelectionState,VisibilityState } from '../../components/DataTable';
|
||||||
import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
|
import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
|
||||||
import { ArrowDownIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, MeshIcon, SmallPlusIcon } from '../../components/Icons';
|
import { ArrowDownIcon, ArrowUpIcon, DumpBinIcon, HelpIcon, MeshIcon, SmallPlusIcon } from '../../components/Icons';
|
||||||
|
@ -21,6 +20,8 @@ const COLUMN_DEFINITION_HIDE_THRESHOLD = 1000;
|
||||||
const COLUMN_TYPE_HIDE_THRESHOLD = 1200;
|
const COLUMN_TYPE_HIDE_THRESHOLD = 1200;
|
||||||
const COLUMN_CONVENTION_HIDE_THRESHOLD = 1800;
|
const COLUMN_CONVENTION_HIDE_THRESHOLD = 1800;
|
||||||
|
|
||||||
|
const EDITOR_BUTTON_DIMENSIONS = 'h-[1.5rem] w-[1.8em]';
|
||||||
|
|
||||||
const columnHelper = createColumnHelper<IConstituenta>();
|
const columnHelper = createColumnHelper<IConstituenta>();
|
||||||
|
|
||||||
interface EditorItemsProps {
|
interface EditorItemsProps {
|
||||||
|
@ -299,11 +300,12 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
|
||||||
<div className='mr-3 min-w-[9rem] whitespace-nowrap'>
|
<div className='mr-3 min-w-[9rem] whitespace-nowrap'>
|
||||||
Выбор {selected.length} из {schema?.stats?.count_all ?? 0}
|
Выбор {selected.length} из {schema?.stats?.count_all ?? 0}
|
||||||
</div>
|
</div>
|
||||||
<div className='flex items-center justify-start w-full gap-1'>
|
<div className='flex items-center justify-center w-full gap-1 pr-[9rem]'>
|
||||||
<Button
|
<Button
|
||||||
tooltip='Переместить вверх'
|
tooltip='Переместить вверх'
|
||||||
icon={<ArrowUpIcon size={6}/>}
|
icon={<ArrowUpIcon size={6}/>}
|
||||||
disabled={!isEditable || nothingSelected}
|
disabled={!isEditable || nothingSelected}
|
||||||
|
dimensions={EDITOR_BUTTON_DIMENSIONS}
|
||||||
dense
|
dense
|
||||||
onClick={handleMoveUp}
|
onClick={handleMoveUp}
|
||||||
/>
|
/>
|
||||||
|
@ -311,27 +313,31 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
|
||||||
tooltip='Переместить вниз'
|
tooltip='Переместить вниз'
|
||||||
icon={<ArrowDownIcon size={6}/>}
|
icon={<ArrowDownIcon size={6}/>}
|
||||||
disabled={!isEditable || nothingSelected}
|
disabled={!isEditable || nothingSelected}
|
||||||
|
dimensions={EDITOR_BUTTON_DIMENSIONS}
|
||||||
dense
|
dense
|
||||||
onClick={handleMoveDown}
|
onClick={handleMoveDown}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
tooltip='Удалить выбранные'
|
tooltip='Удалить выбранные'
|
||||||
icon={<DumpBinIcon color={isEditable && !nothingSelected ? 'text-warning' : ''} size={6}/>}
|
icon={<DumpBinIcon color={isEditable && !nothingSelected ? 'text-warning' : ''} size={5}/>}
|
||||||
disabled={!isEditable || nothingSelected}
|
disabled={!isEditable || nothingSelected}
|
||||||
|
dimensions={EDITOR_BUTTON_DIMENSIONS}
|
||||||
dense
|
dense
|
||||||
onClick={handleDelete}
|
onClick={handleDelete}
|
||||||
/>
|
/>
|
||||||
<Divider vertical margins='my-1' />
|
|
||||||
<Button
|
<Button
|
||||||
tooltip='Сбросить имена'
|
tooltip='Сбросить имена'
|
||||||
icon={<MeshIcon color={isEditable ? 'text-primary': ''} size={6}/>}
|
icon={<MeshIcon color={isEditable ? 'text-primary': ''} size={5}/>}
|
||||||
|
dimensions={EDITOR_BUTTON_DIMENSIONS}
|
||||||
dense
|
dense
|
||||||
disabled={!isEditable}
|
disabled={!isEditable}
|
||||||
onClick={handleReindex}
|
onClick={handleReindex}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
tooltip='Новая конституента'
|
tooltip='Новая конституента'
|
||||||
icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={6}/>}
|
icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={5}/>}
|
||||||
|
dimensions={EDITOR_BUTTON_DIMENSIONS}
|
||||||
dense
|
dense
|
||||||
disabled={!isEditable}
|
disabled={!isEditable}
|
||||||
onClick={() => handleCreateCst()}
|
onClick={() => handleCreateCst()}
|
||||||
|
@ -344,14 +350,14 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
|
||||||
text={getCstTypePrefix(type)}
|
text={getCstTypePrefix(type)}
|
||||||
tooltip={getCstTypeShortcut(type)}
|
tooltip={getCstTypeShortcut(type)}
|
||||||
dense
|
dense
|
||||||
dimensions='w-[1.4rem]'
|
dimensions={EDITOR_BUTTON_DIMENSIONS}
|
||||||
disabled={!isEditable}
|
disabled={!isEditable}
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
onClick={() => handleCreateCst(type)}
|
onClick={() => handleCreateCst(type)}
|
||||||
/>);
|
/>);
|
||||||
})}
|
})}
|
||||||
<div id='items-table-help'>
|
<div id='items-table-help'>
|
||||||
<HelpIcon color='text-primary' size={6} />
|
<HelpIcon color='text-primary' size={5} />
|
||||||
</div>
|
</div>
|
||||||
<ConceptTooltip anchorSelect='#items-table-help' offset={30}>
|
<ConceptTooltip anchorSelect='#items-table-help' offset={30}>
|
||||||
<HelpRSFormItems />
|
<HelpRSFormItems />
|
||||||
|
|
|
@ -81,7 +81,7 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit} className='flex-grow max-w-[35.3rem] px-4 py-2 border-y border-r min-w-fit'>
|
<form onSubmit={handleSubmit} className='flex-grow max-w-[40rem] min-w-[30rem] px-4 py-2 mt-4 border'>
|
||||||
<div className='relative w-full'>
|
<div className='relative w-full'>
|
||||||
<div className='absolute top-0 right-0 flex'>
|
<div className='absolute top-0 right-0 flex'>
|
||||||
<MiniButton
|
<MiniButton
|
||||||
|
|
|
@ -367,7 +367,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
|
||||||
initial={getOptions()}
|
initial={getOptions()}
|
||||||
onConfirm={handleChangeOptions}
|
onConfirm={handleChangeOptions}
|
||||||
/>}
|
/>}
|
||||||
<div className='flex flex-col border-r border-b min-w-[13.5rem] max-w-min px-2 pb-2 text-sm select-none' style={{height: canvasHeight}}>
|
<div className='flex flex-col border min-w-[13.5rem] max-w-[13.5rem] px-2 pb-2 text-sm select-none h-fit'>
|
||||||
{hoverCst &&
|
{hoverCst &&
|
||||||
<div className='relative'>
|
<div className='relative'>
|
||||||
<InfoConstituenta
|
<InfoConstituenta
|
||||||
|
|
|
@ -364,9 +364,10 @@ function RSTabs() {
|
||||||
selectedIndex={activeTab}
|
selectedIndex={activeTab}
|
||||||
onSelect={onSelectTab}
|
onSelect={onSelectTab}
|
||||||
defaultFocus={true}
|
defaultFocus={true}
|
||||||
selectedTabClassName='font-semibold clr-selected'
|
selectedTabClassName='clr-selected'
|
||||||
|
className='flex flex-col items-center w-full'
|
||||||
>
|
>
|
||||||
<TabList className='flex items-start pl-2 border-b border-r-2 select-none justify-stretch w-fit clr-controls h-[1.9rem]'>
|
<TabList className='flex items-start border-b-2 border-x-2 select-none justify-stretch w-fit clr-controls h-[1.9rem] small-caps font-semibold'>
|
||||||
<RSTabsMenu
|
<RSTabsMenu
|
||||||
onDownload={onDownloadSchema}
|
onDownload={onDownloadSchema}
|
||||||
onDestroy={onDestroySchema}
|
onDestroy={onDestroySchema}
|
||||||
|
@ -385,7 +386,7 @@ function RSTabs() {
|
||||||
<ConceptTab className='min-w-[6.5rem]'>Граф термов</ConceptTab>
|
<ConceptTab className='min-w-[6.5rem]'>Граф термов</ConceptTab>
|
||||||
</TabList>
|
</TabList>
|
||||||
|
|
||||||
<TabPanel className='flex w-full gap-4'>
|
<TabPanel className='flex gap-4 w-fit'>
|
||||||
<EditorRSForm
|
<EditorRSForm
|
||||||
isModified={isModified}
|
isModified={isModified}
|
||||||
setIsModified={setIsModified}
|
setIsModified={setIsModified}
|
||||||
|
@ -405,7 +406,7 @@ function RSTabs() {
|
||||||
/>
|
/>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel>
|
<TabPanel className='flex justify-center w-full'>
|
||||||
<EditorConstituenta
|
<EditorConstituenta
|
||||||
isModified={isModified}
|
isModified={isModified}
|
||||||
setIsModified={setIsModified}
|
setIsModified={setIsModified}
|
||||||
|
|
|
@ -8,7 +8,7 @@ interface RSFormStatsProps {
|
||||||
|
|
||||||
function RSFormStats({ stats }: RSFormStatsProps) {
|
function RSFormStats({ stats }: RSFormStatsProps) {
|
||||||
return (
|
return (
|
||||||
<div className='flex flex-col gap-1 px-4 py-2 border min-w-[16rem]'>
|
<div className='flex flex-col gap-1 px-4 py-2 mt-4 border min-w-[16rem]'>
|
||||||
<LabeledText id='count_all'
|
<LabeledText id='count_all'
|
||||||
label='Всего конституент '
|
label='Всего конституент '
|
||||||
text={stats.count_all}
|
text={stats.count_all}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user