UX: adds shortcuts for quote (q) and fast edit (e) (#14552)

discourse · Oct 7, 2021 · 2af6052 · 2af6052
1 parent a55642a
commit 2af6052
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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}"