Improve set read/unread in notifications dropdown

Changelog.md

@@ -25,6 +25,7 @@ Read more in [#4249](https://github.com/diaspora/diaspora/pull/4249) and [#4883]
 * Reorder and reword items on user settings page [#4912](https://github.com/diaspora/diaspora/pull/4912)
 * SPV: Improve padding and interaction counts [#4426](https://github.com/diaspora/diaspora/pull/4426)
 * Remove auto 'mark as read' for notifications [#4810](https://github.com/diaspora/diaspora/pull/4810)
+* Improve set read/unread in notifications dropdown [#4869](https://github.com/diaspora/diaspora/pull/4869) 
 
 ## Bug fixes
 * Fix email body language when invite a friend [#4832](https://github.com/diaspora/diaspora/issues/4832)

app/assets/javascripts/widgets/notifications.js

@@ -51,7 +51,7 @@
     };
     this.readClick = function() {
       $.ajax({
-        url: "/notifications/" + $(this).data("guid"),
+        url: "/notifications/" + $(this).closest(".stream_element,.notification_element").data("guid"),
         data: { set_unread: false },
         type: "PUT",
         success: self.clickSuccess
@@ -59,42 +59,46 @@
     };
     this.setUpUnread = function( an_obj ) {
       an_obj.removeClass("read").addClass( "unread" );
-      an_obj.find('.unread-setter').hide();
-      an_obj.find('.unread-setter').unbind("click");
-      an_obj.unbind( "mouseenter mouseleave" );
-      an_obj.click(self.readClick);
+      an_obj.find('.unread-toggle')
+        .unbind("click")
+        .click(self.readClick)
+        .find('.entypo')
+        .tooltip('destroy')
+        .removeAttr('data-original-title')
+        .attr('title', Diaspora.I18n.t('notifications.mark_read'))
+        .tooltip();
     }
     this.setUpRead = function( an_obj ) {
       an_obj.removeClass("unread").addClass( "read" );
-      an_obj.unbind( "click" );
-      an_obj.find(".unread-setter").click(Diaspora.page.header.notifications.unreadClick);
-      an_obj.hover(
-        function () {
-          $(this).find(".unread-setter").show();
-        },
-        function () {
-          $(this).find(".unread-setter").hide();
-        }
-      );
+      an_obj.find('.unread-toggle')
+        .unbind("click")
+        .click(self.unreadClick)
+        .find('.entypo')
+        .tooltip('destroy')
+        .removeAttr('data-original-title')
+        .attr('title', Diaspora.I18n.t('notifications.mark_unread'))
+        .tooltip();
     }
     this.clickSuccess = function( data ) {
       var itemID = data["guid"]
       var isUnread = data["unread"]
-      if ( isUnread ) {
-        self.incrementCount();
-      }else{
-        self.decrementCount();
-      }
       self.notificationMenu.find('.read,.unread').each(function(index) {
         if ( $(this).data("guid") == itemID ) {
           if ( isUnread ) {
+            self.notificationMenu.find('a#mark_all_read_link').removeClass('disabled')
             self.setUpUnread( $(this) )
           } else {
             self.setUpRead( $(this) )
           }
         }
       });
-      if ( self.notificationPage != null ) {
+      if ( self.notificationPage == null ) {
+        if ( isUnread ) {
+          self.incrementCount();
+        }else{
+          self.decrementCount();
+        }
+      } else {
         var type = $('.notification_element[data-guid=' + data["guid"] + ']').data('type');
         self.notificationPage.updateView(data["guid"], type, isUnread);
       }

app/assets/stylesheets/application.css.sass

@@ -239,6 +239,12 @@ ul.as-selections
 .grey *
   :color $text-grey
 
+.pull-left
+  :float left
+
+.pull-right
+  :float right
+
 .details,
 .details *
   :font
@@ -543,39 +549,6 @@ input[type="search"]
 h3 span.current_gs_step
   :color #22C910
 
-#notifications
-  :z-index 10
-  :position fixed
-  :bottom 21px
-  :right 12px
-
-  .notification
-    @include border-radius(5px)
-    @include box-shadow(0,2px,3px,#333)
-
-    :margin
-      :bottom 10px
-
-    :background
-      :color rgb(30,30,30)
-      :color rgba(30,30,30,0.9)
-
-    :min-width 200px
-    :padding 12px
-    :color #fff
-
-    :vertical
-      :align middle
-
-    .avatar
-      :display inline-block
-      :height 20px
-      :width 20px
-      :margin
-        :right 5px
-      :vertical
-        :align middle
-
 ul#request_result
   :padding 0
   :margin 0
@@ -949,27 +922,6 @@ h1.tag
   .month
     :font-size 14px
 
-.notification_count
-  :background
-    :color #f0f0f0
-  :color $text-grey
-  :font
-    :weight normal
-
-  :padding 0 5px
-    :left 11px
-  :margin
-    :right 5px
-  :border
-    :radius 5px
-
-  &.unread
-    :background
-      :color lighten($red, 5%)
-    :color #eee !important
-    :font
-      :weight bold
-
 .subtle
   :color $text-grey
   :font

app/assets/stylesheets/bootstrap-headerfix.sass

@@ -38,5 +38,3 @@ header
       .timeago
         border: medium none
         cursor: text
-      .unread-setter
-        display: none

app/assets/stylesheets/header.css.scss

@@ -124,16 +124,7 @@ body > header {
       width: 380px;
       display: none;
       float: left;
-      color: #444;
-
-      .right {
-        font-size: smaller;
-        display: inline;
-        position: relative;
-        float: right;
-        top: 4px;
-        font-weight: bold;
-      }
+      color: $grey;
 
       a { color: $blue; }
       a.disabled {
@@ -142,16 +133,21 @@ body > header {
       }
 
       .header {
-        padding: 10px;
+        border-bottom: 1px solid $border-grey;
+        padding: 5px 10px 5px 5px;
 
         h4 {
           padding-bottom: 0;
           margin-bottom: 0;
+          font-size: 16px;
+          color: $black;
         }
-      }
 
-      .notification_element,
-      .header { border-bottom: 1px solid $border-grey; }
+        a {
+          font-size: 11px;
+          font-weight: bold;
+        }
+      }
 
       .ajax_loader {
         text-align: center;
@@ -159,22 +155,49 @@ body > header {
       }
 
       .notification_element {
-        padding: 10px;
-        padding-left: 50px;
-        min-height: 30px;
-
-        &:hover { background-color: $highlight-white; }
+        border-bottom: 1px solid $border-grey;
+        padding: 5px;
+        min-height: 35px;
+        line-height: 18px;
 
         > .avatar {
-          height: 30px;
-          width: 30px;
+          height: 35px;
+          width: 35px;
           float: left;
-          margin-left: -40px;
+        }
+
+        .notification_message {
+          margin-left: 40px;
+        }
+
+        .unread-toggle {
+          padding: 9px 5px;
+          .entypo {
+            cursor: pointer;
+            color: lighten($black,75%);
+            font-size: 17px;
+            line-height: 17px;
+          }
         }
 
         &.unread {
           background-color: $background-grey;
-          color: #000;
+          color: $black;
+          .unread-toggle {
+            .entypo { color: $black; }
+          }
+        }
+      }
+
+      .view_all {
+        background-color: $blue;
+        border-bottom: 1px solid $border-dark-grey;
+        text-align: center;
+        a {
+          display: block;
+          padding: 5px;
+          color: white;
+          font-size: 12px;
           font-weight: bold;
         }
       }

app/assets/templates/header_tpl.jst.hbs

@@ -43,15 +43,10 @@
 
       <div id="notification_dropdown">
         <div class="header">
-          <div class="right">
-
+          <div class="pull-right">
             <a href="#" id="mark_all_read_link" class="{{#unless current_user.notifications_count}}disabled{{/unless}}">
               {{t "header.mark_all_as_read"}}
             </a>
-            |
-            <a href="/notifications" id="view_all_notifications">
-              {{t "header.view_all"}}
-            </a>
           </div>
 
           <h4>
@@ -64,6 +59,11 @@
             <img alt="Ajax-loader" src="{{imageUrl "ajax-loader.gif"}}">
           </div>
         </div>
+        <div class="view_all">
+          <a href="/notifications" id="view_all_notifications">
+            {{t "header.view_all"}}
+          </a>
+        </div>
       </div>
   </div>
 

app/views/notifications/_notify_popup_item.haml

 .notification_element{:data=>{:guid => n.id, :type => (Notification.types.key(n.type) || '')}, :class => (n.unread ? "unread" : "read")}
+  .pull-right.unread-toggle
+    %i.entypo.eye{ :title => (n.unread ? t('notifications.index.mark_read') : t('notifications.index.mark_unread')) }
   = person_image_tag n.actors.first, :thumb_small
-  = notification_message_for(n)
-  %div
-    = timeago(n.created_at)
-    = link_to t('notifications.index.mark_unread'), "#", :class => "unread-setter"
+  .notification_message
+    = notification_message_for(n)
+    %div= timeago(n.created_at)