From ce513eeb908e45d3657d29018a89cc130061b093 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 2 Oct 2023 23:43:29 +0300
Subject: [PATCH] Minor UI fixes

---
 .../src/components/Help/InfoCstStatus.tsx     | 35 ++++++++++---------
 .../components/RefsInput/DlgEditReference.tsx |  4 +--
 rsconcept/frontend/src/index.css              |  6 ++++
 rsconcept/frontend/src/models/rsform.ts       |  2 +-
 .../pages/RSFormPage/EditorConstituenta.tsx   |  6 ++--
 .../pages/RSFormPage/EditorRSExpression.tsx   |  7 ++--
 .../src/pages/RSFormPage/EditorTermGraph.tsx  | 10 +++---
 .../RSFormPage/elements/RSLocalButton.tsx     |  2 +-
 .../pages/RSFormPage/elements/StatusBar.tsx   |  2 +-
 rsconcept/frontend/src/utils/labels.ts        | 12 +++----
 10 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx b/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx
index 78098b33..41429fad 100644
--- a/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx
+++ b/rsconcept/frontend/src/components/Help/InfoCstStatus.tsx
@@ -14,22 +14,25 @@ function InfoCstStatus({ title }: InfoCstStatusProps) {
   return (
     <div className='flex flex-col gap-1'>
       { title && <h1>{title}</h1>}
-      { Object.values(ExpressionStatus).map(
-      (status, index) => {
-        return (
-        <p key={`${prefixes.cst_status_list}${index}`}>
-          <span
-            className='px-1 inline-block font-semibold min-w-[5rem] text-center border text-sm'
-            style={{backgroundColor: colorbgCstStatus(status, colors)}}
-          >
-            {labelExpressionStatus(status)}
-          </span>
-          <span> - </span>
-          <span>
-            {describeExpressionStatus(status)}
-          </span>
-        </p>);
-      })}
+      { Object.values(ExpressionStatus)
+        .filter(status => status !== ExpressionStatus.UNDEFINED)
+        .map(
+        (status, index) => {
+          return (
+          <p key={`${prefixes.cst_status_list}${index}`}>
+            <span
+              className='px-1 inline-block font-semibold min-w-[7rem] text-center border text-sm'
+              style={{backgroundColor: colorbgCstStatus(status, colors)}}
+            >
+              {labelExpressionStatus(status)}
+            </span>
+            <span> - </span>
+            <span>
+              {describeExpressionStatus(status)}
+            </span>
+          </p>);
+        }
+      )}
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx b/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx
index b6164568..a225f127 100644
--- a/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx
@@ -229,7 +229,7 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
     canSubmit={isValid}
     onSubmit={handleSubmit}
   >
-  <div className='min-w-[40rem] flex flex-col gap-4 mb-4 mt-2 min-h-[34rem]'>
+  <div className='min-w-[40rem] max-w-[40rem] flex flex-col gap-4 mb-4 mt-2 min-h-[34rem]'>
     <div className='flex items-center self-center flex-start'>
       <ReferenceTypeButton 
         type={ReferenceType.ENTITY}
@@ -262,7 +262,7 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
           value={offset}
           onChange={event => setOffset(event.target.valueAsNumber)}
         />
-        <div className='self-center text-sm font-semibold whitespace-nowrap ml-2'>
+        <div className='self-center ml-2 text-sm font-semibold whitespace-nowrap'>
           Основная ссылка:
         </div>
         <TextInput
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index ffd36bee..b6583729 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -114,6 +114,12 @@
   color-scheme: light;
 }
 
+@layer utilities {
+  .small-caps {
+    font-variant: small-caps;
+  }
+}
+
 @layer components {
   h1 {
     @apply text-lg font-bold text-center
diff --git a/rsconcept/frontend/src/models/rsform.ts b/rsconcept/frontend/src/models/rsform.ts
index e73e5704..5a9a29b7 100644
--- a/rsconcept/frontend/src/models/rsform.ts
+++ b/rsconcept/frontend/src/models/rsform.ts
@@ -26,8 +26,8 @@ export enum CstClass {
 export enum ExpressionStatus {
   VERIFIED = 'verified',
   INCORRECT = 'incorrect',
-  PROPERTY = 'property',
   INCALCULABLE = 'incalculable',
+  PROPERTY = 'property',
   UNDEFINED = 'undefined',
   UNKNOWN = 'unknown',
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index cfbb733a..3534245a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -149,10 +149,10 @@ function EditorConstituenta({
           onClick={onEditTerm}
           icon={<PenIcon size={4} color={isEnabled ? 'text-primary' : ''} />}
         />}
-        <div className='flex items-center justify-center w-full gap-1'>
+        <div className='flex items-center justify-center w-full'>
           <div className='font-semibold w-fit'>
-            <span className=''>Конституента </span>
-            <span className='ml-4'>{alias}</span>
+            <span className='small-caps'>Конституента</span>
+            <span className='ml-2 small-caps'>{alias}</span>
           </div>
           <MiniButton
             tooltip='Переименовать конституенту'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
index d4640cd3..07012320 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression.tsx
@@ -157,7 +157,7 @@ function EditorRSExpression({
         <RSTokenButton token={TokenID.LESSER_OR_EQ} onInsert={handleEdit}/>
       </div>
     </div>
-    <div className='text-xs w-fit'>
+    <div className='text-sm w-fit'>
       <div className='flex justify-start'>
         <RSLocalButton text='μ' tooltip='q' onInsert={handleEdit}/>
         <RSLocalButton text='ω' tooltip='w' onInsert={handleEdit}/>
@@ -187,7 +187,7 @@ function EditorRSExpression({
   }, [handleEdit]);
 
   return (
-  <div className='flex flex-col items-start w-full min-h-[15.75rem]'>
+  <div className='flex flex-col items-start w-full'>
     <div className='relative w-full'>
     <div className='absolute top-[-0.3rem] right-0'>
     <StatusBar
@@ -198,8 +198,7 @@ function EditorRSExpression({
     </div>
     </div>
     <RSInput innerref={rsInput}
-      className='text-lg'
-      height='10.1rem'
+      height='7.6rem'
       value={value}
       editable={!disabled}
       onChange={handleChange}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index af19a619..cf378b52 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -17,14 +17,14 @@ import { useConceptTheme } from '../../context/ThemeContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import { CstType, IConstituenta, ICstCreateData } from '../../models/rsform';
 import { graphDarkT, graphLightT, IColorTheme } from '../../utils/color';
-import { prefixes, resources, TIMEOUT_GRAPH_REFRESH } from '../../utils/constants';
-import { Graph } from '../../utils/Graph';
-import { SelectorGraphLayout } from '../../utils/selectors';
-import { SelectorGraphColoring } from '../../utils/selectors';
 import { colorbgCstClass } from '../../utils/color';
 import { colorbgCstStatus } from '../../utils/color';
+import { prefixes, resources, TIMEOUT_GRAPH_REFRESH } from '../../utils/constants';
+import { Graph } from '../../utils/Graph';
 import { mapLabelColoring } from '../../utils/labels';
 import { mapLableLayout } from '../../utils/labels';
+import { SelectorGraphLayout } from '../../utils/selectors';
+import { SelectorGraphColoring } from '../../utils/selectors';
 import DlgGraphOptions from './DlgGraphOptions';
 import ConstituentaTooltip from './elements/ConstituentaTooltip';
 
@@ -487,7 +487,9 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         />
       </div>
       <ConceptTooltip anchorSelect='#items-graph-help'>
+        <div className='text-sm max-w-[calc(100vw-20rem)]'>
         <HelpTermGraph />
+        </div>
       </ConceptTooltip>
       <GraphCanvas
         draggable
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSLocalButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSLocalButton.tsx
index 13250d60..07bda437 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSLocalButton.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSLocalButton.tsx
@@ -15,7 +15,7 @@ function RSLocalButton({ text, tooltip, disabled, onInsert }: RSLocalButtonProps
       onClick={() => onInsert(TokenID.ID_LOCAL, text)}
       title={tooltip}
       tabIndex={-1}
-      className='w-[1.5rem] h-7 cursor-pointer border rounded-none clr-btn-clear'
+      className='w-[1.5rem] h-7 cursor-pointer border rounded-none clr-hover clr-btn-clear'
     >
       {text}
     </button>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
index 7d5fdb33..4cec8694 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/StatusBar.tsx
@@ -31,7 +31,7 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
       className='text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle'
       style={{backgroundColor: colorbgCstStatus(status, colors)}}
     >
-      Статус: [ {labelExpressionStatus(status)} ]
+      {labelExpressionStatus(status)}
     </div>
   )
 }
diff --git a/rsconcept/frontend/src/utils/labels.ts b/rsconcept/frontend/src/utils/labels.ts
index 68e99755..7aa5f365 100644
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@@ -173,11 +173,11 @@ new Map([
 
 export function labelExpressionStatus(status: ExpressionStatus): string {
   switch (status) {
-    case ExpressionStatus.VERIFIED:     return 'ок';
+    case ExpressionStatus.VERIFIED:     return 'корректно';
     case ExpressionStatus.INCORRECT:    return 'ошибка';
-    case ExpressionStatus.INCALCULABLE: return 'невыч';
-    case ExpressionStatus.PROPERTY:     return 'св-во';
-    case ExpressionStatus.UNKNOWN:      return 'неизв';
+    case ExpressionStatus.INCALCULABLE: return 'невычислимо';
+    case ExpressionStatus.PROPERTY:     return 'неразмерное';
+    case ExpressionStatus.UNKNOWN:      return 'непроверено';
     case ExpressionStatus.UNDEFINED:    return 'N/A';
   }
 }
@@ -186,8 +186,8 @@ export function describeExpressionStatus(status: ExpressionStatus): string {
   switch (status) {
     case ExpressionStatus.VERIFIED:     return 'выражение корректно и вычислимо';
     case ExpressionStatus.INCORRECT:    return 'ошибка в выражении';
-    case ExpressionStatus.INCALCULABLE: return 'выражение не вычислимо';
-    case ExpressionStatus.PROPERTY:     return 'можно проверить принадлежность, но нельзя получить значение';
+    case ExpressionStatus.INCALCULABLE: return 'нельзя использовать для вычисления интерпретации';
+    case ExpressionStatus.PROPERTY:     return 'только для проверки принадлежности';
     case ExpressionStatus.UNKNOWN:      return 'требует проверки выражения';
     case ExpressionStatus.UNDEFINED:    return 'произошла ошибка при проверке выражения';
   }