From 232e4fa2362e5fd6d58be066eb74eeee10a2e053 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Fri, 21 Mar 2014 22:10:34 +0100
Subject: [PATCH] Improve set read/unread in notifications dropdown
---
Changelog.md | 1 +
.../javascripts/widgets/notifications.js | 46 +++++++------
app/assets/stylesheets/application.css.sass | 60 ++--------------
.../stylesheets/bootstrap-headerfix.sass | 2 -
app/assets/stylesheets/header.css.scss | 69 ++++++++++++-------
app/assets/templates/header_tpl.jst.hbs | 12 ++--
.../notifications/_notify_popup_item.haml | 9 +--
7 files changed, 89 insertions(+), 110 deletions(-)
diff --git a/Changelog.md b/Changelog.md
index 93c0a3fa29..8f25dd687f 100644
--- a/Changelog.md
+++ b/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)
diff --git a/app/assets/javascripts/widgets/notifications.js b/app/assets/javascripts/widgets/notifications.js
index d8d875a857..baac01c93d 100644
--- a/app/assets/javascripts/widgets/notifications.js
+++ b/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);
}
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 08b7a445b8..96184c3158 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/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
diff --git a/app/assets/stylesheets/bootstrap-headerfix.sass b/app/assets/stylesheets/bootstrap-headerfix.sass
index d0b8cc72d4..d89c51a992 100644
--- a/app/assets/stylesheets/bootstrap-headerfix.sass
+++ b/app/assets/stylesheets/bootstrap-headerfix.sass
@@ -38,5 +38,3 @@ header
.timeago
border: medium none
cursor: text
- .unread-setter
- display: none
diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss
index 4316c65472..3b871d8f70 100644
--- a/app/assets/stylesheets/header.css.scss
+++ b/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;
}
}
diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs
index b0ef0bffae..99d64aeddb 100644
--- a/app/assets/templates/header_tpl.jst.hbs
+++ b/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>
diff --git a/app/views/notifications/_notify_popup_item.haml b/app/views/notifications/_notify_popup_item.haml
index 10b502d6de..ab7a438687 100644
--- a/app/views/notifications/_notify_popup_item.haml
+++ b/app/views/notifications/_notify_popup_item.haml
@@ -1,6 +1,7 @@
.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)
--
GitLab