pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: added node-tooltips to the editor

Browse Source
This commit is contained in:
Gerla, J. (Justin)
2026-01-13 11:29:45 +00:00
committed by Björn Otgaar
parent 5385bd72b1
commit 566c4c18cc
16 changed files with 332 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/VisProgPage/VisProg.module.css
View File

@@ -33,6 +33,12 @@
/* Node Styles */
:global(.react-flow__node.selected) {
outline: 1px dashed blue !important;
border-radius: 5pt;
outline-offset: 4px;
}
.default-node {
padding: 10px 15px;
background-color: canvas;
@@ -41,6 +47,8 @@
filter: drop-shadow(0 0 0.75rem black);
}
.node-norm {
outline: rgb(0, 149, 25) solid 2pt;
filter: drop-shadow(0 0 0.25rem forestgreen);
@@ -76,10 +84,13 @@
filter: drop-shadow(0 0 0.25rem plum);
}
.draggable-node {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: black solid 2pt;
filter: drop-shadow(0 0 0.75rem black);
}
@@ -88,6 +99,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: forestgreen solid 2pt;
filter: drop-shadow(0 0 0.25rem forestgreen);
}
@@ -96,6 +108,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: yellow solid 2pt;
filter: drop-shadow(0 0 0.25rem yellow);
}
@@ -104,6 +117,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: teal solid 2pt;
filter: drop-shadow(0 0 0.25rem teal);
}
@@ -112,6 +126,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: dodgerblue solid 2pt;
filter: drop-shadow(0 0 0.25rem dodgerblue);
}
@@ -120,6 +135,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: orange solid 2pt;
filter: drop-shadow(0 0 0.25rem orange);
}
@@ -128,6 +144,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: red solid 2pt;
filter: drop-shadow(0 0 0.25rem red);
}
@@ -136,6 +153,7 @@
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
cursor: move;
outline: plum solid 2pt;
filter: drop-shadow(0 0 0.25rem plum);
}
@@ -144,4 +162,53 @@
opacity: 0.5;
font-style: italic;
text-decoration: line-through;
}
.node-toolbar-tooltip {
background-color: darkgray;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
font-family: sans-serif;
font-weight: bold;
cursor: help;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.custom-tooltip {
pointer-events: none;
background-color: Canvas;
color: CanvasText;
padding: 8px 12px;
border-radius: 0 6px 6px 0;
outline: CanvasText solid 2px;
font-size: 14px;
filter: drop-shadow(0 0 0.25rem CanvasText);
white-space: nowrap;
position: relative;
animation: fadeIn 0.2s ease-out;
}
.custom-tooltip-header {
pointer-events: none;
background-color: CanvasText;
color: Canvas;
padding: 8px 12px;
border-radius: 6px 0 0 6px;
outline: CanvasText solid 2px;
font-size: 14px;
font-weight: bold;
font-variant-caps: small-caps;
filter: drop-shadow(0 0 0.25rem CanvasText);
white-space: nowrap;
position: relative;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}