From 2010b3ad8f5c6349be8bb40261bcdeecf27a77a3 Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Mon, 13 May 2019 09:49:53 +0200
Subject: [PATCH] Fix step comments bugs (#1751)

---
 app/assets/javascripts/comments.js.erb | 18 ++++++++++++++++++
 app/assets/stylesheets/steps.scss      | 12 ++++--------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/comments.js.erb b/app/assets/javascripts/comments.js.erb
index 3972859ac..5533614ea 100644
--- a/app/assets/javascripts/comments.js.erb
+++ b/app/assets/javascripts/comments.js.erb
@@ -206,6 +206,24 @@ var Comments = (function() {
       $form.submit();
     });
 
+    $form.find('textarea').on('focus', function(){
+      $(this).addClass('border');
+      if (this.value.length > 0) {
+        $submitBtn.addClass('show');
+      }
+    }).on('blur',function(){
+      if (this.value.length == 0) {
+        $(this).removeClass('border');
+        $submitBtn.removeClass('show');
+      }
+    }).on('keyup',function(){
+      if (this.value.length > 0) {
+        $submitBtn.addClass('show');
+      } else {
+        $submitBtn.removeClass('show');
+      }
+    })
+
     $('.help-block', $form).addClass('hide');
 
     $form.off().on('ajax:send', function () {
diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index fd6e96303..bb3d3544a 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -297,7 +297,6 @@
         line-height: 16px;
         overflow: hidden;
         padding: 2px 5px;
-        pointer-events: none;
         width: 100%;
 
         &:focus {
@@ -307,6 +306,7 @@
         &:disabled {
           background: transparent;
           border: 1px solid transparent;
+          pointer-events: none;
           user-select: none;
         }
       }
@@ -448,7 +448,7 @@
       outline: none;
     }
 
-    &:hover {
+    &.border {
       border: 1px solid $color-silver;
     }
   }
@@ -462,8 +462,8 @@
     right: -36px;
     transition: $md-transaction;
 
-    &.has-error {
-      top: -64px;
+    &.show {
+      right: 0;
     }
   }
 
@@ -472,9 +472,5 @@
     textarea {
       border: 1px solid $color-silver;
     }
-
-    .new-comment-button {
-      right: 0;
-    }
   }
 }