From cfd25042b6e5ec6c7aae24059e1798a407cbcc16 Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Wed, 19 Aug 2015 18:58:52 +0200
Subject: [PATCH] Adds styles for comment as moderator

---
 app/assets/images/moderator_avatar.png    | Bin 0 -> 1926 bytes
 app/assets/stylesheets/debates.scss       |   5 +++++
 app/assets/stylesheets/participacion.scss |  23 ++++++++++++++--------
 app/assets/stylesheets/variables.scss     |   3 ++-
 app/views/comments/_comment.html.erb      |  19 +++++++++++++++---
 app/views/comments/_form.html.erb         |   9 ++++++++-
 config/locales/en.yml                     |   4 +++-
 config/locales/es.yml                     |   4 +++-
 8 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/images/moderator_avatar.png

diff --git a/app/assets/images/moderator_avatar.png b/app/assets/images/moderator_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c726e57beee873d24c8d300ce31bb149b600154
GIT binary patch
literal 1926
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
C4i<y}

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index dd29774a5..bbe0d034d 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -567,6 +567,11 @@
           background: $comment-author;
           padding: rem-calc(6) rem-calc(12);
         }
+
+        &.is-moderator {
+          background: $comment-moderator;
+          padding: rem-calc(6) rem-calc(12);
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss
index e6aea4db2..15becbaf5 100644
--- a/app/assets/stylesheets/participacion.scss
+++ b/app/assets/stylesheets/participacion.scss
@@ -548,19 +548,19 @@ form {
     line-height: $line-height;
   }
 
-  input[type]:not([type=submit]):not([type=file]) {
+  input[type]:not([type=submit]):not([type=file]):not([type=checkbox]) {
     background: $input-bg;
     height: rem-calc(48);
     margin-bottom: rem-calc(16);
   }
 
-  input[type="checkbox"] {
-    height: rem-calc(24) !important;
-    margin: 0 !important;
+  input[type="checkbox"] + label,
+  input[type="radio"] + label {
+    margin-right: 0;
   }
 
   input[type=file] {
-    margin: rem-calc(12) 0;
+    margin: rem-calc(12) 0 rem-calc(12) rem-calc(6);
   }
 
   .note {
@@ -579,8 +579,7 @@ form {
     font-size: rem-calc(14);
     font-weight: normal;
     line-height: $line-height;
-    margin: 0 0 0 rem-calc(6);
-    vertical-align: top;
+    vertical-align: middle;
   }
 
   .captcha {
@@ -591,6 +590,10 @@ form {
       margin-bottom: 0 !important;
     }
   }
+
+  .button.margin-top {
+    margin-top: rem-calc(24);
+  }
 }
 
 // 09. Alerts
@@ -689,11 +692,15 @@ form {
   }
 }
 
-img.initialjs-avatar, img.avatar {
+img.moderator-avatar {
   border-radius: rem-calc(1000);
   position: relative;
 }
 
+img.initialjs-avatar {
+  @extend .moderator-avatar;
+}
+
 .author-deleted {
   background-color: rgba(255,255,255,.5);
   color: rgba(0,0,0,.4);
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index 93107e3d2..1f06906d6 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -77,8 +77,9 @@ $author:            #008CCF;
 $association:       #C0392B;
 
 $comment-author:    rgba(45,144,248,.15);
-$comment-official:  rgba(70,219,145,.3);
 $comment-level-5:   rgba(255,241,204,1);
+$comment-moderator: rgba(45,144,248,.15);
+$comment-official:  rgba(70,219,145,.3);
 
 // 06. Responsive
 // - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index 0d922be04..d0d1dcd7c 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -13,14 +13,26 @@
       <% if comment.user.hidden? %>
         <i class="icon-deleted user-deleted"></i>
       <% end %>
-
+<!--
+      <% if comment.user.moderator? %> <!-- AND has activated CHECKBOX comment as moderator ->
+        <%= image_tag('moderator_avatar.png', size: 32, class: "moderator-avatar left") %>
+      <% else %>
+        <%= avatar_image(comment.user, size: 32, class: "left") %>
+      <% end %>
+-->
       <div class="comment-body">
         <div class="comment-info">
 
           <% if comment.user.hidden? %>
             <span class="user-name"><%= t("debates.comment.user_deleted") %></span>
           <% else %>
-            <span class="user-name"><%= comment.user.name %></span>
+
+            <% if comment.user.moderator? %> <!-- AND activate moderator CHECKBOX -->
+              <span class="user-name"><%= t("debates.comment.moderator") %></span>
+            <% else %>
+              <span class="user-name"><%= comment.user.name %></span>
+            <% end %>
+
             <% if comment.user.official? %>
               &nbsp;&bullet;&nbsp;
               <span class="label round level-<%= comment.user.official_level %>">
@@ -52,6 +64,8 @@
           <p class="comment-user level-<%= comment.user.official_level %> is-author"><%= comment.body %></p>
         <% elsif comment.user.official? %>
           <p class="comment-user level-<%= comment.user.official_level %>"><%= comment.body %></p>
+        <% elsif comment.user.moderator? %> <!-- AND has activated CHECKBOX comment as moderator & all badges are hidden (100% anonymous) -->
+          <p class="comment-user is-moderator"><%= comment.body %></p>
         <% elsif comment.user_id == @debate.author_id %>
           <p class="comment-user is-author"><%= comment.body %></p>
         <% else %>
@@ -83,6 +97,5 @@
       <div class="comment-children">
         <%= render comment.children.with_hidden.reorder('id DESC, lft') %>
       </div>
-
   </div>
 </div>
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 5e34a9f84..45cdcecab 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -4,6 +4,13 @@
     <%= f.hidden_field :commentable_type, value: parent.class %>
     <%= f.hidden_field :commentable_id, value: parent.id %>
 
-    <%= f.submit comment_button_text(parent), class: "button radius small" %>
+    <%= f.submit comment_button_text(parent), class: "button radius small inline-block" %>
+
+    <!-- if user is moderator
+    <div class="right">
+      <%#= f.check_box :, label: false %>
+      <%#= f.label :, t("comments.form.comment_as_moderator"), class: "checkbox" %>
+    </div>
+    end -->
   <% end %>
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b47d06c44..ed6f1b2ae 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -49,6 +49,7 @@ en:
         other: "%{count} votes"
     comment:
       author: Debate's author
+      moderator: Moderator
       deleted: This comment has been deleted
       user_deleted: Deleted user
       responses:
@@ -94,7 +95,8 @@ en:
       recommendation_three: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
   comments:
     form:
-        leave_comment: Write a comment
+      leave_comment: Write a comment
+      comment_as_moderator: Comentar como moderador
   comments_helper:
     comment_link: Comment
     comment_button: Publish comment
diff --git a/config/locales/es.yml b/config/locales/es.yml
index ef903082f..31be240ba 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -49,6 +49,7 @@ es:
         other: "%{count} votos"
     comment:
       author: Autor del debate
+      moderator: Moderador
       deleted: Este comentario ha sido eliminado
       user_deleted: Usuario eliminado
       responses:
@@ -94,7 +95,8 @@ es:
       recommendation_three: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
   comments:
     form:
-        leave_comment: Deja tu comentario
+      leave_comment: Deja tu comentario
+      comment_as_moderator: Comentar como moderador
   comments_helper:
     comment_link: Comentar
     comment_button: Publicar comentario