This is an automated email from the ASF dual-hosted git repository.
scottyaslan 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 7aaa5b4224 [NIFI-13221] - display supported shortcut/hotkey combos in
context menu (#8821)
7aaa5b4224 is described below
commit 7aaa5b42247e9ded4fa8d43186713b5f15717867
Author: Rob Fellows <[email protected]>
AuthorDate: Tue May 14 09:59:14 2024 -0400
[NIFI-13221] - display supported shortcut/hotkey combos in context menu
(#8821)
This closes #8821
---
.../service/canvas-context-menu.service.ts | 26 ++++++++++++++++++----
.../context-menu/context-menu.component.html | 24 ++++++++++++++++----
.../common/context-menu/context-menu.component.ts | 11 +++++++++
3 files changed, 53 insertions(+), 8 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts
index f5e155ef91..3f69dbcbed 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts
@@ -560,13 +560,20 @@ export class CanvasContextMenu implements
ContextMenuDefinitionProvider {
condition:
this.canvasActionsService.getConditionFunction('refresh'),
clazz: 'fa fa-refresh',
text: 'Refresh',
- action: this.canvasActionsService.getActionFunction('refresh')
+ action: this.canvasActionsService.getActionFunction('refresh'),
+ shortcut: {
+ control: true,
+ code: 'R'
+ }
},
{
condition:
this.canvasActionsService.getConditionFunction('leaveGroup'),
clazz: 'fa fa-level-up',
text: 'Leave Group',
- action:
this.canvasActionsService.getActionFunction('leaveGroup')
+ action:
this.canvasActionsService.getActionFunction('leaveGroup'),
+ shortcut: {
+ code: 'ESC'
+ }
},
{
isSeparator: true
@@ -1230,7 +1237,11 @@ export class CanvasContextMenu implements
ContextMenuDefinitionProvider {
condition:
this.canvasActionsService.getConditionFunction('copy'),
clazz: 'fa fa-copy',
text: 'Copy',
- action: this.canvasActionsService.getActionFunction('copy')
+ action: this.canvasActionsService.getActionFunction('copy'),
+ shortcut: {
+ control: true,
+ code: 'C'
+ }
},
{
condition: () => {
@@ -1245,6 +1256,10 @@ export class CanvasContextMenu implements
ContextMenuDefinitionProvider {
this.canvasActionsService.getActionFunction('paste')(selection, { pasteLocation
});
}
}
+ },
+ shortcut: {
+ control: true,
+ code: 'V'
}
},
{
@@ -1296,7 +1311,10 @@ export class CanvasContextMenu implements
ContextMenuDefinitionProvider {
condition:
this.canvasActionsService.getConditionFunction('delete'),
clazz: 'fa fa-trash',
text: 'Delete',
- action: this.canvasActionsService.getActionFunction('delete')
+ action: this.canvasActionsService.getActionFunction('delete'),
+ shortcut: {
+ code: '⌫'
+ }
}
]
};
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
index ee4d862b77..d7226b23ec 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
@@ -27,7 +27,7 @@
} @else {
@if (hasSubMenu(item)) {
@if (menuComponent.menu; as subMenu) {
- <button class="context-menu-item pl-1 pt-2 pb-2"
cdkMenuItem [cdkMenuTriggerFor]="subMenu">
+ <button class="context-menu-item pl-1 pr-1 pt-2 pb-2"
cdkMenuItem [cdkMenuTriggerFor]="subMenu">
<div class="context-menu-item-img"
[class]="item.clazz"></div>
<div class="context-menu-item-text
surface-contrast">{{ item.text }}</div>
<div class="context-menu-group-item-img fa
fa-caret-right"></div>
@@ -39,11 +39,27 @@
[menuId]="item.subMenuId"></fd-context-menu>
} @else {
<button
- class="context-menu-item pl-1 pt-2 pb-2"
+ class="context-menu-item pl-1 pr-1 pt-2 pb-2 flex
justify-between"
(click)="menuItemClicked(item, $event)"
cdkMenuItem>
- <div class="context-menu-item-img"
[class]="item.clazz"></div>
- <div class="context-menu-item-text
surface-contrast">{{ item.text }}</div>
+ <div class="flex">
+ <div class="context-menu-item-img"
[class]="item.clazz"></div>
+ <div class="context-menu-item-text
surface-contrast">{{ item.text }}</div>
+ </div>
+ @if (item.shortcut) {
+ <div class="context-menu-item-shortcut
surface-contrast justify-end opacity-40">
+ @if (item.shortcut.shift) {
+ ⇧
+ }
+ @if (item.shortcut.control) {
+ {{ isMac ? '⌘' : '⌃' }}
+ }
+ @if (item.shortcut.alt) {
+ ⌥
+ }
+ {{ item.shortcut.code }}
+ </div>
+ }
</button>
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.ts
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.ts
index c0d80c47a4..708bb38a26 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.ts
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.ts
@@ -22,10 +22,19 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from
'@angular/cdk/menu';
export interface ContextMenuDefinitionProvider {
getMenu(menuId: string): ContextMenuDefinition | undefined;
+
filterMenuItem(menuItem: ContextMenuItemDefinition): boolean;
+
menuItemClicked(menuItem: ContextMenuItemDefinition, event: MouseEvent):
void;
}
+export interface KeyboardShortcut {
+ code: string;
+ control?: boolean;
+ shift?: boolean;
+ alt?: boolean;
+}
+
export interface ContextMenuItemDefinition {
isSeparator?: boolean;
condition?: (selection: any) => boolean;
@@ -33,6 +42,7 @@ export interface ContextMenuItemDefinition {
text?: string;
subMenuId?: string;
action?: (selection: any, event?: MouseEvent) => void;
+ shortcut?: KeyboardShortcut;
}
export interface ContextMenuDefinition {
@@ -54,6 +64,7 @@ export class ContextMenu implements OnInit {
private showFocused: Subject<boolean> = new Subject();
showFocused$: Observable<boolean> = this.showFocused.asObservable();
+ isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
getMenuItems(menuId: string | undefined): ContextMenuItemDefinition[] {
if (menuId) {
