ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-25 20:40:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

B: Fix react-flow styling
Some checks are pending
Frontend CI / build (22.x) (push) Waiting to run
Details
Frontend CI / notify-failure (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Ivan 2025-04-22 00:52:40 +03:00
parent 7fb0acdef6
commit 6c75b0af3a
11 changed files with 166 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css
View File

@ -1,89 +0,0 @@
@import '../../../../../../styling/reactflow.css';
/* stylelint-disable selector-class-pattern */
.react-flow__resize-control.handle {
background-color: transparent;
border-color: transparent;
z-index: var(--z-index-navigation);
color: var(--color-muted-foreground);
width: 0;
height: 0;
&:hover {
color: var(--color-foreground);
}
}
.react-flow__node-input,
.react-flow__node-synthesis {
cursor: pointer;
border-radius: 5px;
border-width: 0;
padding: 0;
margin: 0;
background-color: transparent;
}
.react-flow__node-block {
border-radius: 5px;
border-width: 0;
padding: 0;
margin: 0;
background-color: transparent;
pointer-events: none;
}
.cc-node-operation {
cursor: pointer;
border-radius: 5px;
border-color: var(--color-muted-foreground);
border-width: 1px;
color: var(--color-foreground);
background-color: var(--color-card);
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);
}
}
.cc-node-block {
cursor: default;
border-radius: 5px;
border-style: dashed;
border-width: 2px;
padding: 4px;
color: var(--color-muted-foreground);
background-color: transparent;
.selected & {
color: var(--color-foreground);
border-color: var(--color-graph-selected);
}
&:hover {
color: var(--color-foreground);
}
}

2
rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx
View File

@ -32,8 +32,6 @@ 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;

2
rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/ast-flow.tsx
View File

@ -9,8 +9,6 @@ import { ASTEdgeTypes } from './graph/ast-edge-types';
import { applyLayout } from './graph/ast-layout';
import { ASTNodeTypes } from './graph/ast-node-types';
import './graph/styles.css';
interface ASTFlowProps {
data: SyntaxTree;
onNodeEnter: (node: Node) => void;

29
rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css
View File

@ -1,29 +0,0 @@
@import '../../../../../styling/reactflow.css';
/* stylelint-disable selector-class-pattern */
.react-flow__node-token {
font-size: 14px;
cursor: default;
border: 1px solid;
border-color: var(--color-border);
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;
}
}

30
rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css
View File

@ -1,30 +0,0 @@
@import '../../../../../styling/reactflow.css';
/* stylelint-disable selector-class-pattern */
.react-flow__node-step {
font-size: 14px;
cursor: default;
color: var(--color-foreground);
border: 1px solid;
border-color: var(--color-border);
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;
}
}

2
rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx
View File

@ -9,8 +9,6 @@ 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;

29
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css
View File

@ -1,29 +0,0 @@
@import '../../../../../../styling/reactflow.css';
/* stylelint-disable selector-class-pattern */
.react-flow__node-concept {
cursor: default;
font-size: 14px;
border: 1px solid;
border-color: var(--color-border);
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;
}
}

2
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx
View File

@ -32,8 +32,6 @@ 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;

47
rsconcept/frontend/src/styling/components.css
View File

@ -280,3 +280,50 @@
--tw-enter-translate-y: calc(2 * var(--spacing));
}
}
@utility cc-node-operation {
cursor: pointer;
border-radius: 5px;
border-color: var(--color-muted-foreground);
border-width: 1px;
color: var(--color-foreground);
background-color: var(--color-card);
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);
}
}
@utility cc-node-block {
cursor: default;
border-radius: 5px;
border-style: dashed;
border-width: 2px;
padding: 4px;
color: var(--color-muted-foreground);
background-color: transparent;
.selected & {
color: var(--color-foreground);
border-color: var(--color-graph-selected);
}
&:hover {
color: var(--color-foreground);
}
}

1
rsconcept/frontend/src/styling/overrides.css
View File

@ -2,6 +2,7 @@
* Module: Override imported components CSS styling.
*/
@import './constants.css';
@import './reactflow.css';
/* stylelint-disable selector-class-pattern */

118
rsconcept/frontend/src/styling/reactflow.css
View File

@ -18,6 +18,21 @@
}
}
.react-flow__resize-control.handle {
background-color: transparent;
border-color: transparent;
z-index: var(--z-index-navigation);
color: var(--color-muted-foreground);
width: 0;
height: 0;
&:hover {
color: var(--color-foreground);
}
}
.react-flow__pane {
cursor: default;
}
@ -41,3 +56,106 @@
box-shadow: 0 0 0 2px var(--color-selected) !important;
}
}
.react-flow__node-token {
font-size: 14px;
cursor: default;
border: 1px solid;
border-color: var(--color-border);
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;
}
}
.react-flow__node-step {
font-size: 14px;
cursor: default;
color: var(--color-foreground);
border: 1px solid;
border-color: var(--color-border);
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;
}
}
.react-flow__node-concept {
cursor: default;
font-size: 14px;
border: 1px solid;
border-color: var(--color-border);
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;
}
}
.react-flow__node-input,
.react-flow__node-synthesis {
cursor: pointer;
border-radius: 5px;
border-width: 0;
padding: 0;
margin: 0;
background-color: transparent;
}
.react-flow__node-block {
border-radius: 5px;
border-width: 0;
padding: 0;
margin: 0;
background-color: transparent;
pointer-events: none;
}