Change editor layout

This commit is contained in:
IRBorisov 2023-10-13 23:11:41 +03:00
parent 5fab8522a6
commit 11dbf2bcd4
6 changed files with 24 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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