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

[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
This commit is contained in:
Scott Aslan 2024-05-30 15:21:34 -04:00 committed by GitHub
parent a8ba9e99c4
commit 732b587561
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 58 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
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
View File

@ -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;

44
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
View File

@ -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 () {

6
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
View File

@ -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 {

13
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json generated
View File

@ -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",

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
View File

@ -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",