[NIFI-13183] add drop shadow to connections to increase visibility on…

… top of colored labels in both light and dark mode
apache · May 8, 2024 · 03f527f · 03f527f
1 parent 43aca65
commit 03f527f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts b/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
@@ -497,7 +497,11 @@ export class ConnectionManager {
             .attr('class', 'connection');
 
         // create a connection between the two components
-        connection.append('path').attr('class', 'connection-path').attr('pointer-events', 'none');
+        connection
+            .append('path')
+            .attr('class', 'connection-path')
+            .attr('filter', 'url(#connection-drop-shadow)')
+            .attr('pointer-events', 'none');
 
         // path to show when selection
         connection.append('path').attr('class', 'connection-selection-path').attr('pointer-events', 'none');

diff --git a/...frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/...frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -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,
@@ -123,8 +124,7 @@
             fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
         }
 
-        g.component rect.border,
-        g.connections rect.border {
+        g.component rect.border {
             stroke: $alternate-surface;
             stroke-width: if(
                 $is-dark,
@@ -261,6 +261,9 @@
         /*
           Connection
       */
+        #connection-drop-shadow feFlood {
+            flood-color: $connection-drop-shadow-color;
+        }
 
         g.connection {
             font-family: mat.get-theme-typography($material-theme, body-1, font-family);