_comment.html.erb

<div id="c<%= comment.cid %>" class="comment" style="margin-top: 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 %>
      <p class="alert alert-warning moderated">
        <% if logged_in_as(['admin','moderator']) %>
          <%= translation('dashboard._comment_moderate.first_time_post') %>
          <a class="btn btn-outline-secondary btn-sm" href="/admin/publish_comment/<%= comment.id %>"><%= translation('dashboard.moderate.approve') %></a>
          <a class="btn btn-outline-sedondary btn-sm" href="/admin/mark_comment_spam/<%= comment.id %>"><%= translation('dashboard.moderate.spam') %></a>
        <% else %>
          <%= raw translation('dashboard.moderate.pending_approval', :url => '/wiki/moderation') %>
        <% end %>
      </p>
    <% end %>

    <div class="navbar-text float-left d-md-none">&nbsp;&nbsp;</div>

    <div class="navbar-text float-left">
      <% if comment.author %>
        <% if comment.author && comment.author.photo_file_name %>
          <img alt="Comment Author Profile Picture" style="width:32px;margin-right:6px;" class="rounded-circle" src="<%= comment.author.photo_path(:thumb) %>" />
        <% else %>
          <div style="vertical-align:middle;display:inline-block;height:32px;width:32px;margin-right:6px;background:#ccc;" class="rounded-circle"></div>
        <% end %>
        <% if comment.author.name != "" %>
          <a href="/profile/<%= comment.author.name %>"><%= comment.author.name %></a>
        <% else %>
          <%= comment.name %>
        <% end %>
      <% end %>
      <span class="d-none d-md-inline"><%= translation('notes._comment.commented') %></span>
      <a style="color:#aaa;" href="#c<%= comment.cid %>"><%= distance_of_time_in_words(comment.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></a>
      <% if comment.author %>
        <% streak = comment.author.streak %>
        <% if streak[0] > 7 %>
          <a href="/wiki/streaks"><i class="fa fa-fire" style="padding-left:4px; font-size:16px; color:#f63;" data-toggle="tooltip" data-placement="top" title="<%= raw translation('notes._comment.streak_title', :author => comment.author.name, :streak_notes => streak[1][0], :streak_wiki => streak[1][1], :streak_comments => streak[1][2], :streak_days => streak[0]) %>"></i></a>
        <% end %>
      <% end %>
    </div>

    <div class="navbar-text float-right" style="padding-right:10px;margin-right: 0;">
      <% if comment.author && comment.author && comment.author.role %>
      <!-- Role icon for admins & moderators
        <% if comment.author.role == 'admin' %>
          <a href="/users/role/admin"><i class="fa fa-cog" style="font-size:20px; margin-top:8px;" data-toggle="tooltip" data-placement="top" title="Admin"></i></a>
        <% elsif comment.author && comment.author.role == 'moderator' %>
          <a href="/wiki/moderators"><i class="fa fa-star" style="font-size:20px; margin-top:8px;" data-toggle="tooltip" data-placement="top" title="Moderator"></i></a>
        <% end %>
      -->
      <% end %>

      <% if comment.comment_via == 1 %>
        <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" id="edit-comment-btn" href="javascript:void(0)" onClick="$('#c<%= comment.cid %>edit').toggle();$('#c<%= comment.cid %>show').toggle();setInit(<%= comment.cid %>);">
          <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" 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 %>
        <a aria-label="Flag as spam" rel="tooltip" title="Flag as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="mailto:moderators@publiclab.org?subject=Reporting%20spam%20on%20Public%20Lab&body=Hi,%20I%20found%20this%20comment%20that%20looks%20like%20spam%20or%20needs%20to%20be%20moderated:%20https://publiclab.org/<%= comment.parent.path %>#c<%= comment.cid %>%20by%20https://publiclab.org/profile/<% if comment.author %><%= comment.author.name %><% end %>%20Thanks!">
          <i class="fa fa-flag"></i>
        </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">
          <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>
            <div id="emoji-dropdown" style="background: #f8f8f8;" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
              <% emoji_names, emoji_image_map = emoji_info %>
              <% emoji_names.each do |e| %>
              <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
              <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>
              <%= link_to str, data: { method: "post", remote: true }, style: "padding: 0;" do %>
                <img alt="React to post" class="emoji" height="20" width="20" src="<%= emoji_image_map[e] %>">
              <% end %>
              <% end %>
        <% end %>
      </div>
    </div>

  </div>

  <script>

    $("#c<%= comment.cid %>delete-btn").click(function () {
      $.confirm({
        title: 'Confirm!',
        theme: 'Supervan',
        content: 'Are you sure?',
        buttons: {

          confirm: function () {
            $.ajax({
              url : "/comment/delete/<%= comment.cid %>",
              type: 'GET',
              success: function(response){
                notyNotification('sunset', 3000, 'error', 'topRight', 'Comment deleted');
                $("#c<%= comment.cid %>").remove()
                $('#comment-count')[0].innerHTML = parseInt($('#comment-count')[0].innerHTML)-1;
              }
            });
          },

          cancel: function () {
              notyNotification('sunset', 3000, 'info', 'topRight', 'Comment deletion cancelled!');
          },
        }
      });
    });

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>

  <div style="border: 1px solid #e7e7e7;padding: 18px;" id="c<%= comment.cid %>show">

    <% comment_body = comment.render_body %>
    <div class="comment-body" id="comment-body-<%= comment.cid %>">
      <%= raw insert_extras(filtered_comment_body(comment_body)) %>
    </div>

    <% if contain_trimmed_body?(comment_body) %>
      <span style="background-color: #DCDCDC;  border-radius: 7px; cursor: pointer;" ><a class="email-toggle" data-toggle="collapse" data-target="#comment-<%= comment.cid %>-extra-content" style='text-decoration: none;'>&nbsp;&ensp;&#x2022&#x2022&#x2022&nbsp;&ensp;</a></span>
      <div class="collapse" id="comment-<%= comment.cid %>-extra-content" ><div class="blockquotestyle"><%= raw trimmed_body(comment_body) %></div></div>
    <% end %>

    <% if comment.body.include?('?') %>
      <p class="alert alert-info">Is this a question? <a href="/questions/new?title=<%= comment.body %>">Click here</a> to post it to the <a href="/questions">Questions page</a>.
      </p>
    <% end %>
    <% breakoutQuestions = Tag.find_nodes_by_type("from:#{comment.cid}") %>
    <% if breakoutQuestions&.length > 0 %>
      See <a href="/questions/tag/from:<%= comment.cid %>"><%= breakoutQuestions.length %> questions</a> broken out from this comment.
    <% end %>
    <% if comment.parent.has_power_tag('activity') && current_user && current_user.id == comment.uid %>
      <div class="alert alert-info">Have you attempted or completed this activity? Consider <a href="/post?n=15798&tags=replication:<%= comment.nid %>,<%= comment.parent.tagnames.join(',') %>">sharing how it went</a> to help refine and improve it.</div>
    <% end %>


    <% if comment.reply_to.nil? %>
      <% comment.replied_comments.order("timestamp ASC").each do |replied_comment| %>
        <%= 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>
      <div id="comment-<%= comment.cid %>-reply" style="margin-top: 30px;display: none;">
        <div id="comment-<%= comment.cid %>-reply-section">
          <% if current_user %>
            <div class="inline" id="question-comment-form">
              <%= render :partial => "comments/form", :locals => { title: "Reply to this comment", reply_to: comment.cid, comment: false, placeholder: "Help the author refine their post, or point them at other helpful information on the site. Mention users by @username to notify them of this thread by email", url1: '/conduct', author: current_user.title, is_new_contributor:current_user.is_new_contributor? } %>
            </div>
          <% else %>
            <p><%= link_to "Log in", "/login?return_to=#{request.path}" %> to comment</p>
          <% end %>
        </div>
      </div>
    <% end %>

  </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 %>
    <% emoji_like_map = comment.emoji_likes %>
    <% user_reactions_map = comment.user_reactions_map %>
    <% emoji_names.each do |e| %>
      <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
      <% str = "#{comment.id}-emoji-button-#{e}" %>
      <% display = (emoji_like_map.has_key? capitalized_emoji_name) ? "display: flex;" : "display: none;" %>
      <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="<%= user_reactions_map[capitalized_emoji_name] %>">
        <img alt="<%= str %>" height="20" width="20" src="<%= emoji_image_map[e] %>">
        <div style="margin-left: 6px;font-size: 14px;"><%= emoji_like_map[capitalized_emoji_name] %></div>
      </button>
    <% end %>
  </div>

  <% if current_user %>
    <% h = { title: I18n.t('notes._comment.edit_comment'), comment: comment, placeholder: I18n.t('notes._comment.edit_placeholder') } %>
    <% h[:is_answer] = true if local_assigns[:is_answer] %>
    <%=  render :partial => "comments/edit", :locals => h %>
  <% end %>
  <br />

</div>

<script>
  $("#comment-<%= comment.cid %>-reply-toggle").click(function () {
    $("#comment-<%= comment.cid %>-reply").toggle();
  });
</script>

<style>
  .open>#emoji-dropdown.dropdown-menu {
    display: flex;
    justify-content: space-around;
    padding: 6px;
  }

  #emoji-dropdown .dropdown-menu {
    min-width: 196px;
  }

  .grow {
    transition: all .1s ease-in-out;
  }

  .grow:hover {
    transform: scale(1.2);
  }

  .grow:active {
    transform: scale(1);
  }
</style>