Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13183] add drop shadow to connections to increase visibility on… (#8778) 

* [NIFI-13183] add drop shadow to connections to increase visibility on top of colored labels in both light and dark mode

* review feedback

This closes #8778
This commit is contained in:
Scott Aslan 2024-05-09 08:19:16 -04:00 committed by GitHub
parent a840c14c84
commit a61bf2afc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View File

@ -48,8 +48,9 @@
$nifi-theme-caution-palette-darker: mat.get-color-from-palette($nifi-theme-caution-palette, darker);
// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
$drop-shadow-color: black;
$is-dark: map-get($nifi-theme-color-config, is-dark);
$drop-shadow-color: black;
$connection-drop-shadow-color: if($is-dark, black, white);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
@ -209,10 +210,6 @@
flood-color: $drop-shadow-color;
}
#connection-full-drop-shadow feFlood {
flood-color: $material-theme-warn-palette-darker;
}
rect.processor-read-write-stats {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
}
@ -261,6 +258,9 @@
/*
Connection
*/
#connection-full-drop-shadow feFlood {
flood-color: $material-theme-warn-palette-darker;
}
g.connection {
font-family: mat.get-theme-typography($material-theme, body-1, font-family);
@ -297,6 +297,9 @@
g.connection path.connection-path {
fill: none;
stroke: $surface-contrast;
filter: drop-shadow(
0 3px 6px if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter)
);
}
g.connection path.connection-path.full {