This is an automated email from the ASF dual-hosted git repository.
rfellows 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 2cae3fec11 [NIFI-13028] theme the processor icon color (#8633)
2cae3fec11 is described below
commit 2cae3fec112713e8cd1c95199f4169138d919bc3
Author: Scott Aslan <scottyas...@users.noreply.github.com>
AuthorDate: Fri Apr 12 09:34:29 2024 -0400
[NIFI-13028] theme the processor icon color (#8633)
* [NIFI-13028] theme the processor icon color
* prettier and lint updates
* add missing color to table action icon
* review feedback
This closes #8633
---
.../service/manager/processor-manager.service.ts | 54 ++++++++++++----------
.../controller-service-table.component.html | 9 ++--
2 files changed, 35 insertions(+), 28 deletions(-)
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
index 6f293fe89a..3c628ebcdd 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
@@ -604,7 +604,9 @@ export class ProcessorManager {
.classed('unauthorized', !processorData.permissions.canRead);
//update the processor icon
- processor.select('text.processor-icon').classed('unauthorized',
!processorData.permissions.canRead);
+ processor
+ .select('text.processor-icon')
+ .classed('unauthorized accent-color',
!processorData.permissions.canRead);
//update the processor border
processor.select('rect.border').classed('unauthorized',
!processorData.permissions.canRead);
@@ -623,32 +625,38 @@ export class ProcessorManager {
processor.select('rect.border').style('stroke', function
() {
return color;
});
- }
- }
- // update the processor color
- processor.select('text.processor-icon').style('fill', function (d:
any) {
- // get the default color
- let color: string = self.defaultIconColor();
+ if (color) {
+ processor.select('text.processor-icon').attr('class',
function () {
+ return 'processor-icon';
+ });
- if (!d.permissions.canRead) {
- return color;
- }
+ // update the processor color
+ processor.style('fill', function (d: any) {
+ let color = 'unset';
- // use the specified color if appropriate
- if (d.component.style['background-color']) {
- color = d.component.style['background-color'];
+ if (!d.permissions.canRead) {
+ return color;
+ }
+
+ // use the specified color if appropriate
+ if (d.component.style['background-color']) {
+ color = d.component.style['background-color'];
+
+ color =
self.canvasUtils.determineContrastColor(
+ self.nifiCommon.substringAfterLast(color,
'#')
+ );
+ }
- //special case #ffffff implies default fill
- if (color.toLowerCase() === '#ffffff') {
- color = self.defaultIconColor();
- } else {
- color =
self.canvasUtils.determineContrastColor(self.nifiCommon.substringAfterLast(color,
'#'));
+ return color;
+ });
}
+ } else {
+ processor.select('text.processor-icon').attr('class',
function () {
+ return 'processor-icon accent-color';
+ });
}
-
- return color;
- });
+ }
// restricted component indicator
processor.select('circle.restricted-background').style('visibility',
self.showRestricted);
@@ -772,10 +780,6 @@ export class ProcessorManager {
removed.remove();
}
- private defaultIconColor(): string {
- return '#ad9897';
- }
-
/**
* Determines whether the specific component needs a tooltip.
*
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
index 8d06973047..e8f735b02f 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
@@ -124,13 +124,13 @@
<div class="flex items-center gap-x-3">
@if (canConfigure(item)) {
<div
- class="pointer fa fa-cog"
+ class="pointer fa fa-cog primary-color"
(click)="configureClicked(item, $event)"
title="Edit"></div>
}
@if (hasAdvancedUi(item)) {
<div
- class="pointer fa fa-cogs"
+ class="pointer fa fa-cogs primary-color"
(click)="advancedClicked(item, $event)"
title="Advanced"></div>
}
@@ -142,7 +142,10 @@
title="Disable"></div>
}
@if (canEnable(item)) {
- <div class="pointer fa fa-flash"
(click)="enabledClicked(item)" title="Enable"></div>
+ <div
+ class="pointer fa fa-flash primary-color"
+ (click)="enabledClicked(item)"
+ title="Enable"></div>
}
@if (canChangeVersion(item)) {
<div class="pointer fa fa-exchange
primary-color" title="Change Version"></div>
