Display a shortcuts modal

[ajithranka]

Shows a subset of shortcuts from this wiki page on pressing ?.

cc: @bhousel @kepta

[bhousel]

This is a great start! Next step is to move the English strings from shortcuts.json to core.yaml. Then shortcuts.json with contain translation keys and shortcuts.js will use t() to display them.

[ajithranka]

@bhousel I couldn't make enough space in the modal (without making the width larger, allowing for a two column format) to show all shortcuts in the wiki. Is it ok to show only the most used shortcuts or should we display all of them?

[slhh]

@ajithranka We shouldn't generate secret shortcuts by omitting them from the display.

In case we want to omit something from the modal, we can omit all shortcuts for buttons which are directly visible on the UI, e.g. radial menu operations, or undo/redo/save. We can do that, because the operation is easily accessible by using the button, and the shortcut is discoverable due to the hover text.

In case we want to display all shortcuts the modal could have multiple tabs, or collapsible sections plus scrollbar.

[boothym]

I assume that the Mac command key will change to Ctrl when using a browser on Windows?

[bhousel]

I assume that the Mac command key will change to control when using a browser on Windows?

Yes, iD.uiCmd (link) contains the code to adjust the keyboard shortcuts between Mac / Windows / Linux.

[kepta]

@bhousel I want to form for e.g. t('shortcuts.display.zoom') over here. d would have d.key == 'zoom'. But what would be the best way to get display? and is this approach fine?

[bhousel]

I think we only need uiCmd when there's a ⌘ involved.

[kepta]

@bhousel lets merge this? 😎

[bhousel]

@bhousel lets merge this? 😎

• does it include all the keyboard shortcuts?

• is shortcuts.json now the single source for the keyboard shortcuts across iD (good) or do we need to update shortcuts in multiple places (less good but not dealbreaker)
  yes this file is the single source for all the keyboard shortcuts.

• export it as dataShortcuts, not shortcuts

• does it work RTL?

• does it work on smallish screens? is it responsive if I resize the browser window?

[kepta]

rtl version

small screen

[kepta]

@bhousel made some changes.

We still need to figure out a clickable link which opens the shortcuts modal.
Currently it is by pressing ?.

[bhousel]

Just rebased this branch to master. Looks like a great start - getting it merged will be my focus this week.

[runnabot]

Deployed iD.
_{View on Runnable}

[magol]

How do I view this? When I press ? i only zoom in on the map (The + sign is on the same key on a Swedish keyboard)

[bhousel]

Thanks @magol - I just made a change that should fix this, but I'm going to open a separate issue just in case it didn't.