FEATURE: Improve keyboard shortcuts help modal (#9143)

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

@@ -14,23 +14,22 @@ 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));
+    .map(keys => keys.map(k => `<kbd>${k}</kbd>`).join(keysDelimiter))
+    .map(keys => (shortcutsDelimiter !== "space" ? wrapInSpan(keys) : keys));
+
+  const [shortcut1, shortcut2] = allKeys;
 
   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);
+    return shortcut1;
+  } else if (shortcutsDelimiter === "or") {
+    return I18n.t(`${KEY}.shortcut_delimiter_or`, { shortcut1, shortcut2 });
   } else if (shortcutsDelimiter === "slash") {
-    result = I18n.t(`${KEY}.shortcut_delimiter_slash`, context);
+    return I18n.t(`${KEY}.shortcut_delimiter_slash`, { shortcut1, shortcut2 });
   } else if (shortcutsDelimiter === "space") {
-    result = I18n.t(`${KEY}.shortcut_delimiter_space`, context);
+    return wrapInSpan(
+      I18n.t(`${KEY}.shortcut_delimiter_space`, { shortcut1, shortcut2 })
+    );
   }
-
-  return wrapInSpan(result);
 }
 
 function wrapInSpan(shortcut) {
@@ -51,6 +50,7 @@ export default Controller.extend(ModalFunctionality, {
   onShow() {
     this.set("modal.modalClass", "keyboard-shortcuts-modal");
   },
+
   shortcuts: {
     jump_to: {
       home: buildShortcut("jump_to.home", { keys1: ["g", "h"] }),

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

@@ -1,7 +1,7 @@
 {{#d-modal-body id="keyboard-shortcuts-help"}}
-  <div class="row">
-    <div>
-      <h4>{{i18n 'keyboard_shortcuts_help.jump_to.title'}}</h4>
+  <div class="column">
+    <section>
+      <h4>{{i18n "keyboard_shortcuts_help.jump_to.title"}}</h4>
       <ul>
         <li>{{{shortcuts.jump_to.home}}}</li>
         <li>{{{shortcuts.jump_to.latest}}}</li>
@@ -16,7 +16,9 @@
         {{/if}}
         <li>{{{shortcuts.jump_to.drafts}}}</li>
       </ul>
-      <h4>{{i18n 'keyboard_shortcuts_help.navigation.title'}}</h4>
+    </section>
+    <section>
+      <h4>{{i18n "keyboard_shortcuts_help.navigation.title"}}</h4>
       <ul>
         <li>{{{shortcuts.navigation.back}}}</li>
         <li>{{{shortcuts.navigation.jump}}}</li>
@@ -25,9 +27,11 @@
         <li>{{{shortcuts.navigation.next_prev}}}</li>
         <li>{{{shortcuts.navigation.go_to_unread_post}}}</li>
       </ul>
-    </div>
-    <div>
-      <h4>{{i18n 'keyboard_shortcuts_help.application.title'}}</h4>
+    </section>
+  </div>
+  <div class="column">
+    <section>
+      <h4>{{i18n "keyboard_shortcuts_help.application.title"}}</h4>
       <ul>
         <li>{{{shortcuts.application.hamburger_menu}}}</li>
         <li>{{{shortcuts.application.user_profile_menu}}}</li>
@@ -38,7 +42,9 @@
         <li>{{{shortcuts.application.dismiss_topics}}}</li>
         <li>{{{shortcuts.application.log_out}}}</li>
       </ul>
-      <h4>{{i18n 'keyboard_shortcuts_help.composing.title'}}</h4>
+    </section>
+    <section>
+      <h4>{{i18n "keyboard_shortcuts_help.composing.title"}}</h4>
       <ul>
         <li>{{{shortcuts.composing.return}}}</li>
         <li>{{{shortcuts.composing.fullscreen}}}</li>
@@ -48,9 +54,11 @@
         <li>{{{shortcuts.actions.reply_post}}}</li>
         <li>{{{shortcuts.actions.quote_post}}}</li>
       </ul>
-    </div>
-    <div>
-      <h4>{{i18n 'keyboard_shortcuts_help.actions.title'}}</h4>
+    </section>
+  </div>
+  <div class="column">
+    <section>
+      <h4>{{i18n "keyboard_shortcuts_help.actions.title"}}</h4>
       <ul>
         <li>{{{shortcuts.actions.bookmark_topic}}}</li>
         <li>{{{shortcuts.actions.pin_unpin_topic}}}</li>
@@ -69,6 +77,6 @@
         <li>{{{shortcuts.actions.print}}}</li>
         <li>{{{shortcuts.actions.topic_admin_actions}}}</li>
       </ul>
-    </div>
+    </section>
   </div>
 {{/d-modal-body}}

app/assets/stylesheets/common/base/topic-post.scss

@@ -597,13 +597,11 @@ pre {
 }
 
 kbd {
-  background-color: $secondary;
-  border: 1px solid $primary-low;
   border-radius: 3px;
   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);
+  background: dark-light-choose(#fafafa, #303030);
+  border: 1px solid dark-light-choose(#d0d0d0, #505050);
+  border-bottom: none;
 
   color: $primary;
   display: inline-block;

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

@@ -26,29 +26,54 @@
   max-height: 560px;
 }
 
+.keyboard-shortcuts-modal .modal-inner-container {
+  max-width: 880px;
+}
+
 #keyboard-shortcuts-help {
-  div.row {
-    width: 100%;
-    div {
-      float: left;
-      width: 32%;
-    }
+  display: flex;
+
+  .column {
+    width: 33.3%;
   }
+
   ul {
     list-style: none;
+    margin-bottom: 2rem;
     margin-left: 0;
 
     li {
-      margin: 5px 0;
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 6px;
+    }
+
+    span {
+      background: #f2f2f2;
+      border-radius: 3px;
+      display: inline-flex;
+      margin: 0 6px;
+      padding: 1px 0 5px;
+    }
+
+    span:first-child {
+      margin-left: 0;
     }
 
     kbd {
-      font-size: $base-font-size;
+      align-items: center;
+      box-sizing: border-box;
+      color: dark-light-choose(#333, #aaa);
+      display: inline-flex;
       font-family: $base-font-family;
-      margin: 0;
-      color: dark-light-choose(#444, #aaa);
       font-weight: bold;
-      padding: 2px 6px;
+      height: 24px;
+      justify-content: center;
+      margin: 0 3px;
+      min-width: 24px;
+      padding: 0 6px;
+      vertical-align: bottom;
       white-space: nowrap;
     }
   }