Improve set read/unread in notifications dropdown
This commit is contained in:
Steffen van Bergerem
parent
b64e418020
commit
232e4fa236
7 changed files with 89 additions and 110 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -38,5 +38,3 @@ header
|
|||
.timeago
|
||||
border: medium none
|
||||
cursor: text
|
||||
.unread-setter
|
||||
display: none
|
||||
|
|
|
|||
|
|
@ -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,39 +133,71 @@ 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;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.notification_element,
|
||||
.header { border-bottom: 1px solid $border-grey; }
|
||||
|
||||
.ajax_loader {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue