From 3b423b33ff312377f2a697606b811f07dfe8f22d Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 26 Oct 2023 11:50:18 +0300
Subject: [PATCH] Minor UI improvements

---
 .../src/pages/RSFormPage/EditorRSForm.tsx     | 145 ++++++++++--------
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |   4 +-
 .../pages/RSFormPage/elements/RSFormStats.tsx |   7 +-
 rsconcept/frontend/src/pages/RegisterPage.tsx |   2 +-
 4 files changed, 84 insertions(+), 74 deletions(-)

diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
index 6fce2e88..f7ef19f9 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 
 import Checkbox from '../../components/Common/Checkbox';
 import ConceptTooltip from '../../components/Common/ConceptTooltip';
+import Divider from '../../components/Common/Divider';
 import MiniButton from '../../components/Common/MiniButton';
 import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
@@ -15,6 +16,7 @@ import { useRSForm } from '../../context/RSFormContext';
 import { useUsers } from '../../context/UsersContext';
 import { LibraryItemType } from '../../models/library';
 import { IRSFormCreateData } from '../../models/rsform';
+import RSFormStats from './elements/RSFormStats';
 
 interface EditorRSFormProps {
   onDestroy: () => void
@@ -81,9 +83,9 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
   };
 
   return (
-  <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'>
+  <div>
+    <div className='relative flex items-start justify-center w-full'>
+    <div className='absolute flex mt-1'>
       <MiniButton
         tooltip='Поделиться схемой'
         icon={<ShareIcon size={5} color='text-primary'/>}
@@ -114,74 +116,81 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
       </ConceptTooltip>
     </div>
     </div>
-    <div className='flex flex-col gap-3 mt-2'>
-      <TextInput id='title' label='Полное название' type='text'
-        required
-        value={title}
-        disabled={!isEditable}
-        onChange={event => setTitle(event.target.value)}
-      />
-      <TextInput id='alias' label='Сокращение' type='text'
-        required
-        value={alias}
-        disabled={!isEditable}
-        dimensions='max-w-sm'
-        onChange={event => setAlias(event.target.value)}
-      />
-      <TextArea id='comment' label='Комментарий'
-        value={comment}
-        disabled={!isEditable}
-        onChange={event => setComment(event.target.value)}
-      />
-      <div className='flex justify-between whitespace-nowrap'>
-        <Checkbox id='common' label='Общедоступная схема'
-          value={common}
-          dimensions='w-fit'
-          disabled={!isEditable}
-          setValue={value => setCommon(value)}
-        />
-        <Checkbox id='canonical' label='Неизменная схема'
-          dimensions='w-fit'
-          value={canonical}
-          tooltip='Только администраторы могут присваивать схемам неизменный статус'
-          disabled={!isEditable || !isForceAdmin}
-          setValue={value => setCanonical(value)}
-        />
-      </div>
+    <div className='flex w-full'>
+      <form onSubmit={handleSubmit} className='flex-grow max-w-[40rem] min-w-[30rem] px-4 py-2'>
+        <div className='flex flex-col gap-3 mt-2'>
+          <TextInput id='title' label='Полное название' type='text'
+            required
+            value={title}
+            disabled={!isEditable}
+            onChange={event => setTitle(event.target.value)}
+          />
+          <TextInput id='alias' label='Сокращение' type='text'
+            required
+            value={alias}
+            disabled={!isEditable}
+            dense
+            dimensions='w-full'
+            onChange={event => setAlias(event.target.value)}
+          />
+          <TextArea id='comment' label='Комментарий'
+            value={comment}
+            disabled={!isEditable}
+            onChange={event => setComment(event.target.value)}
+          />
+          <div className='flex justify-between whitespace-nowrap'>
+            <Checkbox id='common' label='Общедоступная схема'
+              tooltip='Общедоступные схемы видны всем пользователям и могут быть изменены'
+              value={common}
+              dimensions='w-fit'
+              disabled={!isEditable}
+              setValue={value => setCommon(value)}
+            />
+            <Checkbox id='canonical' label='Неизменная схема'
+              dimensions='w-fit'
+              value={canonical}
+              tooltip='Только администраторы могут присваивать схемам неизменный статус'
+              disabled={!isEditable || !isForceAdmin}
+              setValue={value => setCanonical(value)}
+            />
+          </div>
 
-      <SubmitButton
-        text='Сохранить изменения'
-        loading={processing}
-        disabled={!isModified || !isEditable}
-        icon={<SaveIcon size={6} />}
-        dimensions='my-2 w-fit'
-      />
-      
-      <div className='flex flex-col gap-1'>
-        <div className='flex justify-start'>
-          <label className='font-semibold'>Владелец:</label>
-          <span className='min-w-[200px] ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap'>
-            {getUserLabel(schema?.owner ?? null)}
-          </span>
+          <SubmitButton
+            text='Сохранить изменения'
+            loading={processing}
+            disabled={!isModified || !isEditable}
+            icon={<SaveIcon size={6} />}
+            dimensions='my-2 w-fit'
+          />
+          
+          <div className='flex flex-col gap-1'>
+            <div className='flex justify-start'>
+              <label className='font-semibold'>Владелец:</label>
+              <span className='min-w-[200px] ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap'>
+                {getUserLabel(schema?.owner ?? null)}
+              </span>
+            </div>
+            <div className='flex justify-start'>
+              <label className='font-semibold'>Отслеживают:</label>
+              <span id='subscriber-count' className='ml-2'>
+                { schema?.subscribers.length ?? 0 }
+              </span>
+            </div>
+            <div className='flex justify-start'>
+              <label className='font-semibold'>Дата обновления:</label>
+              <span className='ml-2'>{schema && new Date(schema?.time_update).toLocaleString(intl.locale)}</span>
+            </div>
+            <div className='flex justify-start'>
+              <label className='font-semibold'>Дата создания:</label>
+              <span className='ml-8'>{schema && new Date(schema?.time_create).toLocaleString(intl.locale)}</span>
+            </div>
+          </div>
         </div>
-        <div className='flex justify-start'>
-          <label className='font-semibold'>Отслеживают:</label>
-          <span id='subscriber-count' className='ml-2'>
-            { schema?.subscribers.length ?? 0 }
-          </span>
-        </div>
-        <div className='flex justify-start'>
-          <label className='font-semibold'>Дата обновления:</label>
-          <span className='ml-2'>{schema && new Date(schema?.time_update).toLocaleString(intl.locale)}</span>
-        </div>
-        <div className='flex justify-start'>
-          <label className='font-semibold'>Дата создания:</label>
-          <span className='ml-8'>{schema && new Date(schema?.time_create).toLocaleString(intl.locale)}</span>
-        </div>
-      </div>
+      </form>
+      {schema && <Divider vertical />}
+      <RSFormStats stats={schema?.stats}/>
     </div>
-  </form>
-  );
+  </div>);
 }
 
 export default EditorRSForm;
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index cfe0b86c..345dfb26 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -30,7 +30,6 @@ import EditorConstituenta from './EditorConstituenta';
 import EditorItems from './EditorItems';
 import EditorRSForm from './EditorRSForm';
 import EditorTermGraph from './EditorTermGraph';
