From e9f62a0abc946cab6b17964367fd0299411070d7 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 12 May 2024 13:58:28 +0300
Subject: [PATCH] UI improvements and fixes

---
 rsconcept/frontend/src/app/Navigation/Logo.tsx            | 4 +---
 rsconcept/frontend/src/components/ui/Checkbox.tsx         | 1 +
 rsconcept/frontend/src/components/ui/CheckboxTristate.tsx | 1 +
 rsconcept/frontend/src/components/ui/SearchBar.tsx        | 2 +-
 rsconcept/frontend/src/components/ui/SelectMulti.tsx      | 5 +++++
 rsconcept/frontend/src/components/ui/SelectSingle.tsx     | 5 +++++
 rsconcept/frontend/src/components/ui/TabLabel.tsx         | 2 ++
 rsconcept/frontend/src/components/ui/TextArea.tsx         | 4 ++++
 rsconcept/frontend/src/models/rslang.ts                   | 1 +
 .../RSFormPage/EditorConstituenta/FormConstituenta.tsx    | 5 +++--
 .../src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx    | 6 +-----
 .../src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx      | 2 --
 .../pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx   | 5 +++--
 .../RSFormPage/ViewConstituents/ViewConstituents.tsx      | 6 +++---
 rsconcept/frontend/src/styling/setup.css                  | 8 +++-----
 rsconcept/frontend/src/styling/styles.css                 | 8 +++++++-
 rsconcept/frontend/src/utils/labels.ts                    | 2 ++
 17 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/rsconcept/frontend/src/app/Navigation/Logo.tsx b/rsconcept/frontend/src/app/Navigation/Logo.tsx
