From da035478f6a3ddba3c1079c758e4794de3e51e16 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Thu, 17 Apr 2025 14:37:47 +0300 Subject: [PATCH] F: UI semantic styling improvements --- .../frontend/src/app/application-layout.tsx | 1 + .../frontend/src/app/global-tooltips.tsx | 2 +- .../help/items/ui/help-type-graph.tsx | 6 +- .../pages/manuals-page/topics-dropdown.tsx | 2 +- .../help/pages/manuals-page/topics-static.tsx | 2 +- .../dlg-create-operation.tsx | 2 +- .../dlg-edit-operation/dlg-edit-operation.tsx | 2 +- .../editor-oss-graph/graph/styles.css | 26 ++++ .../oss-page/editor-oss-graph/oss-flow.tsx | 2 + .../features/oss/pages/oss-page/oss-tabs.tsx | 2 +- .../dlg-cst-template/dlg-cst-template.tsx | 2 +- .../dlg-edit-reference/dlg-edit-reference.tsx | 2 +- .../dlg-inline-synthesis.tsx | 2 +- .../rsform/dialogs/dlg-show-ast/ast-flow.tsx | 2 + .../dialogs/dlg-show-ast/graph/styles.css | 25 ++++ .../dlg-show-type-graph/graph/mgraph-node.tsx | 1 + .../dlg-show-type-graph/graph/styles.css | 25 ++++ .../dlg-show-type-graph/mgraph-flow.tsx | 2 + .../editor-term-graph/graph/styles.css | 25 ++++ .../rsform-page/editor-term-graph/tg-flow.tsx | 2 + .../rsform/pages/rsform-page/rstabs.tsx | 2 +- rsconcept/frontend/src/index.css | 2 + rsconcept/frontend/src/styling/components.css | 4 +- rsconcept/frontend/src/styling/constants.css | 8 -- rsconcept/frontend/src/styling/imports.css | 5 - rsconcept/frontend/src/styling/overrides.css | 127 ++++-------------- rsconcept/frontend/src/styling/reactflow.css | 73 ++++++++++ rsconcept/frontend/src/styling/setup.css | 12 +- 28 files changed, 234 insertions(+), 134 deletions(-) create mode 100644 rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css create mode 100644 rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css create mode 100644 rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css create mode 100644 rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css delete mode 100644 rsconcept/frontend/src/styling/imports.css create mode 100644 rsconcept/frontend/src/styling/reactflow.css diff --git a/rsconcept/frontend/src/app/application-layout.tsx b/rsconcept/frontend/src/app/application-layout.tsx index 612d0264..433adedc 100644 --- a/rsconcept/frontend/src/app/application-layout.tsx +++ b/rsconcept/frontend/src/app/application-layout.tsx @@ -28,6 +28,7 @@ export function ApplicationLayout() {
{ id={globalIDs.tooltip} layer='z-topmost' place='right-start' - className='mt-8 max-w-80 break-words' + className='mt-8 max-w-80 break-words rounded-lg!' /> Виды узлов
  • - ступень-основание + ступень-основание
  • - ступень-булеан + ступень-булеан
  • - ступень декартова произведения + ступень декартова произведения
    • ); 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 c21a5ec2..03af7b3c 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 @@ -57,7 +57,7 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro getLabel={labelHelpTopic} getDescription={describeHelpTopic} className={clsx( - 'cc-topic-dropdown border-r border-t rounded-none cc-scroll-y bg-prim-200', + 'cc-topic-dropdown border-r border-t rounded-none cc-scroll-y bg-secondary', menu.isOpen && 'open' )} style={{ maxHeight: treeHeight }} diff --git a/rsconcept/frontend/src/features/help/pages/manuals-page/topics-static.tsx b/rsconcept/frontend/src/features/help/pages/manuals-page/topics-static.tsx index d5fa4b93..24399b08 100644 --- a/rsconcept/frontend/src/features/help/pages/manuals-page/topics-static.tsx +++ b/rsconcept/frontend/src/features/help/pages/manuals-page/topics-static.tsx @@ -29,7 +29,7 @@ export function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) 'cc-scroll-y', 'self-start', 'border-x border-t rounded-none', - 'text-xs sm:text-sm bg-prim-200', + 'text-xs sm:text-sm bg-secondary', 'select-none' )} style={{ maxHeight: topicsHeight }} diff --git a/rsconcept/frontend/src/features/oss/dialogs/dlg-create-operation/dlg-create-operation.tsx b/rsconcept/frontend/src/features/oss/dialogs/dlg-create-operation/dlg-create-operation.tsx index 8e0b27f3..7b0c9afc 100644 --- a/rsconcept/frontend/src/features/oss/dialogs/dlg-create-operation/dlg-create-operation.tsx +++ b/rsconcept/frontend/src/features/oss/dialogs/dlg-create-operation/dlg-create-operation.tsx @@ -104,7 +104,7 @@ export function DlgCreateOperation() { selectedIndex={activeTab} onSelect={(index, last) => handleSelectTab(index as TabID, last as TabID)} > - + setActiveTab(index as TabID)} > - + {target.operation_type === OperationType.SYNTHESIS ? ( diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css new file mode 100644 index 00000000..224e6ea8 --- /dev/null +++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css @@ -0,0 +1,26 @@ +@import '../../../../../../styling/reactflow.css'; + +/* stylelint-disable selector-class-pattern */ + +.react-flow__node-input, +.react-flow__node-synthesis { + cursor: pointer; + + border-radius: 5px; + padding: 2px; + height: fit-content; + + outline-offset: -2px; + outline-style: solid; + outline-color: transparent; + + transition-property: outline-offset; + transition-timing-function: var(--transition-bezier); + transition-duration: var(--duration-select); + + &.selected { + outline-offset: 4px; + outline-color: var(--color-graph-selected); + border-color: var(--color-foreground); + } +} diff --git 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 index f8a31132..dc26931d 100644 --- 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 @@ -28,6 +28,8 @@ import { type ContextMenuData, NodeContextMenu } from './node-context-menu'; import { ToolbarOssGraph } from './toolbar-oss-graph'; import { useGetLayout } from './use-get-layout'; +import './graph/styles.css'; + const ZOOM_MAX = 2; const ZOOM_MIN = 0.5; export const VIEW_PADDING = 0.2; diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/oss-tabs.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/oss-tabs.tsx index 1a841368..30d1f78c 100644 --- a/rsconcept/frontend/src/features/oss/pages/oss-page/oss-tabs.tsx +++ b/rsconcept/frontend/src/features/oss/pages/oss-page/oss-tabs.tsx @@ -61,7 +61,7 @@ export function OssTabs({ activeTab }: OssTabsProps) { selectedTabClassName='cc-selected' className='relative flex flex-col mx-auto min-w-fit items-center' > - + diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/dlg-cst-template.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/dlg-cst-template.tsx index 55d39041..330c6667 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/dlg-cst-template.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/dlg-cst-template.tsx @@ -76,7 +76,7 @@ export function DlgCstTemplate() { selectedIndex={activeTab} onSelect={index => setActiveTab(index as TabID)} > - + diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-edit-reference/dlg-edit-reference.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-edit-reference/dlg-edit-reference.tsx index f88bc6a4..537309c2 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-edit-reference/dlg-edit-reference.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-edit-reference/dlg-edit-reference.tsx @@ -107,7 +107,7 @@ export function DlgEditReference() { helpTopic={HelpTopic.TERM_CONTROL} > - + setActiveTab(index as TabID)} > - + void; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css new file mode 100644 index 00000000..4235ca97 --- /dev/null +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css @@ -0,0 +1,25 @@ +@import '../../../../../styling/reactflow.css'; + +/* stylelint-disable selector-class-pattern */ + +.react-flow__node-token { + cursor: default; + + border-radius: 100%; + width: 40px; + height: 40px; + + outline-offset: -2px; + outline-style: solid; + outline-color: transparent; + + transition-property: outline-offset; + transition-timing-function: var(--transition-bezier); + transition-duration: var(--duration-select); + + &.selected { + outline-offset: 4px; + outline-color: var(--color-graph-selected); + border-color: transparent; + } +} 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 402fc47f..f42a8a37 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 @@ -30,6 +30,7 @@ export function MGraphNode(node: MGraphNodeInternal) { className='cc-node-label w-full h-full cursor-default flex items-center justify-center rounded-full' data-tooltip-id={globalIDs.tooltip} data-tooltip-html={tooltipText} + data-tooltip-hidden={node.dragging} style={{ backgroundColor: colorBgTMGraphNode(node.data) }} > {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''} diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css new file mode 100644 index 00000000..4944e0d9 --- /dev/null +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css @@ -0,0 +1,25 @@ +@import '../../../../../styling/reactflow.css'; + +/* stylelint-disable selector-class-pattern */ + +.react-flow__node-step { + cursor: default; + + border-radius: 100%; + width: 40px; + height: 40px; + + outline-offset: -2px; + outline-style: solid; + outline-color: transparent; + + transition-property: outline-offset; + transition-timing-function: var(--transition-bezier); + transition-duration: var(--duration-select); + + &.selected { + outline-offset: 4px; + outline-color: var(--color-graph-selected); + border-color: transparent; + } +} diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx index cf1b6a50..80172bb7 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx @@ -9,6 +9,8 @@ import { TMGraphEdgeTypes } from './graph/mgraph-edge-types'; import { applyLayout } from './graph/mgraph-layout'; import { TMGraphNodeTypes } from './graph/mgraph-node-types'; +import './graph/styles.css'; + const ZOOM_MAX = 2; const ZOOM_MIN = 0.5; diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css new file mode 100644 index 00000000..98473237 --- /dev/null +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css @@ -0,0 +1,25 @@ +@import '../../../../../../styling/reactflow.css'; + +/* stylelint-disable selector-class-pattern */ + +.react-flow__node-concept { + cursor: default; + + border-radius: 100%; + width: 40px; + height: 40px; + + outline-offset: -2px; + outline-style: solid; + outline-color: transparent; + + transition-property: outline-offset; + transition-timing-function: var(--transition-bezier); + transition-duration: var(--duration-select); + + &.selected { + outline-offset: 4px; + outline-color: var(--color-graph-selected); + border-color: transparent; + } +} 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 6240a707..67026ce4 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 @@ -32,6 +32,8 @@ import { ToolbarTermGraph } from './toolbar-term-graph'; import { useFilteredGraph } from './use-filtered-graph'; import { ViewHidden } from './view-hidden'; +import './graph/styles.css'; + const ZOOM_MAX = 3; const ZOOM_MIN = 0.25; export const VIEW_PADDING = 0.3; diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/rstabs.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/rstabs.tsx index e11441e7..7c038e65 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/rstabs.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/rstabs.tsx @@ -79,7 +79,7 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) { selectedTabClassName='cc-selected' className='relative flex flex-col min-w-fit items-center' > - + & { - color: var(--color-ring); + color: var(--color-primary); } } @@ -193,7 +193,7 @@ outline-color: transparent; &.selected { - outline: 2px solid var(--clr-prim-999); + outline: 2px solid var(--color-foreground); } &.inherited { diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css index fb5e97be..ae34b4a7 100644 --- a/rsconcept/frontend/src/styling/constants.css +++ b/rsconcept/frontend/src/styling/constants.css @@ -56,10 +56,6 @@ --acc-fg-purple: oklch(060% 0.250 295deg); --acc-fg-teal: oklch(060% 0.140 210deg); --acc-fg-orange: oklch(060% 0.150 62deg); - - /* React Tooltip */ - --rt-color-white: var(--clr-prim-0); - --rt-color-dark: var(--clr-prim-999); } /* Dark Theme */ @@ -101,8 +97,4 @@ --acc-fg-purple: oklch(075% 0.150 295deg); --acc-fg-teal: oklch(075% 0.150 210deg); --acc-fg-orange: oklch(075% 0.150 62deg); - - /* React Tooltip */ - --rt-color-white: var(--clr-prim-999); - --rt-color-dark: var(--clr-prim-0); } diff --git a/rsconcept/frontend/src/styling/imports.css b/rsconcept/frontend/src/styling/imports.css deleted file mode 100644 index b5be98ab..00000000 --- a/rsconcept/frontend/src/styling/imports.css +++ /dev/null @@ -1,5 +0,0 @@ -/** - * Module: List external styling imports. - */ - -@import 'reactflow/dist/style.css'; diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css index 8ee2072d..aa93f5e9 100644 --- a/rsconcept/frontend/src/styling/overrides.css +++ b/rsconcept/frontend/src/styling/overrides.css @@ -2,25 +2,43 @@ * Module: Override imported components CSS styling. */ @import './constants.css'; -@import './imports.css'; /* stylelint-disable selector-class-pattern */ :root { - /* Import overrides */ - --toastify-color-dark: var(--clr-prim-200); + /* Toastify */ + --toastify-color-dark: var(--color-secondary); --toastify-toast-width: 20rem; --toastify-toast-padding: 0.75rem; - --toastify-toast-min-height: 4rem; + --toastify-toast-min-height: 0; --toastify-toast-max-height: 40rem; } +/* Light Theme */ +/* prettier-ignore */ +:not(.dark):root { + /* React Tooltip */ + --rt-color-white: var(--color-input); + --rt-color-dark: var(--color-foreground); + +} + +/* Dark Theme */ +/* prettier-ignore */ +.dark:root { + /* React Tooltip */ + --rt-color-white: var(--color-foreground); + --rt-color-dark: var(--color-input); +} + +/* ----- Code Mirror ------ */ + .cm-tooltip { z-index: 100; - border-color: var(--clr-prim-400); + border-color: var(--color-border); border-width: 1px; border-radius: 0.25rem; } @@ -39,7 +57,7 @@ overflow-y: auto; overscroll-behavior-y: contain; - border-color: var(--clr-prim-400); + border-color: var(--color-border); border-width: 1px; border-radius: 0.25rem; @@ -47,103 +65,12 @@ } .cm-editor.cm-focused { - border-color: var(--clr-sec-600); - outline: 2px solid var(--clr-sec-600); + border-color: var(--color-primary); + outline: 2px solid var(--color-primary); } .cm-editor .cm-placeholder { font-family: var(--font-main); - color: var(--clr-prim-600); + color: var(--color-muted-foreground); user-select: none; } - -.react-flow__handle { - cursor: default !important; - border-radius: 9999px; - - border-color: var(--clr-prim-400); - background-color: var(--clr-prim-0); - - .selected & { - border-color: var(--clr-prim-600); - } -} - -.react-flow__pane { - cursor: default; -} - -.react-flow__edge { - cursor: default; -} - -.react-flow__attribution { - font-size: var(--font-size-sm); - font-family: var(--font-ui); - font-weight: 400; - margin: 1rem; - - background-color: transparent; - color: var(--clr-prim-600); -} - -[class*='react-flow__node-'] { - font-size: 14px; - border: 1px solid; - - color: var(--clr-prim-999); - border-color: var(--clr-prim-400); - background-color: var(--clr-prim-0); - - &:hover:not(.selected) { - box-shadow: 0 0 0 2px var(--clr-sec-200) !important; - } -} - -.react-flow__node-input, -.react-flow__node-synthesis { - cursor: pointer; - - border-radius: 5px; - padding: 2px; - width: 150px; - height: fit-content; - - outline-offset: -2px; - outline-style: solid; - outline-color: transparent; - - transition-property: outline-offset; - transition-timing-function: var(--transition-bezier); - transition-duration: var(--duration-select); - - &.selected { - outline-offset: 4px; - outline-color: var(--clr-select-node); - border-color: var(--clr-prim-999); - } -} - -.react-flow__node-step, -.react-flow__node-token, -.react-flow__node-concept { - cursor: default; - - border-radius: 100%; - width: 40px; - height: 40px; - - outline-offset: -2px; - outline-style: solid; - outline-color: transparent; - - transition-property: outline-offset; - transition-timing-function: var(--transition-bezier); - transition-duration: var(--duration-select); - - &.selected { - outline-offset: 4px; - outline-color: var(--clr-select-node); - border-color: transparent; - } -} diff --git a/rsconcept/frontend/src/styling/reactflow.css b/rsconcept/frontend/src/styling/reactflow.css new file mode 100644 index 00000000..5b863963 --- /dev/null +++ b/rsconcept/frontend/src/styling/reactflow.css @@ -0,0 +1,73 @@ +/** +* Module: react-flow base style overrides. +*/ +@import 'reactflow/dist/style.css'; + +/* stylelint-disable selector-class-pattern */ + +.react-flow__handle { + cursor: default !important; + border-radius: 9999px; + + border-color: var(--color-border); + background-color: var(--color-card); + + .selected & { + border-color: var(--color-muted-foreground); + } +} + +.react-flow__pane { + cursor: default; +} + +.react-flow__edge { + cursor: default; +} + +.react-flow__attribution { + font-size: var(--font-size-sm); + font-family: var(--font-ui); + font-weight: 400; + margin: 1rem; + + background-color: transparent; + color: var(--color-muted-foreground); +} + +[class*='react-flow__node-'] { + font-size: 14px; + border: 1px solid; + + color: var(--color-foreground); + border-color: var(--color-border); + background-color: var(--color-card); + + &:hover:not(.selected) { + box-shadow: 0 0 0 2px var(--color-selected) !important; + } +} + +.react-flow__node-token, +.react-flow__node-concept { + /* stylelint-disable-next-line at-rule-no-deprecated */ + cursor: default; + + border-radius: 100%; + width: 40px; + height: 40px; + + outline-offset: -2px; + outline-style: solid; + outline-color: transparent; + + transition-property: outline-offset; + transition-timing-function: var(--transition-bezier); + transition-duration: var(--duration-select); + + &.selected { + outline-offset: 4px; + outline-color: var(--color-graph-selected); + border-color: transparent; + } +} diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css index 823d4ff8..9698a7cf 100644 --- a/rsconcept/frontend/src/styling/setup.css +++ b/rsconcept/frontend/src/styling/setup.css @@ -18,8 +18,8 @@ ::before, ::backdrop, ::file-selector-button { - border-color: var(--clr-prim-400); - accent-color: var(--clr-sec-600); + border-color: var(--color-border); + accent-color: var(--color-primary); } html { @@ -60,9 +60,9 @@ line-height: var(--line-height); font-family: var(--font-main); - color: var(--clr-prim-999); - border-color: var(--clr-prim-400); - background-color: var(--clr-prim-100); + color: var(--color-foreground); + border-color: var(--color-border); + background-color: var(--color-background); } @media only screen and (width <= 639px) { @@ -78,7 +78,7 @@ } ::placeholder { - color: var(--clr-prim-600); + color: var(--color-muted-foreground); user-select: none; }