decidim-comments 0.24.0 → 0.25.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24922b5c100bdad1829e1da583c3ef0e56b3bd95603bb678320e2522427ae8d1
-  data.tar.gz: f721220d6fc7611876046d47dcdd51045e5852a5b0d4d18c3176f845bc537e65
+  metadata.gz: 1d63d01a8656f07de3676fca4a946e5fe5ec957c593296d2f164fd8ffc581d59
+  data.tar.gz: 1edc42627c2f51177f0194ea386d2c62724e07d1f6fb59821649fcc37156af36
 SHA512:
-  metadata.gz: da58ece1d3cc4d9b5cd97316faef595b27f36a4b771817c5278a11c02748a3816a98b5b86ecbf1c0e35a03a6ba3baf892c61f13a83361dc76ffae9e926758a7d
-  data.tar.gz: 7d848566d1988040121f462636077aeccde2e095b431c02cbd7491f49145dec7fd93b9a9845dbf7431474165429f7c6cac30e5cd9d4a8716cdeea62268494de2
+  metadata.gz: 1a58b466021826dabf3c0e20babbef705a7d437e952702131971db498049b3db6c0db1032cae77145094b02bd96a5d3c3256a636c19b7328bcf7604baa35489a
+  data.tar.gz: f27b3560c815353c0dd7c4a97f828c1946cd0ac67c7e951b900943a23d31abb87a3d116e810d1d22c60957e189074159829b8c0b43b40ff3f0aa379abae6a704

data/README.md

@@ -16,10 +16,10 @@ In order to use the helper in your templates you need to include the comments he
 include Decidim::Comments::CommentsHelper
 ```
 
-Finally, add the comments javascript module via Sprockets like this:
+Finally, add the comments javascript module like this:
 
 ```javascript
-//= require decidim/comments/comments
+import "src/decidim/comments/comments";
 ```
 
 ## Installation
@@ -47,11 +47,10 @@ For the backend side:
 
 For the frontend side:
 
-- Typescript (introduced in #1001)
 - React
 - Apollo
 
-The frontend code can be found in the folder `app/frontend` instead of `app/assets`. We are using Webpack to build the React application so we are keeping the React files in a separate folder and then including the `bundle.js` file using sprockets as usual.
+The frontend code can be found in the folder `app/packs.
 
 ### Developing React components
 
@@ -61,22 +60,6 @@ You need to execute `npm start` in a separate terminal, in the `decidim` root fo
 
 You can execute `npm test` to run the javascript test suite or you can run `npm run test:watch` to listen for file changes.
 
