87 lines
6.4 KiB
Text
87 lines
6.4 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">
|
|
<%= t("views.comments.re.text_html", re: tag.span(t("views.comments.re.re"), class: "fw-normal opacity-50"), title: 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_trusted_role? %>
|
|
<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">
|
|
<%= crayons_icon_tag("twemoji/thumb-down", native: true, class: "reaction-icon", title: "Thumb down") %>
|
|
</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="<%= t("views.reactions.category.vomit") %>">
|
|
<%= crayons_icon_tag("twemoji/suspicious", native: true, class: "reaction-icon", title: "Suspicious") %>
|
|
</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"
|
|
aria-label="<%= t("views.reactions.like.aria_label") %>"
|
|
title="heart">
|
|
<%= crayons_icon_tag("small-heart", class: "reaction-icon not-reacted", aria_hidden: true, title: t("views.comments.footer.heart.icon")) %>
|
|
<%= crayons_icon_tag("small-heart-filled", class: "reaction-icon--like reaction-icon reacted", aria_hidden: true, title: t("views.comments.footer.heart.icon")) %>
|
|
<span class="hidden m:inline-block"><%= t("views.comments.footer.heart.text") %></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 %>" aria-label="<%= t("views.comments.footer.reply.done") %>">
|
|
<%= crayons_icon_tag("small-comment-filled", class: "reaction-icon--comment reaction-icon reacted", aria_hidden: true, title: t("views.comments.footer.reply.icon")) %>
|
|
<span class="hidden m:inline-block"><%= t("views.comments.footer.reply.done") %></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"] %>" aria-label="<%= t("views.comments.footer.reply.text") %>">
|
|
<%= crayons_icon_tag("small-comment", class: "reaction-icon not-reacted", aria_hidden: true, title: t("views.comments.footer.reply.icon")) %>
|
|
<%= crayons_icon_tag("small-comment-filled", class: "reaction-icon--comment reaction-icon reacted", aria_hidden: true, title: t("views.comments.footer.reply.icon")) %>
|
|
<span class="hidden m:inline-block"><%= t("views.comments.footer.reply.text") %></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">
|
|
<%= crayons_icon_tag("small-link", title: t("views.comments.footer.view.icon")) %><span class="hidden m:inline-block"><%= t("views.comments.footer.view.text") %></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: "comment-textarea crayons-textfield mb-2 resize-y", placeholder: t("views.comments.footer.reply.placeholder"), "aria-label": t("views.comments.footer.reply.aria_label"),
|
|
onfocus: "handleFocus(event)" %>
|
|
<div class="actions">
|
|
<button type="submit" class="crayons-btn comment-action-button" onclick="validateField(event)"><%= t("views.comments.write.submit") %></button>
|
|
</div>
|
|
<% end %>
|
|
</footer>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|