From e6349685d3d717f70fb1bef728cfc79da183e58b Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 3 Aug 2020 10:01:04 -0400
Subject: [PATCH] UX: Uniform focus styles for composer inputs/textarea
 (#10296)

Uses a thin border as indicator that element is in focus for all editable items in the composer (inputs, select kit, textarea).

 Disables a default iOS style that has a blinking background color on inputs/textareas
---
 .../javascripts/discourse/app/components/d-editor.js  | 11 +++++++++--
 .../discourse/app/templates/components/d-editor.hbs   |  6 ++++--
 app/assets/stylesheets/common/base/compose.scss       |  3 +++
 app/assets/stylesheets/common/d-editor.scss           |  4 ++++
 .../stylesheets/common/select-kit/single-select.scss  |  2 +-
 app/assets/stylesheets/mobile/discourse.scss          |  5 +++++
 6 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index b476ca308ad..a6453fa0584 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/app/assets/javascripts/discourse/app/components/d-editor.js
@@ -231,6 +231,7 @@ export default Component.extend({
   showLink: true,
   emojiPickerIsActive: false,
   emojiStore: service("emoji-store"),
+  isEditorFocused: false,
 
   @discourseComputed("placeholder")
   placeholderTranslated(placeholder) {
@@ -456,7 +457,6 @@ export default Component.extend({
         } else {
           $editorInput.autocomplete({ cancel: true });
           this.setProperties({
-            isEditorFocused: $("textarea.d-editor-input").is(":focus"),
             emojiPickerIsActive: true
           });
 
@@ -944,7 +944,6 @@ export default Component.extend({
         return;
       }
 
-      this.set("isEditorFocused", $("textarea.d-editor-input").is(":focus"));
       this.set("emojiPickerIsActive", !this.emojiPickerIsActive);
     },
 
@@ -1055,6 +1054,14 @@ export default Component.extend({
           );
         }
       }
+    },
+
+    focusIn() {
+      this.set("isEditorFocused", true);
+    },
+
+    focusOut() {
+      this.set("isEditorFocused", false);
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
index 5528aeb6698..7b23ed1d9e0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
@@ -1,5 +1,5 @@
 <div class="d-editor-container">
-  <div class="d-editor-textarea-wrapper {{if disabled "disabled"}}">
+  <div class="d-editor-textarea-wrapper {{if disabled "disabled"}} {{if isEditorFocused "in-focus"}}">
     <div class="d-editor-button-bar">
       {{#each toolbar.groups as |group|}}
         {{#each group.buttons as |b|}}
@@ -41,7 +41,9 @@
       placeholder=placeholderTranslated
       aria-label=placeholderTranslated
       disabled=disabled
-      input=change}}
+      input=change
+      focusIn=(action "focusIn")
+      focusOut=(action "focusOut")}}
     {{popup-input-tip validation=validation}}
     {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
   </div>
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index d6efd3e306d..eb498ab348c 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -256,6 +256,9 @@
   #reply-title {
     margin: 0 0 5px 0;
     flex-basis: 50%;
+    &:focus {
+      box-shadow: none;
+    }
   }
 
   .mini-tag-chooser {
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 8831504f03e..f04e2613f93 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -26,6 +26,10 @@
     background: transparent;
   }
 
+  &.in-focus {
+    border-color: $tertiary;
+  }
+
   &.disabled {
     cursor: not-allowed;
     .d-editor-button-bar {
diff --git a/app/assets/stylesheets/common/select-kit/single-select.scss b/app/assets/stylesheets/common/select-kit/single-select.scss
index f77def218ce..fa77aaa13f2 100644
--- a/app/assets/stylesheets/common/select-kit/single-select.scss
+++ b/app/assets/stylesheets/common/select-kit/single-select.scss
@@ -11,7 +11,7 @@
 
   &.is-expanded {
     .select-kit-header {
-      outline: 1px solid $tertiary;
+      border: 1px solid $tertiary;
     }
   }
 }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index c9406abca6b..feefdb59c1d 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -13,6 +13,7 @@ body {
   textarea {
     background-color: $secondary;
     font-size: $font-size-ios-input;
+    -webkit-tap-highlight-color: transparent;
   }
 
   input {
@@ -33,6 +34,10 @@ body {
       font-size: $font-size-ios-input;
     }
   }
+
+  input#reply-title {
+    -webkit-tap-highlight-color: transparent;
+  }
 }
 
 blockquote {