-import RSFormStats from './elements/RSFormStats';
 import RSTabsMenu from './elements/RSTabsMenu';
 
 export enum RSTabID {
@@ -420,7 +419,7 @@ function RSTabs() {
       </TabList>
 
       <div className='overflow-y-auto' style={{ maxHeight: panelHeight}}>
-        <TabPanel className='flex gap-4 w-fit'>
+        <TabPanel>
           <EditorRSForm
             isModified={isModified}
             setIsModified={setIsModified}
@@ -429,7 +428,6 @@ function RSTabs() {
             onClaim={onClaimSchema}
             onShare={onShareSchema}
           />
-          {schema.stats && <RSFormStats stats={schema.stats}/>}
         </TabPanel>
 
         <TabPanel>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
index f3ebd663..9cbf4956 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
@@ -3,12 +3,15 @@ import LabeledText from '../../../components/Common/LabeledText';
 import { type IRSFormStats } from '../../../models/rsform';
 
 interface RSFormStatsProps {
-  stats: IRSFormStats
+  stats?: IRSFormStats
 }
 
 function RSFormStats({ stats }: RSFormStatsProps) {
+  if (!stats) {
+    return null;
+  }
   return (
-    <div className='flex flex-col gap-1 px-4 py-2 mt-4 border min-w-[16rem]'>
+    <div className='flex flex-col gap-1 px-4 py-2 mt-7 min-w-[16rem]'>
       <LabeledText id='count_all'
         label='Всего конституент '
         text={stats.count_all}
diff --git a/rsconcept/frontend/src/pages/RegisterPage.tsx b/rsconcept/frontend/src/pages/RegisterPage.tsx
index 4e11ceb1..bc8a782d 100644
--- a/rsconcept/frontend/src/pages/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage.tsx
@@ -56,7 +56,7 @@ function RegisterPage() {
   return (
     <div className='flex justify-center w-full py-2'>
     { user &&
-      <b>{`Вы вошли в систему как ${user.username}. Если хотите зарегистрировать нового пользователя, выйдите из системы (меню в правом верхнем углу экрана)`}</b>}
+      <b>{`Вы вошли в систему как ${user.username}`}</b>}
     { !user &&
       <Form
         title='Регистрация'