Firefox UI fixes

2025-06-26 13:00:39 +03:00 · 2024-05-11 20:53:36 +03:00 · 2024-05-11 20:53:36 +03:00 · 2d9c4936b3
commit 2d9c4936b3
parent 1316089fc9
18 changed files with 31 additions and 17 deletions
--- a/rsconcept/frontend/src/app/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Logo.tsx
@ -10,7 +10,7 @@ function Logo() {
  return (
    <img
      alt='Логотип КонцептПортал'
-      className={clsx('max-h-[1.6rem] min-w-fit', {
+      className={clsx('max-h-[1.6rem] w-fit', {
        'min-w-[11.5rem]': size.isSmall
      })}
      src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
--- a/rsconcept/frontend/src/components/man/BadgeHelp.tsx
+++ b/rsconcept/frontend/src/components/man/BadgeHelp.tsx
@ -20,7 +20,7 @@ function BadgeHelp({ topic, ...restProps }: BadgeHelpProps) {
    return null;
  }
  return (
-    <div id={`help-${topic}`} className='p-1'>
+    <div tabIndex={-1} id={`help-${topic}`} className='p-1'>
      <IconHelp size='1.25rem' className='icon-primary' />
      <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
        <div className='relative' onClick={event => event.stopPropagation()}>
--- a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
@ -140,7 +140,7 @@ function DataTable<TData extends RowData>({
  }, [rows, dense, noHeader, contentHeight]);

  return (
-    <div id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
+    <div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
      <table className='w-full'>
        {!noHeader ? (
          <TableHeader
--- a/rsconcept/frontend/src/components/ui/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/ui/Dropdown.tsx
@ -15,6 +15,7 @@ function Dropdown({ isOpen, stretchLeft, className, children, ...restProps }: Dr
  return (
    <div className='relative'>
      <motion.div
+        tabIndex={-1}
        className={clsx(
          'z-modal-tooltip',
          'absolute mt-3',
--- a/rsconcept/frontend/src/components/ui/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
@ -26,6 +26,7 @@ function DropdownButton({
 }: DropdownButtonProps) {
  return (
    <motion.button
+      tabIndex={-1}
      type='button'
      onClick={onClick}
      className={clsx(
--- a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
@ -25,7 +25,7 @@ function DropdownCheckbox({ title, setValue, disabled, ...restProps }: DropdownC
        !!setValue && !disabled && 'clr-hover'
      )}
    >
-      <Checkbox disabled={disabled} setValue={setValue} {...restProps} />
+      <Checkbox tabIndex={-1} disabled={disabled} setValue={setValue} {...restProps} />
    </motion.div>
  );
 }
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@ -22,7 +22,7 @@ function DropdownIndicator<Option, Group extends GroupBase<Option> = GroupBase<O
  return (
    components.DropdownIndicator && (
      <components.DropdownIndicator {...props}>
-        {props.selectProps.menuIsOpen ? <IconDropArrow size='1.25rem' /> : <IconDropArrowUp size='1.25rem' />}
+        {props.selectProps.menuIsOpen ? <IconDropArrowUp size='1.25rem' /> : <IconDropArrow size='1.25rem' />}
      </components.DropdownIndicator>
    )
  );
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@ -22,7 +22,7 @@ function DropdownIndicator<Option, Group extends GroupBase<Option> = GroupBase<O
  return (
    components.DropdownIndicator && (
      <components.DropdownIndicator {...props}>
-        {props.selectProps.menuIsOpen ? <IconDropArrow size='1.25rem' /> : <IconDropArrowUp size='1.25rem' />}
+        {props.selectProps.menuIsOpen ? <IconDropArrowUp size='1.25rem' /> : <IconDropArrow size='1.25rem' />}
      </components.DropdownIndicator>
    )
  );
--- a/rsconcept/frontend/src/components/ui/TextArea.tsx
+++ b/rsconcept/frontend/src/components/ui/TextArea.tsx
@ -37,7 +37,7 @@ function TextArea({
          'leading-tight',
          {
            'border': !noBorder,
-            'flex-grow': dense,
+            'flex-grow max-w-full': dense,
            'clr-outline': !noOutline
          },
          colors,
--- a/rsconcept/frontend/src/components/ui/TextInput.tsx
+++ b/rsconcept/frontend/src/components/ui/TextInput.tsx
@ -45,7 +45,7 @@ function TextInput({
          'leading-tight truncate hover:text-clip',
          {
            'px-3': !noBorder || !disabled,
-            'flex-grow': dense,
+            'flex-grow max-w-full': dense,
            'border': !noBorder,
            'clr-outline': !noOutline
          },
--- a/rsconcept/frontend/src/components/wrap/AnimateFade.tsx
+++ b/rsconcept/frontend/src/components/wrap/AnimateFade.tsx
@ -25,6 +25,7 @@ function AnimateFade({
  }
  return (
    <motion.div
+      tabIndex={-1}
      initial={{ ...(!noFadeIn ? animateFade.initial : {}) }}
      animate={hideContent ? 'hidden' : 'active'}
      variants={animateFade.variants}
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@ -139,7 +139,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
    <Modal
      header='Создание конституенты из шаблона'
      submitText='Создать'
-      className='w-[43rem] h-[36rem] px-6'
+      className='w-[43rem] h-[36.5rem] px-6'
      hideWindow={hideWindow}
      canSubmit={validated}
      onSubmit={handleSubmit}
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
@ -104,6 +104,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
        <button
          key='dlg_cst_show_comment'
          id='dlg_cst_show_comment'
+          tabIndex={-1}
          type='button'
          className='self-start cc-label clr-text-url hover:underline'
          onClick={() => setForceComment(true)}
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@ -9,6 +9,7 @@ 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';
@ -154,18 +155,14 @@ function FormConstituenta({
          disabled={disabled}
          onChange={newValue => setTerm(newValue)}
        />
-        <TextArea
+        <TextInput
          id='cst_typification'
          dense
          noBorder
          disabled={true}
          label='Типизация'
-          rows={typification.length > ROW_SIZE_IN_CHARACTERS ? 2 : 1}
          value={typification}
          colors='clr-app'
-          style={{
-            resize: 'none'
-          }}
        />
        <AnimatePresence>
          <AnimateFade key='cst_expression_fade' hideContent={!!state && !state?.definition_formal && isElementary}>
@ -225,6 +222,7 @@ function FormConstituenta({
            <button
              key='cst_disable_comment'
              id='cst_disable_comment'
+              tabIndex={-1}
              type='button'
              className='self-start cc-label clr-text-url hover:underline'
              onClick={() => setForceComment(true)}
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
@ -18,6 +18,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro

  return (
    <motion.div
+      tabIndex={-1}
      className='text-sm border dense cc-scroll-y'
      initial={false}
      animate={isOpen ? 'open' : 'closed'}
@ -29,6 +30,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
      {data?.errors.map((error, index) => {
        return (
          <p
+            tabIndex={-1}
            key={`error-${index}`}
            className={`clr-text-red ${disabled ? '' : 'cursor-pointer'}`}
            onClick={disabled ? undefined : () => onShowError(error)}
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
@ -39,6 +39,7 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze

  return (
    <div
+      tabIndex={-1}
      className={clsx(
        'w-[10rem] h-[1.75rem]',
        'px-2 flex items-center justify-center gap-2',
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@ -154,6 +154,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
      />
      <div className='flex justify-between whitespace-nowrap'>
        <Checkbox
+          tabIndex={-1}
          id='schema_common'
          label='Общедоступная схема'
          title='Общедоступные схемы видны всем пользователям и могут быть изменены'
@ -162,6 +163,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
          setValue={value => setCommon(value)}
        />
        <Checkbox
+          tabIndex={-1}
          id='schema_immutable'
          label='Неизменная схема'
          title='Только администраторы могут присваивать схемам неизменный статус'
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@ -41,6 +41,7 @@ html {

 :root {
  font-size: 16px;
+  line-height: 24px;
  font-family: var(--font-main);

  color: var(--cl-fg-100);
@ -57,6 +58,7 @@ html {
@media only screen and (max-width: 639px) {
  :root {
    font-size: 12px;
+    line-height: 18px;
  }
 }

@ -64,9 +66,10 @@ html {
  outline-width: 2px;
  outline-style: solid;
  outline-color: transparent;
-  .dark & {
-    outline-color: transparent;
-  }
+}
+
+:focus-visible {
+  outline: 0;
 }

 ::selection {
@ -123,6 +126,10 @@ div:not(.dense) > p {
    @apply font-semibold;
  }

+  li {
+    list-style-position: inside;
+  }
+
  li::marker {
    content: '– ';
  }