87 lines
6.2 KiB
Text
87 lines
6.2 KiB
Text
<% cache "comment-box-#{@last_user_reaction}-#{@last_user_comment}-#{json_data['comment']['updated_at']}-#{json_data['comment']['id']}" do %>
|
|
<% if json_data["comment"]["commentable"] %>
|
|
<% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %>
|
|
<h3>
|
|
<a href="<%= json_data["comment"]["ancestors"].last["path"] %>" class="crayons-link notification__reply-title">
|
|
<span class="fw-normal opacity-50">Re: </span><%= json_data["comment"]["ancestors"].last["title"] %>
|
|
</a>
|
|
</h3>
|
|
<% end %>
|
|
<div class="crayons-card notification__preview relative">
|
|
<div class="text-styles text-styles--tertiary notification__preview__inner">
|
|
<%= json_data["comment"]["processed_html"].html_safe %>
|
|
</div>
|
|
|
|
<% if context == "moderation" && current_user.has_role?(:trusted) %>
|
|
<div class="crayons-card crayons-card--secondary crayons-card--elevated notification__mod-controls">
|
|
<button
|
|
class="crayons-btn crayons-btn--icon crayons-btn--icon-rounded crayons-btn--ghost inline-flex crayons-btn--s reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "thumbsdown") ? "reacted" : "" %>"
|
|
data-reactable-id="<%= json_data["comment"]["id"] %>"
|
|
data-category="thumbsdown"
|
|
data-reactable-type="Comment"
|
|
title="thumbsdown">
|
|
<%= image_tag("emoji/emoji-one-thumbs-down-gray.png", alt: "Thumbs down emoji", width: 24, height: 24, class: "reaction-icon not-reacted") %>
|
|
<%= image_tag("emoji/emoji-one-thumbs-down.png", alt: "Thumbs down emoji", width: 24, height: 24, class: "reaction-icon reacted") %>
|
|
</button>
|
|
<button
|
|
class="crayons-btn crayons-btn--icon crayons-btn--icon-rounded crayons-btn--ghost inline-flex crayons-btn--s reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "vomit") ? "reacted" : "" %>"
|
|
data-reactable-id="<%= json_data["comment"]["id"] %>"
|
|
data-category="vomit"
|
|
data-reactable-type="Comment"
|
|
title="vomit">
|
|
<%= image_tag("emoji/emoji-one-nausea-face-gray.png", alt: "Nausea face emoji", width: 24, height: 24, class: "reaction-icon not-reacted") %>
|
|
<%= image_tag("emoji/emoji-one-nausea-face.png", alt: "Nausea face emoji", width: 24, height: 24, class: "reaction-icon reacted") %>
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
|
|
<footer class="comment-actions">
|
|
<div class="notification__actions">
|
|
<button
|
|
class="crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "like") ? "reacted" : "" %>"
|
|
data-reactable-id="<%= json_data["comment"]["id"] %>"
|
|
data-category="like"
|
|
data-reactable-type="Comment"
|
|
title="heart">
|
|
<%= inline_svg_tag("small-heart.svg", aria: true, class: "crayons-icon reaction-icon not-reacted", title: "Favorite heart outline button") %>
|
|
<%= inline_svg_tag("small-heart-filled.svg", aria: true, class: "crayons-icon reaction-icon--like reaction-icon reacted", title: "Favorite heart outline button") %>
|
|
<span class="hidden m:inline-block">Like</span>
|
|
</button>
|
|
|
|
<% cache "comment-box-comment-reply-#{@last_user_comment}-#{json_data['comment']['updated_at']}-#{json_data['comment']['id']}" do %>
|
|
<% reply = Comment.select(:id, :user_id, :ancestry).find_by(id: json_data["comment"]["id"])&.children&.find_by(user_id: current_user.id) %>
|
|
<% if reply %>
|
|
<a class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left mr-1 inline-flex reaction-comment reacted" href="<%= reply.path %>">
|
|
<%= inline_svg_tag("small-comment-filled.svg", aria: true, class: "crayons-icon reaction-icon--comment reaction-icon reacted", title: "Comment button") %>
|
|
<span class="hidden m:inline-block">Replied</span>
|
|
</a>
|
|
<% else %>
|
|
<a class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" data-reactable-id="<%= json_data["comment"]["id"] %>" href="#<%= json_data["comment"]["path"] %>">
|
|
<%= inline_svg_tag("small-comment.svg", aria: true, class: "crayons-icon reaction-icon not-reacted", title: "Comment button") %>
|
|
<%= inline_svg_tag("small-comment-filled.svg", aria: true, class: "crayons-icon reaction-icon--comment reaction-icon reacted", title: "Comment button") %>
|
|
<span class="hidden m:inline-block">Reply</span>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
<a href="<%= json_data["comment"]["path"] %>" class="crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s inline-flex">
|
|
<%= inline_svg_tag("small-link.svg", aria: true, class: "crayons-icon", title: "View button") %><span class="hidden m:inline-block">View</span>
|
|
</a>
|
|
</div>
|
|
|
|
<% @comment = Comment.new %>
|
|
<%= form_for(@comment,
|
|
authenticity_token: false,
|
|
html: { id: "comment-form-for-#{json_data['comment']['id']}", onsubmit: "handleCommentSubmit.bind(this)(event)", onkeydown: "handleKeyDown(event)", class: "p-2 pb-1 pt-3 hidden" }) do |f| %>
|
|
<%= f.hidden_field :commentable_id, value: json_data["comment"]["commentable"]["id"] %>
|
|
<%= f.hidden_field :commentable_type, value: json_data["comment"]["commentable"]["class"]["name"] %>
|
|
|
|
<%= f.hidden_field :parent_id, value: json_data["comment"]["id"] %>
|
|
<%= f.text_area :body_markdown, id: "comment-textarea-for-#{json_data['comment']['id']}", class: "crayons-textfield mb-2 resize-y", placeholder: "Reply...", 'aria-label': "Reply to a comment...", onfocus: "handleFocus(event)" %>
|
|
<div class="actions">
|
|
<button type="submit" class="crayons-btn comment-action-button" onclick="validateField(event)">Submit</button>
|
|
</div>
|
|
<% end %>
|
|
</footer>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|