diff --git a/src/main/resources/assets/admin/common/js/ui/button/ActionButton.ts b/src/main/resources/assets/admin/common/js/ui/button/ActionButton.ts index 8baf18289..2bc5b93dc 100644 --- a/src/main/resources/assets/admin/common/js/ui/button/ActionButton.ts +++ b/src/main/resources/assets/admin/common/js/ui/button/ActionButton.ts @@ -26,21 +26,6 @@ export class ActionButton this.setAction(action); } - private onHelpKeyPressed(e: KeyboardEvent) { - const action = this.getAction(); - if (!action.hasShortcut()) { - return; - } - const tooltip = this.getTooltip(); - if (action.isEnabled() && KeyBindings.get().isActive(action.getShortcut())) { - if (KeyBindingAction[KeyBindingAction.KEYDOWN].toLowerCase() === e.type) { - tooltip.show(); - return; - } - } - tooltip.hide(); - } - protected initListeners() { const executeAction = () => { Body.get().setFocusedElement(this); @@ -56,19 +41,6 @@ export class ActionButton KeyBindings.get().onHelpKeyPressed(this.onHelpKeyPressed); } - private updateIconClass(newIconClass: string) { - if (newIconClass === this.iconClass) { - return; - } - if (this.iconClass) { - this.removeClass(this.iconClass); - } - this.iconClass = newIconClass; - if (this.iconClass) { - this.addClass(this.iconClass); - } - } - getAction(): Action { return this.action; } @@ -94,6 +66,16 @@ export class ActionButton return this.tooltip; } + protected createLabel(action: Action): string { + let label: string; + if (action.hasMnemonic()) { + label = action.getMnemonic().underlineMnemonic(action.getLabel()); + } else { + label = action.getLabel(); + } + return label; + } + private syncButtonWithAction() { const action = this.getAction(); @@ -119,22 +101,52 @@ export class ActionButton } } + private createTooltip() { + if (!this.action.hasShortcut()) { + return; + } + + let combination = this.action.getShortcut().getCombination(); + if (combination) { + combination = combination.replace(/mod\+/i, BrowserHelper.isOSX() || BrowserHelper.isIOS() ? 'cmd+' : 'ctrl+'); + } + this.tooltip = new Tooltip(this, combination, 1000); + } + private doSetAction(action: Action) { action.onPropertyChanged(this.syncButtonWithAction); this.action = action; + this.createTooltip(); this.syncButtonWithAction(); } - protected createLabel(action: Action): string { - let label: string; - if (action.hasMnemonic()) { - label = action.getMnemonic().underlineMnemonic(action.getLabel()); - } else { - label = action.getLabel(); + private onHelpKeyPressed(e: KeyboardEvent) { + const action = this.getAction(); + if (!action.hasShortcut()) { + return; } - return label; + const tooltip = this.getTooltip(); + if (action.isEnabled() && KeyBindings.get().isActive(action.getShortcut())) { + if (KeyBindingAction[KeyBindingAction.KEYDOWN].toLowerCase() === e.type) { + tooltip.show(); + return; + } + } + tooltip.hide(); } + private updateIconClass(newIconClass: string) { + if (newIconClass === this.iconClass) { + return; + } + if (this.iconClass) { + this.removeClass(this.iconClass); + } + this.iconClass = newIconClass; + if (this.iconClass) { + this.addClass(this.iconClass); + } + } } diff --git a/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts b/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts index 2a0cad6a1..cfa921550 100644 --- a/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts +++ b/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts @@ -15,14 +15,12 @@ export enum MenuButtonDropdownPos { LEFT, RIGHT } -interface MenuButtonConfigObject { +export interface MenuButtonConfig { defaultAction: Action; menuActions?: Action[]; dropdownPosition?: MenuButtonDropdownPos } -export type MenuButtonConfig = Action | MenuButtonConfigObject; - export class MenuButton extends DivEl { @@ -48,10 +46,13 @@ export class MenuButton private actionPropertyListener: () => void; + protected readonly config: MenuButtonConfig; + constructor(config: Action | MenuButtonConfig) { super('menu-button'); if ('defaultAction' in config) { + this.config = config; this.defaultAction = config.defaultAction; this.menuActions = config.menuActions || []; this.dropdownPosition = config.dropdownPosition || MenuButtonDropdownPos.LEFT; diff --git a/src/main/resources/assets/admin/common/js/ui/dialog/DropdownButtonRow.ts b/src/main/resources/assets/admin/common/js/ui/dialog/DropdownButtonRow.ts index 65643bf63..add17fd6f 100644 --- a/src/main/resources/assets/admin/common/js/ui/dialog/DropdownButtonRow.ts +++ b/src/main/resources/assets/admin/common/js/ui/dialog/DropdownButtonRow.ts @@ -12,7 +12,7 @@ export class DropdownButtonRow this.addClass('dropdown-button-row'); } - makeActionMenu(menuButtonConfig: MenuButtonConfig, useDefault: boolean = true): MenuButton { + makeActionMenu(menuButtonConfig: Action | MenuButtonConfig, useDefault: boolean = true): MenuButton { if (!this.actionMenu) { this.actionMenu = new MenuButton(menuButtonConfig);