Refactor keyboard shortcuts modal to fix RTL locales (#7545)

* Refactor keyboard shortcuts modal to fix RTL locales

* Feedback

* Remove lowercase modifier keys

app/assets/javascripts/discourse/controllers/keyboard-shortcuts-help.js.es6

@@ -1,7 +1,164 @@
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
+const KEY = "keyboard_shortcuts_help";
+
+const SHIFT = I18n.t("shortcut_modifier_key.shift");
+const ALT = I18n.t("shortcut_modifier_key.alt");
+const CTRL = I18n.t("shortcut_modifier_key.ctrl");
+const ENTER = I18n.t("shortcut_modifier_key.enter");
+
+const COMMA = I18n.t(`${KEY}.shortcut_key_delimiter_comma`);
+const PLUS = I18n.t(`${KEY}.shortcut_key_delimiter_plus`);
+
+function buildHTML(keys1, keys2, keysDelimiter, shortcutsDelimiter) {
+  const allKeys = [keys1, keys2]
+    .reject(keys => keys.length === 0)
+    .map(keys => keys.map(k => `<kbd>${k}</kbd>`).join(keysDelimiter));
+
+  if (allKeys.length === 1) {
+    return wrapInSpan(allKeys[0]);
+  }
+
+  const context = { shortcut1: allKeys[0], shortcut2: allKeys[1] };
+  let result = "";
+  if (shortcutsDelimiter === "or") {
+    result = I18n.t(`${KEY}.shortcut_delimiter_or`, context);
+  } else if (shortcutsDelimiter === "slash") {
+    result = I18n.t(`${KEY}.shortcut_delimiter_slash`, context);
+  } else if (shortcutsDelimiter === "space") {
+    result = I18n.t(`${KEY}.shortcut_delimiter_space`, context);
+  }
+
+  return wrapInSpan(result);
+}
+
+function wrapInSpan(shortcut) {
+  return `<span dir="ltr">${shortcut}</span>`;
+}
+
+function buildShortcut(
+  key,
+  { keys1 = [], keys2 = [], keysDelimiter = COMMA, shortcutsDelimiter = "or" }
+) {
+  const context = {
+    shortcut: buildHTML(keys1, keys2, keysDelimiter, shortcutsDelimiter)
+  };
+  return I18n.t(`${KEY}.${key}`, context);
+}
+
 export default Ember.Controller.extend(ModalFunctionality, {
   onShow() {
     this.set("modal.modalClass", "keyboard-shortcuts-modal");
+  },
+  shortcuts: {
+    jump_to: {
+      home: buildShortcut("jump_to.home", { keys1: ["g", "h"] }),
+      latest: buildShortcut("jump_to.latest", { keys1: ["g", "l"] }),
+      new: buildShortcut("jump_to.new", { keys1: ["g", "n"] }),
+      unread: buildShortcut("jump_to.unread", { keys1: ["g", "u"] }),
+      categories: buildShortcut("jump_to.categories", { keys1: ["g", "c"] }),
+      top: buildShortcut("jump_to.top", { keys1: ["g", "t"] }),
+      bookmarks: buildShortcut("jump_to.bookmarks", { keys1: ["g", "b"] }),
+      profile: buildShortcut("jump_to.profile", { keys1: ["g", "p"] }),
+      messages: buildShortcut("jump_to.messages", { keys1: ["g", "m"] }),
+      drafts: buildShortcut("jump_to.drafts", { keys1: ["g", "d"] })
+    },
+    navigation: {
+      back: buildShortcut("navigation.back", { keys1: ["u"] }),
+      jump: buildShortcut("navigation.jump", { keys1: ["#"] }),
+      up_down: buildShortcut("navigation.up_down", {
+        keys1: ["k"],
+        keys2: ["j"],
+        shortcutsDelimiter: "slash"
+      }),
+      open: buildShortcut("navigation.open", { keys1: ["o"], keys2: [ENTER] }),
+      next_prev: buildShortcut("navigation.next_prev", {
+        keys1: [SHIFT, "j"],
+        keys2: [SHIFT, "k"],
+        keysDelimiter: PLUS,
+        shortcutsDelimiter: "slash"
+      })
+    },
+    application: {
+      hamburger_menu: buildShortcut("application.hamburger_menu", {
+        keys1: ["="]
+      }),
+      user_profile_menu: buildShortcut("application.user_profile_menu", {
+        keys1: ["p"]
+      }),
+      create: buildShortcut("application.create", { keys1: ["c"] }),
+      show_incoming_updated_topics: buildShortcut(
+        "application.show_incoming_updated_topics",
+        { keys1: ["."] }
+      ),
+      search: buildShortcut("application.search", {
+        keys1: ["/"],
+        keys2: [CTRL, ALT, "f"],
+        keysDelimiter: PLUS
+      }),
+      help: buildShortcut("application.help", { keys1: ["?"] }),
+      dismiss_new_posts: buildShortcut("application.dismiss_new_posts", {
+        keys1: ["x", "r"]
+      }),
+      dismiss_topics: buildShortcut("application.dismiss_topics", {
+        keys1: ["x", "t"]
+      }),
+      log_out: buildShortcut("application.log_out", {
+        keys1: [SHIFT, "z"],
+        keys2: [SHIFT, "z"],
+        keysDelimiter: PLUS,
+        shortcutsDelimiter: "space"
+      })
+    },
+    composing: {
+      return: buildShortcut("composing.return", {
+        keys1: [SHIFT, "c"],
+        keysDelimiter: PLUS
+      }),
+      fullscreen: buildShortcut("composing.fullscreen", {
+        keys1: [SHIFT, "F11"],
+        keysDelimiter: PLUS
+      })
+    },
+    actions: {
+      bookmark_topic: buildShortcut("actions.bookmark_topic", { keys1: ["f"] }),
+      reply_as_new_topic: buildShortcut("actions.reply_as_new_topic", {
+        keys1: ["t"]
+      }),
+      reply_topic: buildShortcut("actions.reply_topic", {
+        keys1: [SHIFT, "r"],
+        keysDelimiter: PLUS
+      }),
+      reply_post: buildShortcut("actions.reply_post", { keys1: ["r"] }),
+      quote_post: buildShortcut("actions.quote_post", { keys1: ["q"] }),
+      pin_unpin_topic: buildShortcut("actions.pin_unpin_topic", {
+        keys1: [SHIFT, "p"],
+        keysDelimiter: PLUS
+      }),
+      share_topic: buildShortcut("actions.share_topic", {
+        keys1: [SHIFT, "s"],
+        keysDelimiter: PLUS
+      }),
+      share_post: buildShortcut("actions.share_post", { keys1: ["s"] }),
+      like: buildShortcut("actions.like", { keys1: ["l"] }),
+      flag: buildShortcut("actions.flag", { keys1: ["!"] }),
+      bookmark: buildShortcut("actions.bookmark", { keys1: ["b"] }),
+      edit: buildShortcut("actions.edit", { keys1: ["e"] }),
+      delete: buildShortcut("actions.delete", { keys1: ["d"] }),
+      mark_muted: buildShortcut("actions.mark_muted", { keys1: ["m", "m"] }),
+      mark_regular: buildShortcut("actions.mark_regular", {
+        keys1: ["m", "r"]
+      }),
+      mark_tracking: buildShortcut("actions.mark_tracking", {
+        keys1: ["m", "t"]
+      }),
+      mark_watching: buildShortcut("actions.mark_watching", {
+        keys1: ["m", "w"]
+      }),
+      print: buildShortcut("actions.print", {
+        keys1: [CTRL, "p"],
+        keysDelimiter: PLUS
+      })
+    }
   }
 });

app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs

@@ -3,68 +3,68 @@
     <div>
       <h4>{{i18n 'keyboard_shortcuts_help.jump_to.title'}}</h4>
       <ul>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.home'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.latest'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.new'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.unread'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.categories'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.top'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.bookmarks'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.profile'}}}</li>
+        <li>{{{shortcuts.jump_to.home}}}</li>
+        <li>{{{shortcuts.jump_to.latest}}}</li>
+        <li>{{{shortcuts.jump_to.new}}}</li>
+        <li>{{{shortcuts.jump_to.unread}}}</li>
+        <li>{{{shortcuts.jump_to.categories}}}</li>
+        <li>{{{shortcuts.jump_to.top}}}</li>
+        <li>{{{shortcuts.jump_to.bookmarks}}}</li>
+        <li>{{{shortcuts.jump_to.profile}}}</li>
         {{#if siteSettings.enable_personal_messages}}
-          <li>{{{i18n 'keyboard_shortcuts_help.jump_to.messages'}}}</li>
+          <li>{{{shortcuts.jump_to.messages}}}</li>
         {{/if}}
-        <li>{{{i18n 'keyboard_shortcuts_help.jump_to.drafts'}}}</li>
+        <li>{{{shortcuts.jump_to.drafts}}}</li>
       </ul>
       <h4>{{i18n 'keyboard_shortcuts_help.navigation.title'}}</h4>
       <ul>
-        <li>{{{i18n 'keyboard_shortcuts_help.navigation.back'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.navigation.jump'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.navigation.up_down'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.navigation.open'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.navigation.next_prev'}}}</li>
+        <li>{{{shortcuts.navigation.back}}}</li>
+        <li>{{{shortcuts.navigation.jump}}}</li>
+        <li>{{{shortcuts.navigation.up_down}}}</li>
+        <li>{{{shortcuts.navigation.open}}}</li>
+        <li>{{{shortcuts.navigation.next_prev}}}</li>
       </ul>
     </div>
     <div>
       <h4>{{i18n 'keyboard_shortcuts_help.application.title'}}</h4>
       <ul>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.hamburger_menu'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.user_profile_menu'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.show_incoming_updated_topics'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.search'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.help'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.dismiss_new_posts'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.dismiss_topics'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.log_out'}}}</li>
+        <li>{{{shortcuts.application.hamburger_menu}}}</li>
+        <li>{{{shortcuts.application.user_profile_menu}}}</li>
+        <li>{{{shortcuts.application.show_incoming_updated_topics}}}</li>
+        <li>{{{shortcuts.application.search}}}</li>
+        <li>{{{shortcuts.application.help}}}</li>
+        <li>{{{shortcuts.application.dismiss_new_posts}}}</li>
+        <li>{{{shortcuts.application.dismiss_topics}}}</li>
+        <li>{{{shortcuts.application.log_out}}}</li>
       </ul>
       <h4>{{i18n 'keyboard_shortcuts_help.composing.title'}}</h4>
       <ul>
-        <li>{{{i18n 'keyboard_shortcuts_help.composing.return'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.composing.fullscreen'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.application.create'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.reply_as_new_topic'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.reply_topic'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.reply_post'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.quote_post'}}}</li>
+        <li>{{{shortcuts.composing.return}}}</li>
+        <li>{{{shortcuts.composing.fullscreen}}}</li>
+        <li>{{{shortcuts.application.create}}}</li>
+        <li>{{{shortcuts.actions.reply_as_new_topic}}}</li>
+        <li>{{{shortcuts.actions.reply_topic}}}</li>
+        <li>{{{shortcuts.actions.reply_post}}}</li>
+        <li>{{{shortcuts.actions.quote_post}}}</li>
       </ul>
     </div>
     <div>
       <h4>{{i18n 'keyboard_shortcuts_help.actions.title'}}</h4>
       <ul>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.bookmark_topic'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.pin_unpin_topic'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.share_topic'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.share_post'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.like'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.flag'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.bookmark'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.edit'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.delete'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.mark_muted'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.mark_regular'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.mark_tracking'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.mark_watching'}}}</li>
