From 0b5924d61e9712706ca5b011b7567fb6d1e48126 Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Tue, 21 May 2019 06:39:32 +0300 Subject: [PATCH] Refactor keyboard shortcuts modal to fix RTL locales (#7545) * Refactor keyboard shortcuts modal to fix RTL locales * Feedback * Remove lowercase modifier keys --- .../keyboard-shortcuts-help.js.es6 | 157 ++++++++++++++++++ .../modal/keyboard-shortcuts-help.hbs | 88 +++++----- .../common/components/keyboard_shortcuts.scss | 14 +- config/locales/client.en.yml | 96 ++++++----- 4 files changed, 258 insertions(+), 97 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 c21cb661ad7..4e5c4846e05 100644 --- a/app/assets/javascripts/discourse/controllers/keyboard-shortcuts-help.js.es6 +++ b/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 => `${k}`).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 `${shortcut}`; +} + +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 + }) + } } }); 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 58b432b06ad..37277640ffa 100644 --- a/app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs +++ b/app/assets/javascripts/discourse/templates/modal/keyboard-shortcuts-help.hbs @@ -3,68 +3,68 @@

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

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

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

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

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

diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss index 522b34b30b3..3d05620c036 100644 --- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss +++ b/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; } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index a36ebbfd675..aa320dc43ff 100644 --- a/config/locales/client.en.yml +++ b/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: 'The image 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: "g, h Home" - latest: "g, l Latest" - new: "g, n New" - unread: "g, u Unread" - categories: "g, c Categories" - top: "g, t Top" - bookmarks: "g, b Bookmarks" - profile: "g, p Profile" - messages: "g, m Messages" - drafts: "g, d 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: "# Go to post #" - back: "u Back" - up_down: "k/j Move selection ↑ ↓" - open: "o or Enter Open selected topic" - next_prev: "shift+j/shift+k Next/previous section" + jump: "%{shortcut} Go to post #" + back: "%{shortcut} Back" + up_down: "%{shortcut} Move selection ↑ ↓" + open: "%{shortcut} Open selected topic" + next_prev: "%{shortcut} Next/previous section" application: title: "Application" - create: "c Create a new topic" - notifications: "n Open notifications" - hamburger_menu: "= Open hamburger menu" - user_profile_menu: "p Open user menu" - show_incoming_updated_topics: ". Show updated topics" - search: "/ or ctrl+alt+f Search" - help: "? Open keyboard help" - dismiss_new_posts: "x, r Dismiss New/Posts" - dismiss_topics: "x, t Dismiss Topics" - log_out: "shift+z shift+z 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: "shift+c Return to composer" - fullscreen: "shift+F11 Fullscreen composer" + return: "%{shortcut} Return to composer" + fullscreen: "%{shortcut} Fullscreen composer" actions: title: "Actions" - bookmark_topic: "f Toggle bookmark topic" - pin_unpin_topic: "shift+p Pin/Unpin topic" - share_topic: "shift+s Share topic" - share_post: "s Share post" - reply_as_new_topic: "t Reply as linked topic" - reply_topic: "shift+r Reply to topic" - reply_post: "r Reply to post" - quote_post: "q Quote post" - like: "l Like post" - flag: "! Flag post" - bookmark: "b Bookmark post" - edit: "e Edit post" - delete: "d Delete post" - mark_muted: "m, m Mute topic" - mark_regular: "m, r Regular (default) topic" - mark_tracking: "m, t Track topic" - mark_watching: "m, w Watch topic" - print: "ctrl+p 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: