From c71bfbef3485fbad005bb91bbd91579ed0148d15 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 10 Nov 2023 15:34:59 +0300
Subject: [PATCH] UI improvements

---
 .../src/components/Common/ConceptTab.tsx      |  2 +-
 .../src/components/Common/Divider.tsx         |  2 +-
 .../src/components/Common/DropdownButton.tsx  |  3 +-
 .../src/components/Common/TextArea.tsx        |  4 +-
 .../frontend/src/components/RSInput/index.tsx |  3 +-
 .../components/Shared/ConstituentaPicker.tsx  |  2 +-
 .../DlgConstituentaTemplate/ArgumentsTab.tsx  |  3 +-
 .../DlgConstituentaTemplate/TemplateTab.tsx   | 54 ++++++++++---------
 .../pages/RSFormPage/EditorConstituenta.tsx   |  7 ++-
 .../pages/RSFormPage/EditorRSExpression.tsx   |  8 +--
 .../src/pages/RSFormPage/EditorRSForm.tsx     | 23 +++++---
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  5 +-
 .../RSFormPage/elements/ParsingResult.tsx     |  2 +-
 .../pages/RSFormPage/elements/RSFormStats.tsx |  2 +-
 .../pages/RSFormPage/elements/RSTabsMenu.tsx  | 18 ++-----
 15 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/ConceptTab.tsx b/rsconcept/frontend/src/components/Common/ConceptTab.tsx
