nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Keeping badges on the header

Browse source
This commit is contained in:
augier 2015-08-23 14:27:42 +02:00
parent a7bd029526
commit 4364a80330
6 changed files with 121 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/notifications_view.js
View file

@ -54,7 +54,7 @@ app.views.Notifications = Backbone.View.extend({
var change = unread ? 1 : -1,
allNotes = $(".list-group > a:eq(0) .badge"),
typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
headerBadge = $("#notifications-link .badge"),
headerBadge = $(".notifications-link .badge"),
note = $(".stream_element[data-guid=" + guid + "]"),
markAllReadLink = $("a#mark_all_read_link"),
translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread";

2
app/assets/stylesheets/bootstrap-variables.scss vendored
View file

@ -363,7 +363,7 @@ $navbar-height: 50px;
// $navbar-border-radius: $border-radius-base
// $navbar-padding-horizontal: floor(($grid-gutter-width / 2))
// $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2)
// $navbar-collapse-max-height: 340px
$navbar-collapse-max-height: 480px;
// $navbar-default-color: #777
// $navbar-default-bg: #f8f8f8

155
app/assets/stylesheets/header.scss
View file

@ -9,8 +9,15 @@ header > .dark-header > nav {
@media (max-width: $grid-float-breakpoint-max) {
.col-lg-10 { padding: 0; }
.navbar-header > .nav li { display: inline-block !important; }
.nav-badge {
color: $navbar-inverse-link-color;
padding-left: 12px;
padding-right: 12px;
&:hover { color: $navbar-inverse-link-hover-color; }
&:hover, &:focus { background-color: transparent; }
}
#navbar-collapse {
&.collapse.in { overflow: visible; }
.form-group, .twitter-typeahead {
display: block !important;
margin-bottom: 0;
@ -29,79 +36,6 @@ header > .dark-header > nav {
width: 150px;
}
}
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
margin-left: 20px;
& > li { height: 50px; }
.dropdown > a:focus { outline: 0px none; }
.dropdown-open {
background-color: $dropdown-bg;
& > a { color: $dropdown-link-color; }
.dropdown-menu { display: block; }
}
.dropdown-menu {
border-top: none;
margin-left: -1px;
padding: 0px;
width: 400px;
.avatar {
width: 35px;
height: 35px;
}
.header {
padding: 10px;
border-bottom: 1px solid $border-grey;
h4 { margin: 5px 0; }
}
.notifications {
position: relative;
max-height: 350px;
}
.stream_element.media {
padding: 5px;
.tooltip { position: fixed; }
.unread-toggle {
margin-right: 10px;
opacity: 1;
}
& > .pull-right > .aspect_membership_dropdown { display: none; }
}
.ajax-loader {
border-bottom: 1px solid $border-grey;
padding: 10px;
.spinner {
height: 30px;
width: 30px;
}
}
.view_all {
background-color: $link-color;
border-top: 3px solid $white;
text-align: center;
a {
color: $white;
display: block;
font-weight: bold;
padding: 5px;
&:hover { text-decoration: none; }
}
}
}
}
[class^="entypo-"], [class*="entypo-"] {
color: inherit;
font-size: $font-size-h3;
vertical-align: middle;
}
.nav-badge {
margin-bottom: -2px;
.badge {
background-color: $brand-danger;
position: absolute;
right: 10px;
top: 10px;
}
}
#user_menu {
&.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
.dropdown-toggle {
@ -124,6 +58,79 @@ header > .dark-header > nav {
}
}
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
& > li { height: 50px; }
.dropdown > a:focus { outline: 0px none; }
.dropdown-open {
background-color: $dropdown-bg;
& > a { color: $dropdown-link-color; }
.dropdown-menu { display: block; }
}
.dropdown-menu {
border-top: none;
margin-left: -1px;
padding: 0px;
width: 400px;
.avatar {
width: 35px;
height: 35px;
}
.header {
padding: 10px;
border-bottom: 1px solid $border-grey;
h4 { margin: 5px 0; }
}
.notifications {
position: relative;
max-height: 350px;
}
.stream_element.media {
padding: 5px;
.tooltip { position: fixed; }
.unread-toggle {
margin-right: 10px;
opacity: 1;
}
& > .pull-right > .aspect_membership_dropdown { display: none; }
}
.ajax-loader {
border-bottom: 1px solid $border-grey;
padding: 10px;
.spinner {
height: 30px;
width: 30px;
}
}
.view_all {
background-color: $link-color;
border-top: 3px solid $white;
text-align: center;
a {
color: $white;
display: block;
font-weight: bold;
padding: 5px;
&:hover { text-decoration: none; }
}
}
}
}
[class^="entypo-"], [class*="entypo-"] {
color: inherit;
font-size: $font-size-h3;
vertical-align: middle;
}
.nav-badge {
margin-bottom: -2px;
.badge {
background-color: $brand-danger;
position: absolute;
right: 10px;
top: 10px;
}
}
#user_menu {
.avatar {
height: 30px;

42
app/assets/templates/header_tpl.jst.hbs
View file

@ -12,24 +12,37 @@
<a href="/stream" class="navbar-brand">
{{ podname }}
</a>
<ul class="nav nav-badges visible-sm visible-xs">
<li>
<a href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge">
<i class="entypo-bell"></i>
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}}
</span>
</a>
</li>
<li>
<a href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
<i class="entypo-mail"></i>
<span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}}
</span>
</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="/stream">{{t "my_stream"}}</a></li>
<li><a href="/activity">{{t "my_activity"}}</a></li>
<li class="visible-sm visible-xs"><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
</ul>
<ul class="nav navbar-nav navbar-left nav-badges">
<ul class="nav navbar-nav navbar-left nav-badges hidden-sm hidden-xs">
<li class="dropdown" id="notification-dropdown">
<a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="nav-badge" role="button" data-toggle="dropdown" aria-expanded="false" data-target="#">
<span class="hidden-xs hidden-sm">
<i class="entypo-bell"></i>
</span>
<span class="visible-xs-inline visible-sm-inline">
{{t "header.notifications"}}
</span>
<a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge hidden-sm hidden-xs" role="button" data-toggle="dropdown" aria-expanded="false" data-target="#">
<i class="entypo-bell"></i>
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}}
</span>
@ -61,14 +74,8 @@
</li>
<li>
<a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="nav-badge">
<span class="hidden-xs hidden-sm">
<i class="entypo-mail"></i>
</span>
<span class="visible-xs-inline visible-sm-inline">
{{t "header.conversations"}}
</span>
<a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge hidden-sm hidden-xs">
<i class="entypo-mail"></i>
<span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}}
</span>
@ -94,7 +101,6 @@
{{#if current_user.admin}}
<li><a href="/admins/dashboard">{{t "header.admin"}}</a></li>
{{/if}}
<li class="visible-sm visible-xs"><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
<li><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
</ul>
</li>

6
spec/javascripts/app/views/header_view_spec.js
View file

@ -14,14 +14,14 @@ describe("app.views.Header", function() {
it("displays a count when the current user has a notification", function(){
loginAs(_.extend(this.userAttrs, {notifications_count : 1}));
this.view.render();
expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(false);
expect(this.view.$("#notifications-link .badge").text()).toContain("1");
expect(this.view.$(".notifications-link .badge").hasClass("hidden")).toBe(false);
expect(this.view.$(".notifications-link .badge").text()).toContain("1");
});
it("does not display a count when the current user has a notification", function(){
loginAs(_.extend(this.userAttrs, {notifications_count : 0}));
this.view.render();
expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(true);
expect(this.view.$(".notifications-link .badge").hasClass("hidden")).toBe(true);
});
});

15
spec/javascripts/app/views/notifications_view_spec.js
View file

@ -87,14 +87,21 @@ describe("app.views.Notifications", function(){
});
it("changes the header notifications count", function() {
var badge = $("#notifications-link .badge");
var count = parseInt(badge.text(), 10);
var badge1 = $(".notifications-link:eq(0) .badge");
var badge2 = $(".notifications-link:eq(1) .badge");
var count = parseInt(badge1.text(), 10);
this.view.updateView(this.guid, this.type, true);
expect(parseInt(badge.text(), 10)).toBe(count + 1);
expect(parseInt(badge1.text(), 10)).toBe(count + 1);
this.view.updateView(this.guid, this.type, false);
expect(parseInt(badge.text(), 10)).toBe(count);
expect(parseInt(badge1.text(), 10)).toBe(count);
this.view.updateView(this.guid, this.type, true);
expect(parseInt(badge2.text(), 10)).toBe(count + 1);
this.view.updateView(this.guid, this.type, false);
expect(parseInt(badge2.text(), 10)).toBe(count);
});
context("markAllRead", function() {