UI improvements and fixes

2025-06-26 13:00:39 +03:00 · 2024-05-12 13:58:28 +03:00 · 2024-05-12 13:58:28 +03:00 · e9f62a0abc
commit e9f62a0abc
parent 2d9c4936b3
17 changed files with 43 additions and 24 deletions
--- 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'}
    />
  );
--- 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
      )}
--- 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
      )}
--- 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)}
--- 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}
    />
  );
--- 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}
    />
  );
--- 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}
--- 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
--- 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,
--- 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='Типизация'
--- 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} />

--- 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='Только администраторы могут присваивать схемам неизменный статус'
--- 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}
--- 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 }}
--- 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 & {
--- 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);
--- 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: