Fix key shortcut display issues

(closes #1272)

This update includes several changes:
- Rename `tooltip.keys()` to `tooltip.shortcut()`
  `keys` is too overloaded/common of a word in JavaScript
- Also make it just work with a string, not a single element array with a string in it
- Change tooltip key hint text from "Shortcut:" to just say "Key:" it's shorter and
  easier for users to read, also make the key hint only appear for single key shortcut

css/80_app.css

@@ -5249,17 +5249,16 @@ button.conflicts-button {
 }
 
 .tooltip-keyhint {
-    padding: 10px;
-    margin: 10px -10px -10px -10px;
+  padding: 10px;
+  margin: 10px -10px -10px -10px;
 }
-.popover-inner .shortcut {
-    font-weight: bold;
-    margin-left: 5px;
+.tooltip-keyhint .tooltip-keys {
+  padding: 0 3px;
+  white-space: nowrap;
 }
-
-.ideditor[dir='rtl'] .popover-inner .shortcut {
-    margin-left: 0;
-    margin-right: 5px;
+.tooltip-keys kbd.shortcut {
+  font-size: 10px;
+  font-weight: bold;
 }
 
 /* dark tooltips for sidebar / panels */

data/core.yaml

@@ -556,7 +556,7 @@ en:
     title: Redo
     tooltip: "Redo: {action}"
     nothing: Nothing to redo.
-  tooltip_keyhint: "Shortcut:"
+  tooltip_keyhint: "Key:"
   translate:
     translate: Add multilingual name
     localized_translation_label: Multilingual Name

modules/ui/edit_menu.js

@@ -97,7 +97,7 @@ export function uiEditMenu(context) {
       let tooltip = uiTooltip(context)
         .heading(d.title)
         .title(d.tooltip())
-        .keys([d.keys[0]]);  // display the first key combo, if there are alternates
+        .shortcut(d.keys[0]);  // display the first key combo, if there are alternates
 
       _tooltips.push(tooltip);
 

modules/ui/pane.js

@@ -76,7 +76,7 @@ export function uiPane(context, id) {
       _paneTooltip = uiTooltip(context)
         .placement(isRTL ? 'right' : 'left')
         .title(_description)
-        .keys([_key]);
+        .shortcut(_key);
     }
 
     selection

modules/ui/panes/help.js

@@ -378,7 +378,7 @@ export function uiPaneHelp(context) {
       .attr('class', 'shortcuts')
       .call(uiTooltip(context)
         .title(l10n.t('shortcuts.tooltip'))
-        .keys(['?'])
+        .shortcut('?')
         .placement('top')
       )
       .append('a')

modules/ui/rapid_feature_inspector.js

@@ -283,23 +283,23 @@ export function uiRapidFeatureInspector(context, keybinding) {
       .on('click', onClick);
 
     // build tooltips
-    let title, keys;
+    let title, shortcut;
     if (d.key === 'accept') {
       if (isAddFeatureDisabled()) {
         title = l10n.t('rapid_feature_inspector.option_accept.disabled', { n: ACCEPT_FEATURES_LIMIT } );
-        keys = [];
+        shortcut = '';
       } else {
         title = l10n.t('rapid_feature_inspector.option_accept.tooltip');
-        keys = [l10n.t('rapid_feature_inspector.option_accept.key')];
+        shortcut = l10n.t('rapid_feature_inspector.option_accept.key');
       }
     } else if (d.key === 'ignore') {
       title = l10n.t('rapid_feature_inspector.option_ignore.tooltip');
-      keys = [l10n.t('rapid_feature_inspector.option_ignore.key')];
+      shortcut = l10n.t('rapid_feature_inspector.option_ignore.key');
     }
 
-    if (title && keys) {
+    if (title) {
       choiceButton = choiceButton
-        .call(uiTooltip(context).placement('bottom').title(title).keys(keys));
+        .call(uiTooltip(context).placement('bottom').title(title).shortcut(shortcut));
     }
 
     choiceButton

modules/ui/sections/background_list.js

@@ -67,7 +67,7 @@ export function uiSectionBackgroundList(context) {
       .append('label')
       .call(uiTooltip(context)
         .title(l10n.t('background.minimap.tooltip'))
-        .keys([l10n.t('background.minimap.key')])
+        .shortcut(l10n.t('background.minimap.key'))
         .placement('top')
       );
 
@@ -90,7 +90,7 @@ export function uiSectionBackgroundList(context) {
       .append('label')
       .call(uiTooltip(context)
         .title(l10n.t('background.3dmap.tooltip'))
-        .keys([uiCmd('⌘' + l10n.t('background.3dmap.key'))])
+        .shortcut(uiCmd('⌘' + l10n.t('background.3dmap.key')))
         .placement('top')
       );
 
@@ -113,7 +113,7 @@ export function uiSectionBackgroundList(context) {
       .append('label')
       .call(uiTooltip(context)
         .title(l10n.t('background.panel.tooltip'))
-        .keys([uiCmd('⌘⇧' + l10n.t('info_panels.background.key'))])
+        .shortcut(uiCmd('⌘⇧' + l10n.t('info_panels.background.key')))
         .placement('top')
       );
 
@@ -135,7 +135,7 @@ export function uiSectionBackgroundList(context) {
       .append('label')
       .call(uiTooltip(context)
         .title(l10n.t('background.location_panel.tooltip'))
-        .keys([uiCmd('⌘⇧' + l10n.t('info_panels.location.key'))])
+        .shortcut(uiCmd('⌘⇧' + l10n.t('info_panels.location.key')))
         .placement('top')
       );
 
@@ -183,7 +183,7 @@ export function uiSectionBackgroundList(context) {
         item.call(uiTooltip(context)
           .placement(placement)
           .title(l10n.t('background.switch'))
-          .keys([uiCmd('⌘' + l10n.t('background.key'))])
+          .shortcut(uiCmd('⌘' + l10n.t('background.key')))
         );
       } else if (d.description || isOverflowing) {
         item.call(uiTooltip(context)

modules/ui/sections/data_layers.js

@@ -91,7 +91,7 @@ export function uiSectionDataLayers(context) {
           d3_select(nodes[i])
             .call(uiTooltip(context)
               .title(l10n.t(`map_data.layers.${d.id}.tooltip`))
-              .keys([uiCmd('⌥' + l10n.t('area_fill.wireframe.key'))])
+              .shortcut(uiCmd('⌥' + l10n.t('area_fill.wireframe.key')))
               .placement('bottom')
             );
         } else {
@@ -286,7 +286,7 @@ export function uiSectionDataLayers(context) {
       .append('label')
       .call(uiTooltip(context)
         .title(l10n.t('map_data.history_panel.tooltip'))
-        .keys([uiCmd('⌘⇧' + l10n.t('info_panels.history.key'))])
+        .shortcut(uiCmd('⌘⇧' + l10n.t('info_panels.history.key')))
         .placement('top')
       );
 
@@ -308,7 +308,7 @@ export function uiSectionDataLayers(context) {
       .append('label')
       .call(uiTooltip(context)
         .title(l10n.t('map_data.measurement_panel.tooltip'))
-        .keys([uiCmd('⌘⇧' + l10n.t('info_panels.measurement.key'))])
+        .shortcut(uiCmd('⌘⇧' + l10n.t('info_panels.measurement.key')))
         .placement('top')
       );
 

modules/ui/sections/map_style_options.js

@@ -44,12 +44,10 @@ export function uiSectionMapStyleOptions(context) {
       .append('li')
       .call(uiTooltip(context)
         .title(d => l10n.t(`${name}.${d}.tooltip`))
-        .keys(d => {
-          let key = (d === 'wireframe' ? l10n.t('area_fill.wireframe.key') : null);
-          if (d === 'highlight_edits') {
-            key = l10n.t('map_data.highlight_edits.key');
-          }
-          return key ? [key] : null;
+        .shortcut(d => {
+          if (d === 'wireframe') return l10n.t('area_fill.wireframe.key');
+          if (d === 'highlight_edits') return l10n.t('map_data.highlight_edits.key');
+          return null;
         })
         .placement('top')
       );

modules/ui/tools/modes.js

@@ -77,7 +77,7 @@ export function uiToolDrawModes(context) {
       .call(uiTooltip(context)
         .placement('bottom')
         .title(d => d.description)
-        .keys(d => [d.key])
+        .shortcut(d => d.key)
         .scrollContainer(context.container().select('.top-toolbar'))
       );
 

modules/ui/tools/notes.js

@@ -67,7 +67,7 @@ export function uiToolNotes(context) {
       .call(uiTooltip(context)
         .placement('bottom')
         .title(d => d.description)
-        .keys(d => [d.key])
+        .shortcut(d => d.key)
         .scrollContainer(context.container().select('.top-toolbar'))
       );
 

modules/ui/tools/rapid_features.js

@@ -66,7 +66,7 @@ export function uiToolRapidFeatures(context) {
       .call(uiTooltip(context)
         .placement('bottom')
         .title(l10n.t('shortcuts.browsing.display_options.rapid_features_data'))
-        .keys(rapidFeaturesToggleKey)
+        .shortcut(rapidFeaturesToggleKey)
       );
 
     rapidButtonEnter

modules/ui/tools/save.js

@@ -58,7 +58,7 @@ export function uiToolSave(context) {
     if (_tooltip) {
       _tooltip
         .title(l10n.t(_numChanges > 0 ? 'save.help' : 'save.no_changes'))
-        .keys([key]);
+        .shortcut(key);
     }
 
     _button
@@ -86,7 +86,7 @@ export function uiToolSave(context) {
     _tooltip = uiTooltip(context)
       .placement('bottom')
       .title(l10n.t('save.no_changes'))
-      .keys([key])
+      .shortcut(key)
       .scrollContainer(context.container().select('.top-toolbar'));
 
     // var lastPointerUpType;

modules/ui/tools/sidebar_toggle.js

@@ -19,7 +19,7 @@ export function uiToolSidebarToggle(context) {
       .call(uiTooltip(context)
         .placement('bottom')
         .title(l10n.t('sidebar.tooltip'))
-        .keys([ l10n.t('sidebar.key') ])
+        .shortcut(l10n.t('sidebar.key'))
         .scrollContainer(context.container().select('.top-toolbar'))
       )
       .call(uiIcon('#rapid-icon-sidebar-' + (l10n.isRTL() ? 'right' : 'left')));

modules/ui/tools/undo_redo.js

@@ -65,7 +65,7 @@ export function uiToolUndoRedo(context) {
         }
         return str ? l10n.t(`${d.id}.tooltip`, { action: str }) : l10n.t(`${d.id}.nothing`);
       })
-      .keys(d => [d.key])
+      .shortcut(d => d.key)
       .scrollContainer(context.container().select('.top-toolbar'));
 
     // var lastPointerUpType;