Change mark read link on notifications page

Changelog.md

@@ -10,6 +10,7 @@
 * Port settings pages (account, profile, privacy, services) to Bootstrap [#5039](https://github.com/diaspora/diaspora/pull/5039)
 * Port contacts and community spotlight pages to Bootstrap [#5118](https://github.com/diaspora/diaspora/pull/5118)
 * Redesign login page [#5112](https://github.com/diaspora/diaspora/pull/5112)
+* Change mark read link on notifications page [#5141](https://github.com/diaspora/diaspora/pull/5141)
 
 ## Bug fixes
 * Fix hiding of poll publisher on close [#5029](https://github.com/diaspora/diaspora/issues/5029)

app/assets/javascripts/app/views/notifications_view.js

@@ -6,6 +6,7 @@ app.views.Notifications = Backbone.View.extend({
 
   initialize: function() {
     Diaspora.page.header.notifications.setUpNotificationPage(this);
+    $(".unread-toggle .entypo").tooltip();
   },
 
   toggleUnread: function(evt) {
@@ -54,11 +55,19 @@ app.views.Notifications = Backbone.View.extend({
     note = $('.stream_element[data-guid=' + guid + ']');
     if(unread) {
       note.removeClass("read").addClass("unread");
-      $(".unread-toggle", note).text(Diaspora.I18n.t('notifications.mark_read'));
+      $(".unread-toggle .entypo", note)
+        .tooltip('destroy')
+        .removeAttr("data-original-title")
+        .attr('title',Diaspora.I18n.t('notifications.mark_read'))
+        .tooltip();
     }
     else {
       note.removeClass("unread").addClass("read");
-      $(".unread-toggle", note).text(Diaspora.I18n.t('notifications.mark_unread'));
+      $(".unread-toggle .entypo", note)
+        .tooltip('destroy')
+        .removeAttr("data-original-title")
+        .attr('title',Diaspora.I18n.t('notifications.mark_unread'))
+        .tooltip();
     }
 
     all_notes.text( function(i,text) { return parseInt(text) + change });

app/assets/stylesheets/notifications.css.scss

@@ -58,7 +58,10 @@
 
       &.unread {
         background-color: $background-grey;
-        .unread-toggle { opacity: 1 !important; }
+        .unread-toggle {
+          opacity: 1 !important;
+          .entypo { color: $black; }
+        }
       }
 
       &:hover {
@@ -71,9 +74,14 @@
       }
 
       .unread-toggle {
+        padding: 9px 5px;
+        .entypo {
+          cursor: pointer;
+          color: lighten($black,75%);
+          font-size: 17px;
+          line-height: 17px;
+        }
         opacity: 0;
-        margin-top: 4px;
-        float: right;
       }
 
       .btn-group.aspect_membership_dropdown { margin: 5px 0; }

app/views/notifications/_notification.html.haml

@@ -1,6 +1,6 @@
 .media.stream_element{:data=>{:guid => note.id, :type => (Notification.types.key(note.type) || '') }, :class => (note.unread ? 'unread' : 'read')}
-  %button.btn.btn-link.btn-small.unread-toggle
-    = note.unread ? t('notifications.index.mark_read') : t('notifications.index.mark_unread')
+  .unread-toggle.pull-right
+    %i.entypo.eye{ :title => (note.unread ? t('notifications.index.mark_read') : t('notifications.index.mark_unread')) }
   - if note.type == "Notifications::StartedSharing" && contact = current_user.contact_for(note.effective_target)
     .pull-right
       = aspect_membership_dropdown(contact, note.effective_target, 'left')

spec/javascripts/app/views/notifications_view_spec.js

@@ -61,16 +61,16 @@ describe("app.views.Notifications", function(){
       expect(parseInt(badge.text())).toBe(count);
     });
 
-    it('toggles the unread class and changes the link text', function() {
+    it('toggles the unread class and changes the title', function() {
       this.view.updateView(this.readN.data('guid'), this.readN.data('type'), true);
       expect(this.readN.hasClass('unread')).toBeTruethy;
       expect(this.readN.hasClass('read')).toBeFalsy;
-      expect(this.readN.find('.unread-toggle').text()).toContain(Diaspora.I18n.t('notifications.mark_read'));
+      expect(this.readN.find('.unread-toggle .entypo').data('original-title')).toBe(Diaspora.I18n.t('notifications.mark_read'));
 
       this.view.updateView(this.readN.data('guid'), this.readN.data('type'), false);
       expect(this.readN.hasClass('read')).toBeTruethy;
       expect(this.readN.hasClass('unread')).toBeFalsy;
-      expect(this.readN.find('.unread-toggle').text()).toContain(Diaspora.I18n.t('notifications.mark_unread'));
+      expect(this.readN.find('.unread-toggle .entypo').data('original-title')).toBe(Diaspora.I18n.t('notifications.mark_unread'));
     });
   });
 });