Minor UI fixes

2025-06-26 13:00:39 +03:00 · 2023-10-02 23:43:29 +03:00 · 2023-10-02 23:43:29 +03:00 · ce513eeb90
commit ce513eeb90
parent f54254bb56
10 changed files with 48 additions and 38 deletions
--- 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>
  );
 }
--- 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
--- 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
--- 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',
 }
--- 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='Переименовать конституенту'
--- 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}
--- 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
--- 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>
--- 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>
  )
 }
--- 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 'произошла ошибка при проверке выражения';
  }