docbrown/app/views/moderations/actions_panel.html.erb

<% title t("views.moderations.actions.meta.title", title: @moderatable.title) %>

<% cache(release_adjusted_cache_key("mod-styling")) do %>
  <style>
    <%= Rails.application.assets["moderators.css"].to_s.html_safe %>
  </style>
<% end %>

<%= javascript_packs_with_chunks_tag "actionsPanel", defer: true %>

<div class="container mod-container">
  <header class="top-header">
    <h1><%= t("views.moderations.actions.heading") %></h1>
    <h2><%= t("views.moderations.actions.subtitle") %></h2>
    <button class="crayons-btn crayons-btn--secondary crayons-btn--icon-rounded close-actions-panel hidden" type="button" title="<%= t("views.moderations.actions.close") %>">
      <%= crayons_icon_tag(:x, title: t("views.moderations.actions.close")) %>
    </button>
  </header>

  <div class="reactions-container">
    <div class="thumb-reactions-container">
      <button class="reaction-button <%= Reaction.cached_any_reactions_for?(@moderatable, current_user, "thumbsup") ? "reacted" : "" %>"
              data-reactable-id="<%= @moderatable.id %>"
              data-category="thumbsup"
              data-reactable-type="<%= @moderatable.class.name %>">
        <div class="reaction-button-circle">
          <%= crayons_icon_tag("twemoji/thumb-up", native: true, title: t("views.moderations.actions.thumb_up")) %>
          <%= crayons_icon_tag(:checkmark, class: "reaction-checkmark", title: t("views.moderations.actions.checkmark")) %>
        </div>
        <span class="vote-text"><%= t("views.moderations.actions.vote_up") %></span>
      </button>
      <button class="reaction-button <%= Reaction.cached_any_reactions_for?(@moderatable, current_user, "thumbsdown") ? "reacted" : "" %>"
              data-reactable-id="<%= @moderatable.id %>"
              data-category="thumbsdown"
              data-reactable-type="<%= @moderatable.class.name %>">
        <div class="reaction-button-circle">
          <%= crayons_icon_tag("twemoji/thumb-down", native: true, title: t("views.moderations.actions.thumb_down")) %>
          <%= crayons_icon_tag(:checkmark, class: "reaction-checkmark", title: t("views.moderations.actions.checkmark")) %>
        </div>
        <span class="vote-text"><%= t("views.moderations.actions.vote_down") %></span>
      </button>
    </div>
    <button class="reaction-vomit-button <%= Reaction.cached_any_reactions_for?(@moderatable, current_user, "vomit") ? "reacted" : "" %>"
            data-reactable-id="<%= @moderatable.id %>"
            data-category="vomit"
            data-reactable-type="<%= @moderatable.class.name %>">
      <%= crayons_icon_tag("twemoji/suspicious", native: true, class: "mr-1", title: "Suspicious...") %>
      <span></span>
      <%= crayons_icon_tag(:checkmark, class: "vomit-checkmark", title: t("views.moderations.actions.checkmark")) %>
    </button>
    <% if policy(@moderatable).revoke_publication? %>
      <button
        class="c-btn c-btn--primary c-btn--destructive w-100 my-4"
        id="unpublish-article-btn">
        <%= t("views.moderations.actions.unpublish") %>
      </button>
    <% end %>
    <% if policy(@moderatable).toggle_featured_status? %>
      <button
        class="c-btn c-btn--primary w-100"
        id="feature-article-btn"
        data-article-featured="<%= @moderatable.featured %>"
        data-article-id="<%= @moderatable.id %>"
        data-article-author="<%= @moderatable.username %>"
        data-article-slug="<%= @moderatable.slug %>">
        <%= @moderatable.featured ? t("views.moderations.actions.unfeature") : t("views.moderations.actions.feature") %>
      </button>
      <div class="additional-subtext-section py-4 pt-2">
        <% recent_featured_count = Article.where(featured: true).where("published_at > ?", 1.day.ago).size %>
        <%= t("views.moderations.actions.featured_past_day", count: recent_featured_count) %>
      </div>
    <% end %>
    <a href="<%= URL.url %>/community-moderation#using-the-quick-reactions-to-moderate-content" target="_blank" rel="noopener">
      <span class="additional-subtext-section py-3">
        <%= t("views.moderations.actions.how") %>
      </span>
    </a>
  </div>

  <div class="other-things-container">
    <header class="other-things">
      <h3>
        <%= t("views.moderations.actions.other") %>
      </h3>
    </header>

    <%# Checking if the user should see the "Adjust tags" dropdown %>
    <% if policy(@moderatable).allow_tag_adjustment? %>
      <button aria-haspopup="true" aria-expanded="false" aria-controls="adjust-tags-options" class="other-things-btn adjust-tags" type="button" data-other-things-type="adjust-tags" aria-label="<%= t("views.moderations.actions.adjust.aria_label") %>">
        <div class="label-wrapper">
          <div class="icon circle centered-icon">
            <%= crayons_icon_tag("mod-filled", title: t("views.moderations.actions.adjust.icon")) %>
          </div>
          <header>
            <h2><%= t("views.moderations.actions.adjust.heading") %></h2>
            <h3><%= t("views.moderations.actions.adjust.subtitle") %></h3>
          </header>
        </div>
        <div class="toggle-chevron-container">
          <%= crayons_icon_tag("arrow-down-fill", title: t("views.moderations.actions.toggle")) %>
        </div>
      </button>

      <div id="adjust-tags-options" class="adjust-tags-options dropdown-options hidden">
        <% if policy(@moderatable).can_adjust_any_tag? %>
          <% if @moderatable.tag_list.size < Article::MAX_TAG_LIST_SIZE %>
            <div class="add-tag-container">
              <input id="admin-add-tag" class="crayons-textfield" type="text" placeholder="<%= t("views.moderations.actions.adjust.add_placeholder") %>" data-article-id="<%= @moderatable.id %>" data-adjustment-type="plus">
            </div>
          <% end %>

          <% @moderatable.tags.each do |tag| %>
            <button class="adjustable-tag" type="button" data-adjustment-type="subtract" data-tag-name="<%= tag.name %>" data-article-id="<%= @moderatable.id %>">
              <span class="num-sign">#</span><%= tag.name %>
              <div class="circle centered-icon adjustment-icon subtract color-base-inverted">
                <%= crayons_icon_tag(:minus, title: t("views.moderations.actions.adjust.remove")) %>
              </div>
            </button>
          <% end %>
        <% elsif policy(@moderatable).tag_moderator_eligible? %>
          <% @tag_moderator_tags.each do |tag| %>
            <% subtract_or_plus = @moderatable.tag_list.include?(tag.name) ? "subtract" : "plus" %>
            <% subtract_or_plus_title = t("views.moderations.actions.adjust.#{subtract_or_plus == 'subtract' ? 'remove' : 'add'}") %>
            <button class="adjustable-tag" type="button" data-adjustment-type="<%= subtract_or_plus %>" data-tag-name="<%= tag.name %>" data-article-id="<%= @moderatable.id %>">
              <span class="num-sign">#</span><%= tag.name %>
              <div class="circle centered-icon adjustment-icon <%= subtract_or_plus %>">
                <%= crayons_icon_tag(subtract_or_plus, title: subtract_or_plus_title) %>
              </div>
            </button>
          <% end %>
        <% end %>
        <form id="adjustment-reason-container" class="adjustment-reason-container">
          <textarea class="crayons-textfield" placeholder="<%= t("views.moderations.actions.adjust.reason") %>" id="tag-adjustment-reason" required></textarea>
          <button class="crayons-btn" id="tag-adjust-submit" type="submit"><%= t("views.moderations.actions.adjust.submit") %></button>
        </form>
        <a href="<%= URL.url %>/tag-moderation#how-to-remove-or-add-tags" target="_blank" rel="noopener">
          <span class="additional-subtext-section py-3">
            <%= t("views.moderations.actions.how") %>
          </span>
        </a>
      </div>
    <% end %>

    <% @rating_vote = RatingVote.where(article_id: @moderatable.id, user_id: current_user.id).first %>
    <button aria-haspopup="true" aria-expanded="false" aria-controls="set-experience-options" class="other-things-btn set-experience" type="button" data-other-things-type="set-experience" aria-label="<%= t("views.moderations.actions.experience.aria_label") %>">
      <div class="label-wrapper">
        <div class="icon circle centered-icon">
          <%= crayons_icon_tag(:book, title: t("views.moderations.actions.experience.icon")) %>
        </div>
        <header>
          <h2><%= t("views.moderations.actions.experience.heading") %></h2>
          <h3><%= t("views.moderations.actions.experience.subtitle") %></h3>
        </header>
      </div>
      <div class="toggle-chevron-container">
        <%= crayons_icon_tag("arrow-down-fill", title: t("views.moderations.actions.toggle")) %>
      </div>
    </button>

    <div id="set-experience-options" class="set-experience-options dropdown-options hidden">
      <% rating_hash = { "Expert" => [10, 5], "Advanced" => [8, 4], "Mid-level" => [5, 3], "Beginner" => [3, 2], "Novice" => [1, 1] } %>
      <% current_rating_value = @rating_vote.rating.round(0) if @rating_vote %>
      <% rating_hash.each do |rating_name, rating_level| %>
      <button
        value="<%= rating_level[0] %>"
        name="rating_vote_<%= rating_level[0] %>"
        id="js__rating__vote__<%= rating_level[0] %>"
        class="level-rating-button <%= " selected" if current_rating_value == rating_level[0] %>"
        data-user-id="<%= current_user.id %>"
        data-article-id="<%= @moderatable.id %>"
        data-group="experience_level">
        <div class="level-rating-content">
          <span class="level-rating-number"><%= rating_level[1] %></span>
          <span class="level-rating-text"><%= t("views.moderations.actions.experience.level.#{rating_name}") %></span>
        </div>
        <%= crayons_icon_tag(:checkmark, title: t("views.moderations.actions.checkmark")) %>
      </button>
      <% end %>
      <a href="<%= URL.url %>/community-moderation#how-to-rate-the-experience-level-of-a-post" target="_blank" rel="noopener">
        <span class="additional-subtext-section py-3">
          <%= t("views.moderations.actions.how") %>
        </span>
      </a>
    </div>

    <%# Hiding this Admin Actions panel until Flag User, Unpublish All Posts and Suspend User are moved into it  %>
    <% if current_user.any_admin? %>
      <button aria-haspopup="true" aria-expanded="false" aria-controls="admin-action-options" class="other-things-btn admin-action hidden" type="button" data-other-things-type="admin-action" aria-label="<%= t("views.moderations.actions.admin.aria_label") %>">
        <div class="label-wrapper">
          <div class="icon circle centered-icon">
            <%= inline_svg_tag("admin.svg", aria_hidden: true, title: t("views.moderations.actions.admin.icon")) %>
          </div>
          <header>
            <h2><%= t("views.moderations.actions.admin.heading") %></h2>
            <h3><%= t("views.moderations.actions.admin.subtitle") %></h3>
          </header>
        </div>
        <div class="toggle-chevron-container">
          <%= inline_svg_tag("arrow-down-fill.svg", aria: true, title: t("views.moderations.actions.toggle")) %>
        </div>
      </button>
    <% end %>
  </div>

  <div class="bottom-actions">
    <button id="open-flag-user-modal" type="button"><%= t("views.moderations.actions.flag") %></button>
  </div>
</div>