index 9077a190..96d9f87f 100644
--- a/rsconcept/frontend/src/app/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Logo.tsx
@@ -10,9 +10,7 @@ function Logo() {
   return (
     <img
       alt='Логотип КонцептПортал'
-      className={clsx('max-h-[1.6rem] w-fit', {
-        'min-w-[11.5rem]': size.isSmall
-      })}
+      className={clsx('max-h-[1.6rem] w-fit')}
       src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
     />
   );
diff --git a/rsconcept/frontend/src/components/ui/Checkbox.tsx b/rsconcept/frontend/src/components/ui/Checkbox.tsx
index 84c93f82..373d831b 100644
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@@ -49,6 +49,7 @@ function Checkbox({
       className={clsx(
         'flex items-center gap-2', // prettier: split lines
         'outline-none',
+        'focus-frame',
         cursor,
         className
       )}
diff --git a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
index 47e7ce2a..83d83823 100644
--- a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
+++ b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
@@ -53,6 +53,7 @@ function CheckboxTristate({
       className={clsx(
         'flex items-center gap-2', // prettier: split lines
         'outline-none',
+        'focus-frame',
         cursor,
         className
       )}
diff --git a/rsconcept/frontend/src/components/ui/SearchBar.tsx b/rsconcept/frontend/src/components/ui/SearchBar.tsx
index fbf7e04b..54c573fd 100644
--- a/rsconcept/frontend/src/components/ui/SearchBar.tsx
+++ b/rsconcept/frontend/src/components/ui/SearchBar.tsx
@@ -21,7 +21,7 @@ function SearchBar({ id, value, onChange, noBorder, ...restProps }: SearchBarPro
         noOutline
         placeholder='Поиск'
         type='search'
-        className='w-full pl-10'
+        className='w-full pl-10 outline-none'
         noBorder={noBorder}
         value={value}
         onChange={event => (onChange ? onChange(event.target.value) : undefined)}
diff --git a/rsconcept/frontend/src/components/ui/SelectMulti.tsx b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
index 275b9f9e..48fe6618 100644
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@@ -55,6 +55,10 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
 
   const adjustedStyles: StylesConfig<Option, true, Group> = useMemo(
     () => ({
+      container: defaultStyles => ({
+        ...defaultStyles,
+        borderRadius: '0.25rem'
+      }),
       control: (styles, { isDisabled }) => ({
         ...styles,
         borderRadius: '0.25rem',
@@ -118,6 +122,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
       })}
       menuPortalTarget={!noPortal ? document.body : null}
       styles={adjustedStyles}
+      classNames={{ container: () => 'focus-frame' }}
       {...restProps}
     />
   );
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index 74cd5b45..8a76a980 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -57,6 +57,10 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
 
   const adjustedStyles: StylesConfig<Option, false, Group> = useMemo(
     () => ({
+      container: defaultStyles => ({
+        ...defaultStyles,
+        borderRadius: '0.25rem'
+      }),
       control: (defaultStyles, { isDisabled }) => ({
         ...defaultStyles,
         borderRadius: '0.25rem',
@@ -116,6 +120,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
       })}
       menuPortalTarget={!noPortal ? document.body : null}
       styles={adjustedStyles}
+      classNames={{ container: () => 'focus-frame' }}
       {...restProps}
     />
   );
diff --git a/rsconcept/frontend/src/components/ui/TabLabel.tsx b/rsconcept/frontend/src/components/ui/TabLabel.tsx
index 8969973c..99be8694 100644
--- a/rsconcept/frontend/src/components/ui/TabLabel.tsx
+++ b/rsconcept/frontend/src/components/ui/TabLabel.tsx
@@ -19,8 +19,10 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
         'clr-tab',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
+        'outline-none',
         className
       )}
+      tabIndex='-1'
       data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
diff --git a/rsconcept/frontend/src/components/ui/TextArea.tsx b/rsconcept/frontend/src/components/ui/TextArea.tsx
index 1fbd02bd..cfdbc0e2 100644
--- a/rsconcept/frontend/src/components/ui/TextArea.tsx
+++ b/rsconcept/frontend/src/components/ui/TextArea.tsx
@@ -5,6 +5,7 @@ import Label from './Label';
 
 export interface TextAreaProps extends CProps.Editor, CProps.Colors, CProps.TextArea {
   dense?: boolean;
+  noResize?: boolean;
 }
 
 function TextArea({
@@ -15,6 +16,7 @@ function TextArea({
   dense,
   noBorder,
   noOutline,
+  noResize,
   className,
   colors = 'clr-input',
   ...restProps
@@ -35,7 +37,9 @@ function TextArea({
         className={clsx(
           'px-3 py-2',
           'leading-tight',
+          'overflow-x-hidden overflow-y-auto',
           {
+            'resize-none': noResize,
             'border': !noBorder,
             'flex-grow max-w-full': dense,
             'clr-outline': !noOutline
diff --git a/rsconcept/frontend/src/models/rslang.ts b/rsconcept/frontend/src/models/rslang.ts
index 10e6678e..d8f26208 100644
--- a/rsconcept/frontend/src/models/rslang.ts
+++ b/rsconcept/frontend/src/models/rslang.ts
@@ -208,6 +208,7 @@ export enum RSErrorType {
   missingParenthesis = 33798,
   missingCurlyBrace = 33799,
   invalidQuantifier = 33800,
+  invalidImperative = 33801,
   expectedArgDeclaration = 33812,
   expectedLocal = 33813,
   localDoubleDeclare = 10241,
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index fd0e5056..8b7aba25 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -9,7 +9,6 @@ import { IconSave } from '@/components/Icons';
 import RefsInput from '@/components/RefsInput';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
-import TextInput from '@/components/ui/TextInput';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useRSForm } from '@/context/RSFormContext';
 import { CstType, IConstituenta, ICstUpdateData } from '@/models/rsform';
@@ -155,9 +154,11 @@ function FormConstituenta({
           disabled={disabled}
           onChange={newValue => setTerm(newValue)}
         />
-        <TextInput
+        <TextArea
           id='cst_typification'
+          rows={typification.length > ROW_SIZE_IN_CHARACTERS ? 2 : 1}
           dense
+          noResize
           noBorder
           disabled={true}
           label='Типизация'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
index f5b31a00..4d2e4c80 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
@@ -50,11 +50,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
         onSubmit={initiateSubmit}
         onDestroy={onDestroy}
       />
-      <AnimateFade
-        tabIndex={-1}
-        onKeyDown={handleInput}
-        className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}
-      >
+      <AnimateFade onKeyDown={handleInput} className={clsx('sm:w-fit w-full', 'flex flex-col sm:flex-row')}>
         <FlexColumn className='px-4 pb-2'>
           <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
index 56cd797f..78548ea0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@@ -154,7 +154,6 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
       />
       <div className='flex justify-between whitespace-nowrap'>
         <Checkbox
-          tabIndex={-1}
           id='schema_common'
           label='Общедоступная схема'
           title='Общедоступные схемы видны всем пользователям и могут быть изменены'
@@ -163,7 +162,6 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
           setValue={value => setCommon(value)}
         />
         <Checkbox
-          tabIndex={-1}
           id='schema_immutable'
           label='Неизменная схема'
           title='Только администраторы могут присваивать схемам неизменный статус'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx
index 2b6ae6c1..506b367f 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSelectors.tsx
@@ -18,7 +18,7 @@ interface GraphSelectorsProps {
 
 function GraphSelectors({ coloring, setColoring, layout, setLayout, sizing, setSizing }: GraphSelectorsProps) {
   return (
-    <div className='select-none border rounded-t-md rounded-b-none divide-y'>
+    <div className='border rounded-b-none select-none clr-input rounded-t-md'>
       <SelectSingle
         noBorder
         placeholder='Способ расположения'
@@ -27,11 +27,12 @@ function GraphSelectors({ coloring, setColoring, layout, setLayout, sizing, setS
         value={layout ? { value: layout, label: mapLabelLayout.get(layout) } : null}
         onChange={data => setLayout(data?.value ?? SelectorGraphLayout[0].value)}
       />
-      <Overlay position='right-[2.5rem] top-[0.3rem]'>
+      <Overlay position='right-[2.5rem] top-[0.5rem]'>
         {coloring === 'status' ? <BadgeHelp topic={HelpTopic.CST_STATUS} className='min-w-[25rem]' /> : null}
         {coloring === 'type' ? <BadgeHelp topic={HelpTopic.CST_CLASS} className='min-w-[25rem]' /> : null}
       </Overlay>
       <SelectSingle
+        className='my-1'
         noBorder
         placeholder='Цветовая схема'
         options={SelectorGraphColoring}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
index f516cafa..219cea34 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
@@ -43,10 +43,10 @@ function ViewConstituents({ expression, schema, activeID, isBottom, onOpenEdit }
   return (
     <motion.div
       className={clsx(
-        'border', // prettier: split-lines
+        'border overflow-hidden', // prettier: split-lines
         {
-          'mt-[2.25rem]': !isBottom, // prettier: split-lines
-          'mt-3 mx-6': isBottom
+          'mt-[2.2rem] rounded-l-md rounded-r-none': !isBottom, // prettier: split-lines
+          'mt-3 mx-6 rounded-md': isBottom
         }
       )}
       initial={{ ...animateSideView.initial }}
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index a6ec9ff6..d70ebda3 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -62,16 +62,14 @@ html {
   }
 }
 
-:focus {
+:focus,
+:focus-visible,
+:focus-within {
   outline-width: 2px;
   outline-style: solid;
   outline-color: transparent;
 }
 
-:focus-visible {
-  outline: 0;
-}
-
 ::selection {
   background: var(--cl-prim-bg-60);
   .dark & {
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 80e615dc..b3faf5d6 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -16,6 +16,11 @@
     font-weight: 600;
     font-variant: small-caps;
   }
+  @supports (-moz-appearance: none) {
+    .font-controls {
+      font-size: 0.85rem;
+    }
+  }
   .font-math {
     font-family: var(--font-math);
   }
@@ -113,7 +118,8 @@
     }
   }
 
-  :is(.clr-outline, .clr-btn-primary):focus-visible {
+  :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
+  .focus-frame:has(:focus-visible) {
     outline-width: 2px;
     outline-style: solid;
     outline-color: var(--cl-prim-bg-100);
diff --git a/rsconcept/frontend/src/utils/labels.ts b/rsconcept/frontend/src/utils/labels.ts
index 9dd91d8c..f22b8eb2 100644
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@@ -665,6 +665,8 @@ export function describeRSError(error: IRSErrorDescription): string {
       return "Пропущен символ '}'";
     case RSErrorType.invalidQuantifier:
       return 'Некорректная кванторная декларация';
+    case RSErrorType.invalidImperative:
+      return 'Использование императивного синтаксиса вне императивного блока';
     case RSErrorType.expectedArgDeclaration:
       return 'Ожидалось объявление аргументов терм-функции';
     case RSErrorType.expectedLocal: