Adds styles for flag as inappropriate

app/assets/stylesheets/admin.scss

@@ -140,7 +140,7 @@ body.admin {
 
 .delete {
   border-bottom: 1px dotted #CF2A0E;
-  color: #F04124;
+  color: $delete;
   font-size: rem-calc(12);
 
   &:hover, &:active, &:focus {
@@ -160,7 +160,7 @@ body.admin {
 }
 
 .rejected {
-  color: #F04124;
+  color: $delete;
 }
 
 .level {

app/assets/stylesheets/debates.scss

@@ -5,6 +5,7 @@
 // 03. Show
 // 04. New
 // 05. Comments
+// 06. Flags
 //
 
 // 01. Debates
@@ -541,6 +542,10 @@
         font-size: rem-calc(12);
         margin: rem-calc(6) 0;
         padding: rem-calc(6);
+
+        .divider {
+          color: $text-light;
+        }
       }
 
       .comment-user {
@@ -608,3 +613,17 @@
 .faded {
   opacity: 0.4;
 }
+
+// 06. Flags
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.flag-disable {
+  color: $text-medium;
+  line-height: rem-calc(24);
+  vertical-align: middle;
+}
+
+.flag-active {
+  @extend .flag-disable;
+  color: $delete;
+}

app/assets/stylesheets/participacion.scss

@@ -150,6 +150,25 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.f-dropdown {
+
+  li a {
+    font-size: rem-calc(12);
+
+    &:hover {
+      color: $link-hover;
+    }
+  }
+
+  li:hover, .f-dropdown li:focus {
+    background: white;
+  }
+
+  &.open {
+    outline: none;
+  }
+}
+
 // 04. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -692,13 +711,13 @@ form {
   }
 }
 
-img.admin-avatar, img.moderator-avatar {
+img.avatar, img.admin-avatar, img.moderator-avatar {
   border-radius: rem-calc(1000);
   position: relative;
 }
 
 img.initialjs-avatar {
-  @extend .moderator-avatar;
+  @extend .avatar;
 }
 
 .author-deleted {

app/assets/stylesheets/variables.scss

@@ -38,6 +38,7 @@ $votes-like-act:    #5D9E7F;
 $votes-unlike:      #EF8585;
 $votes-unlike-act:  #BD6A6A;
 
+$delete:            #F04124;
 $check:             #46DB91;
 
 // 03. Forms

app/views/comments/_actions.html.erb

@@ -1,12 +1,16 @@
+<span class="js-flag-as-inappropiate-actions">
+  <%= render 'comments/flag_as_inappropiate_actions', comment: comment %>
+</span>
+
 <span class='js-moderation-actions'>
   <% if can? :hide, comment %>
-    &nbsp;|&nbsp;
+    <span class="divider">&nbsp;&bullet;&nbsp;</span>
     <%= link_to t("admin.actions.hide").capitalize, hide_moderation_comment_path(comment),
                 method: :put, remote: true, data: { confirm: t('admin.actions.confirm') } %>
   <% end %>
 
   <% if can? :hide, comment.user %>
-    &nbsp;|&nbsp;
+    <span class="divider">&nbsp;&bullet;&nbsp;</span>
     <%= link_to t("admin.actions.hide_author").capitalize, hide_moderation_user_path(comment.user_id, debate_id: @debate.id),
                 method: :put, data: { confirm: t('admin.actions.confirm') } %>
   <% end %>

app/views/comments/_comment.html.erb

@@ -58,10 +58,6 @@
           <% end %>
 
           &nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
-
-          <span class="right js-flag-as-inappropiate-actions">
-            <%= render 'comments/flag_as_inappropiate_actions', comment: comment %>
-          </span>
         </div>
 
         <% if comment.as_administrator? %>
@@ -81,11 +77,11 @@
           <%= render 'comments/votes', comment: comment %>
         </span>
 
-        <p class="reply">
+        <div class="reply">
           <%= t("debates.comment.responses", count: comment.children_count) %>
 
           <% if user_signed_in? %>
-            &nbsp;|&nbsp;
+            <span class="divider">&nbsp;|&nbsp;</span>
             <%= link_to(comment_link_text(comment), "",
                         class: "js-add-comment-link", data: {'id': dom_id(comment)}) %>
 
@@ -93,7 +89,7 @@
 
             <%= render 'comments/form', {parent: comment, toggeable: true} %>
           <% end %>
-        </p>
+        </div>
       </div>
 
     <% end %>

app/views/comments/_flag_as_inappropiate_actions.html.erb

@@ -1,6 +1,23 @@
 <% if can? :flag_as_inappropiate, comment %>
-  <%= link_to t('shared.flag_as_inappropiate'), flag_as_inappropiate_comment_path(comment), method: :put, remote: true %>
+  <span class="divider">&nbsp;|&nbsp;</span>
+  <a data-dropdown="drop-comment-flag-<%= comment.id %>" aria-controls="drop-comment-flag-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.flag_as_inappropiate') %>">
+    &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+  </a>
+  <ul id="drop-comment-flag-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <li>
+    <%= link_to t("shared.flag_as_inappropiate"), flag_as_inappropiate_comment_path(comment), method: :put, remote: true %>
+    </li>
+  </ul>
 <% end %>
+
 <% if can? :undo_flag_as_inappropiate, comment %>
-  <%= link_to t('shared.undo_flag_as_inappropiate'), undo_flag_as_inappropiate_comment_path(comment), method: :put, remote: true %>
+  <span class="divider">&nbsp;|&nbsp;</span>
+  <a data-dropdown="drop-comment-unflag-<%= comment.id %>" aria-controls="drop-comment-unflag-<%= comment.id %>" aria-expanded="false" title="<%= t('shared.undo_flag_as_inappropiate') %>">
+    &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+  </a>
+  <ul id="drop-comment-unflag-<%= comment.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <li>
+    <%= link_to t("shared.undo_flag_as_inappropiate"), undo_flag_as_inappropiate_comment_path(comment), method: :put, remote: true %>
+    </li>
+  </ul>
 <% end %>

app/views/debates/_flag_as_inappropiate_actions.html.erb

@@ -1,6 +1,21 @@
 <% if can? :flag_as_inappropiate, debate %>
-  <%= link_to t('shared.flag_as_inappropiate'), flag_as_inappropiate_debate_path(debate), method: :put, remote: true %>
+  <a data-dropdown="drop-debate-flag-<%= debate.id %>" aria-controls="drop-debate-flag-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag_as_inappropiate') %>">
+    &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+  </a>
+  <ul id="drop-debate-flag-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <li>
+    <%= link_to t('shared.flag_as_inappropiate'), flag_as_inappropiate_debate_path(debate), method: :put, remote: true %>
+    </li>
+  </ul>
 <% end %>
+
 <% if can? :undo_flag_as_inappropiate, debate %>
-  <%= link_to t('shared.undo_flag_as_inappropiate'), undo_flag_as_inappropiate_debate_path(debate), method: :put, remote: true %>
+  <a data-dropdown="drop-debate-unflag-<%= debate.id %>" aria-controls="drop-debate-unflag-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.undo_flag_as_inappropiate') %>">
+    &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+  </a>
+  <ul id="drop-debate-unflag-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <li>
+    <%= link_to t('shared.undo_flag_as_inappropiate'), undo_flag_as_inappropiate_debate_path(debate), method: :put, remote: true %>
+    </li>
+  </ul>
 <% end %>

app/views/debates/show.html.erb

@@ -41,8 +41,8 @@
         <span class="bullet">&nbsp;&bullet;&nbsp;</span>
         <i class="icon-comments"></i>&nbsp;
         <%= link_to t("debates.show.comments", count: @debate.comment_threads.count), "#comments" %>
-
-        <span class='right js-flag-as-inappropiate-actions'>
+        <span class="bullet">&nbsp;&bullet;&nbsp;</span>
+        <span class="js-flag-as-inappropiate-actions">
           <%= render 'debates/flag_as_inappropiate_actions', debate: @debate %>
         </span>
       </div>

config/locales/en.yml

@@ -135,7 +135,7 @@ en:
     tags_cloud:
       tags: Topics
     flag_as_inappropiate: Flag as inappropiate
-    undo_flag_as_inappropiate: Undo flag as inappropiate
+    undo_flag_as_inappropiate: Undo flag
     collective: Collective
   mailer:
     comment:

config/locales/es.yml

@@ -135,7 +135,7 @@ es:
     tags_cloud:
         tags: Temas
     flag_as_inappropiate: Denunciar como inapropiado
-    undo_flag_as_inappropiate: Deshacer denunciar como inapropiado
+    undo_flag_as_inappropiate: Deshacer denuncia
     collective: Colectivo
   mailer:
     comment: