activity_notification 0.0.10 → 1.0.0

data/app/controllers/activity_notification/notifications_controller.rb

@@ -152,14 +152,14 @@ module ActivityNotification
       # @param [String] limit Limit to query for notifications
       # @return [Array] Array of notification index
       def load_notification_index(filter, limit)
-        limit = nil unless limit.to_i > 0
+        limit = limit.to_i > 0 ? limit.to_i : nil
         case filter
         when 'opened'
-          @target.opened_notification_index_with_attributes(limit)
+          @target.opened_notification_index_with_attributes({ limit: limit })
         when 'unopened'
-          @target.unopened_notification_index_with_attributes(limit)
+          @target.unopened_notification_index_with_attributes({ limit: limit })
         else
-          @target.notification_index_with_attributes(limit)
+          @target.notification_index_with_attributes({ limit: limit })
         end
       end
 

data/app/mailers/activity_notification/mailer.rb

@@ -5,12 +5,18 @@ if defined?(ActionMailer)
 
     # Sends notification email.
     # @param [Notification] notification Notification instance to send email
-    def send_notification_email(notification)
+    # @param [Hash] options Options for notification email
+    # @option options [String, Symbol] :fallback (:default) Fallback template to use when MissingTemplate is raised
+    def send_notification_email(notification, options = {})
+      options[:fallback] ||= :default
+      if options[:fallback] == :none
+        options.delete(:fallback)
+      end
       if notification.target.notification_email_allowed?(notification.notifiable, notification.key) and 
          notification.notifiable.notification_email_allowed?(notification.target, notification.key)
-        notification_mail(notification)
+        notification_mail(notification, options)
       end
     end
-  
+
   end
 end

data/app/views/activity_notification/mailer/default/default.html.erb

@@ -1,7 +1,12 @@
-<p>Dear <%= @target.mailer_to %></p>
+<p>Dear <%= @notification.target.printable_target_name %></p>
 
-<p>This is a notification of <%= @notifiable.printable_name %> for you.</p>
+<p>
+  <strong><%= @notification.notifier.present? ? @notification.notifier.printable_notifier_name : 'Someone' %></strong>
+  notified you of
+  <%= @notification.notifiable.printable_notifiable_name(@notification.target) %><%= @notification.group.present? ? "in #{@notification.group.printable_group_name}." : "." %>
+</p>
 
-<p><%= link_to "Move to #{@notifiable.printable_name}", move_notification_url_for(@notification, open: true) %></p>
+<p><%= link_to "Move to notified #{@notifiable.printable_type.downcase}", move_notification_url_for(@notification, open: true) %></p>
 
-<p>Thank you!</p>
+<p>Thank you!</p>
+<p><span><%= @notification.created_at.strftime("%b %d %H:%M") %></span></p>

data/app/views/activity_notification/mailer/default/default.text.erb

@@ -0,0 +1,10 @@
+Dear <%= @notification.target.printable_target_name %>
+
+<%= @notification.notifier.present? ? @notification.notifier.printable_notifier_name : 'Someone' %> notified you of <%= @notification.notifiable.printable_notifiable_name(@notification.target) %><%= " in #{@notification.group.printable_group_name}" if @notification.group.present? %>.
+
+<%= "Move to notified #{@notifiable.printable_type.downcase}:" %>
+  <%= move_notification_url_for(@notification, open: true) %>
+
+Thank you!
+
+<%= @notification.created_at.strftime("%b %d %H:%M") %>

data/app/views/activity_notification/notifications/default/_default.html.erb

@@ -1,36 +1,175 @@
-<li>
-  <div>
-  	<%= notification.notifier.present? ? notification.notifier.printable_name : 'Someone' %>
-    <% if notification.group_member_exists? %>
-       <%= " and other #{notification.group_member_count} people" %>
-    <% end %>
-    notified you of <%= notification.notifiable.printable_name %>
-  	<%= "in #{notification.group.printable_name}" if notification.group.present? %>
-  </div>
-  <div>
-    <%= notification.opened? ? "Opened" : "Unopened" %>
-  </div>
-  <div>
-    <%= link_to "Move", move_notification_path_for(notification) %>
-  </div>
-  <% if notification.unopened? %>
-    <div>
-      <%= link_to "Open and move (GET)", move_notification_path_for(notification, open: true) %>
-    </div>
-    <div>
-      <%= link_to "Open and move (POST)", open_notification_path_for(notification, move: true), method: :post %>
-    </div>
-    <div>
-      <%= link_to "Open", open_notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :post %>
-    </div>
-    <div>
-      <%= link_to "Open (Ajax)", open_notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :post, remote: true %>
+<% content_for :notification_content, flush: true do %>
+  <li class="notification_list <%= notification.opened? ? "opened" : "unopened" %>">
+    <div class="notification_list_cover"></div>
+    <div class="list_image"></div>
+    <div class="list_text_wrapper">
+      <p class="list_text">
+        <strong><%= notification.notifier.present? ? notification.notifier.printable_notifier_name : 'Someone' %></strong>
+        <% if notification.group_member_notifier_exists? %>
+          <%= " and #{notification.group_member_notifier_count} other" %>
+          <%= notification.notifier.present? ? notification.notifier.printable_type.pluralize.downcase : 'people' %>
+        <% end %>
+        notified you of
+        <% if notification.notifiable.present? %>
+          <% if notification.group_member_exists? %>
+            <%= " #{notification.group_notification_count} #{notification.notifiable_type.humanize.pluralize.downcase} including" %>
+          <% end %>
+          <%= notification.notifiable.printable_notifiable_name(notification.target) %>
+          <%= "in #{notification.group.printable_group_name}" if notification.group.present? %>
+        <% else %>
+          <% if notification.group_member_exists? %>
+            <%= " #{notification.group_notification_count} #{notification.notifiable_type.humanize.pluralize.downcase}" %>
+          <% else %>
+            <%= " a #{notification.notifiable_type.humanize.singularize.downcase}" %>
+          <% end %>
+          <%= "in #{notification.group.printable_group_name}" if notification.group.present? %>
+          but the notifiable is not found. It may have been deleted.
+        <% end %>
+        <br>
+        <span><%= notification.created_at.strftime("%b %d %H:%M") %></span>
+      </p>
     </div>
+  </li>
+<% end %>
+
+<div class="<%= "notification_#{notification.id}" %>">
+  <% if notification.unopened? %>
+    <%= link_to open_notification_path_for(notification, filter: params[:filter], limit: params[:limit], reload: false), method: :post, remote: true, class: "unopned_wrapper" do %>
+      <div class="unopned_circle"></div>
+      <div class="unopned_description_wrapper">
+        <p class="unopned_description">Open</p>
+      </div>
+    <% end %>
+    <%= link_to open_notification_path_for(notification, move: true), method: :post do %>
+      <%= yield :notification_content %>
+    <% end %>
+    <div class="unopened_wrapper"></div>
+  <% else %>
+    <%= link_to move_notification_path_for(notification) do %>
+      <%= yield :notification_content %>
+    <% end %>
   <% end %>
