From d3e83483c8079fa30e0a0c285073e4c85a90e3c5 Mon Sep 17 00:00:00 2001
From: Yashashvi Dave <yashashvidave@gmail.com>
Date: Mon, 10 Jun 2019 12:52:55 +0530
Subject: [PATCH] static/js/common: Add `Ctrl` key mapping to `Cmd` for MacOS.

---
 frontend_tests/node_tests/common.js                 | 13 +++++++++++++
 static/js/common.js                                 |  6 +++++-
 static/js/portico/help.js                           |  2 +-
 static/styles/portico/portico.scss                  |  5 +++++
 templates/zerver/help/logging-in.md                 |  2 +-
 .../zerver/help/switching-between-organizations.md  |  2 +-
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend_tests/node_tests/common.js b/frontend_tests/node_tests/common.js
index 60082d984e..fc27fc57ff 100644
--- a/frontend_tests/node_tests/common.js
+++ b/frontend_tests/node_tests/common.js
@@ -69,6 +69,9 @@ run_test('adjust_mac_shortcuts', () => {
         ['X + Shift', 'X + Shift'],
         ['⌘ + Return', '⌘ + Return'],
         ['Enter or Backspace', "Return or Delete"],
+        ['Ctrl', '⌘'],
+        ['Ctrl + Shift', '⌘ + Shift'],
+        ['Ctrl + Backspace + End', '⌘ + Delete + Fn + →'],
     ]);
     const keys_to_test_non_mac = new Map([
         ['Backspace', 'Backspace'],
@@ -79,6 +82,8 @@ run_test('adjust_mac_shortcuts', () => {
         ['PgDn', 'PgDn'],
         ['X + Shift', 'X + Shift'],
         ['⌘ + Return', '⌘ + Return'],
+        ['Ctrl + Shift', 'Ctrl + Shift'],
+        ['Ctrl + Backspace + End', 'Ctrl + Backspace + End'],
     ]);
 
     var key_no;
@@ -113,4 +118,12 @@ run_test('adjust_mac_shortcuts', () => {
     keys_elem_list.forEach(function (key_elem) {
         assert.equal(key_elem.text(), key_elem.expected_key());
     });
+
+    var markdown_hotkey_1 = get_key_stub_html("Ctrl + Backspace", "⌘ + Delete", "markdown_hotkey_1");
+    $(".markdown_content").each = (f) => {
+        f.call(markdown_hotkey_1);
+    };
+    common.adjust_mac_shortcuts(".markdown_content", true);
+    assert.equal(markdown_hotkey_1.text(), markdown_hotkey_1.expected_key());
+    assert.equal(markdown_hotkey_1.hasClass("mac-cmd-key"), true);
 });
diff --git a/static/js/common.js b/static/js/common.js
index dd4b0d4a75..7876f1e1c9 100644
--- a/static/js/common.js
+++ b/static/js/common.js
@@ -104,7 +104,7 @@ exports.has_mac_keyboard = function () {
     return /Mac/i.test(navigator.platform);
 };
 
-exports.adjust_mac_shortcuts = function (key_elem_class) {
+exports.adjust_mac_shortcuts = function (key_elem_class, require_cmd_style) {
     if (!exports.has_mac_keyboard()) {
         return;
     }
@@ -116,12 +116,16 @@ exports.adjust_mac_shortcuts = function (key_elem_class) {
         ['End', 'Fn + →'],
         ['PgUp', 'Fn + ↑'],
         ['PgDn', 'Fn + ↓'],
+        ['Ctrl', '⌘'],
     ]);
 
     $(key_elem_class).each(function () {
         var key_text = $(this).text();
         var keys = key_text.match(/[^\s\+]+/g);
 
+        if (key_text.indexOf('Ctrl') > -1 && require_cmd_style) {
+            $(this).addClass("mac-cmd-key");
+        }
         _.each(keys, function (key) {
             if (keys_map.get(key)) {
                 key_text = key_text.replace(key, keys_map.get(key));
diff --git a/static/js/portico/help.js b/static/js/portico/help.js
index c64559c99c..660f9748ae 100644
--- a/static/js/portico/help.js
+++ b/static/js/portico/help.js
@@ -46,7 +46,7 @@ function render_code_sections() {
 
     highlight_current_article();
 
-    common.adjust_mac_shortcuts(".markdown .content code");
+    common.adjust_mac_shortcuts(".markdown .content code", true);
 
     $("table").each(function () {
         $(this).addClass("table table-striped");
diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.scss
index c75906866a..1202751e8e 100644
--- a/static/styles/portico/portico.scss
+++ b/static/styles/portico/portico.scss
@@ -14,6 +14,11 @@ body {
     text-align: center;
 }
 
+.mac-cmd-key {
+    font-size: 15px;
+    font-family: monospace;
+}
+
 .container-fluid {
     padding: 0px;
     min-height: 100%;
diff --git a/templates/zerver/help/logging-in.md b/templates/zerver/help/logging-in.md
index 9c2f1b2375..7f724d6222 100644
--- a/templates/zerver/help/logging-in.md
+++ b/templates/zerver/help/logging-in.md
@@ -19,7 +19,7 @@ and GitHub account use the same email address.
 
 {tab|desktop}
 
-1. Open the **left sidebar** (`Ctrl+Shift+s` or `Cmd+Shift+s`).
+1. Open the **left sidebar** (`Ctrl+Shift+s`).
 
 1. Set your [proxy settings](/help/connect-through-a-proxy) or add a
    [custom certificate](/help/custom-certificates) if needed (rare).
diff --git a/templates/zerver/help/switching-between-organizations.md b/templates/zerver/help/switching-between-organizations.md
index 9b130913cd..bc89de8cd5 100644
--- a/templates/zerver/help/switching-between-organizations.md
+++ b/templates/zerver/help/switching-between-organizations.md
@@ -6,7 +6,7 @@ This article assumes you've [logged in](/help/logging-in) to each organization a
 
 {tab|desktop}
 
-1. Open the **left sidebar** (`Ctrl+Shift+s` or `Cmd+Shift+s`).
+1. Open the **left sidebar** (`Ctrl+Shift+s`).
 
 1. Click on your organization's profile picture.