Minor UI improvements

2025-06-26 13:00:39 +03:00 · 2023-10-26 11:50:18 +03:00 · 2023-10-26 11:50:18 +03:00 · 3b423b33ff
commit 3b423b33ff
parent f1ac63b61a
4 changed files with 84 additions and 74 deletions
--- 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;
--- 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>
--- 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}
--- 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='Регистрация'