M: Minor UI fixes

2025-06-25 20:40:36 +03:00 · 2025-06-19 17:50:02 +03:00 · 2025-06-19 17:50:02 +03:00 · 22d8e0fadd
commit 22d8e0fadd
parent dd8d4fe622
16 changed files with 42 additions and 70 deletions
--- a/rsconcept/frontend/src/components/control/mini-button.tsx
+++ b/rsconcept/frontend/src/components/control/mini-button.tsx
@ -38,8 +38,8 @@ export function MiniButton({
      tabIndex={tabIndex ?? -1}
      className={cn(
        'rounded-lg',
-        'cc-controls cc-animate-background',
-        'cursor-pointer disabled:cursor-auto',
+        'text-muted-foreground cc-animate-color',
+        'cursor-pointer disabled:cursor-auto disabled:opacity-75',
        (!tabIndex || tabIndex === -1) && 'outline-hidden',
        !noHover && 'cc-hover-pulse',
        !noPadding && 'px-1 py-1',
--- a/rsconcept/frontend/src/components/control/selector-button.tsx
+++ b/rsconcept/frontend/src/components/control/selector-button.tsx
@ -30,9 +30,9 @@ export function SelectorButton({
      className={cn(
        'px-1 flex flex-start items-center gap-1',
        'text-sm font-controls select-none',
-        'text-btn cc-controls',
-        'disabled:cursor-auto cursor-pointer',
-        'cc-hover-text cc-animate-color',
+        'disabled:cursor-auto cursor-pointer outline-hidden',
+        'text-muted-foreground cc-hover-text cc-animate-color disabled:opacity-75',
+        !text && 'cc-hover-pulse',
        className
      )}
      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
--- a/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
+++ b/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
@ -21,9 +21,9 @@ export function PaginationTools<TData>({
  paginationOptions
 }: PaginationToolsProps<TData>) {
  const buttonClass =
-    'cc-hover-text cc-controls cc-animate-color focus-outline rounded-md not-[:disabled]:cursor-pointer';
+    'cc-hover-text cc-animate-color focus-outline rounded-md disabled:opacity-75 not-[:disabled]:cursor-pointer';
  return (
-    <div className='flex justify-end items-center my-2 text-sm cc-controls select-none'>
+    <div className='flex justify-end items-center my-2 text-muted-foreground text-sm select-none'>
      <span className='mr-3'>
        {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
      -
--- a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
+++ b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
@ -36,7 +36,7 @@ export function DropdownButton({
      className={cn(
        'px-3 py-1 inline-flex items-center gap-2',
        'text-left text-sm text-ellipsis whitespace-nowrap',
-        'disabled:cc-controls disabled:opacity-75',
+        'disabled:text-muted-foreground disabled:opacity-75',
        'focus-outline cc-animate-background',
        !!onClick ? 'cc-hover-bg cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
        className
--- a/rsconcept/frontend/src/components/view/indicator.tsx
+++ b/rsconcept/frontend/src/components/view/indicator.tsx
@ -1,8 +1,8 @@
-import clsx from 'clsx';
-
 import { type Styling, type Titled } from '@/components/props';
 import { globalIDs } from '@/utils/constants';

+import { cn } from '../utils';
+
 interface IndicatorProps extends Titled, Styling {
  /** Icon to display. */
  icon: React.ReactNode;
@ -17,8 +17,8 @@ interface IndicatorProps extends Titled, Styling {
 export function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ...restProps }: IndicatorProps) {
  return (
    <div
-      className={clsx(
-        'cc-controls', //
+      className={cn(
+        'text-muted-foreground', //
        'outline-hidden',
        !noPadding && 'px-1 py-1',
        className
--- a/rsconcept/frontend/src/features/library/components/select-location.tsx
+++ b/rsconcept/frontend/src/features/library/components/select-location.tsx
@ -92,7 +92,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
                {item.filesInside ? (
                  <IconFolder size='1rem' className='text-foreground' />
                ) : (
-                  <IconFolderEmpty size='1rem' className='cc-controls' />
+                  <IconFolderEmpty size='1rem' className='text-foreground-muted' />
                )}
              </div>
            )}
--- a/rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx
+++ b/rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx
@ -156,15 +156,8 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
                (head ? describeLocationHead(head) : 'Выберите каталог') + '<br/><kbd>Ctrl + клик</kbd> - Проводник'
              }
              hideTitle={headMenu.isOpen}
-              icon={
-                head ? (
-                  <IconLocationHead value={head} size='1.25rem' />
-                ) : (
-                  <IconFolderSearch size='1.25rem' className='cc-controls' />
-                )
-              }
+              icon={head ? <IconLocationHead value={head} size='1.25rem' /> : <IconFolderSearch size='1.25rem' />}
              onClick={handleFolderClick}
-              text={head ?? '//'}
            />

            <Dropdown isOpen={headMenu.isOpen} stretchLeft>
@ -200,7 +193,7 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
            placeholder='Путь'
            noIcon
            noBorder
-            className='w-18 sm:w-20 grow'
+            className='w-18 sm:w-20 grow ml-1'
            query={path}
            onChangeQuery={setPath}
          />
--- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx
@ -135,7 +135,7 @@ export function OssFlow() {
        });
      }
    } else {
-      if (node.data.operation?.result) {
+      if (node.data.operation) {
        navigateOperationSchema(node.data.operation.id);
      }
    }
--- a/rsconcept/frontend/src/features/rsform/components/wordform-button.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/wordform-button.tsx
@ -21,7 +21,7 @@ export function WordformButton({ text, example, grams, onSelectGrams, isSelected
        'p-1',
        'border rounded-none',
        'cursor-pointer',
-        'cc-controls hover:bg-accent hover:text-foreground cc-animate-color',
+        'text-muted-foreground hover:bg-accent hover:text-foreground cc-animate-color',
        isSelected && 'cc-selected'
      )}
      {...restProps}
--- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/mgraph-node.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/mgraph-node.tsx
@ -20,8 +20,9 @@ interface MGraphNodeInternal {

 export function MGraphNode(node: MGraphNodeInternal) {
  const tooltipText =
-    (node.data.annotations.length === 0 ? '' : `Конституенты: ${node.data.annotations.join(' ')}<br/>`) +
-    node.data.text;
+    `Ступень ${node.data.text}` +
+    '<br/>' +
+    (node.data.annotations.length === 0 ? '' : `Конституенты: ${node.data.annotations.join(' ')}`);

  return (
    <>
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-local-button.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-local-button.tsx
@ -34,7 +34,7 @@ export function RSLocalButton({
        'w-7 sm:w-8 h-5 sm:h-6',
        'cursor-pointer disabled:cursor-default',
        'rounded-md',
-        'cc-hover-text cc-controls cc-animate-color',
+        'cc-hover-text cc-hover-pulse text-muted-foreground cc-animate-color',
        'font-math',
        className
      )}
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-token-button.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-token-button.tsx
@ -22,7 +22,7 @@ export function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps)
        'h-5 sm:h-6',
        'px-1 rounded-md',
        'outline-hidden',
-        'cc-hover-text cc-controls cc-animate-color',
+        'cc-hover-text cc-hover-pulse text-muted-foreground cc-animate-color',
        'font-math',
        'cursor-pointer disabled:cursor-default',
        label.length > 3 ? 'w-14.5 md:w-18' : 'w-7.25 md:w-9'
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/view-constituents/constituents-search.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/view-constituents/constituents-search.tsx
@ -41,7 +41,7 @@ export function ConstituentsSearch({ dense }: ConstituentsSearchProps) {
        <MiniButton
          titleHtml={`Наследованные: <b>${includeInherited ? 'отображать' : 'скрывать'}</b>`}
          aria-label={`Отображение наследованных: ${includeInherited ? 'отображать' : 'скрывать'}`}
-          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : 'cc-controls'} />}
+          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : undefined} />}
          className='h-fit self-center'
          onClick={toggleInherited}
        />
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@ -92,6 +92,23 @@
  --duration-fade: 300ms;
  --duration-move: 500ms;

+  /* Custom animations */
+  --animate-pulse-scale: pulse-scale 1s infinite;
+
+  @keyframes pulse-scale {
+    0% {
+      transform: scale(1);
+    }
+
+    70% {
+      transform: scale(1.2);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
  /* ========= shadcn theme ============ */

  /* --radius-sm: calc(var(--radius) - 4px);
@ -123,19 +140,4 @@
  --color-border: var(--clr-prim-400);
  --color-input: var(--color-card);
  --color-ring: var(--color-primary);
-
-  /* --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --color-sidebar: var(--color-background);
-  --color-sidebar-foreground: var(--color-foreground);
-  --color-sidebar-primary: var(--color-primary);
-  --color-sidebar-primary-foreground: var(--color-primary-foreground);
-  --color-sidebar-accent: var(--color-accent);
-  --color-sidebar-accent-foreground: var(--color-accent-foreground);
-  --color-sidebar-border: var(--color-border);
-  --color-sidebar-ring: var(--color-ring); */
 }
--- a/rsconcept/frontend/src/styling/utilities.css
+++ b/rsconcept/frontend/src/styling/utilities.css
@ -33,20 +33,6 @@
  }
 }

-@keyframes pulse-scale {
-  0% {
-    transform: scale(1);
-  }
-
-  70% {
-    transform: scale(1.2);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
@utility cc-hover-text {
  &:hover:not(:disabled) {
    color: var(--color-foreground);
@ -80,16 +66,6 @@
  }
 }

-@utility cc-controls {
-  color: var(--color-muted-foreground);
-  background-color: transparent;
-
-  &:disabled {
-    color: var(--color-muted-foreground);
-    opacity: 0.75;
-  }
-}
-
@utility cc-remove {
  color: var(--color-muted-foreground);

--- a/rsconcept/frontend/src/utils/utils.ts
+++ b/rsconcept/frontend/src/utils/utils.ts
@ -99,9 +99,9 @@ export function toggleTristateFlag(prev: boolean | null): boolean | null {
 /**
 * Toggle tristate color: gray - green - red .
 */
-export function tripleToggleColor(value: boolean | null): string {
+export function tripleToggleColor(value: boolean | null): string | undefined {
  if (value === null) {
-    return 'cc-controls';
+    return undefined;
  }
  return value ? 'text-constructive' : 'text-destructive';
 }