-#### GraphQL schema and Typescript
-
-Since we are using Typescript we can generate interfaces and types from our schema using the following command:
-
-```bash
-npm run graphql:generate_schema_types
-```
-
-This command will create a file called `app/frontend/support/schema.ts` that can be used to strict type checking in our components.
-
-In order for this to work your Rails server must be running at `localhost:3000`, if you're using a different host you can set it with `DECIDIM_HOST`:
-
-```bash
-DECIDIM_HOST=myhost:3000 npm run graphql:generate_schema_types
-```
-
 ## Contributing
 
 See [Decidim](https://github.com/decidim/decidim).

data/app/cells/decidim/comments/comment/actions.erb

@@ -1,7 +1,7 @@
 <div class="comment__actions">
   <% if can_reply? %>
     <button class="comment__reply muted-link" aria-controls="<%= reply_id %>" data-toggle="<%= reply_id %>">
-      <%= icon "pencil", class: "icon--small", role: "none presentation" %>&nbsp;<%= t("decidim.components.comment.reply") %>
+      <%= icon "pencil", class: "icon--small", role: "img", "aria-hidden": true %>&nbsp;<%= t("decidim.components.comment.reply") %>
     </button>
   <% end %>
 </div>

data/app/cells/decidim/comments/comment/deletion_data.erb

@@ -0,0 +1 @@
+<%= render partial: "decidim/comments/comments/delete.html", locals: { comment: model } %>

data/app/cells/decidim/comments/comment/show.erb

@@ -1,36 +1,45 @@
 <%= content_tag :div, id: "comment_#{model.id}", class: comment_classes, data: { comment_id: model.id } do %>
-  <div class="comment__header">
-    <div class="author-data">
-      <div class="author-data__main">
-        <%= render :author %>
-        <span>
-          <%= time_tag created_at, l(created_at, format: :decidim_short) %>
-        </span>
-      </div>
-      <div class="author-data__extra">
-        <%= render :utilities %>
+  <% if model.deleted? %>
+    <%= render :deletion_data %>
+  <% else %>
+    <div class="comment__header">
+      <div class="author-data">
+        <div class="author-data__main">
+          <%= render :author %>
+          <span>
+            <%= time_tag created_at, l(created_at, format: :decidim_short) %>
+          </span>
+          <% if edited? %>
+            <div class="author-data__extra">
+              <span class="comment__edited">
+                <%= t("decidim.components.comment.edited") %>
+              </span>
+            </div>
+          <% end %>
+        </div>
       </div>
+      <%= render :utilities %>
     </div>
-  </div>
-  <div class="comment__content">
-    <%= alignment_badge %>
-    <%= comment_body %>
-  </div>
-  <div class="comment__footer">
-    <%= render :actions %>
-    <%= votes %>
-  </div>
+    <div class="comment__content">
+      <%= alignment_badge %>
+      <%= comment_body %>
+    </div>
+    <div class="comment__footer">
+      <%= render :actions %>
+      <%= votes %>
+    </div>
+  <% end %>
   <div id="comment-<%= model.id %>-replies">
     <% if has_replies? %>
       <% replies.each do |reply| %>
-        <%= cell("decidim/comments/comment", reply, root_depth: root_depth, order: order) %>
+        <%= cell("decidim/comments/comment", reply, root_depth: root_depth, order: order, reloaded: reloaded?) %>
       <% end %>
     <% end %>
   </div>
   <% if can_reply? %>
     <div class="comment__additionalreply<%= " hide" unless has_replies? %>">
       <button class="comment__reply muted-link" aria-controls="<%= reply_id %>" data-toggle="<%= reply_id %>">
-        <%= icon "pencil", class: "icon--small", role: "none presentation" %>&nbsp;<%= t("decidim.components.comment.reply") %>
+        <%= icon "pencil", class: "icon--small", role: "img", "aria-hidden": true %>&nbsp;<%= t("decidim.components.comment.reply") %>
       </button>
     </div>
     <div class="add-comment hide" id="<%= reply_id %>" data-toggler=".hide">

data/app/cells/decidim/comments/comment/utilities.erb

@@ -1,13 +1,41 @@
-<button type="button" class="link-alt" data-open="<%= current_user.present? ? "flagModalComment#{model.id}" : "loginModal" %>" title="<%= t("decidim.components.comment.report.title") %>" aria-controls="<%= current_user.present? ? "flagModalComment#{model.id}" : "loginModal" %>" aria-haspopup="true" tabindex="0">
-  <%= icon "flag", aria_hidden: true, class: "icon--small", role: "none presentation", "aria-hidden": true %>
-  <span class="show-for-sr"><%= t("decidim.components.comment.report.title") %></span>
-</button>
-
-<%= link_to "#{commentable_path("commentId" => model.id)}#comment_#{model.id}", title: t("decidim.components.comment.single_comment_link_title") do %>
-  <span class="show-for-sr"><%= t("decidim.components.comment.single_comment_link_title") %></span>
-  <%= icon "link-intact", class: "icon--small", role: "none presentation" %>
-<% end %>
-
-<% if current_user.present? %>
-  <%= cell("decidim/flag_modal", model, modal_id: "flagModalComment#{model.id}") %>
+<div class="comment__header__context-menu">
+  <label for="<%= context_menu_id %>" data-toggle="<%= context_menu_id %>">
+    <%= icon "ellipses" %>
+  </label>
+  <ul id="<%= context_menu_id %>" data-dropdown data-close-on-click="true" data-position="left" data-alignment="top" class="card dropdown-pane comment__header__context-menu__content">
+    <li>
+      <button type="button" class="link-alt comment__header__context-menu__content-item" data-open="<%= current_user.present? ? "flagModalComment#{model.id}" : "loginModal" %>" title="<%= t("decidim.components.comment.report.title") %>" aria-controls="<%= current_user.present? ? "flagModalComment#{model.id}" : "loginModal" %>" aria-haspopup="true" tabindex="0">
+        <%= icon "flag", class: "icon--small", aria_label: t("decidim.components.comment.report.title") %>
+        <span><%= t("decidim.components.comment.report.action") %></span>
+      </button>
+    </li>
+    <li>
+      <%= link_to "#{commentable_path("commentId" => model.id)}#comment_#{model.id}", target: "_blank", class: "comment__header__context-menu__content-item", title: t("decidim.components.comment.single_comment_link_title") do %>
+        <%= icon "link-intact", class: "icon--small", aria_label: t("decidim.components.comment.single_comment_link_title") %>
+        <span><%= t("decidim.components.comment.single_comment_link_title") %></span>
+      <% end %>
+    </li>
+    <% if model.authored_by?(current_user) %>
+      <li>
+      <button type="button" class="link-alt comment__header__context-menu__content-item" data-open="<%= "editCommentModal#{model.id}" %>" title="<%= t("decidim.components.comment.edit") %>" aria-controls="<%= "editCommentModal#{model.id}" %>" aria-haspopup="true" tabindex="0">
+          <%= icon "pencil", class: "icon--small", aria_label: t("decidim.components.comment.edit") %>
+          <span><%= t("decidim.components.comment.edit") %></span>
+      </button>
+      </li>
+      <li>
+        <%= link_to comment_path, remote: true, method: :delete, class: "comment__header__context-menu__content-item", data: { confirm: t("decidim.components.comment.confirm_destroy") } do %>
+          <%= icon "trash", class: "icon--small", aria_label: t("decidim.components.comment.delete") %>
+          <span><%= t("decidim.components.comment.delete") %></span>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>
+<% unless reloaded? %>
+  <% if current_user.present? %>
+    <%= cell("decidim/flag_modal", model, modal_id: "flagModalComment#{model.id}") %>
+  <% end %>
+  <% if model.authored_by?(current_user) %>
+    <%= cell("decidim/comments/edit_comment_modal_form", model, modal_id: "editCommentModal#{model.id}") %>
+  <% end %>
 <% end %>

data/app/cells/decidim/comments/comment/votes.erb

@@ -1,24 +1,24 @@
 <div class="comment__votes">
   <% if user_signed_in? %>
-    <%= button_to decidim_comments.comment_votes_path(model, weight: 1), remote: true, disabled: voted_down?, class: votes_up_classes, title: t("decidim.components.up_vote_button.text") do %>
+    <%= vote_button_to decidim_comments.comment_votes_path(model, weight: 1), remote: true, disabled: voted_down?, class: votes_up_classes, title: t("decidim.components.up_vote_button.text") do %>
       <span class="show-for-sr"><%= t("decidim.components.up_vote_button.text") %></span>
-      <%= icon "chevron-top", class: "icon--small", role: "none presentation" %>
+      <%= icon "chevron-top", class: "icon--small", role: "img", "aria-hidden": true %>
       <span class="comment__votes--count"><%= up_votes_count %></span>
     <% end %>
-    <%= button_to decidim_comments.comment_votes_path(model, weight: -1), remote: true, disabled: voted_up?, class: votes_down_classes, title: t("decidim.components.down_vote_button.text") do %>
+    <%= vote_button_to decidim_comments.comment_votes_path(model, weight: -1), remote: true, disabled: voted_up?, class: votes_down_classes, title: t("decidim.components.down_vote_button.text") do %>
       <span class="show-for-sr"><%= t("decidim.components.down_vote_button.text") %></span>
-      <%= icon "chevron-bottom", class: "icon--small", role: "none presentation" %>
+      <%= icon "chevron-bottom", class: "icon--small", role: "img", "aria-hidden": true %>
       <span class="comment__votes--count"><%= down_votes_count %></span>
     <% end %>
   <% else %>
     <button class="<%= votes_up_classes %> " title="<%= t("decidim.components.up_vote_button.text") %>" data-open="loginModal">
       <span class="show-for-sr"><%= t("decidim.components.up_vote_button.text") %></span>
-      <%= icon "chevron-top", class: "icon--small", role: "none presentation" %>
+      <%= icon "chevron-top", class: "icon--small", role: "img", "aria-hidden": true %>
       <span class="comment__votes--count"><%= up_votes_count %></span>
     </button>
     <button class="<%= votes_down_classes %> " title="<%= t("decidim.components.down_vote_button.text") %>" data-open="loginModal">
       <span class="show-for-sr"><%= t("decidim.components.down_vote_button.text") %></span>
-      <%= icon "chevron-bottom", class: "icon--small", role: "none presentation" %>
+      <%= icon "chevron-bottom", class: "icon--small", role: "img", "aria-hidden": true %>
       <span class="comment__votes--count"><%= down_votes_count %></span>
     </button>
   <% end %>

data/app/cells/decidim/comments/comment_cell.rb

@@ -7,15 +7,18 @@ module Decidim
       include ActionView::Helpers::DateHelper
       include Decidim::IconHelper
       include Decidim::ResourceHelper
+      include Cell::ViewModel::Partial
 
       delegate :current_user, :user_signed_in?, to: :controller
 
       property :root_commentable
       property :created_at
+      property :deleted_at
       property :alignment
       property :translated_body
       property :comment_threads
       property :accepts_new_comments?
+      property :edited?
 
       def alignment_badge
         return unless [-1, 1].include?(alignment)
@@ -51,6 +54,10 @@ module Decidim
         "comment#{model.id}-reply"
       end
 
+      def context_menu_id
+        "toggle-context-menu-#{model.id}"
+      end
+
       def can_reply?
         user_signed_in? && accepts_new_comments? &&
           root_commentable.user_allowed_to_comment?(current_user)
@@ -116,6 +123,10 @@ module Decidim
         end
       end
 
+      def comment_path
+        decidim_comments.comment_path(model)
+      end
+
       def up_votes_count
         model.up_votes.count
       end
@@ -132,6 +143,10 @@ module Decidim
         model.depth - root_depth
       end
 
+      def reloaded?
+        options[:reloaded]
+      end
+
       def voted_up?
         model.up_voted_by?(current_user)
       end
@@ -151,6 +166,20 @@ module Decidim
       def has_replies?
         model.comment_threads.any?
       end
+
+      # action_authorization_button expects current_component to be available
+      def current_component
+        root_commentable.try(:component)
+      end
+
+      def vote_button_to(path, params, &block)
+        # actions are linked to objects belonging to a component
+        # In consultations, a question belong to a participatory_space but it has comments
+        # To apply :comment permission, the modal authorizer should be refactored to allow participatory spaces-level comments
+        return button_to(path, params, &block) unless current_component
+
+        action_authorized_button_to(:vote_comment, path, params.merge(resource: root_commentable), &block)
+      end
     end
   end
 end

data/app/cells/decidim/comments/comment_form/show.erb

@@ -15,7 +15,7 @@
         required: true,
         placeholder: t("decidim.components.add_comment_form.form.body.placeholder"),
         label: false,
-        data: { remaining_characters: "##{add_comment_id}-remaining-characters" }
+        data: { remaining_characters: "##{add_comment_id}-remaining-characters", input_emoji: true }
       ) %>
     </div>
     <button type="submit" class="button button--sc" disabled="disabled"><%= t("decidim.components.add_comment_form.form.submit") %></button>

