Skip to content

Commit

Permalink
NIFI-12912 snackbar bug (apache#8528)
Browse files Browse the repository at this point in the history
Removed unnecessary rules and class. The snackbars will be styled by Angular Material.

Improved get-color-on-surface helper function.

This closes apache#8528
  • Loading branch information
james-elliott authored and jrsteinebrey committed Mar 19, 2024
1 parent 8b70345 commit cfb016e
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit cfb016e

Please sign in to comment.