From a60f63455ca2dd64e833490279e20c91d025cb56 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Thu, 13 Mar 2025 13:30:31 +0300 Subject: [PATCH] R: Simplify inline styles pt2 --- .../src/components/data-table/data-table.tsx | 6 +- .../src/components/dropdown/dropdown.tsx | 14 +- .../src/components/modal/modal-view.tsx | 6 +- .../src/components/view/embed-youtube.tsx | 3 +- .../help/items/ui/help-formula-tree.tsx | 14 +- .../features/help/items/ui/help-library.tsx | 3 +- .../pages/manuals-page/topics-dropdown.tsx | 15 +- .../create-item-page/form-create-item.tsx | 3 +- .../oss/components/info-operation.tsx | 2 +- .../oss/components/operation-tooltip.tsx | 3 +- .../editor-oss-graph/toolbar-oss-graph.tsx | 3 +- .../dialogs/dlg-show-ast/dlg-show-ast.tsx | 2 +- .../dlg-show-type-graph/graph/mgraph-node.tsx | 4 +- .../toolbar-constituenta.tsx | 2 +- .../editor-rsexpression/parsing-result.tsx | 14 +- .../editor-rsexpression/rs-edit-controls.tsx | 16 +- .../editor-term-graph/graph/tg-node.tsx | 47 ++--- .../rsform-page/editor-term-graph/tg-flow.tsx | 4 +- .../editor-term-graph/toolbar-focused-cst.tsx | 3 +- .../editor-term-graph/view-hidden.tsx | 46 ++--- rsconcept/frontend/src/index.css | 3 +- rsconcept/frontend/src/styling/components.css | 186 ++++++++++++++++++ .../src/styling/{styles.css => utilities.css} | 75 +------ rsconcept/frontend/src/utils/constants.ts | 14 +- 24 files changed, 266 insertions(+), 222 deletions(-) create mode 100644 rsconcept/frontend/src/styling/components.css rename rsconcept/frontend/src/styling/{styles.css => utilities.css} (77%) diff --git a/rsconcept/frontend/src/components/data-table/data-table.tsx b/rsconcept/frontend/src/components/data-table/data-table.tsx index 23f55159..5aa33c02 100644 --- a/rsconcept/frontend/src/components/data-table/data-table.tsx +++ b/rsconcept/frontend/src/components/data-table/data-table.tsx @@ -120,15 +120,15 @@ export function DataTable({ onRowDoubleClicked, noDataComponent, + paginationPerPage, paginationOptions = [10, 20, 30, 40, 50], ...restProps }: DataTableProps) { const [lastSelected, setLastSelected] = useState(null); - const table = useDataTable({ ...restProps }); + const table = useDataTable({ paginationPerPage, ...restProps }); - const isPaginationEnabled = typeof table.getCanNextPage === 'function'; const isEmpty = table.getRowModel().rows.length === 0; const fixedSize = useMemo(() => { @@ -178,7 +178,7 @@ export function DataTable({ {!noFooter ? : null} - {isPaginationEnabled && !isEmpty ? ( + {!!paginationPerPage && !isEmpty ? ( ) { return (
diff --git a/rsconcept/frontend/src/components/modal/modal-view.tsx b/rsconcept/frontend/src/components/modal/modal-view.tsx index d8bbadac..af4f33be 100644 --- a/rsconcept/frontend/src/components/modal/modal-view.tsx +++ b/rsconcept/frontend/src/components/modal/modal-view.tsx @@ -61,7 +61,7 @@ export function ModalView({

{header} @@ -87,12 +87,12 @@ export function ModalView({ aria-label='Закрыть' className={clsx( 'my-2 mx-auto text-sm min-w-28', - fullScreen && 'z-pop absolute bottom-0 right-1/2 translate-x-1/2 cc-blur' + fullScreen && 'z-pop absolute bottom-0 right-1/2 translate-x-1/2' )} onClick={hideDialog} /> ) : ( -
+
{' '}
diff --git a/rsconcept/frontend/src/components/view/embed-youtube.tsx b/rsconcept/frontend/src/components/view/embed-youtube.tsx index 32a2a82b..f09377ee 100644 --- a/rsconcept/frontend/src/components/view/embed-youtube.tsx +++ b/rsconcept/frontend/src/components/view/embed-youtube.tsx @@ -18,9 +18,8 @@ export function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) } return (
@@ -12,22 +10,22 @@ export function HelpFormulaTree() {

Виды узлов

  • - объявление идентификатора + объявление идентификатора
  • - глобальный идентификатор + глобальный идентификатор
  • - логическое выражение + логическое выражение
  • - типизированное выражение + типизированное выражение
  • - присвоение и итерация + присвоение и итерация
  • - составные выражения + составные выражения
    • ); diff --git a/rsconcept/frontend/src/features/help/items/ui/help-library.tsx b/rsconcept/frontend/src/features/help/items/ui/help-library.tsx index e4eee3db..85b07f48 100644 --- a/rsconcept/frontend/src/features/help/items/ui/help-library.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/help-library.tsx @@ -16,7 +16,6 @@ import { IconSubfolders, IconUserSearch } from '@/components/icons'; -import { APP_COLORS } from '@/styling/colors'; import { LinkTopic } from '../../components/link-topic'; import { HelpTopic } from '../../models/help-topic'; @@ -33,7 +32,7 @@ export function HelpLibrary() {

  • - зеленым текстом выделены ОСС + зеленым текстом выделены ОСС
  • клик по строке - переход к редактированию схемы
  • Ctrl + клик по строке откроет схему в новой вкладке
    • diff --git a/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx b/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx index ef259f6f..09e7b236 100644 --- a/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx +++ b/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx @@ -7,7 +7,7 @@ import { useDropdown } from '@/components/dropdown'; import { IconMenuFold, IconMenuUnfold } from '@/components/icons'; import { SelectTree } from '@/components/input'; import { useAppLayoutStore, useFitHeight } from '@/stores/app-layout'; -import { PARAMETER, prefixes } from '@/utils/constants'; +import { prefixes } from '@/utils/constants'; import { describeHelpTopic, labelHelpTopic } from '../../labels'; import { HelpTopic, topicParent } from '../../models/help-topic'; @@ -56,14 +56,11 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro getParent={item => topicParent.get(item) ?? item} getLabel={labelHelpTopic} getDescription={describeHelpTopic} - className='border-r border-t rounded-none cc-scroll-y bg-prim-200' - style={{ - maxHeight: treeHeight, - willChange: 'clip-path', - transitionProperty: 'clip-path', - transitionDuration: `${PARAMETER.moveDuration}ms`, - clipPath: menu.isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)' - }} + className={clsx( + 'cc-topic-dropdown border-r border-t rounded-none cc-scroll-y bg-prim-200', + menu.isOpen && 'open' + )} + style={{ maxHeight: treeHeight }} />
    ); diff --git a/rsconcept/frontend/src/features/library/pages/create-item-page/form-create-item.tsx b/rsconcept/frontend/src/features/library/pages/create-item-page/form-create-item.tsx index c6761415..24521a1c 100644 --- a/rsconcept/frontend/src/features/library/pages/create-item-page/form-create-item.tsx +++ b/rsconcept/frontend/src/features/library/pages/create-item-page/form-create-item.tsx @@ -113,7 +113,8 @@ export function FormCreateItem() { id='schema_file' ref={inputRef} type='file' - style={{ display: 'none' }} + aria-hidden + className='hidden' accept={EXTEOR_TRS_FILE} onChange={handleFileChange} /> diff --git a/rsconcept/frontend/src/features/oss/components/info-operation.tsx b/rsconcept/frontend/src/features/oss/components/info-operation.tsx index bddff84a..497ba738 100644 --- a/rsconcept/frontend/src/features/oss/components/info-operation.tsx +++ b/rsconcept/frontend/src/features/oss/components/info-operation.tsx @@ -74,7 +74,7 @@ export function InfoOperation({ operation }: InfoOperationProps) { dense noHeader noFooter - className='text-sm border select-none mb-2' + className='text-sm border-x select-none mb-2' data={operation.substitutions} columns={columns} /> diff --git a/rsconcept/frontend/src/features/oss/components/operation-tooltip.tsx b/rsconcept/frontend/src/features/oss/components/operation-tooltip.tsx index b7ee7d60..fa19caec 100644 --- a/rsconcept/frontend/src/features/oss/components/operation-tooltip.tsx +++ b/rsconcept/frontend/src/features/oss/components/operation-tooltip.tsx @@ -12,8 +12,7 @@ export function OperationTooltip() { clickable id={globalIDs.operation_tooltip} layer='z-topmost' - className='max-w-140 dense' - style={{ maxHeight: '30rem', overflowY: 'auto' }} + className='max-w-140 dense max-h-120! overflow-y-auto!' hidden={!hoverOperation} > {hoverOperation ? : null} diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/toolbar-oss-graph.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/toolbar-oss-graph.tsx index 20c66afe..dd12a2b8 100644 --- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/toolbar-oss-graph.tsx +++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/toolbar-oss-graph.tsx @@ -131,8 +131,7 @@ export function ToolbarOssGraph({ className={clsx( 'flex flex-col items-center pt-1', 'rounded-b-2xl', - 'cc-blur', - 'hover:bg-prim-100 hover:bg-opacity-50', + 'hover:bg-prim-100 hover:bg-opacity-50 backdrop-blur-xs', className )} {...restProps} diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx index 0818e61a..f47149af 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx @@ -35,7 +35,7 @@ export function DlgShowAST() { className={clsx( 'absolute z-pop top-2 right-1/2 translate-x-1/2 max-w-[60ch]', 'px-2 rounded-2xl', - 'cc-blur bg-prim-100/90', + 'backdrop-blur-xs bg-prim-100/90', 'text-lg text-center' )} > diff --git 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 index fa2e1755..1e720004 100644 --- 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 @@ -26,7 +26,7 @@ export function MGraphNode(node: MGraphNodeInternal) { return ( <> - +
    {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}
    - + ); } diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/toolbar-constituenta.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/toolbar-constituenta.tsx index 5ec879e2..3fd54754 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/toolbar-constituenta.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/toolbar-constituenta.tsx @@ -80,7 +80,7 @@ export function ToolbarConstituenta({ } return ( -
    +
    {schema.oss.length > 0 ? ( +

    Ошибок: {errorCount} | Предупреждений: {warningsCount}

    diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx index 1c6defb3..015b91dd 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; -import { PARAMETER, prefixes } from '@/utils/constants'; +import { prefixes } from '@/utils/constants'; import { TokenID } from '../../../backend/types'; @@ -91,19 +91,13 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP return (
    {MAIN_FIRST_ROW.map(token => ( diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/tg-node.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/tg-node.tsx index 9f6429de..87fdccad 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/tg-node.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/tg-node.tsx @@ -1,6 +1,7 @@ 'use client'; import { Handle, Position } from 'reactflow'; +import clsx from 'clsx'; import { APP_COLORS } from '@/styling/colors'; import { globalIDs } from '@/utils/constants'; @@ -13,10 +14,6 @@ import { useRSEdit } from '../../rsedit-context'; const DESCRIPTION_THRESHOLD = 15; const LABEL_THRESHOLD = 3; -const FONT_SIZE_MAX = 14; -const FONT_SIZE_MED = 12; -const FONT_SIZE_MIN = 10; - /** * Represents graph AST node internal data. */ @@ -52,18 +49,19 @@ export function TGNode(node: TGNodeInternal) { return ( <> - +
    LABEL_THRESHOLD ? 'text-[12px]' : 'text-[14px]' + )} style={{ backgroundColor: node.selected ? APP_COLORS.bgActiveSelection : isFocused ? APP_COLORS.bgPurple - : colorBgGraphNode(node.data, coloring), - fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX, - borderWidth: isFocused ? '2px' : '0px', - borderColor: isFocused ? APP_COLORS.bgSelected : 'transparent' + : colorBgGraphNode(node.data, coloring) }} data-tooltip-id={globalIDs.tooltip} data-tooltip-html={describeCstNode(node.data)} @@ -71,37 +69,22 @@ export function TGNode(node: TGNodeInternal) { onContextMenu={handleContextMenu} onDoubleClick={handleDoubleClick} > -
    - {label} -
    +
    {label}
    - + {description ? (
    DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED - }} + className={clsx( + 'mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]', + description.length > DESCRIPTION_THRESHOLD ? 'text-[10px]' : 'text-[12px]' + )} onContextMenu={handleContextMenu} onDoubleClick={handleDoubleClick} >
    {description}
    - diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx index 5c12e30c..e92fc95c 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx @@ -163,7 +163,7 @@ export function TGFlow() { return (
    -
    +
    {!focusCst ? ( @@ -181,7 +181,7 @@ export function TGFlow() {
    - + Выбор {selected.length} из {schema.stats?.count_all ?? 0} diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-focused-cst.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-focused-cst.tsx index 90337771..bba7a551 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-focused-cst.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-focused-cst.tsx @@ -2,7 +2,6 @@ import { MiniButton } from '@/components/control'; import { IconGraphInputs, IconGraphOutputs, IconReset } from '@/components/icons'; -import { APP_COLORS } from '@/styling/colors'; import { useTermGraphStore } from '../../../stores/term-graph'; import { useRSEdit } from '../rsedit-context'; @@ -37,7 +36,7 @@ export function ToolbarFocusedCst() { return (
    -
    +
    Фокус {focusCst.alias} diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/view-hidden.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/view-hidden.tsx index a1fdbf3d..5380d1a0 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/view-hidden.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/view-hidden.tsx @@ -6,8 +6,7 @@ import { MiniButton } from '@/components/control'; import { IconDropArrow, IconDropArrowUp } from '@/components/icons'; import { useWindowSize } from '@/hooks/use-window-size'; import { useFitHeight } from '@/stores/app-layout'; -import { APP_COLORS } from '@/styling/colors'; -import { globalIDs, PARAMETER, prefixes } from '@/utils/constants'; +import { globalIDs, prefixes } from '@/utils/constants'; import { colorBgGraphNode } from '../../../colors'; import { type IConstituenta } from '../../../models/rsform'; @@ -57,15 +56,7 @@ export function ViewHidden({ items }: ViewHiddenProps) { />
    -
    +
    {`Скрытые [${localSelected.length} | ${items.length}]`}
    @@ -73,19 +64,13 @@ export function ViewHidden({ items }: ViewHiddenProps) {
    {items.map(cstID => { const cst = schema.cstByID.get(cstID)!; @@ -93,17 +78,12 @@ export function ViewHidden({ items }: ViewHiddenProps) {