From 11dbf2bcd4c5d11b16cf3fec05069f0ad06509af Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 13 Oct 2023 23:11:41 +0300
Subject: [PATCH] Change editor layout

---
 .../pages/RSFormPage/EditorConstituenta.tsx   |  4 ++--
 .../src/pages/RSFormPage/EditorItems.tsx      | 22 ++++++++++++-------
 .../src/pages/RSFormPage/EditorRSForm.tsx     |  2 +-
 .../src/pages/RSFormPage/EditorTermGraph.tsx  |  2 +-
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  9 ++++----
 .../pages/RSFormPage/elements/RSFormStats.tsx |  2 +-
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 3534245a..7e222c1f 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -136,8 +136,8 @@ function EditorConstituenta({
   }
 
   return (
-  <div className='flex w-full gap-2 mb-2 justify-stretch'>
-    <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2 border-y border-r'>
+  <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'>
       <div className='relative w-full'>
       <div className='absolute top-0 right-0 flex items-start justify-between w-full'>
         {activeCst && 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index 67f72b73..78ba92e0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -3,7 +3,6 @@ import { toast } from 'react-toastify';
 
 import Button from '../../components/Common/Button';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
-import Divider from '../../components/Common/Divider';
 import DataTable, { createColumnHelper, type RowSelectionState,VisibilityState } from '../../components/DataTable';
 import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
 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_CONVENTION_HIDE_THRESHOLD = 1800;
 
+const EDITOR_BUTTON_DIMENSIONS = 'h-[1.5rem] w-[1.8em]';
+
 const columnHelper = createColumnHelper<IConstituenta>();
 
 interface EditorItemsProps {
@@ -299,11 +300,12 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
       <div className='mr-3 min-w-[9rem] whitespace-nowrap'>
         Выбор {selected.length} из {schema?.stats?.count_all ?? 0}
       </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
           tooltip='Переместить вверх'
           icon={<ArrowUpIcon size={6}/>}
           disabled={!isEditable || nothingSelected}
+          dimensions={EDITOR_BUTTON_DIMENSIONS}
           dense
           onClick={handleMoveUp}
         />
@@ -311,27 +313,31 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
           tooltip='Переместить вниз'
           icon={<ArrowDownIcon size={6}/>}
           disabled={!isEditable || nothingSelected}
+          dimensions={EDITOR_BUTTON_DIMENSIONS}
           dense
           onClick={handleMoveDown}
         />
         <Button
           tooltip='Удалить выбранные'
-          icon={<DumpBinIcon color={isEditable && !nothingSelected ? 'text-warning' : ''} size={6}/>}
+          icon={<DumpBinIcon color={isEditable && !nothingSelected ? 'text-warning' : ''} size={5}/>}
           disabled={!isEditable || nothingSelected}
+          dimensions={EDITOR_BUTTON_DIMENSIONS}
           dense
           onClick={handleDelete}
         />
-        <Divider vertical margins='my-1' />
+
         <Button
           tooltip='Сбросить имена'
-          icon={<MeshIcon color={isEditable ? 'text-primary': ''} size={6}/>}
+          icon={<MeshIcon color={isEditable ? 'text-primary': ''} size={5}/>}
+          dimensions={EDITOR_BUTTON_DIMENSIONS}
           dense
           disabled={!isEditable}
           onClick={handleReindex}
         />
         <Button
           tooltip='Новая конституента'
-          icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={6}/>}
+          icon={<SmallPlusIcon color={isEditable ? 'text-success': ''} size={5}/>}
+          dimensions={EDITOR_BUTTON_DIMENSIONS}
           dense
           disabled={!isEditable}
           onClick={() => handleCreateCst()}
@@ -344,14 +350,14 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
               text={getCstTypePrefix(type)}
               tooltip={getCstTypeShortcut(type)}
               dense
-              dimensions='w-[1.4rem]'
+              dimensions={EDITOR_BUTTON_DIMENSIONS}
               disabled={!isEditable}
               tabIndex={-1}
               onClick={() => handleCreateCst(type)}
             />);
         })}
         <div id='items-table-help'>
-          <HelpIcon color='text-primary' size={6} />
+          <HelpIcon color='text-primary' size={5} />
         </div>
         <ConceptTooltip anchorSelect='#items-table-help' offset={30}>
           <HelpRSFormItems />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
index 6be05067..6fa31712 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
@@ -81,7 +81,7 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
   };
 
   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='absolute top-0 right-0 flex'>
       <MiniButton
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index cf378b52..b83e05d7 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -367,7 +367,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
       initial={getOptions()}
       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 && 
       <div className='relative'>
         <InfoConstituenta
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index d30ef684..d670ba30 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -364,9 +364,10 @@ function RSTabs() {
       selectedIndex={activeTab}
       onSelect={onSelectTab}
       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 
           onDownload={onDownloadSchema}
           onDestroy={onDestroySchema}
@@ -385,7 +386,7 @@ function RSTabs() {
         <ConceptTab className='min-w-[6.5rem]'>Граф термов</ConceptTab>
       </TabList>
 
-      <TabPanel className='flex w-full gap-4'>
+      <TabPanel className='flex gap-4 w-fit'>
         <EditorRSForm
           isModified={isModified}
           setIsModified={setIsModified}
@@ -405,7 +406,7 @@ function RSTabs() {
         />
       </TabPanel>
 
-      <TabPanel>
+      <TabPanel className='flex justify-center w-full'>
         <EditorConstituenta
           isModified={isModified}
           setIsModified={setIsModified}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
index b61c7002..f3ebd663 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
@@ -8,7 +8,7 @@ interface RSFormStatsProps {
 
 function RSFormStats({ stats }: RSFormStatsProps) {
   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'
         label='Всего конституент '
         text={stats.count_all}