From c599469e9de420336117133a9dcadb68f53679fb Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 22 Sep 2021 03:34:29 -0400
Subject: [PATCH] UX: Adjust quote button position on mobile (#14411)

---
 .../discourse/app/components/quote-button.js      | 15 ++++++++-------
 .../app/templates/components/quote-button.hbs     |  5 +++--
 .../stylesheets/common/base/topic-post.scss       |  9 +++++++--
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/quote-button.js b/app/assets/javascripts/discourse/app/components/quote-button.js
index fb943d9a7d9..09261a0f359 100644
--- a/app/assets/javascripts/discourse/app/components/quote-button.js
+++ b/app/assets/javascripts/discourse/app/components/quote-button.js
@@ -43,7 +43,7 @@ function regexSafeStr(str) {
 
 export default Component.extend({
   classNames: ["quote-button"],
-  classNameBindings: ["visible"],
+  classNameBindings: ["visible", "_displayFastEditInput:fast-editing"],
   visible: false,
   privateCategory: alias("topic.category.read_restricted"),
   editPost: null,
@@ -215,15 +215,11 @@ export default Component.extend({
 
       let top = markerOffset.top;
       let left = markerOffset.left + Math.max(0, parentScrollLeft);
-
       if (showAtEnd) {
-        const nearRightEdgeOfScreen =
-          $(window).width() - $quoteButton.outerWidth() < left + 10;
-
-        top = nearRightEdgeOfScreen ? top + 50 : top + 20;
+        top = top + 25;
         left = Math.min(
           left + 10,
-          $(window).width() - $quoteButton.outerWidth() - 10
+          window.innerWidth - this.element.clientWidth - 10
         );
       } else {
         top = top - $quoteButton.outerHeight() - 5;
@@ -346,6 +342,11 @@ export default Component.extend({
       this.toggleProperty("_displayFastEditInput");
 
       schedule("afterRender", () => {
+        if (this.site.mobileView) {
+          this.element.style.left = `${
+            (window.innerWidth - this.element.clientWidth) / 2
+          }px`;
+        }
         document.querySelector("#fast-edit-input")?.focus();
       });
     } else {
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 1ee21188103..9f424209bd1 100644
--- a/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/quote-button.hbs
@@ -52,8 +52,9 @@
         }}
         {{d-button
           action=(action "_saveFastEdit")
-          class="btn-default btn-primary save-fast-edit"
-          label="save"
+          class="btn-small btn-primary save-fast-edit"
+          icon="pencil-alt"
+          label="composer.save_edit"
           disabled=_saveFastEditDisabled
           isLoading=_isSavingFastEdit
         }}
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 96ef74e9e09..65fb9b1308e 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -384,6 +384,10 @@ aside.quote {
     display: flex;
   }
 
+  &.fast-editing {
+    opacity: 1;
+  }
+
   .buttons {
     display: flex;
   }
@@ -396,7 +400,8 @@ aside.quote {
 
   .fast-edit-container {
     display: flex;
-    padding: 0.25em;
+    padding: 0.5em;
+    padding-top: 0;
     flex-direction: column;
     align-items: flex-start;
 
@@ -407,7 +412,7 @@ aside.quote {
     }
 
     .save-fast-edit {
-      margin-top: 0.25em;
+      margin-top: 0.5em;
     }
   }