index bb0755bc..a21e00f2 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTab.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTab.tsx
@@ -10,7 +10,7 @@ extends Omit<TabProps, 'className' | 'title'> {
 function ConceptTab({ children, tooltip, className, ...otherProps }: ConceptTabProps) {
   return (
   <Tab
-    className={`px-2 py-1 h-full text-sm hover:cursor-pointer clr-tab whitespace-nowrap ${className}`}
+    className={`px-2 py-1 h-full flex justify-center text-sm hover:cursor-pointer clr-tab whitespace-nowrap min-w-[6rem] ${className}`}
     title={tooltip}
     {...otherProps}
   >
diff --git a/rsconcept/frontend/src/components/Common/Divider.tsx b/rsconcept/frontend/src/components/Common/Divider.tsx
index 098c7388..dd6dd1e9 100644
--- a/rsconcept/frontend/src/components/Common/Divider.tsx
+++ b/rsconcept/frontend/src/components/Common/Divider.tsx
@@ -5,7 +5,7 @@ interface DividerProps {
 
 function Divider({ vertical, margins = 'mx-2' }: DividerProps) {
   return (
-    <div className={`${margins} ${vertical ? 'border-x-2 h-full': 'border-y-2 w-full'}`} />
+    <div className={`${margins} ${vertical ? 'border-x h-full': 'border-y w-full'}`} />
   );
 }
 
diff --git a/rsconcept/frontend/src/components/Common/DropdownButton.tsx b/rsconcept/frontend/src/components/Common/DropdownButton.tsx
index 16d77e8c..fbb54e65 100644
--- a/rsconcept/frontend/src/components/Common/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/Common/DropdownButton.tsx
@@ -7,12 +7,13 @@ interface DropdownButtonProps {
 
 function DropdownButton({ tooltip, onClick, disabled, children }: DropdownButtonProps) {
   const behavior = (onClick ? 'cursor-pointer disabled:cursor-not-allowed clr-hover' : 'cursor-default');
+  const text = disabled ? 'text-controls' : '';
   return (
     <button
       disabled={disabled}
       title={tooltip}
       onClick={onClick}
-      className={`px-3 py-1 text-left overflow-ellipsis ${behavior} whitespace-nowrap`}
+      className={`px-3 py-1 text-left overflow-ellipsis whitespace-nowrap ${behavior} ${text}`}
     >
       {children}
     </button>
diff --git a/rsconcept/frontend/src/components/Common/TextArea.tsx b/rsconcept/frontend/src/components/Common/TextArea.tsx
index 2d7fc8fd..674e1fef 100644
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@@ -9,10 +9,10 @@ extends IEditorProps, IColorsProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElem
 }
 
 function TextArea({
-  id, label, required, tooltip, dense, noBorder, noOutline,
+  id, label, required, tooltip, rows,
+  dense, noBorder, noOutline,
   dimensions = 'w-full',
   colors = 'clr-input',
-  rows = 4,
   ...props
 }: TextAreaProps) {
   const borderClass = noBorder ? '': 'border';
diff --git a/rsconcept/frontend/src/components/RSInput/index.tsx b/rsconcept/frontend/src/components/RSInput/index.tsx
index d0770cc8..bab76389 100644
--- a/rsconcept/frontend/src/components/RSInput/index.tsx
+++ b/rsconcept/frontend/src/components/RSInput/index.tsx
@@ -56,7 +56,8 @@ extends Pick<ReactCodeMirrorProps,
 }
 
 function RSInput({ 
-  id, label, innerref, onChange, disabled, noTooltip,
+  id, label, innerref, onChange,
+  disabled, noTooltip,
   dimensions = 'w-full',
   ...props 
 }: RSInputProps) {
diff --git a/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx b/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
index 21ea16f7..1a134305 100644
--- a/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
+++ b/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
@@ -72,7 +72,7 @@ function ConstituentaPicker({
     })
   ], [colors, prefixID, describeFunc]);
 
-  const size = useMemo(() => (`${0.125 + 1.94*rows}rem`), [rows]);
+  const size = useMemo(() => (`calc(2px + (2px + 1.8rem)*${rows})`), [rows]);
 
   const conditionalRowStyles = useMemo(
   (): IConditionalStyle<IConstituenta>[] => [{
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
index 682a249a..f39ff1c1 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
@@ -158,7 +158,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
       <MiniButton
         tooltip='Подставить значение аргумента'
         icon={<CheckIcon
-          size={6}
+          size={5}
           color={!argumentValue || !selectedArgument ? 'text-disabled' : 'text-success'}
         />}
         disabled={!argumentValue || !selectedArgument}
@@ -177,6 +177,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
     <RSInput id='result'
       placeholder='Итоговое определение'
       height='5.1rem'
+      dimensions='w-full mt-[0.45rem]'
       value={state.definition}
       disabled
     />
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
index 449a6fe6..0a812741 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
@@ -86,35 +86,37 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
 
   return (
   <div className='flex flex-col gap-3'>
-    <div className='flex justify-between gap-3'>
-      <SelectSingle
-        className='w-full'
-        options={categorySelector}
-        placeholder='Выберите категорию'
-        value={state.filterCategory && selectedSchema ? {
-          value: state.filterCategory.id,
-          label: state.filterCategory.term_raw
-        } : null}
-        onChange={data => partialUpdate({filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })}
-        isClearable
-      />
-      <SelectSingle
-        className='min-w-[15rem]'
-        options={templateSelector}
-        placeholder='Выберите источник'
-        value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
-        onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}
+    <div>
+      <div className='flex justify-between gap-6'>
+        <SelectSingle
+          className='w-full'
+          options={categorySelector}
+          placeholder='Выберите категорию'
+          value={state.filterCategory && selectedSchema ? {
+            value: state.filterCategory.id,
+            label: state.filterCategory.term_raw
+          } : null}
+          onChange={data => partialUpdate({filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })}
+          isClearable
+        />
+        <SelectSingle
+          className='min-w-[15rem]'
+          options={templateSelector}
+          placeholder='Выберите источник'
+          value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
+          onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}
+        />
+      </div>
+      <ConstituentaPicker
+        value={state.prototype}
+        data={filteredData}
+        onSelectValue={cst => partialUpdate( { prototype: cst } )}
+        prefixID={prefixes.cst_template_ist}
+        rows={9}
       />
     </div>
-    <ConstituentaPicker
-      value={state.prototype}
-      data={filteredData}
-      onSelectValue={cst => partialUpdate( { prototype: cst } )}
-      prefixID={prefixes.cst_template_ist}
-      rows={9}
-    />
     <TextArea id='term'
-      rows={1}
+      rows={2}
       disabled
       placeholder='Шаблон конституенты не выбран'
       value={prototypeInfo}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 60cd8363..02ba9ba1 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -239,9 +239,13 @@ function EditorConstituenta({
         />
         <TextArea id='typification' label='Типизация'
           dense noBorder
-          rows={1}
+          rows={typification.length > 70 ? 2 : 1}
           value={typification}
           colors='clr-app'
+          dimensions='w-full'
+          style={{
+            resize: 'none'
+          }}
           disabled
         />
         <EditorRSExpression id='expression' label='Формальное определение'
@@ -265,7 +269,6 @@ function EditorConstituenta({
         />
         <TextArea id='convention' label='Конвенция / Комментарий'
           placeholder='Договоренность об интерпретации или пояснение'
-          rows={2}
           value={convention}
           disabled={!isEnabled}
           spellCheck
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
index f84e1c76..d0c43ae3 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
@@ -130,7 +130,7 @@ function EditorRSExpression({
     </div>
     <RSInput innerref={rsInput}
       value={value}
-      minHeight='3.5rem'
+      minHeight='3.8rem'
       disabled={disabled}
       onChange={handleChange}
       {...props}
@@ -139,12 +139,12 @@ function EditorRSExpression({
       disabled={disabled}
       onEdit={handleEdit}
     />
-    <div className='w-full max-h-[5rem] min-h-[5rem] flex'>
-      <div className='flex flex-col'>
+    <div className='w-full max-h-[4.5rem] min-h-[4.5rem] flex'>
+      <div className='flex flex-col text-sm'>
         <Button
           tooltip='Проверить формальное определение'
           text='Проверить'
-          dimensions='w-fit h-[3rem] z-pop rounded-none'
+          dimensions='w-[6.75rem] min-h-[3rem] z-pop rounded-none'
           colors='clr-btn-default'
           noOutline
           onClick={() => handleCheckExpression()}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
index 96bcb358..3d490f25 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
@@ -97,6 +97,12 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
   <div tabIndex={-1} onKeyDown={handleInput}>
     <div className='relative flex items-start justify-center w-full'>
     <div className='absolute flex mt-1'>
+      <MiniButton
+        tooltip='Сохранить изменения'
+        disabled={!isModified || !isEditable}
+        icon={<SaveIcon size={5} color={isModified && isEditable ? 'text-primary' : ''}/>}
+        onClick={() => handleSubmit()}
+      />
       <MiniButton
         tooltip='Поделиться схемой'
         icon={<ShareIcon size={5} color='text-primary'/>}
@@ -165,14 +171,15 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
               setValue={value => setCanonical(value)}
             />
           </div>
-
-          <SubmitButton
-            text='Сохранить изменения'
-            loading={processing}
-            disabled={!isModified || !isEditable}
-            icon={<SaveIcon size={6} />}
-            dimensions='my-2 w-fit'
-          />
+          <div className='flex justify-center w-full'>
+            <SubmitButton
+              text='Сохранить изменения'
+              loading={processing}
+              disabled={!isModified || !isEditable}
+              icon={<SaveIcon size={6} />}
+              dimensions='my-2 w-fit'
+            />
+          </div>
           
           <div className='flex flex-col gap-1'>
             <div className='flex justify-start'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 9b56bf7f..68c59cfb 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -394,7 +394,6 @@ function RSTabs() {
           onClaim={onClaimSchema}
           onShare={onShareSchema}
           onToggleSubscribe={handleToggleSubscribe}
-          onTemplates={onShowTemplates}
           showCloneDialog={promptClone} 
           showUploadDialog={() => setShowUpload(true)}
         />
@@ -402,13 +401,13 @@ function RSTabs() {
           className='border-x-2'
           tooltip={`Название схемы: ${schema.title ?? ''}`}
         >
-          Паспорт схемы
+          Карточка
         </ConceptTab>
         <ConceptTab 
           className='border-r-2'
           tooltip={`Всего конституент: ${schema.stats?.count_all ?? 0}\nКоличество ошибок: ${schema.stats?.count_errors ?? 0}`}
         >
-          Конституенты
+          Содержание
         </ConceptTab>
         <ConceptTab className='border-r-2'>
           Редактор
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx
index f83eaec3..fe684dfc 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ParsingResult.tsx
@@ -12,7 +12,7 @@ function ParsingResult({ data, onShowError }: ParsingResultProps) {
   const warningsCount = data.errors.length - errorCount;
 
   return (
-    <div className='px-3 py-2'>
+    <div className='px-2 py-1'>
       <p>Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b></p>
       {data.errors.map((error, index) => {
         return (
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
index 9cbf4956..addbc5a2 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
@@ -81,7 +81,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
       />}
       { stats.count_theorem > 0 &&
       <LabeledText id='count_theorem'
-        label='Теормы '
+        label='Теоремы '
         text={stats.count_theorem}
       />}
     </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
index 96948c1a..a3fd8988 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSTabsMenu.tsx
@@ -5,7 +5,7 @@ import Dropdown from '../../../components/Common/Dropdown';
 import DropdownButton from '../../../components/Common/DropdownButton';
 import DropdownCheckbox from '../../../components/Common/DropdownCheckbox';
 import {
-  CloneIcon, DiamondIcon, DownloadIcon, DumpBinIcon, EditIcon, MenuIcon, NotSubscribedIcon,
+  CloneIcon, DownloadIcon, DumpBinIcon, EditIcon, MenuIcon, NotSubscribedIcon,
 OwnerIcon, ShareIcon, SmallPlusIcon, SubscribedIcon,   UploadIcon
 } from '../../../components/Icons';
 import { useAuth } from '../../../context/AuthContext';
@@ -20,12 +20,11 @@ interface RSTabsMenuProps {
   onShare: () => void
   onDownload: () => void
   onToggleSubscribe: () => void
-  onTemplates: () => void
 }
 
 function RSTabsMenu({
   showUploadDialog, showCloneDialog,
-  onDestroy, onShare, onDownload, onClaim, onToggleSubscribe, onTemplates
+  onDestroy, onShare, onDownload, onClaim, onToggleSubscribe
 }: RSTabsMenuProps) {
   const navigate = useNavigate();
   const { user } = useAuth();
@@ -45,11 +44,6 @@ function RSTabsMenu({
     schemaMenu.hide();
     onDestroy();
   }
-  
-  function handleTemplates() {
-    schemaMenu.hide();
-    onTemplates();
-  }
 
   function handleDownload () {
     schemaMenu.hide();
@@ -102,12 +96,6 @@ function RSTabsMenu({
             <p>Клонировать</p>
           </div>
         </DropdownButton>
-        <DropdownButton onClick={handleTemplates} disabled={!isEditable} >
-          <div className='inline-flex items-center justify-start gap-2'>
-            <DiamondIcon color={isEditable ? 'text-success' : ''} size={4}/>
-            <p>Банк выражений</p>
-          </div>
-        </DropdownButton>
         <DropdownButton onClick={handleDownload}>
           <div className='inline-flex items-center justify-start gap-2'>
             <DownloadIcon color='text-primary' size={4}/>
@@ -150,7 +138,7 @@ function RSTabsMenu({
         <DropdownButton 
           disabled={!user || !isClaimable}
           onClick={!isOwned ? handleClaimOwner : undefined}
-          tooltip={!user || !isClaimable ? 'Стать владельцем можно только для общей изменяемой схемы' : ''}
+          tooltip={!user || !isClaimable ? 'Взять во владение можно общую изменяемую схему' : ''}
         >
           <div className='flex items-center gap-2 pl-1'>
             <span><OwnerIcon size={5} color={isOwned ? 'text-success' : 'text-controls'} /></span>