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 e3cf0a67bc NIFI-13289 add tooltips to NewCanvasItem (#8870)
e3cf0a67bc is described below
commit e3cf0a67bc9781ecd14dc49ed0c019ab328fce5c
Author: Shane <[email protected]>
AuthorDate: Wed May 29 19:34:26 2024 -0400
NIFI-13289 add tooltips to NewCanvasItem (#8870)
This closes #8870
---
.../ui/canvas/header/header.component.html | 24 ++++++++++++++--------
.../new-canvas-item/new-canvas-item.component.html | 9 +++++++-
.../new-canvas-item/new-canvas-item.component.ts | 16 ++++++++++++++-
.../ui/common/tooltips/nifi-tooltip.directive.ts | 19 +++++++++++++++++
4 files changed, 58 insertions(+), 10 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
index 6f037531fd..d77493993a 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
@@ -22,42 +22,50 @@
[type]="ComponentType.Processor"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-processor"
- iconHoverClass="icon-processor-add"></new-canvas-item>
+ iconHoverClass="icon-processor-add"
+ tooltip="Processor"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.InputPort"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-port-in"
- iconHoverClass="icon-port-in-add"></new-canvas-item>
+ iconHoverClass="icon-port-in-add"
+ tooltip="Input Port"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.OutputPort"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-port-out"
- iconHoverClass="icon-port-out-add"></new-canvas-item>
+ iconHoverClass="icon-port-out-add"
+ tooltip="Output Port"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.ProcessGroup"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-group"
- iconHoverClass="icon-group-add"></new-canvas-item>
+ iconHoverClass="icon-group-add"
+ tooltip="Process Group"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.RemoteProcessGroup"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-group-remote"
- iconHoverClass="icon-group-remote-add"></new-canvas-item>
+ iconHoverClass="icon-group-remote-add"
+ tooltip="Remote Process Group"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.Funnel"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-funnel"
- iconHoverClass="icon-funnel-add"></new-canvas-item>
+ iconHoverClass="icon-funnel-add"
+ tooltip="Funnel"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.Flow"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-import-from-registry"
-
iconHoverClass="icon-import-from-registry-add"></new-canvas-item>
+ iconHoverClass="icon-import-from-registry-add"
+ tooltip="Import from Registry"></new-canvas-item>
<new-canvas-item
[type]="ComponentType.Label"
[disabled]="!canvasPermissions.canWrite"
iconClass="icon-label"
- iconHoverClass="icon-label-add"></new-canvas-item>
+ iconHoverClass="icon-label-add"
+ tooltip="Label"></new-canvas-item>
}
</navigation>
<flow-status
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html
index 538d5dfa9f..5ebc6642ab 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html
@@ -14,7 +14,14 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-<div class="new-canvas-item">
+<div
+ class="new-canvas-item"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ [tooltipInputData]="tooltip"
+ [tooltipDisabled]="dragging"
+ [position]="tooltipPosition"
+ [delayClose]="false">
<div class="h-16 w-16 pl-1.5 flex items-center justify-center relative
icon" [class]="iconClass"></div>
<button
class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center
relative icon"
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.ts
index 04a476f6ca..4309b9cf2e 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.ts
@@ -25,12 +25,15 @@ import { selectDragging } from
'../../../../state/flow/flow.selectors';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ComponentType } from '../../../../../../state/shared';
import { CanvasView } from '../../../../service/canvas-view.service';
+import { NifiTooltipDirective } from
'../../../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { TextTip } from
'../../../../../../ui/common/tooltips/text-tip/text-tip.component';
+import { ConnectedPosition } from '@angular/cdk/overlay';
@Component({
selector: 'new-canvas-item',
standalone: true,
templateUrl: './new-canvas-item.component.html',
- imports: [CdkDrag],
+ imports: [CdkDrag, NifiTooltipDirective],
styleUrls: ['./new-canvas-item.component.scss']
})
export class NewCanvasItem {
@@ -38,6 +41,17 @@ export class NewCanvasItem {
@Input() iconClass = '';
@Input() iconHoverClass = '';
@Input() disabled = false;
+ @Input() tooltip = '';
+
+ protected readonly TextTip = TextTip;
+
+ tooltipPosition: ConnectedPosition = {
+ originX: 'center',
+ originY: 'bottom',
+ overlayX: 'center',
+ overlayY: 'top',
+ offsetY: 8
+ };
dragging = false;
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/nifi-tooltip.directive.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/nifi-tooltip.directive.ts
index 44f71452a3..a988c17cc4 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/nifi-tooltip.directive.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/nifi-tooltip.directive.ts
@@ -25,6 +25,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
})
export class NifiTooltipDirective<T> implements OnDestroy {
@Input() tooltipComponentType!: Type<T>;
+ @Input() tooltipDisabled = false;
@Input() tooltipInputData: any;
@Input() position: ConnectedPosition | undefined;
@Input() delayClose = true;
@@ -58,11 +59,29 @@ export class NifiTooltipDirective<T> implements OnDestroy {
}
}
+ @HostListener('mousemove')
+ mouseMove() {
+ if (this.overlayRef?.hasAttached() && this.tooltipDisabled) {
+ this.overlayRef?.detach();
+ }
+ }
+
+ @HostListener('mouseup')
+ mouseup() {
+ if (!this.overlayRef?.hasAttached()) {
+ this.attach();
+ }
+ }
+
ngOnDestroy(): void {
this.overlayRef?.dispose();
}
private attach(): void {
+ if (this.tooltipDisabled) {
+ return;
+ }
+
if (!this.overlayRef) {
const positionStrategy = this.getPositionStrategy();
this.overlayRef = this.overlay.create({ positionStrategy });
