[NIFI-13056][NIFI-13011] canvas icons, theming, and contrast ratio im…

…provements (#8663) * [NIFI-13056] add missing .hidden class, update text.bulletin-icon, rect.bulletin-background, text.port-transmission-icon, rect.process-group-banner, rect.remote-process-group-banner, text.process-group-name, text.remote-process-group-name, and text.load-balance-icon-active colors to match legacy nifi * fix ref to warn-color and declar color for .operation-context-name * text.connection-from-run-status and text.connection-to-run-status colors * load-balance-icon and load-balanace-icon-active semantic colors * .expiration-icon semantic colors * .penalized-icon semantic colors * text.active-thread-count-icon semantic colors * [NIFI-13011] canvas icons and contrast ratio improvements * nifi surface palette usage now all based on default/lighter/darker theme configuration * update codemirror colors * update not-transmitting and disabled icon colors, add not-allowed cursor to disabled draggable icons * update processor, PG, rpg, name color * cleanup * fix bulletin icon color in dark mode * fix flow status clustered icon warn color * update the nifi warn darker color * update active thread count to accent default color * ensure contrast for the PG and RPG header text * final touches * update navigation header icons to have proper contrast ratio * update contrast ratio for purple theme * update to material theme This closes #8663
apache · Apr 24, 2024 · 0e70f7a · 0e70f7a
1 parent b06c177
commit 0e70f7a
Show file tree

Hide file tree

Showing 49 changed files with 332 additions and 474 deletions.
diff --git a/...ges/access-policies/ui/component-access-policies/component-access-policies.component.html b/...ges/access-policies/ui/component-access-policies/component-access-policies.component.html
@@ -60,7 +60,7 @@
                                         <i class="accent-color icon" [class]="getContextIcon()"></i>
                                     </div>
                                     <div class="flex flex-col">
-                                        <div class="operation-context-name on-surface-default">
+                                        <div class="operation-context-name">
                                             {{ policyComponentState.label }}
                                         </div>
                                         <div class="operation-context-type primary-color">

diff --git a/...pp/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts b/...pp/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
@@ -143,7 +143,7 @@ export class BulletinBoardList implements AfterViewInit {
     getSeverity(severity: string) {
         switch (severity.toLowerCase()) {
             case 'error':
-                return 'bulletin-error mat-warn';
+                return 'bulletin-error warn-color';
             case 'warn':
             case 'warning':
                 return 'bulletin-warn';

diff --git a/...fi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts b/...fi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
@@ -1403,7 +1403,7 @@ export class CanvasUtils {
                 })
                 .attr('class', function () {
                     if (terminatedThreads > 0) {
-                        return `active-thread-count-icon mat-warn`;
+                        return `active-thread-count-icon nifi-warn-darker`;
                     } else {
                         return `active-thread-count-icon primary-color`;
                     }

diff --git a/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts b/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
@@ -1003,7 +1003,7 @@ export class ConnectionManager {
                                         return !d.component.source.running;
                                     }
                                 })
-                                .classed('is-missing-port', function () {
+                                .classed('is-missing-port invalid', function () {
                                     return d.component.source.exists === false;
                                 });
                         } else {
@@ -1118,7 +1118,7 @@ export class ConnectionManager {
                                         return !d.component.destination.running;
                                     }
                                 })
-                                .classed('is-missing-port', function () {
+                                .classed('is-missing-port invalid', function () {
                                     return d.component.destination.exists === false;
                                 });
                         } else {
@@ -1269,7 +1269,7 @@ export class ConnectionManager {
                         // expiration icon
                         queued
                             .append('text')
-                            .attr('class', 'expiration-icon')
+                            .attr('class', 'expiration-icon primary-color')
                             .attr('x', 208)
                             .attr('y', 14)
                             .text(function () {
@@ -1428,9 +1428,9 @@ export class ConnectionManager {
                     // update the coloring of the backgrounds
                     backgrounds.forEach((background, i) => {
                         if (i % 2 === 0) {
-                            background.attr('class', 'surface-darker');
+                            background.attr('class', 'nifi-surface-darker');
                         } else {
-                            background.attr('class', 'surface-default');
+                            background.attr('class', 'nifi-surface-lighter');
                         }
                     });
 
@@ -1453,9 +1453,12 @@ export class ConnectionManager {
                                 return true;
                             }
                         })
-                        .classed('load-balance-icon-active fa-rotate-90', function (d: any) {
+                        .classed('load-balance-icon-active fa-rotate-90 nifi-success-default', function (d: any) {
                             return d.permissions.canRead && d.component.loadBalanceStatus === 'LOAD_BALANCE_ACTIVE';
                         })
+                        .classed('primary-color', function (d: any) {
+                            return d.permissions.canRead && d.component.loadBalanceStatus !== 'LOAD_BALANCE_ACTIVE';
+                        })
                         .classed('load-balance-icon-184', function () {
                             return d.permissions.canRead && self.isExpirationConfigured(d.component);
                         })
@@ -1598,7 +1601,7 @@ export class ConnectionManager {
             connectionLabelContainer
                 .select('g.queued-container')
                 .append('text')
-                .attr('class', 'penalized-icon')
+                .attr('class', 'penalized-icon primary-color')
                 .attr('y', 14)
                 .text(function () {
                     return '\uf252';

diff --git a/...rontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts b/...rontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
@@ -446,7 +446,7 @@ export class PortManager {
             .classed('transmitting nifi-success-default', function (d: any) {
                 return d.status.transmitting === true;
             })
-            .classed('not-transmitting primary-color', function (d: any) {
+            .classed('not-transmitting on-surface-medium', function (d: any) {
                 return d.status.transmitting !== true;
             });
 

diff --git a/...rc/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts b/...rc/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
@@ -757,7 +757,7 @@ export class ProcessGroupManager {
                 // update not transmitting
                 const notTransmitting = details
                     .select('text.process-group-not-transmitting')
-                    .classed('not-transmitting primary-color', function (d: any) {
+                    .classed('not-transmitting on-surface-medium', function (d: any) {
                         return d.permissions.canRead && d.inactiveRemotePortCount > 0;
                     })
                     .classed('zero primary-color-lighter', function (d: any) {
@@ -885,7 +885,7 @@ export class ProcessGroupManager {
                 // update disabled
                 const disabled = details
                     .select('text.process-group-disabled')
-                    .classed('disabled', function (d: any) {
+                    .classed('disabled on-surface-medium', function (d: any) {
                         return d.permissions.canRead && d.component.disabledCount > 0;
                     })
                     .classed('zero primary-color-lighter', function (d: any) {

diff --git a/.../nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts b/.../nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
@@ -609,7 +609,7 @@ export class RemoteProcessGroupManager {
             .classed('transmitting nifi-success-default', function (d: any) {
                 return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
             })
-            .classed('not-transmitting primary-color', function (d: any) {
+            .classed('not-transmitting on-surface-medium', function (d: any) {
                 return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
             })
             .each(function (this: any, d: any) {