-  <div>
-    <%= link_to "Destroy", notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :delete %>
-  </div>
-  <div>
-    <%= link_to "Destroy (Ajax)", notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :delete, remote: true %>
-  </div>
-</li>
+</div>
+
+<%#= link_to "Move", move_notification_path_for(notification) %>
+<%# if notification.unopened? %>
+  <%#= link_to "Open and move (GET)", move_notification_path_for(notification, open: true) %
+  <%#= link_to "Open and move (POST)", open_notification_path_for(notification, move: true), method: :post %>
+  <%#= link_to "Open", open_notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :post %>
+  <%#= link_to "Open (Ajax)", open_notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :post, remote: true %>
+<%# end %>
+<%#= link_to "Destroy", notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :delete %>
+<%#= link_to "Destroy (Ajax)", notification_path_for(notification, filter: params[:filter], limit: params[:limit]), method: :delete, remote: true %>
+
+<style>
+  /* unopned_circle */
+  .unopned_wrapper{
+    position: absolute;
+    margin-top: 20px;
+    margin-left: 56px;
+  }
+  .unopned_wrapper .unopned_circle {
+    display: block;
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: #27a5eb;
+    z-index: 2;
+  }
+  .unopned_wrapper:hover > .unopned_description_wrapper{
+    display: block;
+  }
+  .unopned_wrapper .unopned_description_wrapper {
+    display: none;
+    position: absolute;
+    margin-top: 26px;
+    margin-left: -24px;
+  }
+  .unopned_wrapper .unopned_description_wrapper .unopned_description {
+    position: absolute;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 4px 12px;
+    z-index: 999;
+  }
+  .unopned_wrapper .unopned_description_wrapper .unopned_description:before {
+     border: solid transparent;
+     border-top-width: 0;
+     content: "";
+     display: block;
+     position: absolute;
+     width: 0;
+     left: 50%;
+     top: -5px;
+     margin-left: -5px;
+     height: 0;
+     border-width: 0 5px 5px 5px;
+     border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+     z-index: 0;
+  }
+
+  /* list */
+  .notification_list {
+    padding: 15px 10px;
+    position: relative;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .notification_list.unopened {
+    background-color: #eeeff4;
+  }
+  .notification_list:hover {
+    background-color: #f8f9fb;
+  }
+  .notification_list:last-child {
+    border-bottom: none;
+  }
+  .notification_list:after{
+    content: "";
+    clear: both;
+    display: block;
+  }
+  .notification_list .notification_list_cover{
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+  }
+  .notification_list .list_image {
+    float: left;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: #979797;
+  }
+  .notification_list .list_text_wrapper {
+    float: left;
+    width: calc(100% - 60px);
+    margin-left: 20px;
+  }
+  .notification_list .list_text_wrapper .list_text {
+    color: #4f4f4f;
+    font-size: 14px;
+    line-height: 1.4;
+    margin-top: 0;
+    height: auto;
+    font-weight: normal;
+  }
+  .notification_list .list_text_wrapper .list_text strong{
+    font-weight: bold;
+  }
+  .notification_list .list_text_wrapper .list_text span {
+    color: #979797;
+    font-size: 13px;
+  }
+</style>

data/app/views/activity_notification/notifications/default/_index.html.erb

@@ -1,14 +1,122 @@
-<div>
-  <%= link_to open_all_notifications_path_for(@target), method: :post, remote: true,
-      class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
-    <div id="notification_count"><%= @target.unopened_notification_count %></div>
-  <% end %>
-
-  <!-- Make this dropdown -->
-  <ul class="dropdown-menu">
-    <div id="notification_index">
-      <p>Notifications</p>
+<div class="notification_wrapper">
+  <a class="dropdown_notification">
+    <p><span class="notification_count"><span class="<%= 'unopened' if @target.has_unopened_notifications? %>"><%= @target.unopened_notification_count %></span></span></p>
+  </a>
+  <div class="notification_list_wrapper">
+    <div class="notification_header_wrapper">
+      <p class="notification_header_title">
+        Notifications
+      </p>
+      <p class="notification_header_menu">
+        <%= link_to "Open all", open_all_notifications_path_for(@target), method: :post, remote: true %>
+      </p>
+    </div>
+    <div class="notifications">
       <%= yield :notification_index %>
     </div>
-  </ul>
+    <%= link_to notifications_path_for(@target) do %>
+      <div class="notification_link_wrapper">
+        <p class="notification_link">
+          See notifications
+        </p>
+      </div>
+    <% end %>
+  </div>
 </div>
+
+<style>
+  .notification_wrapper {
+    margin-left: 20px;
+    margin-right: 10px;
+    float: left;
+    position: relative;
+  }
+  .notification_wrapper .dropdown_notification{
+    cursor: pointer;
+  }
+  .notification_wrapper .dropdown_notification p span span{
+    color: #fff;
+    background-color: #e5e5e5;
+    border-radius: 4px;
+    font-size: 12px;
+    padding: 4px 8px;
+  }
+  .notification_wrapper .dropdown_notification p span span.unopened{
+    background-color: #f87880;
+  }
+  .notification_wrapper.open .notification_list_wrapper {
+    display: block;
+  }
+  .notification_wrapper .notification_list_wrapper {
+    display: none;
+    z-index: 999;
+    width: 330px;
+    height: 500px;
+    border: 1px solid #e5e5e5;
+    position: absolute;
+    top: calc(100% + 20px);
+    right: -10px;
+    background-color: #fff;
+  }
+  .notification_wrapper .notification_list_wrapper .notification_header_wrapper {
+    position: relative;
+    width: 330px;
+    height: 37px;
+    border-bottom: 1px solid #e5e5e5;
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+  .notification_wrapper .notification_list_wrapper .notification_header_wrapper .notification_header_title {
+    position: absolute;
+    top: 4px;
+    left: 10px;
+    font-size: 14px;
+  }
+  .notification_wrapper .notification_list_wrapper .notification_header_wrapper .notification_header_menu {
+    position: absolute;
+    top: 4px;
+    right: 10px;
+    font-size: 14px;
+  }
+
+  .notification_wrapper .notification_list_wrapper .notifications {
+    position: relative;
+    width: 330px;
+    height: calc(500px - 37px - 37px);
+    overflow: scroll;
+  }
+  .notification_wrapper .notification_list_wrapper .notification_link_wrapper{
+    position: absolute;
+    bottom: 0;
+    width: 330px;
+    height: 26px;
+    border-top: 1px solid #e5e5e5;
+    padding: 4px 0 8px 0;
+    text-align: center;
+    background-color: #fff;
+    z-index: 2;
+  }
+  .notification_wrapper .notification_list_wrapper .notification_link_wrapper:hover{
+    background-color: #f8f9fb;
+  }
+  .notification_wrapper .notification_list_wrapper .notification_link_wrapper .notification_link{
+    text-align: center;
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  $(document).click(function(e){
+      if( !$(e.target).is(".notification_list_cover") && !$(e.target).is(".notification_wrapper a") ){
+        if($(".notification_wrapper").hasClass("open") && !$(".notification_wrapper").hasClass("opened")){
+          $(".notification_wrapper").addClass("opened");
+        }else if($(".notification_wrapper").hasClass("opened")){
+          $(".notification_wrapper").removeClass("open").removeClass("opened");
+        }
+      }
+  });
+
+  $(".dropdown_notification").click(function(){
+    $(this).parent().toggleClass("open");
+  });
+</script>

data/app/views/activity_notification/notifications/default/destroy.js.erb

@@ -1,2 +1,2 @@
-$("#notification_count").html("<%= @target.unopened_notification_count %>");
-$("#notifications").html("<%= escape_javascript( render_notification(@notifications, fallback: "default") ) %>");
+$(".notification_count").html("<span class=\"<%= 'unopened' if @target.has_unopened_notifications? %>\"><%= @target.unopened_notification_count %></span>");
+$("<%= ".notification_#{@notification.id}" %>").html("<%= escape_javascript( render_notification(@notification, fallback: :default) ) %>");

data/app/views/activity_notification/notifications/default/index.html.erb

@@ -1,17 +1,28 @@
-<h1>Notifications for <%= @target.printable_name %></h1>
-<div id="notification_count"><%= @target.unopened_notification_count %></div>
-
-<div>
-  <%= link_to "Open all", open_all_notifications_path_for(@target), method: :post %>
-</div>
-<div>
-  <%= link_to "Open all (ajax)", open_all_notifications_path_for(@target), method: :post, remote: true %>
-</div>
-<ul>
-  <div id="notifications">
-    <%= render_notification(@notifications, fallback: :default) %>
-    <%#= render_notification(@notifications, fallback: :text) %>
+<div class="notification_wrapper">
+  <div class="notification_header">
+    <h1>Notifications to <%= @target.printable_target_name %> <%= link_to open_all_notifications_path_for(@target), method: :post, remote: true do %><span class="notification_count"><span class="<%= 'unopened' if @target.has_unopened_notifications? %>"><%= @target.unopened_notification_count %></span></span><% end %></h1>
   </div>
-</ul>
+  <%#= link_to "Open all", open_all_notifications_path_for(@target), method: :post %>
+  <%#= link_to "Open all (ajax)", open_all_notifications_path_for(@target), method: :post, remote: true %>
+  <ul>
+    <div class="notifications">
+      <%= render_notification @notifications, fallback: :default %>
+      <%#= render_notification @notifications, fallback: :text %>
+    </div>
+  </ul>
+</div>
 
 <%#= render_notifications_of @target, fallback: :default, index_content: :with_attributes %>
+
+<style>
+  .notification_wrapper .notification_header h1 span span{
+    color: #fff;
+    background-color: #e5e5e5;
+    border-radius: 4px;
+    font-size: 12px;
+    padding: 4px 8px;
+  }
+  .notification_wrapper .notification_header h1 span span.unopened{
+    background-color: #f87880;
+  }
+</style>