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

[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
This commit is contained in:
Scott Aslan 2024-04-12 09:34:29 -04:00 committed by GitHub
parent 419a9cc73b
commit 2cae3fec11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,33 +625,39 @@ export class ProcessorManager {
processor.select('rect.border').style('stroke', function () {
return color;
});
if (color) {
processor.select('text.processor-icon').attr('class', function () {
return 'processor-icon';
});
// update the processor color
processor.style('fill', function (d: any) {
let color = 'unset';
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, '#')
);
}
return color;
});
}
} else {
processor.select('text.processor-icon').attr('class', function () {
return 'processor-icon accent-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 (!d.permissions.canRead) {
return color;
}
// use the specified color if appropriate
if (d.component.style['background-color']) {
color = d.component.style['background-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;
});
// restricted component indicator
processor.select('circle.restricted-background').style('visibility', self.showRestricted);
processor.select('text.restricted').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.
*

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

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