This is an automated email from the ASF dual-hosted git repository.
mcgilman 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 732b587561 [NIFI-13234] update unauthorized canvas component colors
(#8902)
732b587561 is described below
commit 732b5875611631ea16f7156e1332ce632fb14014
Author: Scott Aslan <[email protected]>
AuthorDate: Thu May 30 15:21:34 2024 -0400
[NIFI-13234] update unauthorized canvas component colors (#8902)
* [NIFI-13234] update unautorized canvas component colors
* restore web font loader to ensure positions of canvas text is calculate
correctly
This closes #8902
---
.../flow-designer/service/canvas-view.service.ts | 18 +++++++++
.../manager/process-group-manager.service.ts | 44 +++++++++++-----------
.../ui/canvas/_canvas.component-theme.scss | 6 +--
.../src/main/nifi/package-lock.json | 13 +++++++
.../nifi-web-frontend/src/main/nifi/package.json | 2 +
5 files changed, 58 insertions(+), 25 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
index ea4e211101..f461af7b86 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
@@ -17,6 +17,7 @@
import { Injectable } from '@angular/core';
import * as d3 from 'd3';
+import * as WebFont from 'webfontloader';
import { Store } from '@ngrx/store';
import { CanvasState } from '../state';
import { refreshBirdseyeView, transformComplete } from
'../state/transform/transform.actions';
@@ -66,6 +67,23 @@ export class CanvasView {
) {}
public init(svg: any, canvas: any): void {
+ WebFont.load({
+ custom: {
+ families: ['Roboto', 'flowfont', 'FontAwesome']
+ },
+ active: function () {
+ // re-render once the fonts have loaded, without the fonts
+ // positions of elements on the canvas may be incorrect
+ self.processorManager.render();
+ self.processGroupManager.render();
+ self.remoteProcessGroupManager.render();
+ self.portManager.render();
+ self.labelManager.render();
+ self.funnelManager.render();
+ self.connectionManager.render();
+ }
+ });
+
this.svg = svg;
this.canvas = canvas;
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
index 55a9236aa9..32258dbf20 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
@@ -254,7 +254,7 @@ export class ProcessGroupManager {
.append('text')
.attr('x', 10)
.attr('y', 49)
- .attr('class', 'process-group-transmitting
process-group-contents-icon')
+ .attr('class', 'process-group-transmitting
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf140')
.append('title')
@@ -270,7 +270,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-not-transmitting
process-group-contents-icon')
+ .attr('class', 'process-group-not-transmitting
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'flowfont')
.text('\ue80a')
.append('title')
@@ -286,7 +286,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-running
process-group-contents-icon')
+ .attr('class', 'process-group-running
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf04b')
.append('title')
@@ -302,7 +302,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-stopped
process-group-contents-icon')
+ .attr('class', 'process-group-stopped
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf04d')
.append('title')
@@ -318,7 +318,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-invalid
process-group-contents-icon')
+ .attr('class', 'process-group-invalid
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf071')
.append('title')
@@ -334,7 +334,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-disabled
process-group-contents-icon')
+ .attr('class', 'process-group-disabled
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'flowfont')
.text('\ue802')
.append('title')
@@ -353,7 +353,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-up-to-date
process-group-contents-icon')
+ .attr('class', 'process-group-up-to-date
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf00c')
.append('title')
@@ -373,7 +373,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-locally-modified
process-group-contents-icon')
+ .attr('class', 'process-group-locally-modified
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf069')
.append('title')
@@ -393,7 +393,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-stale
process-group-contents-icon')
+ .attr('class', 'process-group-stale
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf0aa')
.append('title')
@@ -413,7 +413,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class',
'process-group-locally-modified-and-stale process-group-contents-icon')
+ .attr('class',
'process-group-locally-modified-and-stale process-group-contents-icon
primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf06a')
.append('title')
@@ -433,7 +433,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-sync-failure
process-group-contents-icon')
+ .attr('class', 'process-group-sync-failure
process-group-contents-icon primary-color-lighter')
.attr('font-family', 'FontAwesome')
.text('\uf128')
.append('title')
@@ -736,7 +736,7 @@ export class ProcessGroupManager {
.classed('success-color', function (d: any) {
return d.permissions.canRead &&
d.activeRemotePortCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.activeRemotePortCount === 0;
});
const transmittingCount = details
@@ -760,7 +760,7 @@ export class ProcessGroupManager {
.classed('not-transmitting surface-color', function (d:
any) {
return d.permissions.canRead &&
d.inactiveRemotePortCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.inactiveRemotePortCount === 0;
})
.attr('x', function () {
@@ -792,7 +792,7 @@ export class ProcessGroupManager {
.classed('success-color-lighter', function (d: any) {
return d.permissions.canRead &&
d.component.runningCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.runningCount === 0;
})
.attr('x', function () {
@@ -824,7 +824,7 @@ export class ProcessGroupManager {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead &&
d.component.stoppedCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.stoppedCount === 0;
})
.attr('x', function () {
@@ -856,7 +856,7 @@ export class ProcessGroupManager {
.classed('invalid caution-color', function (d: any) {
return d.permissions.canRead &&
d.component.invalidCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.invalidCount === 0;
})
.attr('x', function () {
@@ -888,7 +888,7 @@ export class ProcessGroupManager {
.classed('disabled surface-color', function (d: any) {
return d.permissions.canRead &&
d.component.disabledCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.disabledCount === 0;
})
.attr('x', function () {
@@ -920,7 +920,7 @@ export class ProcessGroupManager {
.classed('success-color', function (d: any) {
return d.permissions.canRead &&
d.component.upToDateCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.upToDateCount === 0;
});
const upToDateCount = details
@@ -944,7 +944,7 @@ export class ProcessGroupManager {
.classed('surface-color', function (d: any) {
return d.permissions.canRead &&
d.component.locallyModifiedCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.locallyModifiedCount === 0;
})
.attr('x', function () {
@@ -976,7 +976,7 @@ export class ProcessGroupManager {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount
> 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead && d.component.staleCount
=== 0;
})
.attr('x', function () {
@@ -1008,7 +1008,7 @@ export class ProcessGroupManager {
.classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead &&
d.component.locallyModifiedAndStaleCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.locallyModifiedAndStaleCount === 0;
})
.attr('x', function () {
@@ -1042,7 +1042,7 @@ export class ProcessGroupManager {
.classed('surface-color', function (d: any) {
return d.permissions.canRead &&
d.component.syncFailureCount > 0;
})
- .classed('zero primary-color-lighter', function (d: any) {
+ .classed('zero', function (d: any) {
return d.permissions.canRead &&
d.component.syncFailureCount === 0;
})
.attr('x', function () {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 1c77e599db..f471c88d41 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -121,7 +121,7 @@
}
g.component rect.body.unauthorized {
- fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97,
0.08));
+ fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
}
g.component rect.border,
@@ -143,7 +143,7 @@
}
g.component rect.processor-icon-container.unauthorized {
- fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97,
0.08));
+ fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
}
g.component.selected rect.border {
@@ -271,7 +271,7 @@
}
g.connection rect.body.unauthorized {
- fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97,
0.08));
+ fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
}
g.connection rect.border.unauthorized {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
index 83632d8795..04d80bd313 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
@@ -32,6 +32,7 @@
"ngx-skeleton-loader": "^8.1.0",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
+ "webfontloader": "^1.6.28",
"zone.js": "0.14.4"
},
"devDependencies": {
@@ -57,6 +58,7 @@
"@types/d3": "^7.4.3",
"@types/humanize-duration": "^3.27.3",
"@types/jest": "^29.5.12",
+ "@types/webfontloader": "^1.6.38",
"@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0",
"autoprefixer": "^10.4.16",
@@ -11043,6 +11045,12 @@
"integrity":
"sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
"dev": true
},
+ "node_modules/@types/webfontloader": {
+ "version": "1.6.38",
+ "resolved":
"https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.38.tgz";,
+ "integrity":
"sha512-kUaF72Fv202suFx6yBrwXqeVRMx7hGtJTesyESZgn9sEPCUeDXm2p0SiyS1MTqW74nQP4p7JyrOCwZ7pNFns4w==",
+ "dev": true
+ },
"node_modules/@types/ws": {
"version": "8.5.10",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz";,
@@ -25020,6 +25028,11 @@
"defaults": "^1.0.3"
}
},
+ "node_modules/webfontloader": {
+ "version": "1.6.28",
+ "resolved":
"https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz";,
+ "integrity":
"sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
+ },
"node_modules/webidl-conversions": {
"version": "7.0.0",
"resolved":
"https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz";,
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
index 3eb979a193..316d8aa5ea 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
@@ -38,6 +38,7 @@
"ngx-skeleton-loader": "^8.1.0",
"rxjs": "~7.8.1",
"tslib": "^2.6.2",
+ "webfontloader": "^1.6.28",
"zone.js": "0.14.4"
},
"devDependencies": {
@@ -63,6 +64,7 @@
"@types/d3": "^7.4.3",
"@types/humanize-duration": "^3.27.3",
"@types/jest": "^29.5.12",
+ "@types/webfontloader": "^1.6.38",
"@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0",
"autoprefixer": "^10.4.16",
