Feat/contextmenu add shortcut support

[barsvinicius]

What changed

I added a new feature that allows the user to set a "shortcut" string in the context menu. This is particularly useful when the user builds an application with lots of tool-like functionalities and relies on keyboard shortcuts. This new feature allows the user to expose the shortcuts in the context menus. The screenshot below shows the feature in action:

I also changed the menu caret for a more visually pleasing arrow.

In order to add a shortcut to the menu, add the shortcut property to the menu definition, as a string. Example:

this.core.make('osjs/contextmenu').show({
  position: ev,
  menu: [{
    label: "Save File",
    shortcut: "CTRL+S"
  }]
});

Further comments

• If set, the shortcut key will be displayed even when there are submenus. In this case it will be shown and right after it, there will be the caret which opens the submenu. This might not make much sense because if an action has a shortcut then it should be final and have no submenus. Therefore, we may consider forbidding the presence of a shortcut hint when the menu contains sub items.

[andersevenrud]

Sorry for the late feedback here. This sort of slipped my mind :sweat_smile:

This is good stuff! The only thing I would really love to see added to this is the actual binding of the shortcut keys.

There are utilities in the client to achieve this, but they are currently integrated into the global keybindings that can be added in configuration file(s). If these were exposed, this library could have an abstraction for ephemeral keybindings that could be read directly from this new shortcut property (and it already speaks the same language, ex. ctrl+alt+a)

[barsvinicius]

@andersevenrud, I agree that the key bindings would be great. The reason why I decided not to touch this now is precisely because we can use the client utility to do the bindings independently, so it's already achievable. Would that be okay?

[andersevenrud]

Currently the client integration does not support adding shortcuts on runtime. Would be very sweet to get that in so it could be integrated here.

I'm thinking maybe something like this:

// A window method to register keybindings
win.registerKeybinding({
  name: 'search',
  keybinding: 'ALT+F',
  callback: () => {}
})

// Then a simple utility to convert create options that can be passed along to the contextmenu 
const createContextMenuOptions = name => {
  const found = win.getKeybinding('search')
  if (found) {
    return {
      shortcut: found.keybinding, // Might make sense to rename this to keybinding as well
      onclick: found.callback,
    }
  }
  return {}
}

// An example of use
const createMyContextMenu = (position) => core.make('osjs/contextmenu', {
  position,
  menu: [{
    label: 'Search for something',
    ...createContextMenuOptions('search')
  }]
});

[ajmeese7]

@andersevenrud how do you want to proceed on this now?

[andersevenrud]

Not really sure @ajmeese7 . Feel free to look at it if you have some time :)

[barsvinicius]

I will take another look at it, just give me a week or so. I have been pretty busy during the last month this.

[andersevenrud]

I have been pretty busy during the last month this.

This also applies to me :) So I have been unable to follow up activity in this project in general.

Take your time @barsvinicius . And if you find yourself too busy, there's enough information in this PR for someone else to pick it up and finish, so no worries.