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, var change = unread ? 1 : -1,
allNotes = $(".list-group > a:eq(0) .badge"), allNotes = $(".list-group > a:eq(0) .badge"),
typeNotes = $(".list-group > a[data-type=" + type + "] .badge"), typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
headerBadge = $("#notifications-link .badge"), headerBadge = $(".notifications-link .badge"),
note = $(".stream_element[data-guid=" + guid + "]"), note = $(".stream_element[data-guid=" + guid + "]"),
markAllReadLink = $("a#mark_all_read_link"), markAllReadLink = $("a#mark_all_read_link"),
translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread"; 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-border-radius: $border-radius-base
// $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) // $navbar-padding-horizontal: floor(($grid-gutter-width / 2))
// $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 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-color: #777
// $navbar-default-bg: #f8f8f8 // $navbar-default-bg: #f8f8f8

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

@ -9,8 +9,15 @@ header > .dark-header > nav {
@media (max-width: $grid-float-breakpoint-max) { @media (max-width: $grid-float-breakpoint-max) {
.col-lg-10 { padding: 0; } .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 { #navbar-collapse {
&.collapse.in { overflow: visible; }
.form-group, .twitter-typeahead { .form-group, .twitter-typeahead {
display: block !important; display: block !important;
margin-bottom: 0; margin-bottom: 0;
@ -29,9 +36,30 @@ header > .dark-header > nav {
width: 150px; width: 150px;
} }
} }
#user_menu {
&.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
.dropdown-toggle {
margin: 0 1px;
min-width: 160px;
}
.dropdown-menu {
background-color: darken($navbar-inverse-bg, 7%);
border-top: none;
width: 100%;
& > li > a {
color: $gray-light;
padding-left: 55px;
&:hover {
background-color: $link-color;
color: $gray-lighter;
}
}
}
}
}
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; } .navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges { .nav-badges {
margin-left: 20px;
& > li { height: 50px; } & > li { height: 50px; }
.dropdown > a:focus { outline: 0px none; } .dropdown > a:focus { outline: 0px none; }
.dropdown-open { .dropdown-open {
@ -102,27 +130,6 @@ header > .dark-header > nav {
top: 10px; top: 10px;
} }
} }
#user_menu {
&.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
.dropdown-toggle {
margin: 0 1px;
min-width: 160px;
}
.dropdown-menu {
background-color: darken($navbar-inverse-bg, 7%);
border-top: none;
width: 100%;
& > li > a {
color: $gray-light;
padding-left: 55px;
&:hover {
background-color: $link-color;
color: $gray-lighter;
}
}
}
}
}
#user_menu { #user_menu {
.avatar { .avatar {

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

@ -12,24 +12,37 @@
<a href="/stream" class="navbar-brand"> <a href="/stream" class="navbar-brand">
{{ podname }} {{ podname }}
</a> </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>
<div class="collapse navbar-collapse" id="navbar-collapse"> <div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left"> <ul class="nav navbar-nav navbar-left">
<li><a href="/stream">{{t "my_stream"}}</a></li> <li><a href="/stream">{{t "my_stream"}}</a></li>
<li><a href="/activity">{{t "my_activity"}}</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>
<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"> <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="#"> <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="#">
<span class="hidden-xs hidden-sm">
<i class="entypo-bell"></i> <i class="entypo-bell"></i>
</span>
<span class="visible-xs-inline visible-sm-inline">
{{t "header.notifications"}}
</span>
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}"> <span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}} {{current_user.notifications_count}}
</span> </span>
@ -61,14 +74,8 @@
</li> </li>
<li> <li>
<a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="nav-badge"> <a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge hidden-sm hidden-xs">
<span class="hidden-xs hidden-sm">
<i class="entypo-mail"></i> <i class="entypo-mail"></i>
</span>
<span class="visible-xs-inline visible-sm-inline">
{{t "header.conversations"}}
</span>
<span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}"> <span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}} {{current_user.unread_messages_count}}
</span> </span>
@ -94,7 +101,6 @@
{{#if current_user.admin}} {{#if current_user.admin}}
<li><a href="/admins/dashboard">{{t "header.admin"}}</a></li> <li><a href="/admins/dashboard">{{t "header.admin"}}</a></li>
{{/if}} {{/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> <li><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
</ul> </ul>
</li> </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(){ it("displays a count when the current user has a notification", function(){
loginAs(_.extend(this.userAttrs, {notifications_count : 1})); loginAs(_.extend(this.userAttrs, {notifications_count : 1}));
this.view.render(); this.view.render();
expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(false); 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").text()).toContain("1");
}); });
it("does not display a count when the current user has a notification", function(){ it("does not display a count when the current user has a notification", function(){
loginAs(_.extend(this.userAttrs, {notifications_count : 0})); loginAs(_.extend(this.userAttrs, {notifications_count : 0}));
this.view.render(); 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() { it("changes the header notifications count", function() {
var badge = $("#notifications-link .badge"); var badge1 = $(".notifications-link:eq(0) .badge");
var count = parseInt(badge.text(), 10); var badge2 = $(".notifications-link:eq(1) .badge");
var count = parseInt(badge1.text(), 10);
this.view.updateView(this.guid, this.type, true); 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); 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() { context("markAllRead", function() {