some code clean up and reuse of .surface-contrast

apache · May 2, 2024 · a3825e6 · a3825e6
1 parent eed1bdd
commit a3825e6
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 75 deletions.
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
@@ -146,7 +146,7 @@
         }
 
         text.stats-label {
-            fill: $surface-contrast;
+            @extend .surface-contrast;
         }
 
         text.stats-value {
@@ -392,7 +392,7 @@
         /* ports */
 
         text.port-name {
-            fill: $surface-contrast;
+            @extend .surface-contrast;
         }
 
         text.port-icon {

diff --git a/...gner/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss b/...gner/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
@@ -29,14 +29,6 @@
     $is-dark: map-get($nifi-theme-color-config, is-dark);
     $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
     $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
-    $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        darker-contrast
-    );
-    $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        lighter-contrast
-    );
 
     div.navigation-control {
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);

diff --git a/...signer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss b/...signer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
@@ -29,14 +29,6 @@
     $is-dark: map-get($nifi-theme-color-config, is-dark);
     $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
     $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
-    $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        darker-contrast
-    );
-    $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        lighter-contrast
-    );
 
     div.operation-control {
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
@@ -50,9 +42,6 @@
                     transparent 35px
                 );
             }
-
-            .operation-context-type {
-            }
         }
     }
 }
diff --git a/...rc/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss b/...rc/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -35,14 +35,6 @@
     $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
     $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
     $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
-    $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        darker-contrast
-    );
-    $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        lighter-contrast
-    );
 
     .flow-status {
         background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
@@ -55,11 +47,7 @@
             );
 
             .fa {
-                color: if(
-                    $is-dark,
-                    $nifi-theme-surface-palette-lighter-contrast,
-                    $nifi-theme-surface-palette-darker-contrast
-                );
+                @extend .surface-contrast;
             }
         }
 

diff --git a/...ages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss b/...ages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -29,34 +29,22 @@
 
     // Get hues from palette
     $is-dark: map-get($material-theme-color-config, is-dark);
-    $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        darker-contrast
-    );
-    $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        lighter-contrast
-    );
     $material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
     $material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
     $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
     $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
     $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
 
+    $hover: var(--mat-menu-item-hover-state-layer-color);
+
     .new-canvas-item {
         .icon {
             &.hovering {
                 // This solution re-uses the highlight value used throughout the UI, but because we need to hide the non-hover
                 // version of the icons, we create a double layered gradient with the matching background color of the
                 // navigation bar, then put the highlight on top of it.
-                background: linear-gradient(
-                        var(--mat-menu-item-hover-state-layer-color),
-                        var(--mat-menu-item-hover-state-layer-color)
-                    ),
-                    linear-gradient(
-                        if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter),
-                        if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter)
-                    );
+                background: linear-gradient($hover, $hover),
+                    linear-gradient($nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter);
 
                 .component-button-grip {
                     background: repeating-linear-gradient(

diff --git a/...-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss b/...-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -67,7 +67,7 @@
     }
 
     marker {
-        fill: $surface-contrast;
+        @extend .surface-contrast;
     }
 
     circle.flowfile-link {

diff --git a/.../ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss b/.../ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
@@ -35,25 +35,12 @@
 
     $is-dark: map-get($nifi-theme-color-config, is-dark);
     $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
-    $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        darker-contrast
-    );
-    $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        lighter-contrast
-    );
-    $surface-contrast: if(
-        $is-dark,
-        $nifi-theme-surface-palette-darker-contrast,
-        $nifi-theme-surface-palette-lighter-contrast
-    );
 
     #lineage {
         canvas,
         svg {
             text.event-type {
-                fill: $surface-contrast;
+                @extend .surface-contrast;
             }
 
             path.link.selected {

diff --git a/...n/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss b/...n/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
@@ -75,7 +75,7 @@
             }
 
             .CodeMirror-code {
-                color: $surface-contrast;
+                @extend .surface-contrast;
             }
 
             .CodeMirror-selected {

diff --git a/...-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss b/...-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
@@ -67,15 +67,6 @@
     // Get hues from palette
     $is-dark: map-get($nifi-theme-color-config, is-dark);
 
-    $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        darker-contrast
-    );
-    $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
-        $nifi-theme-surface-palette,
-        lighter-contrast
-    );
-
     $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
     $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
     $selected-row-color: if(