Skip to content

NIFI-12870 Refactor the usage of Material color theming to be semantic #8480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
scottyaslan merged 1 commit into from
Mar 13, 2024
Merged

NIFI-12870 Refactor the usage of Material color theming to be semantic #8480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion ...ifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
}
},
"cli": {
"schematicCollections": ["@angular-eslint/schematics"]
"schematicCollections": ["@angular-eslint/schematics"],
"analytics": false
}
}
16 changes: 8 additions & 8 deletions ...nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,19 @@
$canvas-accent-palette: map.get($canvas-color-config, 'accent');

// 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');
$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-500: mat.get-color-from-palette($canvas-accent-palette, 500);
$canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);

.splash {
background-color: $primary-palette-500;
background-color: $primary-palette-default;
}

// https://github.com/angular/components/issues/11426
.nifi-snackbar .mdc-snackbar__surface {
background-color: $primary-palette-300 !important;
background-color: $primary-palette-lighter !important;
}

// https://github.com/angular/components/issues/11426
Expand All @@ -52,10 +52,10 @@

// https://github.com/angular/components/issues/11426
.nifi-snackbar .mat-mdc-button:not(:disabled) .mdc-button__label {
color: $accent-palette-A400;
color: $accent-palette-default;
}

.fa.fa-check.complete {
color: $canvas-accent-palette-500;
color: $canvas-accent-palette-default;
}
}
4 changes: 2 additions & 2 deletions ...src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary');

// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$primary-palette-default: mat.get-color-from-palette($primary-palette, default);

.access-policies-header {
color: $primary-palette-500;
color: $primary-palette-default;
}
}
4 changes: 2 additions & 2 deletions ...s/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@
$accent-palette: map.get($color-config, 'accent');

// Get hues from palette
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400');
$accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');

.add-tenant-to-policy-form {
.fa {
color: $accent-palette-A400;
color: $accent-palette-default;
}
}
}
4 changes: 2 additions & 2 deletions ...es/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ <h2 mat-dialog-title>Override Policy</h2>
<mat-dialog-content class="w-96">
<div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div>
<mat-radio-group formControlName="override">
<mat-radio-button value="copy">Copy</mat-radio-button>
<mat-radio-button value="empty">Empty</mat-radio-button>
<mat-radio-button color="primary" value="copy">Copy</mat-radio-button>
<mat-radio-button color="primary" value="empty">Empty</mat-radio-button>
</mat-radio-group>
</mat-dialog-content>
<mat-dialog-actions align="end">
Expand Down
16 changes: 8 additions & 8 deletions ...ess-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

@use 'sass:map';
@use '@angular/material' as mat;
@use '../../../../../assets/utils.scss' as utils;

@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
Expand All @@ -25,27 +26,26 @@

// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');

// Get hues from palette
$primary-palette-700: mat.get-color-from-palette($primary-palette, 700);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
$primary-palette-darker: mat.get-color-from-palette($primary-palette, darker);
$accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$on-surface: utils.get-on-surface($canvas-color-config);

.component-access-policies {
.operation-context-logo {
.icon {
color: $warn-palette-A200;
color: $accent-palette-default;
}
}

.operation-context-name {
color: $canvas-primary-palette-A200;
color: $on-surface;
}

.operation-context-type {
color: $primary-palette-700;
color: $primary-palette-darker;
}
}
}
4 changes: 2 additions & 2 deletions ...eb-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary');

// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$primary-palette-default: mat.get-color-from-palette($primary-palette, default);

.bulletin-board-header {
color: $primary-palette-500;
color: $primary-palette-default;
}
}
13 changes: 7 additions & 6 deletions ...bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,22 @@
// Get the color palette from the color-config.
$warn-palette: map.get($color-config, 'warn');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
$canvas-warn-palette: map.get($canvas-color-config, 'warn');

// Get hues from palette
$canvas-accent-palette-700: mat.get-color-from-palette($canvas-accent-palette, 700);
$canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400');
$warn-palette-600: mat.get-color-from-palette($warn-palette, 600);
$canvas-accent-palette-darker: mat.get-color-from-palette($canvas-accent-palette, darker);
$canvas-warn-palette-A400: mat.get-color-from-palette($canvas-warn-palette, 'A400');
$warn-palette-default: mat.get-color-from-palette($warn-palette, default);

.bulletin-error {
color: $warn-palette-600;
color: $warn-palette-default;
}

.bulletin-warn {
color: $canvas-accent-palette-A400;
color: $canvas-warn-palette-A400;
}

.bulletin-normal {
color: $canvas-accent-palette-700;
color: $canvas-accent-palette-darker;
}
}
2 changes: 1 addition & 1 deletion ...end/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2">
<div class="mr-6">
<mat-slide-toggle [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
<mat-slide-toggle color="primary" [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
>Auto-refresh</mat-slide-toggle
>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary');

// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$primary-palette-default: mat.get-color-from-palette($primary-palette, default);

.counter-header {
color: $primary-palette-500;
color: $primary-palette-default;
}
}
4 changes: 2 additions & 2 deletions ...fi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1253,9 +1253,9 @@ export class CanvasUtils {
})
.attr('class', function () {
if (terminatedThreads > 0) {
return `active-thread-count-icon warn-400`;
return `active-thread-count-icon warn-default`;
} else {
return `active-thread-count-icon primary-500`;
return `active-thread-count-icon primary-default`;
}
})
.style('display', 'block')
Expand Down
6 changes: 3 additions & 3 deletions ...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1424,16 +1424,16 @@ export class ConnectionManager {
// update the coloring of the backgrounds
backgrounds.forEach((background, i) => {
if (i % 2 === 0) {
background.attr('class', 'primary-contrast-800');
background.attr('class', 'surface-darker');
} else {
background.attr('class', 'primary-contrast-900');
background.attr('class', 'surface');
}
});

// update the coloring of the label borders
borders.forEach((border, i) => {
if (i > 0) {
border.attr('class', 'primary-200');
border.attr('class', 'canvas-primary-lighter');
} else {
border.attr('class', 'transparent');
}
Expand Down
8 changes: 4 additions & 4 deletions ...rontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,14 +386,14 @@ export class PortManager {
updated
.select('text.run-status-icon')
.attr('class', function (d: any) {
let clazz = 'primary-500';
let clazz = 'primary-default';

if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'canvas-accent-A200';
clazz = 'canvas-warn-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'canvas-accent-200';
clazz = 'canvas-accent-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'warn-200';
clazz = 'warn-lighter';
}

return `run-status-icon ${clazz}`;
Expand Down
4 changes: 2 additions & 2 deletions ...rc/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,10 +1087,10 @@ export class ProcessGroupManager {
} else if (vciState === 'LOCALLY_MODIFIED') {
return `version-control primary-contrast-A700`;
} else {
return `version-control canvas-accent-600`;
return `version-control canvas-accent-darker`;
}
} else {
return 'version-control primary-contrast-200';
return 'version-control on-surface';
}
})
.text(function () {
Expand Down
10 changes: 5 additions & 5 deletions ...nd/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,16 +670,16 @@ export class ProcessorManager {
updated
.select('text.run-status-icon')
.attr('class', function (d: any) {
let clazz = 'primary-500';
let clazz = 'primary-default';

if (d.status.aggregateSnapshot.runStatus === 'Validating') {
clazz = 'warn-contrast-300';
clazz = 'canvas-primary-500';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'canvas-accent-A400';
clazz = 'canvas-warn-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'canvas-accent-200';
clazz = 'canvas-accent-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'warn-200';
clazz = 'warn-lighter';
}

return `run-status-icon ${clazz}`;
Expand Down
Loading