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

NIFI-12912 snackbar bug (#8528) 

Removed unnecessary rules and class. The snackbars will be styled by Angular Material.

Improved get-color-on-surface helper function.

This closes #8528
This commit is contained in:
James Mingardi-Elliott 2024-03-18 17:33:03 -04:00 committed by GitHub
parent 12fc2f8508
commit f5e44a99ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 8 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
View File

@ -25,36 +25,16 @@
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
$primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
$canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
.splash {
background-color: $primary-palette-default;
}
// https://github.com/angular/components/issues/11426
.nifi-snackbar .mdc-snackbar__surface {
background-color: $primary-palette-lighter !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-default;
}
.fa.fa-check.complete {
color: $canvas-accent-palette-default;
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts
View File

@ -50,7 +50,7 @@ export class ErrorEffects {
ofType(ErrorActions.snackBarError),
map((action) => action.error),
tap((error) => {
this.snackBar.open(error, 'Dismiss', { panelClass: 'nifi-snackbar', duration: 30000 });
this.snackBar.open(error, 'Dismiss', { duration: 30000 });
})
),
{ dispatch: false }

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
View File

@ -175,7 +175,6 @@
$primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$accent-palette-lighter: mat.get-color-from-palette($accent-palette, 'lighter');
$warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
@ -190,9 +189,15 @@
$on-surface: utils.get-on-surface($canvas-color-config);
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
// Because snackbars have different surface colors, we need to make sure the action color has enough contrast.
$is-dark: map.get($color-config, is-dark);
$snack-surface: if($is-dark, #d9d9d9, #333333);
$snack-action-color: utils.get-color-on-surface($color-config, $snack-surface, 'accent');
* {
// Tailwind sets a default that doesn't shift with light and dark themes
border-color: $on-surface-lighter;
--mat-snack-bar-button-color: #{$snack-action-color};
}
.cdk-drag-disabled {

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss
View File

@ -81,14 +81,11 @@
}
@function get-color-on-surface($theme, $surface: #ffffff, $palette: 'primary') {
// Check to see if it's a dark theme
$is-dark: map.get($theme, is-dark);
$color-config: mat.get-color-config($theme);
$color-palette: map.get($theme, $palette);
$default: mat.get-color-from-palette($color-palette, default);
$high-contrast: mat.get-color-from-palette($color-palette, if($is-dark, lighter, darker));
$high-contrast: mat.get-color-from-palette($color-palette, if(luminosity($default) > luminosity($surface), lighter, darker));
$on-surface: ensure-contrast($default, $surface, $high-contrast);
@return $on-surface;