Implement cancel button comment edit (forem#331)

aalises · Nov 5, 2018 · 908e82c · 908e82c
1 parent ca63689
commit 908e82c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
@@ -291,6 +291,11 @@ a.header-link{
         appearance: none;
       }
 
+      .comment-action-cancel {
+        background: $red;
+        display:none;
+      }
+
       .comment-action-preview {
         background: $dark-gray;
         z-index: 10;

diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
@@ -48,6 +48,9 @@
     </div>
   <% end %>
   <div class="actions" id="submit-wrapper">
+    <a href="<%=commentable.path%>">
+        <button id="cancel-button" class="comment-action-button comment-action-cancel">CANCEL</button>
+    </a>
     <button id="preview-button" class="comment-action-button comment-action-preview">PREVIEW</button>
     <%= f.submit "SUBMIT", id: "submit-button", onclick:"validateField(event)", class:"comment-action-button" %>
   </div>
@@ -72,3 +75,10 @@
     }
   }
 </script>
+
+<script async>
+  var formElement = document.getElementById("edit_comment_<%= @comment.id if @comment %>");
+  if (formElement) {
+    formElement.getElementsByClassName("comment-action-cancel")[0].style.display = "inline-block";
+  }
+</script>