From 2af6052307ab866e58c3fba0edf7040a2d8097f0 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 7 Oct 2021 17:22:28 +0200
Subject: [PATCH] UX: adds shortcuts for quote (q) and fast edit (e) (#14552)

---
 .../discourse/app/components/quote-button.js  | 20 +++++++++++++++++++
 .../app/templates/components/quote-button.hbs |  5 ++++-
 .../stylesheets/common/base/topic-post.scss   |  6 ++++++
 config/locales/client.en.yml                  |  2 ++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/quote-button.js b/app/assets/javascripts/discourse/app/components/quote-button.js
index a41198a7c6f..3bd9f17e0b1 100644
--- a/app/assets/javascripts/discourse/app/components/quote-button.js
+++ b/app/assets/javascripts/discourse/app/components/quote-button.js
@@ -232,6 +232,8 @@ export default Component.extend(KeyEnterEscape, {
       }
 
       $quoteButton.offset({ top, left });
+
+      this.element.querySelector("button")?.focus();
     });
   },
 
@@ -279,6 +281,24 @@ export default Component.extend(KeyEnterEscape, {
       });
   },
 
+  keyDown(event) {
+    this._super(...arguments);
+
+    if (!this.visible) {
+      return;
+    }
+
+    if (!this._displayFastEditInput && event.key === "e") {
+      this._toggleFastEditForm();
+      return false;
+    }
+
+    if (event.key === "q") {
+      this.insertQuote();
+      return false;
+    }
+  },
+
   willDestroyElement() {
     $(document)
       .off("mousedown.quote-button")
diff --git a/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs b/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
index 38d4d4da18a..d486a7790fd 100644
--- a/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
@@ -4,7 +4,9 @@
       class="btn-flat insert-quote"
       action=(action "insertQuote")
       icon="quote-left"
-      label="post.quote_reply"}}
+      label="post.quote_reply"
+      title="post.quote_reply_shortcut"
+    }}
   {{/if}}
 
   {{#if siteSettings.enable_fast_edit}}
@@ -14,6 +16,7 @@
         action=(action "_toggleFastEditForm")
         label="post.quote_edit"
         class="btn-flat quote-edit-label"
+        title="post.quote_edit_shortcut"
       }}
     {{/if}}
   {{/if}}
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 65fb9b1308e..6750449471b 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -423,6 +423,12 @@ aside.quote {
     color: var(--secondary-or-primary);
   }
 
+  .btn:focus:not(:hover),
+  .btn:focus:not(:hover) .d-icon {
+    color: var(--secondary);
+    background-color: var(--secondary-high);
+  }
+
   .insert-quote + .quote-sharing {
     border-left: 1px solid rgba(255, 255, 255, 0.3);
   }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index c3f55f0352c..044263b90c5 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3016,7 +3016,9 @@ en:
 
     post:
       quote_reply: "Quote"
+      quote_reply_shortcut: "Or press q"
       quote_edit: "Edit"
+      quote_edit_shortcut: "Or press e"
       quote_share: "Share"
       edit_reason: "Reason: "
       post_number: "post %{number}"