-        <li>{{{i18n 'keyboard_shortcuts_help.actions.print'}}}</li>
+        <li>{{{shortcuts.actions.bookmark_topic}}}</li>
+        <li>{{{shortcuts.actions.pin_unpin_topic}}}</li>
+        <li>{{{shortcuts.actions.share_topic}}}</li>
+        <li>{{{shortcuts.actions.share_post}}}</li>
+        <li>{{{shortcuts.actions.like}}}</li>
+        <li>{{{shortcuts.actions.flag}}}</li>
+        <li>{{{shortcuts.actions.bookmark}}}</li>
+        <li>{{{shortcuts.actions.edit}}}</li>
+        <li>{{{shortcuts.actions.delete}}}</li>
+        <li>{{{shortcuts.actions.mark_muted}}}</li>
+        <li>{{{shortcuts.actions.mark_regular}}}</li>
+        <li>{{{shortcuts.actions.mark_tracking}}}</li>
+        <li>{{{shortcuts.actions.mark_watching}}}</li>
+        <li>{{{shortcuts.actions.print}}}</li>
       </ul>
     </div>
   </div>

app/assets/stylesheets/common/components/keyboard_shortcuts.scss

@@ -42,16 +42,14 @@
       margin: 5px 0;
     }
 
-    b {
-      padding: 2px 6px;
-      border-radius: 4px;
-      box-shadow: shadow("kbd");
-      background: dark-light-choose(#fafafa, #333);
-      border: 1px solid dark-light-choose(#ccc, #555);
-      border-bottom: medium none dark-light-choose(#fff, #000);
+    kbd {
+      font-size: $base-font-size;
+      font-family: $base-font-family;
+      margin: 0;
       color: dark-light-choose(#444, #aaa);
+      font-weight: bold;
+      padding: 2px 6px;
       white-space: nowrap;
-      display: inline-block;
     }
   }
 }

config/locales/client.en.yml

@@ -1467,6 +1467,7 @@ en:
       shift: "Shift"
       ctrl: "Ctrl"
       alt: "Alt"
+      enter: "Enter"
 
     conditional_loading_section:
       loading: Loading...
@@ -2792,62 +2793,67 @@ en:
       image_load_error: '<a href="%url%">The image</a> could not be loaded.'
 
     keyboard_shortcuts_help:
+      shortcut_key_delimiter_comma: ", "
+      shortcut_key_delimiter_plus: "+"
+      shortcut_delimiter_or: "%{shortcut1} or %{shortcut2}"
+      shortcut_delimiter_slash: "%{shortcut1}/%{shortcut2}"
+      shortcut_delimiter_space: "%{shortcut1} %{shortcut2}"
       title: "Keyboard Shortcuts"
       jump_to:
         title: "Jump To"
-        home: "<b>g</b>, <b>h</b> Home"
-        latest: "<b>g</b>, <b>l</b> Latest"
-        new: "<b>g</b>, <b>n</b> New"
-        unread: "<b>g</b>, <b>u</b> Unread"
-        categories: "<b>g</b>, <b>c</b> Categories"
-        top: "<b>g</b>, <b>t</b> Top"
-        bookmarks: "<b>g</b>, <b>b</b> Bookmarks"
-        profile: "<b>g</b>, <b>p</b> Profile"
-        messages: "<b>g</b>, <b>m</b> Messages"
-        drafts: "<b>g</b>, <b>d</b> Drafts"
+        home: "%{shortcut} Home"
+        latest: "%{shortcut} Latest"
+        new: "%{shortcut} New"
+        unread: "%{shortcut} Unread"
+        categories: "%{shortcut} Categories"
+        top: "%{shortcut} Top"
+        bookmarks: "%{shortcut} Bookmarks"
+        profile: "%{shortcut} Profile"
+        messages: "%{shortcut} Messages"
+        drafts: "%{shortcut} Drafts"
       navigation:
         title: "Navigation"
-        jump: "<b>#</b> Go to post #"
-        back: "<b>u</b> Back"
-        up_down: "<b>k</b>/<b>j</b> Move selection &uarr; &darr;"
-        open: "<b>o</b> or <b>Enter</b> Open selected topic"
-        next_prev: "<b>shift</b>+<b>j</b>/<b>shift</b>+<b>k</b> Next/previous section"
+        jump: "%{shortcut} Go to post #"
+        back: "%{shortcut} Back"
+        up_down: "%{shortcut} Move selection &uarr; &darr;"
+        open: "%{shortcut} Open selected topic"
+        next_prev: "%{shortcut} Next/previous section"
       application:
         title: "Application"
-        create: "<b>c</b> Create a new topic"
-        notifications: "<b>n</b> Open notifications"
-        hamburger_menu: "<b>=</b> Open hamburger menu"
-        user_profile_menu: "<b>p</b> Open user menu"
-        show_incoming_updated_topics: "<b>.</b> Show updated topics"
-        search: "<b>/</b> or <b>ctrl</b>+<b>alt</b>+<b>f</b> Search"
-        help: "<b>?</b> Open keyboard help"
-        dismiss_new_posts: "<b>x</b>, <b>r</b> Dismiss New/Posts"
-        dismiss_topics: "<b>x</b>, <b>t</b> Dismiss Topics"
-        log_out: "<b>shift</b>+<b>z</b> <b>shift</b>+<b>z</b> Log Out"
+        create: "%{shortcut} Create a new topic"
+        notifications: "%{shortcut} Open notifications"
+        hamburger_menu: "%{shortcut} Open hamburger menu"
+        user_profile_menu: "%{shortcut} Open user menu"
+        show_incoming_updated_topics: "%{shortcut} Show updated topics"
+        search: "%{shortcut} Search"
+        help: "%{shortcut} Open keyboard help"
+        dismiss_new_posts: "%{shortcut} Dismiss New/Posts"
+        dismiss_topics: "%{shortcut} Dismiss Topics"
+        log_out: "%{shortcut} Log Out"
       composing:
         title: "Composing"
-        return: "<b>shift</b>+<b>c</b> Return to composer"
-        fullscreen: "<b>shift</b>+<b>F11</b> Fullscreen composer"
+        return: "%{shortcut} Return to composer"
+        fullscreen: "%{shortcut} Fullscreen composer"
       actions:
         title: "Actions"
-        bookmark_topic: "<b>f</b> Toggle bookmark topic"
-        pin_unpin_topic: "<b>shift</b>+<b>p</b> Pin/Unpin topic"
-        share_topic: "<b>shift</b>+<b>s</b> Share topic"
-        share_post: "<b>s</b> Share post"
-        reply_as_new_topic: "<b>t</b> Reply as linked topic"
-        reply_topic: "<b>shift</b>+<b>r</b> Reply to topic"
-        reply_post: "<b>r</b> Reply to post"
-        quote_post: "<b>q</b> Quote post"
-        like: "<b>l</b> Like post"
-        flag: "<b>!</b> Flag post"
-        bookmark: "<b>b</b> Bookmark post"
-        edit: "<b>e</b> Edit post"
-        delete: "<b>d</b> Delete post"
-        mark_muted: "<b>m</b>, <b>m</b> Mute topic"
-        mark_regular: "<b>m</b>, <b>r</b> Regular (default) topic"
-        mark_tracking: "<b>m</b>, <b>t</b> Track topic"
-        mark_watching: "<b>m</b>, <b>w</b> Watch topic"
-        print: "<b>ctrl</b>+<b>p</b> Print topic"
+        bookmark_topic: "%{shortcut} Toggle bookmark topic"
+        pin_unpin_topic: "%{shortcut} Pin/Unpin topic"
+        share_topic: "%{shortcut} Share topic"
+        share_post: "%{shortcut} Share post"
+        reply_as_new_topic: "%{shortcut} Reply as linked topic"
+        reply_topic: "%{shortcut} Reply to topic"
+        reply_post: "%{shortcut} Reply to post"
+        quote_post: "%{shortcut} Quote post"
+        like: "%{shortcut} Like post"
+        flag: "%{shortcut} Flag post"
+        bookmark: "%{shortcut} Bookmark post"
+        edit: "%{shortcut} Edit post"
+        delete: "%{shortcut} Delete post"
+        mark_muted: "%{shortcut} Mute topic"
+        mark_regular: "%{shortcut} Regular (default) topic"
+        mark_tracking: "%{shortcut} Track topic"
+        mark_watching: "%{shortcut} Watch topic"
+        print: "%{shortcut} Print topic"
 
     badges:
       earned_n_times: