UX: More consistent shortcut labels for macOS (#14538)

app/assets/javascripts/discourse/app/components/composer-save-button.js

@@ -1,6 +1,10 @@
 import Button from "discourse/components/d-button";
+import I18n from "I18n";
+import { translateModKey } from "discourse/lib/utilities";
 
 export default Button.extend({
   classNameBindings: [":btn-primary", ":create", "disableSubmit:disabled"],
-  title: "composer.title",
+  translatedTitle: I18n.t("composer.title", {
+    modifier: translateModKey("Meta+"),
+  }),
 });

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -1,5 +1,9 @@
 import { ajax } from "discourse/lib/ajax";
-import { caretPosition, inCodeBlock } from "discourse/lib/utilities";
+import {
+  caretPosition,
+  inCodeBlock,
+  translateModKey,
+} from "discourse/lib/utilities";
 import discourseComputed, {
   observes,
   on,
@@ -191,24 +195,12 @@ class Toolbar {
     if (button.shortcut) {
       const mac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
       const mod = mac ? "Meta" : "Ctrl";
-      let shortcutTitle = `${mod}+${button.shortcut}`;
 
-      // Mac users are used to glyphs for shortcut keys
-      if (mac) {
-        shortcutTitle = shortcutTitle
-          .replace("Shift", "\u21E7")
-          .replace("Meta", "\u2318")
-          .replace("Alt", "\u2325")
-          .replace(/\+/g, "");
-      } else {
-        shortcutTitle = shortcutTitle
-          .replace("Shift", I18n.t("shortcut_modifier_key.shift"))
-          .replace("Ctrl", I18n.t("shortcut_modifier_key.ctrl"))
-          .replace("Alt", I18n.t("shortcut_modifier_key.alt"));
-      }
+      const shortcutTitle = `${translateModKey(mod + "+")}${translateModKey(
+        button.shortcut
+      )}`;
 
       createdButton.title = `${title} (${shortcutTitle})`;
-
       this.shortcuts[`${mod}+${button.shortcut}`.toLowerCase()] = createdButton;
     } else {
       createdButton.title = title;

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

@@ -1,11 +1,12 @@
 import Controller from "@ember/controller";
 import I18n from "I18n";
+import { translateModKey } from "discourse/lib/utilities";
 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 ALT = translateModKey("Alt");
 const CTRL = I18n.t("shortcut_modifier_key.ctrl");
 const ENTER = I18n.t("shortcut_modifier_key.enter");
 
@@ -210,7 +211,7 @@ export default Controller.extend(ModalFunctionality, {
           keys1: ["m", "w"],
         }),
         print: buildShortcut("actions.print", {
-          keys1: [CTRL, "p"],
+          keys1: [translateModKey("Meta"), "p"],
           keysDelimiter: PLUS,
         }),
         defer: buildShortcut("actions.defer", {

app/assets/javascripts/discourse/app/lib/utilities.js

@@ -1,5 +1,6 @@
 import getURL, { getURLWithCDN } from "discourse-common/lib/get-url";
 import Handlebars from "handlebars";
+import I18n from "I18n";
 import { deepMerge } from "discourse-common/lib/object";
 import { escape } from "pretty-text/sanitizer";
 import { helperContext } from "discourse-common/lib/helpers";
@@ -495,5 +496,24 @@ export function inCodeBlock(text, pos) {
   return lastOpenBlock !== -1 && pos >= end + lastOpenBlock;
 }
 
+export function translateModKey(string) {
+  const mac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+  // Mac users are used to glyphs for shortcut keys
+  if (mac) {
+    string = string
+      .replace("Shift", "\u21E7")
+      .replace("Meta", "\u2318")
+      .replace("Alt", "\u2325")
+      .replace(/\+/g, "");
+  } else {
+    string = string
+      .replace("Shift", I18n.t("shortcut_modifier_key.shift"))
+      .replace("Ctrl", I18n.t("shortcut_modifier_key.ctrl"))
+      .replace("Meta", I18n.t("shortcut_modifier_key.ctrl"))
+      .replace("Alt", I18n.t("shortcut_modifier_key.alt"));
+  }
+
+  return string;
+}
 // This prevents a mini racer crash
 export default {};

config/locales/client.en.yml

@@ -2137,7 +2137,7 @@ en:
       create_whisper: "Whisper"
       create_shared_draft: "Create Shared Draft"
       edit_shared_draft: "Edit Shared Draft"
-      title: "Or press Ctrl+Enter"
+      title: "Or press %{modifier}Enter"
 
       users_placeholder: "Add a user"
       title_placeholder: "What is this discussion about in one brief sentence?"