data/app/cells/decidim/comments/comments/add_comment.erb

@@ -1,18 +1,22 @@
 <div class="add-comment">
-  <h4 class="section-heading"><%= t("decidim.components.add_comment_form.title") %></h4>
+  <h5 class="section-heading"><%= t("decidim.components.add_comment_form.title") %></h5>
 
   <% if user_signed_in? %>
     <% if alignment_enabled? %>
       <div class="opinion-toggle button-group">
-        <button class="button tiny button--muted opinion-toggle--ok">
-          <%= icon "thumb-up", role: "none presentation" %>
+        <span class="show-for-sr"><%= t("decidim.components.add_comment_form.opinion.label") %></span>
+        <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ok" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.positive_selected") %>">
+          <%= icon "thumb-up", role: "img", "aria-hidden": true %>
+          <span class="show-for-sr"><%= t("decidim.components.add_comment_form.opinion.positive") %></span>
         </button>
-        <button class="button tiny button--muted opinion-toggle--meh is-active">
+        <button aria-pressed="true" class="button tiny button--muted opinion-toggle--meh is-active" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.neutral_selected") %>">
           <%= t("decidim.components.add_comment_form.opinion.neutral") %>
         </button>
-        <button class="button tiny button--muted opinion-toggle--ko">
-          <%= icon "thumb-down", role: "none presentation" %>
+        <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ko" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.negative_selected") %>">
+          <%= icon "thumb-down", role: "img", "aria-hidden": true %>
+          <span class="show-for-sr"><%= t("decidim.components.add_comment_form.opinion.negative") %></span>
         </button>
+        <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state show-for-sr"></div>
       </div>
     <% end %>
     <%== cell("decidim/comments/comment_form", model, root_depth: root_depth) %>

data/app/cells/decidim/comments/comments/order_control.erb

@@ -1,14 +1,14 @@
 <div class="order-by__dropdown order-by__dropdown--right">
   <span class="order-by__text"><%= t("decidim.components.comment_order_selector.title") %></span>
-  <ul class="dropdown menu"
+  <ul id="comments-order-menu"
+    class="dropdown menu"
     data-dropdown-menu="data-dropdown-menu"
     data-autoclose="false"
     data-disable-hover="true"
     data-click-open="true"
     data-close-on-click="true"
-    tabindex="-1"
     role="menubar">
-    <li class="is-dropdown-submenu-parent opens-right" tabindex="-1" role="none">
+    <li class="is-dropdown-submenu-parent opens-right" role="presentation">
       <a href="#" id="comments-order-menu-control"
         aria-label="<%= t("decidim.components.comment_order_selector.title") %>"
         aria-controls="comments-order-menu"
@@ -18,10 +18,9 @@
         id="comments-order-chooser-menu"
         role="menu"
         aria-labelledby="comments-order-menu-control"
-        tabindex="-1"
         data-submenu="">
         <% available_orders.each do |order_value| %>
-          <li role="none" class="is-submenu-item is-dropdown-submenu-item">
+          <li role="presentation" class="is-submenu-item is-dropdown-submenu-item">
             <%= link_to(
               t("decidim.components.comment_order_selector.order.#{order_value}"),
               decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value, reload: 1),

data/app/cells/decidim/comments/comments/show.erb

@@ -2,7 +2,7 @@
   <div class="columns large-9 comments-container" id="comments">
     <div class="comments">
       <div class="row collapse order-by">
-        <h2 class="order-by__text section-heading">
+        <h4 class="order-by__text section-heading">
           <% if single_comment? %>
             <%= t("decidim.components.comments.comment_details_title") %>
           <% else %>
@@ -10,7 +10,7 @@
               <%= t("decidim.components.comments.title", count: comments_count) %>
             </span>
           <% end %>
-        </h2>
+        </h4>
         <%= render :order_control %>
       </div>
       <%= single_comment_warning %>
@@ -28,5 +28,3 @@
     </div>
   </div>
 <% end %>
-
-<%= javascript_include_tag("decidim/comments/comments") %>

data/app/cells/decidim/comments/comments/user_comments_blocked_warning.erb

@@ -1,3 +1,7 @@
 <div class="callout warning">
-  <p><%= t("decidim.components.comments.blocked_comments_for_user_warning") %></p>
+  <% if comment_permissions? %>
+    <p><%= blocked_comments_for_unauthorized_user_warning_link %></p>
+  <% else %>
+    <p><%= t("decidim.components.comments.blocked_comments_for_user_warning") %></p>
+  <% end %>
 </div>

data/app/cells/decidim/comments/comments_cell.rb

@@ -51,7 +51,7 @@ module Decidim
       end
 
       def comments_count
-        model.comments.count
+        model.comments_count
       end
 
       def root_depth
@@ -113,7 +113,7 @@ module Decidim
       def single_comment
         return if options[:single_comment].blank?
 
-        @single_comment ||= model.comments.find_by(id: options[:single_comment])
+        @single_comment ||= SortedComments.for(model, id: options[:single_comment], order_by: order).first
       end
 
       def machine_translations_toggled?
@@ -129,6 +129,28 @@ module Decidim
 
         !model.user_allowed_to_comment?(current_user)
       end
+
+      def comment_permissions?
+        [model, current_component].any? do |resource|
+          resource.try(:permissions).try(:[], "comment")
+        end
+      end
+
+      # action_authorization_link expects current_component to be available
+      def current_component
+        model.try(:component)
+      end
+
+      def blocked_comments_for_unauthorized_user_warning_link
+        options = if current_component.present?
+                    { resource: model }
+                  else
+                    { resource: model, permissions_holder: model }
+                  end
+        action_authorized_link_to(:comment, commentable_path, options) do
+          t("decidim.components.comments.blocked_comments_for_unauthorized_user_warning")
+        end
+      end
     end
   end
 end