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 <[email protected]>
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);
