From a4dd4fd7e831c111b7facf8db99fabd013bc1137 Mon Sep 17 00:00:00 2001
From: noi5e <will.gutierrez@gmail.com>
Date: Tue, 26 Jan 2021 16:45:23 -0800
Subject: [PATCH] Style Fixes for _comment.html.erb Partial (#9079)

* add unique ID to edit comment form wrapper

* style fixes

* update test selector
---
 app/views/comments/_edit.html.erb | 65 +++++++++++++++++--------------
 app/views/notes/_comment.html.erb | 36 ++++++++++-------
 test/system/comment_test.rb       |  2 +-
 3 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
index 37e5624ccd..c12329829c 100644
--- a/app/views/comments/_edit.html.erb
+++ b/app/views/comments/_edit.html.erb
@@ -1,23 +1,21 @@
-<div class="card card-body bg-light comment-form-wrapper">
-  <form method="post" id="comment-form-edit-<%= comment.id %>" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>>
 
+<div id="edit-comment-form-wrapper-<%= comment.id %>" class="card card-body bg-light comment-form-wrapper" style="display: none;">
+  <form method="post" id="comment-form-edit-<%= comment.id %>" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>>
     <h4 style="margin-top:0;"><%= title %></h4>
     <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
 
     <style>
       #imagebar {width:100%;}
     </style>
-
-  <!-- toolbar needs location & comment_id to make unique element IDs -->
-  <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
-  
-  <div id="c<%= comment.id%>div" class="form-group dropzone">
-    <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="text-input-edit-<%= comment.id%>" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
-    <div class="imagebar">
-      <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
-        <div id="c<%= comment.id%>progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
-      </div>
-      <p>
+    <!-- toolbar needs location & comment_id to make unique element IDs -->
+    <%= render :partial => "editor/toolbar", :locals => { :comment_id => comment.id.to_s, :location => :edit } %>
+    <div id="c<%= comment.id%>div" class="form-group dropzone">
+      <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="text-input-edit-<%= comment.id%>" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
+      <div class="imagebar">
+        <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
+          <div id="c<%= comment.id%>progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
+        </div>
+        <p>
         <span id="c<%= comment.id%>uploading" class="uploading uploading-text" style="display:none;">
           <%= translation('comments._edit.uploading') %>
         </span>
@@ -25,25 +23,28 @@
           <span style="padding-right:4px;float:left;" class="hidden-xs">
             <%= raw translation('comments._edit.drag_and_drop') %>
           </span>
-          <label id="c<%= comment.id%>input_label" for="c<%= comment.id%>input">
-            <input id="c<%= comment.id%>input" type="file" name="image[photo]" style="display:none;" />
-            <a class="hidden-xs"><%= translation('comments._edit.choose_one') %></a>
-            <span class="visible-xs">
-              <i class="fa fa-upload"></i>
-              <a><%= translation('comments._edit.upload_image') %></a>
+          <span id="c<%= comment.id%>prompt" class="prompt choose-one-prompt-text">
+            <span style="padding-right:4px;float:left;" class="hidden-xs">
+              <%= raw translation('comments._edit.drag_and_drop') %>
             </span>
-          </label>
-        </span>
-      </p>
+            <label id="c<%= comment.id%>input_label" for="c<%= comment.id%>input">
+              <input id="c<%= comment.id%>input" type="file" name="image[photo]" style="display:none;" />
+              <a class="hidden-xs"><%= translation('comments._edit.choose_one') %></a>
+              <span class="visible-xs">
+                <i class="fa fa-upload"></i>
+                <a><%= translation('comments._edit.upload_image') %></a>
+              </span>
+            </label>
+          </span>
+        </p>
+      </div>
     </div>
-  </div>
   <script type="application/javascript">
 //   function setInit(id) {
 //     const textArea = 'c'+id+'text';
 //     const preview = 'c'+id+'preview';
 //     $E.setState(textArea, preview);
 //   }
-
 //   $('#c<%= comment.id%>div').on('dragover',function(e) {
 //     e.preventDefault();
 //     $('#c<%= comment.id%>div').addClass('hover');
@@ -114,7 +115,6 @@
 
   <div class="comment-preview well col-md-11" id="comment-preview-edit-<%= comment.id %>" style="background: white; display: none">
   </div>
-
   <div class="control-group">
     <button type="submit" class="btn btn-primary"><%= translation('comments._edit.publish') %></button>
       <a 
@@ -130,10 +130,17 @@
       >
         Preview
       </a>
-      <a class="btn btn-default" onClick="$('#c<%= comment.id %>show').toggle();$('#comment-form-edit-<%= comment.id %>').toggle()">
-        Cancel
-      </a>
-
+    <a 
+      class="btn btn-default" 
+      onClick="
+        $('#edit-comment-form-wrapper-<%= comment.id %>').toggle();
+        $('#c<%= comment.id %>show').toggle();
+        $('#<%= comment.id %>-like-emojis').toggle();
+        $('#comment-form-edit-<%= comment.id %>').toggle()
+      "
+    >
+      Cancel
+    </a>
     <span class="form-grey"> &nbsp;
       <br class="visible-xs" /><%= raw translation('comments._edit.logged_in', :username => current_user.username) %> |
       <a target="_blank" href="/wiki/authoring-help#Formatting"><%= translation('comments._edit.formatting') %></a> |
diff --git a/app/views/notes/_comment.html.erb b/app/views/notes/_comment.html.erb
index dcb9698ae6..4676c77307 100644
--- a/app/views/notes/_comment.html.erb
+++ b/app/views/notes/_comment.html.erb
@@ -1,4 +1,4 @@
-<div id="c<%= comment.cid %>" class="comment" style="margin-top: 20px;padding-bottom: 9px; word-wrap: break-word">
+<div id="c<%= comment.cid %>" class="comment" style="margin-top: 20px; margin-bottom: 20px; padding-bottom: 9px; word-wrap: break-word;">
 
   <div style="margin-bottom: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;" class="navbar navbar-light bg-light">
     <% if comment.status == 4 %>
@@ -53,12 +53,21 @@
         <i data-toggle="tooltip" title="This comment was posted by email." class="fa fa-envelope"></i>
       <% end %>
       <% if current_user && comment.uid == current_user.uid %>
-        <a aria-label="Edit comment" class="btn btn-outline-secondary btn-sm edit-comment-btn" href="javascript:void(0)" onClick="$('#comment-form-edit-<%= comment.cid %>').toggle();$('#c<%= comment.cid %>show').toggle();">
+        <a 
+          aria-label="Edit comment" 
+          class="btn btn-outline-secondary btn-sm edit-comment-btn" 
+          href="javascript:void(0)" onClick="
+            $('#edit-comment-form-wrapper-<%= comment.cid %>').toggle();
+            $('#<%= comment.cid %>-like-emojis').toggle();                               
+            $('#comment-form-edit-<%= comment.cid %>').toggle();
+            $('#c<%= comment.cid %>show').toggle();
+          "
+        >
           <i class="fa fa-pencil"></i>
         </a>
       <% end %>
       <% if current_user &. can_moderate? %>
-        <a aria-label="Mark as spam" rel="tooltip" title="Mark as spam: comment will disappear and user will be banned" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
+        <a aria-label="Mark Spam" rel="tooltip" title="Mark Spam: Remove Comment and Ban User" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
           <i class="fa fa-ban"></i>
         </a>
       <% else %>
@@ -67,17 +76,16 @@
         </a>
       <% end %>
       <% if logged_in_as(['admin', 'moderator']) || (current_user && (comment.uid == current_user.uid || comment.parent.uid == current_user.uid)) %>
-        <a aria-label="Delete comment" rel="tooltip" title="Delete comment" class="btn btn-outline-secondary btn-sm" id="c<%= comment.cid %>delete-btn">
+        <a aria-label="Delete Comment" rel="tooltip" title="Delete Comment" class="btn btn-outline-secondary btn-sm" id="c<%= comment.cid %>delete-btn">
           <i class='icon fa fa-trash'></i>
         </a>
       <% end %>
       <% if current_user %>
-        <button style="border: 1px solid;padding: 4px 6px;" class="btn btn-outline-secondary dropdown" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <i class='icon fa fa-smile-o'></i>
-          <sup style="font-size: 12px;">+</sup>
-        </button>    
+        <a aria-label="Leave an Emoji Reaction" rel="tooltip" title="Leave an Emoji Reaction" class="btn btn-outline-secondary btn-sm dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <i class='far fa-heart'></i>
+        </a>
         <div id="emoji-dropdown" style="background:#f8f8f8;padding:0;" class=" dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-          <p id="emoji-title" style="text-align: center;color: #586069; font-size:14px;margin:6px;">Pick your reaction</p>
+          <p id="emoji-title" style="text-align: center;color: #586069; font-size:14px;margin:6px;">Pick Your Reaction</p>
           <div id= "dropdown-divider" style="display: block;height: 0;border-top: 1px solid #e1e4e8;">
           </div>         
           <div id="emoji-list" class="emoji-container">              
@@ -157,7 +165,7 @@
         <%= render :partial => "notes/comment", :locals => {:comment => replied_comment} %>
       <% end %>
 
-      <p style="color: #006dcc;cursor: pointer;margin-top: 20px;" id="comment-<%= comment.cid %>-reply-toggle">Reply to this comment...</p>
+      <p style="color: #006dcc; cursor: pointer; user-select: none;" id="comment-<%= comment.cid %>-reply-toggle">Reply to this comment...</p>
       <div id="comment-<%= comment.cid %>-reply" style="margin-top: 30px;display: none;">
         <div id="comment-<%= comment.cid %>-reply-section">
           <% if current_user %>
@@ -182,9 +190,9 @@
 
   </div>
   <% str = "#{comment.id}-like-emojis" %>
-  <div id="<%= str %>" class="navbar-text float-right" style="margin: 0;width: 100%;display: flex;border: 1px solid #e7e7e7;border-top: 0;">
-    <% emoji_names, emoji_image_map = emoji_info %>
-    <% user_reactions_map = comment.user_reactions_map %>
+  <% emoji_names, emoji_image_map = emoji_info %>
+  <% user_reactions_map = comment.user_reactions_map %>
+  <div id="<%= str %>" class="float-right comment-reactions-container" style="margin: 0; width: 100%; display: flex; border: 1px solid #e7e7e7; border-top: 0;">
     <% emoji_names.each do |e| %>
       <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
       <% str = "#{comment.id}-emoji-button-#{e}" %>
@@ -192,7 +200,7 @@
       <% display = user_reactions_exist ? "display: flex;" : "display: none;" %>
       <% title = user_reactions_exist ? user_reactions_map[capitalized_emoji_name][:users_string] : "" %>
       <% likes_num = user_reactions_exist ? user_reactions_map[capitalized_emoji_name][:likes_num] : "" %>
-      <button aria-label="Reaction" id="<%= str %>" style="border: 0;background: #f1f8ff;border-radius: 0;border-right: 1px solid #e7e7e7;<%= display %>" type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="<%= title %>">
+      <button aria-label="Reaction" id="<%= str %>" style="border: 0; border-radius: 0px; background: #f1f8ff; border-right: 1px solid #e7e7e7; padding-top: 8px; padding-bottom: 8px; <%= display %>" type="button" class="btn btn-sm" data-toggle="tooltip" data-placement="bottom" title="<%= title %>">
         <img alt="<%= str %>" height="20" width="20" src="<%= emoji_image_map[e] %>">
         <div style="margin-left: 6px;font-size: 14px;"><%= likes_num %></div>
       </button>
diff --git a/test/system/comment_test.rb b/test/system/comment_test.rb
index 56623e46dc..1f1f37c35e 100644
--- a/test/system/comment_test.rb
+++ b/test/system/comment_test.rb
@@ -150,7 +150,7 @@ def get_path(page_type, path)
         .click
       page.find(".noty_body", text: "Comment Added!")
       # Delete a comment
-      find('.btn[data-original-title="Delete comment"]', match: :first).click()
+      find('.btn[data-original-title="Delete Comment"]', match: :first).click()
       # Click "confirm" on modal
       page.evaluate_script('document.querySelector(".jconfirm-buttons .btn:first-of-type").click()')
       assert_selector('#comments-list .comment', count: 1)