This is an automated email from the ASF dual-hosted git repository. rfellows pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push: new 43276acf55 [NIFI-12748] apply panelClass to snackbars to apply lighter color to … (#8365) 43276acf55 is described below commit 43276acf55330033ccb433243a0657268d80f7d2 Author: Scott Aslan <scottyas...@users.noreply.github.com> AuthorDate: Wed Feb 7 15:23:26 2024 -0500 [NIFI-12748] apply panelClass to snackbars to apply lighter color to … (#8365) * [NIFI-12748] apply panelClass to snackbars to apply lighter color to the snackbar action text * hover color for snackbar action button * updates based on https://github.com/angular/components/issues/11426 This closes #8365 --- .../main/nifi/src/app/_app.component-theme.scss | 27 ++++++++++++++++++++-- .../main/nifi/src/app/state/error/error.effects.ts | 2 +- .../src/main/nifi/src/styles.scss | 4 ++-- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss index 3afc567f46..b24559cab4 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss @@ -18,17 +18,40 @@ @use 'sass:map'; @use '@angular/material' as mat; -@mixin nifi-theme($theme) { +@mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. - $color-config: mat.get-color-config($theme); + $color-config: mat.get-color-config($material-theme); + $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); + $accent-palette: map.get($color-config, 'accent'); + $warn-palette: map.get($color-config, 'warn'); + $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette + $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); + $warn-palette-500: mat.get-color-from-palette($warn-palette, 500); + $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); .splash { background-color: $primary-palette-500; } + + // https://github.com/angular/components/issues/11426 + .nifi-snackbar .mdc-snackbar__surface { + background-color: $primary-palette-300 !important; + } + + // https://github.com/angular/components/issues/11426 + .nifi-snackbar .mat-mdc-snack-bar-label { + color: $canvas-primary-palette-A200 !important; + } + + // https://github.com/angular/components/issues/11426 + .nifi-snackbar .mat-mdc-button:not(:disabled) .mdc-button__label { + color: $accent-palette-A400; + } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts index 4a4d48e3a1..93c48de1ba 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts @@ -47,7 +47,7 @@ export class ErrorEffects { ofType(ErrorActions.snackBarError), map((action) => action.error), tap((error) => { - this.snackBar.open(error, 'Dismiss', { duration: 30000 }); + this.snackBar.open(error, 'Dismiss', { panelClass: 'nifi-snackbar', duration: 30000 }); }) ), { dispatch: false } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss index fd01e720f7..4a26174ebc 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss @@ -461,7 +461,7 @@ $appFontPath: '~roboto-fontface/fonts'; // generate light mode nifi stylesheets @include mat.all-component-themes($material-theme-light); -@include app-component.nifi-theme($material-theme-light); +@include app-component.nifi-theme($material-theme-light, $nifi-canvas-theme-light); @include nifi-colors($material-theme-light, $nifi-canvas-theme-light); @include listing-table.nifi-theme($material-theme-light, $nifi-canvas-theme-light); @include access-policies.nifi-theme($material-theme-light); @@ -510,7 +510,7 @@ $appFontPath: '~roboto-fontface/fonts'; @include mat.all-component-colors($material-theme-dark); // generate dark mode nifi stylesheets - @include app-component.nifi-theme($material-theme-dark); + @include app-component.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark); @include nifi-colors($material-theme-dark, $nifi-canvas-theme-dark); @include listing-table.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark); @include access-policies.nifi-theme($material-theme-dark);