From fff0e0980d0ba08481b1fbfb83984d904549e7d4 Mon Sep 17 00:00:00 2001 From: Jarek Radosz Date: Mon, 9 Mar 2020 17:37:32 +0100 Subject: [PATCH] FEATURE: Improve keyboard shortcuts help modal (#9143) --- .../keyboard-shortcuts-help.js.es6 | 24 +++++----- .../modal/keyboard-shortcuts-help.hbs | 32 ++++++++----- .../stylesheets/common/base/topic-post.scss | 8 ++-- .../common/components/keyboard_shortcuts.scss | 47 ++++++++++++++----- 4 files changed, 71 insertions(+), 40 deletions(-) diff --git a/app/assets/javascripts/discourse/controllers/keyboard-shortcuts-help.js.es6 b/app/assets/javascripts/discourse/controllers/keyboard-shortcuts-help.js.es6 index 7b3fbdcb5de..1c2d8f42218 100644 --- a/app/assets/javascripts/discourse/controllers/keyboard-shortcuts-help.js.es6 +++ b/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 => `${k}`).join(keysDelimiter)); + .map(keys => keys.map(k => `${k}`).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"] }), diff --git a/app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs b/app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs index ffd6c2eb4f3..493a9e03a58 100644 --- a/app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs +++ b/app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs @@ -1,7 +1,7 @@ {{#d-modal-body id="keyboard-shortcuts-help"}} -
-
-

{{i18n 'keyboard_shortcuts_help.jump_to.title'}}

+
+
+

{{i18n "keyboard_shortcuts_help.jump_to.title"}}

  • {{{shortcuts.jump_to.home}}}
  • {{{shortcuts.jump_to.latest}}}
    • @@ -16,7 +16,9 @@ {{/if}}
  • {{{shortcuts.jump_to.drafts}}}
-

{{i18n 'keyboard_shortcuts_help.navigation.title'}}

+
+
+

{{i18n "keyboard_shortcuts_help.navigation.title"}}

  • {{{shortcuts.navigation.back}}}
  • {{{shortcuts.navigation.jump}}}
    • @@ -25,9 +27,11 @@
  • {{{shortcuts.navigation.next_prev}}}
  • {{{shortcuts.navigation.go_to_unread_post}}}
-
-
-

{{i18n 'keyboard_shortcuts_help.application.title'}}

+ +
+
+
+

{{i18n "keyboard_shortcuts_help.application.title"}}

  • {{{shortcuts.application.hamburger_menu}}}
  • {{{shortcuts.application.user_profile_menu}}}
    • @@ -38,7 +42,9 @@
  • {{{shortcuts.application.dismiss_topics}}}
  • {{{shortcuts.application.log_out}}}
-

{{i18n 'keyboard_shortcuts_help.composing.title'}}

+
+
+

{{i18n "keyboard_shortcuts_help.composing.title"}}

  • {{{shortcuts.composing.return}}}
  • {{{shortcuts.composing.fullscreen}}}
    • @@ -48,9 +54,11 @@
  • {{{shortcuts.actions.reply_post}}}
  • {{{shortcuts.actions.quote_post}}}
-
-
-

{{i18n 'keyboard_shortcuts_help.actions.title'}}

+ +
+
+
+

{{i18n "keyboard_shortcuts_help.actions.title"}}

  • {{{shortcuts.actions.bookmark_topic}}}
  • {{{shortcuts.actions.pin_unpin_topic}}}
    • @@ -69,6 +77,6 @@
  • {{{shortcuts.actions.print}}}
  • {{{shortcuts.actions.topic_admin_actions}}}
-
+
{{/d-modal-body}} diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 51df42d966f..36ca696ab27 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/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; diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss index 3d05620c036..c40eaefee96 100644 --- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss +++ b/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; } }