From e008d1f642cea4e99ac701563ebc3adf9c339061 Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Fri, 8 Jan 2016 12:45:37 +0100
Subject: [PATCH] Adds new styles for notifications

---
 app/assets/stylesheets/layout.scss            | 73 ++++++++++++++++++-
 app/assets/stylesheets/variables.scss         |  1 +
 app/views/devise/menu/_login_items.html.erb   | 14 +++-
 .../notifications/_notification.html.erb      | 10 ++-
 app/views/notifications/index.html.erb        | 28 ++++---
 config/locales/en.yml                         |  4 +-
 config/locales/es.yml                         |  4 +-
 7 files changed, 112 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d47189d18..329ab5a0e 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -384,7 +384,6 @@ header {
       &:hover {
         background: none;
         color: white;
-        text-decoration: underline;
         transition: text-decoration 275ms;
       }
 
@@ -408,6 +407,7 @@ header {
 
       &:hover, &:focus {
         background-color: #007095 !important;
+        text-decoration: underline;
       }
     }
 
@@ -935,6 +935,77 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   }
 }
 
+.notifications {
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  [class^="icon-"] {
+    font-size: $h4-font-size;
+    vertical-align: middle;
+  }
+
+  .icon-circle {
+    color: #ecf00b;
+    font-size: $tiny-font-size;
+    position: absolute;
+    right: 4px;
+    top: -6px;
+  }
+}
+
+.notifications-list:before {
+  background: $border;
+  content: '';
+  height: 100%;
+  left: 28px;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+
+.notification {
+  display: block;
+  padding: $line-height/2 0 $line-height/2 $line-height*1.5;
+  position: relative;
+
+  &:hover {
+
+    a {
+      text-decoration: none;
+    }
+
+    p:not(.time) {
+      color: $link;
+    }
+
+    &:before {
+      content: "\43";
+    }
+  }
+
+  &:before {
+    background: white;
+    color: $brand;
+    content: "\4d";
+    font-family: "icons" !important;
+    left: 6px;
+    position: absolute;
+  }
+
+  p {
+    color: $text;
+    margin-bottom: 0;
+  }
+
+  .time {
+    font-size: $small-font-size;
+    color: $text-medium;
+  }
+}
+
 // 09. Filters & search
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index 72fb27788..336b09919 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -39,6 +39,7 @@ $h6-font-size:        rem-calc(13);
 $h6-line-height:      rem-calc(17);
 
 $small-font-size:     rem-calc(14);
+$tiny-font-size:      rem-calc(10);
 $line-height:         rem-calc(24);
 
 // 02. Colors
diff --git a/app/views/devise/menu/_login_items.html.erb b/app/views/devise/menu/_login_items.html.erb
index 5f6608f2f..d2460d11d 100644
--- a/app/views/devise/menu/_login_items.html.erb
+++ b/app/views/devise/menu/_login_items.html.erb
@@ -1,5 +1,16 @@
 <ul class="right">
   <% if user_signed_in? %>
+    <li>
+      <%= link_to notifications_path, class: "notifications" do %>
+        <% if current_user.notifications.count > 0 %>
+          <i class="icon-circle"></i>
+          <i class="icon-notification" title="<%= t('layouts.header.new_notifications', count: current_user.notifications.count).html_safe %>">
+          </i>
+        <% else %>
+          <i class="icon-no-notification" title="<%= t('layouts.header.no_notifications') %>"></i>
+        <% end %>
+      <% end %>
+    </li>
     <li>
       <%= link_to(t("layouts.header.my_activity_link"), user_path(current_user)) %>
     </li>
@@ -9,9 +20,6 @@
     <li>
       <%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>
     </li>
-    <li>
-      <%= link_to 'Notificaciones', notifications_path, class: notifications_class_for(current_user) %>
-    </li>
   <% else %>
     <li>
       <%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path)  %>
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb
index 313a5458c..7315f899d 100644
--- a/app/views/notifications/_notification.html.erb
+++ b/app/views/notifications/_notification.html.erb
@@ -1,8 +1,10 @@
 <li id="<%= dom_id(notification) %>" class="notification">
   <%= link_to notification do %>
-    <time><%= l notification.timestamp, format: :datetime %></time>&nbsp;&bull;&nbsp;
-    <span><%= notification.username %> </span>
-    <span><%= t("notifications.index.#{notification_action(notification)}") %></span>
-    <span><%= notification.notifiable.commentable.title %></span>
+    <p>
+      <strong><%= notification.username %></strong>
+      <em><%= t("notifications.index.#{notification_action(notification)}") %></em>
+      <strong><%= notification.notifiable.commentable.title %></strong>
+    </p>
+    <p class="time"><%= l notification.timestamp, format: :datetime %></p>
   <% end %>
 </li>
\ No newline at end of file
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 5eaebefb9..cc9170e48 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -1,14 +1,18 @@
-<% if @notifications.empty? %>
-  <div><%= t("notifications.index.empty_notifications") %></div>
-<% else %>
-  <div class="row">
-    <ul>
-      <%= render @notifications %>
-    </ul>
+<div class="row">
+  <div class="small-12 column">
+    <% if @notifications.empty? %>
+      <div class="alert-box radius info margin-top">
+        <%= t("notifications.index.empty_notifications") %>
+      </div>
+    <% else %>
+      <div class="right margin-top">
+        <%= link_to t("notifications.index.mark_all_as_read"),
+                    mark_all_as_read_notifications_path, method: :put %>
+      </div>
 
-    <div>
-      <%= link_to t("notifications.index.mark_all_as_read"),
-                  mark_all_as_read_notifications_path, method: :put %>
-    </div>
+      <ul class="no-bullet clear notifications-list">
+        <%= render @notifications %>
+      </ul>
+    <% end %>
   </div>
-<% end %>
\ No newline at end of file
+</div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 683db0454..d46c6f5ab 100755
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -29,6 +29,8 @@ en:
       more_information: "More information"
       debates: "Debates"
       proposals: "Proposals"
+      new_notifications: "You have %{count} new notifications"
+      no_notifications: "You don't have new notifications"
     footer:
       description: "This portal uses the %{consul} which is %{open_source}. From Madrid out into the world."
       open_source: "open-source software"
@@ -313,7 +315,7 @@ en:
   notifications:
     index:
       mark_all_as_read: "Mark all as read"
-      empty_notifications: "There are no new notifications."
+      empty_notifications: "You don't have new notifications."
       commented_on_your_debate: "commented on your debate"
       replied_to_your_comment: "replied to your comment on"
   simple_captcha:
diff --git a/config/locales/es.yml b/config/locales/es.yml
index f6fd907de..531456d8f 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -29,6 +29,8 @@ es:
       more_information: "Más información"
       debates: "Debates"
       proposals: "Propuestas"
+      new_notifications: "Tienes %{count} notificaciones nuevas"
+      no_notifications: "No tienes notificaciones nuevas"
     footer:
       description: "Este portal usa la %{consul} que es %{open_source}. De Madrid, para el mundo entero."
       open_source: "software libre"
@@ -313,7 +315,7 @@ es:
   notifications:
     index:
       mark_all_as_read: "Marcar todas como leídas"
-      empty_notifications: "No hay notificaciones nuevas."
+      empty_notifications: "No tienes notificaciones nuevas."
       commented_on_your_debate: "ha comentado en tu debate"
       replied_to_your_comment: "ha respondido a tu comentario en"
   simple_captcha: