Bootstrap header rewrite
This commit is contained in:
Steffen van Bergerem
parent
e890ffa698
commit
049c8eb384
30 changed files with 458 additions and 810 deletions
|
|
@ -24,7 +24,7 @@ app.views.Conversations = Backbone.View.extend({
|
||||||
$(".control-icons a").tooltip({placement: "bottom"});
|
$(".control-icons a").tooltip({placement: "bottom"});
|
||||||
|
|
||||||
var conv = $(".conversation-wrapper .stream_element.selected"),
|
var conv = $(".conversation-wrapper .stream_element.selected"),
|
||||||
cBadge = $("#conversations_badge .badge_count");
|
cBadge = $("#conversations-link .badge");
|
||||||
|
|
||||||
if(conv.hasClass("unread") ){
|
if(conv.hasClass("unread") ){
|
||||||
var unreadCount = parseInt(conv.find(".unread_message_count").text(), 10);
|
var unreadCount = parseInt(conv.find(".unread_message_count").text(), 10);
|
||||||
|
|
|
||||||
|
|
@ -7,46 +7,29 @@ app.views.Header = app.views.Base.extend({
|
||||||
className: "dark-header",
|
className: "dark-header",
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
"click ul.dropdown li:first-child": "toggleUserDropdown",
|
|
||||||
"focusin #q": "toggleSearchActive",
|
"focusin #q": "toggleSearchActive",
|
||||||
"focusout #q": "toggleSearchActive"
|
"focusout #q": "toggleSearchActive"
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function(){
|
presenter: function() {
|
||||||
$(document.body).click($.proxy(this.hideUserDropdown, this));
|
return _.extend({}, this.defaultPresenter(), {
|
||||||
|
podname: gon.appConfig.settings.podname
|
||||||
return this;
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
postRenderTemplate: function(){
|
postRenderTemplate: function(){
|
||||||
new app.views.Notifications({ el: '#notification_dropdown' });
|
new app.views.Notifications({ el: "#notification-dropdown" });
|
||||||
new app.views.NotificationDropdown({ el: '#notification_badge' });
|
this.notificationDropdown = new app.views.NotificationDropdown({ el: "#notification-dropdown" });
|
||||||
new app.views.Search({ el: '#header-search-form' });
|
new app.views.Search({ el: "#header-search-form" });
|
||||||
},
|
},
|
||||||
|
|
||||||
menuElement: function(){ return this.$("ul.dropdown"); },
|
menuElement: function(){ return this.$("ul.dropdown"); },
|
||||||
|
|
||||||
toggleUserDropdown: function(evt){
|
toggleSearchActive: function(evt){
|
||||||
if(evt){ evt.preventDefault(); }
|
|
||||||
|
|
||||||
this.menuElement().toggleClass("active");
|
|
||||||
|
|
||||||
if($.browser.msie){
|
|
||||||
this.$("header").toggleClass('ie-user-menu-active');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
hideUserDropdown: function(evt){
|
|
||||||
if(this.menuElement().hasClass("active") && !$(evt.target).parents("#user_menu").length){
|
|
||||||
this.menuElement().removeClass("active");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleSearchActive: function(ev){
|
|
||||||
// jQuery produces two events for focus/blur (for bubbling)
|
// jQuery produces two events for focus/blur (for bubbling)
|
||||||
// don't rely on which event arrives first, by allowing for both variants
|
// don't rely on which event arrives first, by allowing for both variants
|
||||||
var is_active = (_.indexOf(['focus','focusin'], ev.type) !== -1);
|
var isActive = (_.indexOf(["focus","focusin"], evt.type) !== -1);
|
||||||
$(ev.target).toggleClass('active', is_active);
|
$(evt.target).toggleClass("active", isActive);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -210,7 +210,7 @@ app.views.Help = app.views.StaticContentView.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
chatEnabled: function(){
|
chatEnabled: function(){
|
||||||
return gon.chatEnabled;
|
return gon.appConfig.chat.enabled;
|
||||||
},
|
},
|
||||||
|
|
||||||
getChatIcons: function(){
|
getChatIcons: function(){
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
||||||
|
|
||||||
app.views.NotificationDropdown = app.views.Base.extend({
|
app.views.NotificationDropdown = app.views.Base.extend({
|
||||||
events:{
|
events: {
|
||||||
"click #notifications-badge": "toggleDropdown"
|
"click #notifications-link": "toggleDropdown"
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function(){
|
initialize: function(){
|
||||||
|
|
@ -12,38 +12,37 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
||||||
this.perPage = 5;
|
this.perPage = 5;
|
||||||
this.hasMoreNotifs = true;
|
this.hasMoreNotifs = true;
|
||||||
this.badge = this.$el;
|
this.badge = this.$el;
|
||||||
this.dropdown = $('#notification_dropdown');
|
this.dropdown = $("#notification-dropdown");
|
||||||
this.dropdownNotifications = this.dropdown.find('.notifications');
|
this.dropdownNotifications = this.dropdown.find(".notifications");
|
||||||
this.ajaxLoader = this.dropdown.find('.ajax_loader');
|
this.ajaxLoader = this.dropdown.find(".ajax_loader");
|
||||||
this.perfectScrollbarInitialized = false;
|
this.perfectScrollbarInitialized = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleDropdown: function(evt){
|
toggleDropdown: function(evt){
|
||||||
evt.preventDefault();
|
|
||||||
evt.stopPropagation();
|
evt.stopPropagation();
|
||||||
|
if (!$("#notifications-link .entypo.bell:visible").length) { return true; }
|
||||||
|
evt.preventDefault();
|
||||||
if(this.dropdownShowing()){ this.hideDropdown(evt); }
|
if(this.dropdownShowing()){ this.hideDropdown(evt); }
|
||||||
else{ this.showDropdown(); }
|
else{ this.showDropdown(); }
|
||||||
},
|
},
|
||||||
|
|
||||||
dropdownShowing: function(){
|
dropdownShowing: function(){
|
||||||
return this.dropdown.css('display') === 'block';
|
return this.dropdown.hasClass("dropdown-open");
|
||||||
},
|
},
|
||||||
|
|
||||||
showDropdown: function(){
|
showDropdown: function(){
|
||||||
this.resetParams();
|
this.resetParams();
|
||||||
this.ajaxLoader.show();
|
this.ajaxLoader.show();
|
||||||
this.badge.addClass('active');
|
this.dropdown.addClass("dropdown-open");
|
||||||
this.dropdown.css('display', 'block');
|
this.dropdownNotifications.addClass("loading");
|
||||||
this.dropdownNotifications.addClass('loading');
|
|
||||||
this.getNotifications();
|
this.getNotifications();
|
||||||
},
|
},
|
||||||
|
|
||||||
hideDropdown: function(evt){
|
hideDropdown: function(evt){
|
||||||
var inDropdown = $(evt.target).parents().is(this.dropdown);
|
var inDropdown = $(evt.target).parents().is($(".dropdown-menu", this.dropdown));
|
||||||
var inHovercard = $.contains(app.hovercard.el, evt.target);
|
var inHovercard = $.contains(app.hovercard.el, evt.target);
|
||||||
if(!inDropdown && !inHovercard && this.dropdownShowing()){
|
if(!inDropdown && !inHovercard && this.dropdownShowing()){
|
||||||
this.badge.removeClass('active');
|
this.dropdown.removeClass("dropdown-open");
|
||||||
this.dropdown.css('display', 'none');
|
|
||||||
if(this.perfectScrollbarInitialized) {
|
if(this.perfectScrollbarInitialized) {
|
||||||
this.dropdownNotifications.perfectScrollbar("destroy");
|
this.dropdownNotifications.perfectScrollbar("destroy");
|
||||||
this.perfectScrollbarInitialized = false;
|
this.perfectScrollbarInitialized = false;
|
||||||
|
|
@ -52,9 +51,9 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
dropdownScroll: function(){
|
dropdownScroll: function(){
|
||||||
var isLoading = ($('.loading').length === 1);
|
var isLoading = ($(".loading").length === 1);
|
||||||
if (this.isBottom() && this.hasMoreNotifs && !isLoading){
|
if (this.isBottom() && this.hasMoreNotifs && !isLoading){
|
||||||
this.dropdownNotifications.addClass('loading');
|
this.dropdownNotifications.addClass("loading");
|
||||||
this.getNotifications();
|
this.getNotifications();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -71,7 +70,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
isBottom: function(){
|
isBottom: function(){
|
||||||
var bottom = this.dropdownNotifications.prop('scrollHeight') - this.dropdownNotifications.height();
|
var bottom = this.dropdownNotifications.prop("scrollHeight") - this.dropdownNotifications.height();
|
||||||
var currentPosition = this.dropdownNotifications.scrollTop();
|
var currentPosition = this.dropdownNotifications.scrollTop();
|
||||||
return currentPosition + 50 >= bottom;
|
return currentPosition + 50 >= bottom;
|
||||||
},
|
},
|
||||||
|
|
@ -89,21 +88,21 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
||||||
|
|
||||||
hideAjaxLoader: function(){
|
hideAjaxLoader: function(){
|
||||||
var self = this;
|
var self = this;
|
||||||
this.ajaxLoader.find('img').fadeTo(200, 0, function(){
|
this.ajaxLoader.find("img").fadeTo(200, 0, function(){
|
||||||
self.ajaxLoader.hide(200, function(){
|
self.ajaxLoader.hide(200, function(){
|
||||||
self.ajaxLoader.find('img').css('opacity', 1);
|
self.ajaxLoader.find("img").css("opacity", 1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
renderNotifications: function(){
|
renderNotifications: function(){
|
||||||
var self = this;
|
var self = this;
|
||||||
this.dropdownNotifications.find('.media.stream_element').remove();
|
this.dropdownNotifications.find(".media.stream_element").remove();
|
||||||
$.each(self.notifications, function(index, notifications){
|
$.each(self.notifications, function(index, notifications){
|
||||||
$.each(notifications, function(index, notification){
|
$.each(notifications, function(index, notification){
|
||||||
if($.inArray(notification, notifications) === -1){
|
if($.inArray(notification, notifications) === -1){
|
||||||
var node = self.dropdownNotifications.append(notification.note_html);
|
var node = self.dropdownNotifications.append(notification.note_html);
|
||||||
$(node).find('.unread-toggle .entypo').tooltip('destroy').tooltip();
|
$(node).find(".unread-toggle .entypo").tooltip("destroy").tooltip();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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 = $("#notification_badge .badge_count"),
|
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";
|
||||||
|
|
@ -70,7 +70,8 @@ app.views.Notifications = Backbone.View.extend({
|
||||||
|
|
||||||
[allNotes, typeNotes, headerBadge].forEach(function(element){
|
[allNotes, typeNotes, headerBadge].forEach(function(element){
|
||||||
element.text(function(i, text){
|
element.text(function(i, text){
|
||||||
return parseInt(text) + change });
|
return parseInt(text) + change;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
[allNotes, typeNotes].forEach(function(badge) {
|
[allNotes, typeNotes].forEach(function(badge) {
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
@import 'new_styles/interactions';
|
@import 'new_styles/interactions';
|
||||||
@import 'new_styles/spinner';
|
@import 'new_styles/spinner';
|
||||||
@import 'lightbox';
|
@import 'lightbox';
|
||||||
|
@import 'timeago';
|
||||||
@import 'vendor/fileuploader';
|
@import 'vendor/fileuploader';
|
||||||
@import 'vendor/autoSuggest';
|
@import 'vendor/autoSuggest';
|
||||||
|
|
||||||
|
|
@ -38,7 +39,6 @@
|
||||||
/* new SPV */
|
/* new SPV */
|
||||||
@import 'header';
|
@import 'header';
|
||||||
@import 'footer';
|
@import 'footer';
|
||||||
@import 'bootstrap-headerfix';
|
|
||||||
@import 'opengraph';
|
@import 'opengraph';
|
||||||
@import 'single-post-view';
|
@import 'single-post-view';
|
||||||
@import 'new_styles/poll';
|
@import 'new_styles/poll';
|
||||||
|
|
|
||||||
|
|
@ -42,17 +42,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ac_loading {
|
.ac_loading {
|
||||||
background: white image-url('ajax-loader2.gif') right center no-repeat;
|
background: white image-url('ajax-loader2.gif') right 5px center no-repeat;
|
||||||
|
background-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ac_odd {
|
.ac_odd {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
background-color: rgba(250,250,250,0.95);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ac_even {
|
.ac_even {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-color: rgba(255,255,255,0.95);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ac_over {
|
.ac_over {
|
||||||
|
|
|
||||||
52
app/assets/stylesheets/bootstrap-headerfix.scss
vendored
52
app/assets/stylesheets/bootstrap-headerfix.scss
vendored
|
|
@ -1,52 +0,0 @@
|
||||||
// A temporary fix for displaying the header in the single post view.
|
|
||||||
// Should be removed once everything uses Bootstrap.
|
|
||||||
|
|
||||||
header {
|
|
||||||
.container {
|
|
||||||
width: 950px;
|
|
||||||
.header-nav {
|
|
||||||
span {
|
|
||||||
a {
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#conversations_badge, #notification_badge {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
#notification_badge.active {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
#global_search {
|
|
||||||
form {
|
|
||||||
top: -3px;
|
|
||||||
input {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#notification_dropdown {
|
|
||||||
h4 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
a {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.notification_element {
|
|
||||||
font-size: 13px;
|
|
||||||
.timeago {
|
|
||||||
border: medium none;
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -328,7 +328,7 @@ $btn-success-color: #333;
|
||||||
// $grid-gutter-width: 30px
|
// $grid-gutter-width: 30px
|
||||||
// Navbar collapse
|
// Navbar collapse
|
||||||
//** Point at which the navbar becomes uncollapsed.
|
//** Point at which the navbar becomes uncollapsed.
|
||||||
// $grid-float-breakpoint: $screen-sm-min
|
$grid-float-breakpoint: 992px; // $screen-md-min
|
||||||
//** Point at which the navbar begins collapsing.
|
//** Point at which the navbar begins collapsing.
|
||||||
// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1)
|
// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,433 +1,128 @@
|
||||||
.timeago {
|
header > .dark-header > nav {
|
||||||
color: $text-grey;
|
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
box-shadow: 1px 0 2px $black;
|
||||||
|
|
||||||
body > header {
|
.navbar-brand {
|
||||||
@include header-gradient($header-background-color);
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.9);
|
|
||||||
z-index: 1001;
|
|
||||||
padding: 6px 0;
|
|
||||||
color: #CCC;
|
|
||||||
height: 39px;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 620px;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-bottom: 1px solid darken($header-background-color, 8%);
|
|
||||||
|
|
||||||
> div > div.container {
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diaspora_header_logo {
|
|
||||||
float: left;
|
|
||||||
margin-top: -6px;
|
|
||||||
height: 38px;
|
|
||||||
width: 65px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ie-user-menu-active { height: 150px; }
|
|
||||||
|
|
||||||
a.header_root_link {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #CCC;
|
|
||||||
color: rgb(147,147,147);
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
background: none;
|
|
||||||
color: $highlight-white;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
outline: thin dotted $border-dark-grey;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.landing {
|
|
||||||
height: 40px;
|
|
||||||
.right { top: 10px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav_badges {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 2px;
|
|
||||||
float: left;
|
|
||||||
width: 61px;
|
|
||||||
|
|
||||||
a:hover { text-decoration: none; }
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
width: 22px;
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
display: inline;
|
|
||||||
margin: 0 2px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: smaller;
|
|
||||||
|
|
||||||
.badge_count {
|
|
||||||
border-radius: 2px;
|
|
||||||
z-index: 3;
|
|
||||||
position: absolute;
|
|
||||||
top: -4px;
|
|
||||||
left: 15px;
|
|
||||||
padding: 1px 2px;
|
|
||||||
background-color: $red;
|
|
||||||
line-height: 12px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .badge_count { background-color: lighten($red, 5%); }
|
|
||||||
|
|
||||||
.icons-notifications_grey { height: 16px; }
|
|
||||||
|
|
||||||
&.active .icons-notifications_grey:hover {
|
|
||||||
background-position: sprite-position($icons-sprites, notifications_grey);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons-mail_grey { height: 11px }
|
|
||||||
|
|
||||||
a.badge_link {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 16px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification_badge, #conversations_badge {
|
|
||||||
float: left;
|
|
||||||
padding: 0px 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversations_badge {
|
|
||||||
padding-top: 3px;
|
|
||||||
margin-right: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification_badge.active {
|
|
||||||
z-index: 10;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid $border-dark-grey;
|
|
||||||
border-bottom: 0px;
|
|
||||||
margin-left: 0px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification_dropdown {
|
|
||||||
background: white;
|
|
||||||
border: solid $border-dark-grey 1px;
|
|
||||||
box-shadow: 0 0px 13px rgba(20,20,20,0.5);
|
|
||||||
left: 300px;
|
|
||||||
width: 380px;
|
|
||||||
display: none;
|
|
||||||
float: left;
|
|
||||||
color: $grey;
|
|
||||||
|
|
||||||
a { color: $blue; }
|
|
||||||
a.disabled {
|
|
||||||
color: $link-disabled-grey;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
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: $font-size-small;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ajax_loader {
|
|
||||||
border-bottom: 1px solid $border-grey;
|
|
||||||
padding: 15px;
|
|
||||||
img { height: 21px; }
|
|
||||||
}
|
|
||||||
.notifications{
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
max-height: 325px;
|
|
||||||
|
|
||||||
.media.stream_element {
|
|
||||||
border-bottom: 1px solid $border-grey;
|
|
||||||
padding: 5px;
|
|
||||||
min-height: 35px;
|
|
||||||
line-height: 18px;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
img.avatar {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-body {
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pull-right > .aspect_membership_dropdown { display: none; }
|
|
||||||
.unread-toggle { margin: 10px; }
|
|
||||||
|
|
||||||
.entypo {
|
|
||||||
cursor: pointer;
|
|
||||||
color: lighten($black,75%);
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
.tooltip {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.unread {
|
|
||||||
background-color: $background-grey;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#global_search {
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
form {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
input {
|
|
||||||
box-shadow: 0 1px 1px #444;
|
|
||||||
border-radius: 15px;
|
|
||||||
@include transition(width);
|
|
||||||
width: 100px;
|
|
||||||
background-color: #444;
|
|
||||||
border: 1px solid #222;
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 4px;
|
|
||||||
margin-top: 1px;
|
|
||||||
|
|
||||||
&:hover { background-color: #555; }
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $highlight-white;
|
|
||||||
background-color: rgba(160,160,160,0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
background-color: white;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::input-placeholder { text-shadow: none; }
|
|
||||||
&::placeholder { text-shadow: none; }
|
|
||||||
&.ac_loading::-webkit-search-cancel-button { -webkit-appearance: none; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul#user_menu {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
text-shadow: 0 1px 0 #000;
|
|
||||||
color: rgb(147,147,147);
|
|
||||||
min-width: 100px;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 10;
|
|
||||||
display: inline;
|
|
||||||
visibility: hidden;
|
|
||||||
top: -4px;
|
|
||||||
float: right;
|
|
||||||
margin: -2px -3px 0px 0px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
display: block;
|
|
||||||
border-left: 1px solid #333;
|
|
||||||
border-right: 1px solid #333;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 1px solid #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
box-shadow: 0 0px 13px rgba(20,20,20,0.5);
|
|
||||||
background-color: rgb(34,30,30);
|
|
||||||
visibility: visible;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
border-color: $border-dark-grey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu-item a {
|
|
||||||
padding: 4px 8px 4px 40px;
|
|
||||||
height: 100%;
|
|
||||||
color: $text-grey;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $blue;
|
|
||||||
color: $highlight-white;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu-trigger {
|
|
||||||
padding: 10px 25px 10px 40px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $highlight-white;
|
|
||||||
.user-name { color: $highlight-white; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus { outline: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu-more-indicator {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu-avatar {
|
|
||||||
height: 25px;
|
|
||||||
width: 25px;
|
|
||||||
position: absolute;
|
|
||||||
left: 8px;
|
|
||||||
top: 8px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-nav {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
float: left;
|
font-size: $font-size-h3;
|
||||||
height: 100%;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-top: 2px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 0 10px;
|
|
||||||
width: 100%;
|
|
||||||
&:hover { text-decoration: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
> span {
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: -4px;
|
|
||||||
border-left: 1px solid #333;
|
|
||||||
border-right: 1px solid #333;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-left: -5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When the user is not connected */
|
@media (max-width: $grid-float-breakpoint-max) {
|
||||||
ul#landing_nav {
|
.col-lg-10 { padding: 0; }
|
||||||
position: absolute;
|
}
|
||||||
top: 4px;
|
@media (min-width: $grid-float-breakpoint) {
|
||||||
right: 0;
|
input[type="search"] {
|
||||||
margin: 0;
|
@include transition(width);
|
||||||
padding: 0;
|
margin-top: 2px;
|
||||||
|
width: 200px;
|
||||||
> li {
|
&:not(.active) {
|
||||||
text-shadow: 0 1px 0 #000;
|
background-color: $navbar-inverse-bg;
|
||||||
display: inline;
|
border-color: $gray-light;
|
||||||
margin-right: 0.5em;
|
width: 150px;
|
||||||
|
}
|
||||||
a {
|
}
|
||||||
color: $blue;
|
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
|
||||||
|
.nav-badges {
|
||||||
&.login {
|
margin-left: 20px;
|
||||||
border-radius: 5px;
|
& > li { height: 50px; }
|
||||||
box-shadow: 0 1px 1px #666;
|
.dropdown > a:focus { outline: 0px none; }
|
||||||
padding: 5px 8px;
|
.dropdown-open {
|
||||||
background-color: #000;
|
background-color: $dropdown-bg;
|
||||||
border-top: 1px solid #000;
|
& > a { color: $dropdown-link-color; }
|
||||||
|
.dropdown-menu { display: block; }
|
||||||
&:hover { background-color: #222; }
|
}
|
||||||
|
.dropdown-menu {
|
||||||
|
border-top: none;
|
||||||
|
margin-left: -1px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 400px;
|
||||||
|
.avatar {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
}
|
}
|
||||||
}
|
.header {
|
||||||
|
padding: 10px;
|
||||||
&:last-child { margin-right: 0; }
|
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;
|
||||||
|
}
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
.entypo {
|
||||||
}
|
color: inherit;
|
||||||
|
font-size: $font-size-h3;
|
||||||
|
vertical-align: middle;
|
||||||
/*
|
}
|
||||||
* Extract here from application.sass because
|
.nav-badge {
|
||||||
* needed for the header in the bootstrap part
|
margin-bottom: -2px;
|
||||||
*/
|
.badge {
|
||||||
ul.dropdown {
|
background-color: $brand-danger;
|
||||||
padding: 0px;
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
li {
|
top: 10px;
|
||||||
display: none;
|
}
|
||||||
|
}
|
||||||
a { display: block; }
|
#user_menu {
|
||||||
|
&.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
|
||||||
&:first-child {
|
.dropdown-toggle {
|
||||||
display: block;
|
margin: 0 1px;
|
||||||
|
min-width: 160px;
|
||||||
a {
|
}
|
||||||
height: auto;
|
.dropdown-menu {
|
||||||
display: inline;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
#user_menu {
|
||||||
z-index: 30;
|
.avatar {
|
||||||
li { display: block; }
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
.user-avatar {
|
||||||
|
height: $navbar-height;
|
||||||
|
padding: ($navbar-height - 30px)/2 0;
|
||||||
|
margin-bottom: -$navbar-padding-vertical;
|
||||||
|
margin-top: -$navbar-padding-vertical;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/* flash message animations - header height is about 40px */
|
/* flash message animations - header height is about 50px */
|
||||||
@keyframes expose {
|
@keyframes expose {
|
||||||
0% { top : -100px; }
|
0% { top : -100px; }
|
||||||
15% { top : 34px; }
|
15% { top : 44px; }
|
||||||
85% { top : 34px; }
|
85% { top : 44px; }
|
||||||
100% { top : -100px; }
|
100% { top : -100px; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-top: 40px;
|
margin-top: 50px;
|
||||||
padding : none;
|
padding : none;
|
||||||
|
|
||||||
&.lock {
|
&.lock {
|
||||||
|
|
@ -88,5 +88,5 @@ a.tag { word-break: break-all; }
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
body {
|
body {
|
||||||
padding : 0;
|
padding : 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,44 +46,6 @@
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stream_element.media {
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0px;
|
|
||||||
line-height: 18px;
|
|
||||||
border-bottom: 1px solid $border-grey;
|
|
||||||
&:last-child { border: none !important; }
|
|
||||||
|
|
||||||
&.unread {
|
|
||||||
background-color: $background-grey;
|
|
||||||
.unread-toggle {
|
|
||||||
opacity: 1 !important;
|
|
||||||
.entypo { color: $black; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.unread-toggle { opacity: 1 !important; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread-toggle {
|
|
||||||
padding: 9px 5px;
|
|
||||||
.entypo {
|
|
||||||
cursor: pointer;
|
|
||||||
color: lighten($black,75%);
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group.aspect_membership_dropdown { margin: 5px 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination { text-align: center; }
|
.pagination { text-align: center; }
|
||||||
|
|
||||||
.no_notifications { text-align: center; }
|
.no_notifications { text-align: center; }
|
||||||
|
|
@ -94,3 +56,43 @@
|
||||||
.mentionIcon { font-weight: bold; }
|
.mentionIcon { font-weight: bold; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#notifications_container .stream, header .nav-badges .notifications {
|
||||||
|
.stream_element.media {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0px;
|
||||||
|
line-height: 18px;
|
||||||
|
border-bottom: 1px solid $border-grey;
|
||||||
|
&:last-child { border: none !important; }
|
||||||
|
|
||||||
|
&.unread {
|
||||||
|
background-color: $background-grey;
|
||||||
|
.unread-toggle {
|
||||||
|
opacity: 1 !important;
|
||||||
|
.entypo { color: $black; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.unread-toggle { opacity: 1 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unread-toggle {
|
||||||
|
padding: 9px 5px;
|
||||||
|
.entypo {
|
||||||
|
cursor: pointer;
|
||||||
|
color: lighten($black,75%);
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group.aspect_membership_dropdown { margin: 5px 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,12 +30,6 @@ body {
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#notification_dropdown {
|
|
||||||
left: auto;
|
|
||||||
right: 507px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#view_all_notifications {
|
#view_all_notifications {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
|
||||||
3
app/assets/stylesheets/timeago.scss
Normal file
3
app/assets/stylesheets/timeago.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.timeago {
|
||||||
|
color: $text-grey;
|
||||||
|
}
|
||||||
|
|
@ -1,109 +1,125 @@
|
||||||
<div class="container" style="position:relative;">
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="container-fluid">
|
||||||
<a href="/stream">
|
<div class="row">
|
||||||
<div alt="logo" class="diaspora_header_logo logos-header-logo">
|
<div class="col-lg-10 col-lg-offset-1">
|
||||||
</div>
|
<div class="navbar-header">
|
||||||
</a>
|
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse">
|
||||||
|
<span class="sr-only">{{t "header.toggle_navigation"}}</span>
|
||||||
<span class="header-nav">
|
<span class="icon-bar"></span>
|
||||||
<span>
|
<span class="icon-bar"></span>
|
||||||
<a href="/stream">
|
<span class="icon-bar"></span>
|
||||||
{{t "my_stream"}}
|
</button>
|
||||||
</a>
|
<a href="/stream" class="navbar-brand">
|
||||||
</span>
|
{{ podname }}
|
||||||
|
|
||||||
<span>
|
|
||||||
<a href="/activity">
|
|
||||||
{{t "my_activity"}}
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="nav_badges">
|
|
||||||
<div class="badge badge-inverse" id="notification_badge">
|
|
||||||
<div class="icons-notifications_grey" >
|
|
||||||
<a id="notifications-badge" href="/notifications" title="{{t "header.notifications"}}" class="badge_link" >
|
|
||||||
<div class="badge_count {{#unless current_user.notifications_count}} hidden {{/unless}}">
|
|
||||||
{{current_user.notifications_count}}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="badge badge-inverse" id="conversations_badge">
|
|
||||||
<div class="icons-mail_grey" >
|
|
||||||
<a href="/conversations" title="{{t "header.conversations"}}" class="badge_link" >
|
|
||||||
<div class="badge_count {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
|
|
||||||
{{current_user.unread_messages_count}}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="notification_dropdown">
|
|
||||||
<div class="header">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>
|
|
||||||
{{t "header.recent_notifications"}}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="notifications">
|
|
||||||
<div class="ajax_loader">
|
|
||||||
<img class="img-responsive center-block" alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="view_all">
|
|
||||||
<a href="/notifications" id="view_all_notifications">
|
|
||||||
{{t "header.view_all"}}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="dropdown" id="user_menu">
|
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||||
<li class="user-menu-trigger">
|
<ul class="nav navbar-nav navbar-left">
|
||||||
<div class="user-menu-more-indicator">
|
<li><a href="/stream">{{t "my_stream"}}</a></li>
|
||||||
▼
|
<li><a href="/activity">{{t "my_activity"}}</a></li>
|
||||||
</div>
|
</ul>
|
||||||
{{{personImage current_user 'small' 'avatar user-menu-avatar'}}}
|
|
||||||
<a class="user-name" href="#">{{current_user.name}}</a>
|
|
||||||
</li>
|
|
||||||
<li class="user-menu-item"><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
|
|
||||||
<li class="user-menu-item"><a href="/contacts">{{t "header.contacts"}}</a></li>
|
|
||||||
<li class="user-menu-item"><a href="/user/edit">{{t "header.settings"}}</a></li>
|
|
||||||
<li class="user-menu-item"><a href="/help">{{t "header.help"}}</a></li>
|
|
||||||
{{#if current_user.admin}}
|
|
||||||
<li class="user-menu-item"><a href="/admins/user_search">{{t "header.admin"}}</a></li>
|
|
||||||
{{/if}}
|
|
||||||
<li class="user-menu-item"><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<ul class="nav navbar-nav navbar-left nav-badges">
|
||||||
|
<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>
|
||||||
|
|
||||||
<div id="global_search">
|
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
|
||||||
<form id="header-search-form" accept-charset="UTF-8" action="/search" class="search_form" method="get">
|
{{current_user.notifications_count}}
|
||||||
<input name="utf8" type="hidden" value="✓">
|
</span>
|
||||||
<input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input">
|
</a>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="lightbox">
|
<ul class="dropdown-menu" role="menu">
|
||||||
<div id="lightbox-content">
|
<div class="header">
|
||||||
<a href="#" id="lightbox-close-link">[x] {{t "header.close"}}</a>
|
<div class="pull-right">
|
||||||
<img id="lightbox-image">
|
<a href="#" id="mark_all_read_link" class="btn btn-default btn-sm {{#unless current_user.notifications_count}}disabled{{/unless}}">
|
||||||
<div id="lightbox-navigation">
|
{{t "header.mark_all_as_read"}}
|
||||||
<div id="lightbox-scrollleft">«</div>
|
</a>
|
||||||
<div id="lightbox-imageset"></div>
|
</div>
|
||||||
<div id="lightbox-scrollright">»</div>
|
<h4>
|
||||||
|
{{t "header.recent_notifications"}}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="notifications">
|
||||||
|
<div class="ajax_loader">
|
||||||
|
<img class="img-responsive center-block" alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view_all">
|
||||||
|
<a href="/notifications" id="view_all_notifications">
|
||||||
|
{{t "header.view_all"}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<span class="badge {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
|
||||||
|
{{current_user.unread_messages_count}}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li class="dropdown" id="user_menu">
|
||||||
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
|
||||||
|
<span class="user-avatar pull-left">
|
||||||
|
{{{personImage current_user "small"}}}
|
||||||
|
</span>
|
||||||
|
<span class="user-name">{{current_user.name}}</span>
|
||||||
|
<span class="caret"></span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu" role="menu">
|
||||||
|
<li><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
|
||||||
|
<li><a href="/contacts">{{t "header.contacts"}}</a></li>
|
||||||
|
<li><a href="/user/edit">{{t "header.settings"}}</a></li>
|
||||||
|
<li><a href="/help">{{t "header.help"}}</a></li>
|
||||||
|
{{#if current_user.admin}}
|
||||||
|
<li><a href="/admins/user_search">{{t "header.admin"}}</a></li>
|
||||||
|
{{/if}}
|
||||||
|
<li><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<form id="header-search-form" accept-charset="UTF-8" action="/search" class="navbar-form navbar-right" role="search" method="get">
|
||||||
|
<div class="form-group">
|
||||||
|
<input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input form-control input-sm">
|
||||||
|
</div>
|
||||||
|
<input name="utf8" type="hidden" value="✓">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="lightbox-backdrop"></div>
|
|
||||||
|
|
||||||
</div>
|
<div id="lightbox">
|
||||||
|
<div id="lightbox-content">
|
||||||
|
<a href="#" id="lightbox-close-link">[x] {{t "header.close"}}</a>
|
||||||
|
<img id="lightbox-image">
|
||||||
|
<div id="lightbox-navigation">
|
||||||
|
<div id="lightbox-scrollleft">«</div>
|
||||||
|
<div id="lightbox-imageset"></div>
|
||||||
|
<div id="lightbox-scrollright">»</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="lightbox-backdrop"></div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ class ApplicationController < ActionController::Base
|
||||||
before_action :set_grammatical_gender
|
before_action :set_grammatical_gender
|
||||||
before_action :mobile_switch
|
before_action :mobile_switch
|
||||||
before_action :gon_set_current_user
|
before_action :gon_set_current_user
|
||||||
|
before_action :gon_set_appconfig
|
||||||
before_action :gon_set_preloads
|
before_action :gon_set_preloads
|
||||||
|
|
||||||
inflection_method :grammatical_gender => :gender
|
inflection_method :grammatical_gender => :gender
|
||||||
|
|
@ -142,6 +143,13 @@ class ApplicationController < ActionController::Base
|
||||||
current_user.getting_started? ? getting_started_path : stream_path
|
current_user.getting_started? ? getting_started_path : stream_path
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def gon_set_appconfig
|
||||||
|
gon.push(appConfig: {
|
||||||
|
chat: {enabled: AppConfig.chat.enabled?},
|
||||||
|
settings: {podname: AppConfig.settings.pod_name}
|
||||||
|
})
|
||||||
|
end
|
||||||
|
|
||||||
def gon_set_current_user
|
def gon_set_current_user
|
||||||
return unless user_signed_in?
|
return unless user_signed_in?
|
||||||
a_ids = session[:a_ids] || []
|
a_ids = session[:a_ids] || []
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,2 @@
|
||||||
class HelpController < ApplicationController
|
class HelpController < ApplicationController
|
||||||
def faq
|
|
||||||
gon.chatEnabled = AppConfig.chat.enabled?
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -4,18 +4,31 @@
|
||||||
|
|
||||||
%header
|
%header
|
||||||
- unless current_user
|
- unless current_user
|
||||||
.container{style: "position:relative;"}
|
.dark-header
|
||||||
= link_to content_tag(:div, nil, class: 'diaspora_header_logo logos-header-logo'), root_path
|
%nav.navbar.navbar-inverse.navbar-fixed-top
|
||||||
|
.container-fluid
|
||||||
|
.row
|
||||||
|
.col-lg-10.col-lg-offset-1
|
||||||
|
.navbar-header
|
||||||
|
%button.navbar-toggle.collapsed{type: "button", data: {toggle: "collapse", target: "#navbar-collapse"}}
|
||||||
|
%span.sr-only
|
||||||
|
= t("layouts.header.toggle_navigation")
|
||||||
|
%span.icon-bar
|
||||||
|
%span.icon-bar
|
||||||
|
%span.icon-bar
|
||||||
|
= link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
|
||||||
|
|
||||||
%ul#landing_nav
|
.collapse.navbar-collapse#navbar-collapse
|
||||||
- if AppConfig.settings.enable_registrations? && !current_page?(controller: '/registrations', action: :new)
|
%ul.nav.navbar-nav.navbar-right
|
||||||
%li= link_to t('devise.shared.links.sign_up'), new_user_registration_path, class: 'login'
|
- if AppConfig.settings.enable_registrations? && !current_page?(controller: "/registrations", action: :new)
|
||||||
%li= link_to t('devise.shared.links.sign_in'), new_user_session_path, class: 'login'
|
%li= link_to t("devise.shared.links.sign_up"), new_user_registration_path, class: 'login'
|
||||||
#lightbox
|
%li= link_to t('devise.shared.links.sign_in'), new_user_session_path, class: 'login'
|
||||||
#lightbox-content
|
|
||||||
%a#lightbox-close-link(href='#')
|
#lightbox
|
||||||
[x]
|
#lightbox-content
|
||||||
=t('javascripts.header.close')
|
%a#lightbox-close-link(href='#')
|
||||||
%img#lightbox-image
|
[x]
|
||||||
#lightbox-imageset
|
=t('javascripts.header.close')
|
||||||
#lightbox-backdrop
|
%img#lightbox-image
|
||||||
|
#lightbox-imageset
|
||||||
|
#lightbox-backdrop
|
||||||
|
|
|
||||||
|
|
@ -642,6 +642,7 @@ en:
|
||||||
admin: "Admin"
|
admin: "Admin"
|
||||||
view_all: "View all"
|
view_all: "View all"
|
||||||
recent_notifications: "Recent notifications"
|
recent_notifications: "Recent notifications"
|
||||||
|
toggle_navigation: "Toggle navigation"
|
||||||
application:
|
application:
|
||||||
powered_by: "Powered by diaspora*"
|
powered_by: "Powered by diaspora*"
|
||||||
whats_new: "What’s new?"
|
whats_new: "What’s new?"
|
||||||
|
|
|
||||||
|
|
@ -218,6 +218,7 @@ en:
|
||||||
help: "Help"
|
help: "Help"
|
||||||
admin: "Admin"
|
admin: "Admin"
|
||||||
log_out: "Log out"
|
log_out: "Log out"
|
||||||
|
toggle_navigation: "Toggle navigation"
|
||||||
|
|
||||||
notifications: "Notifications"
|
notifications: "Notifications"
|
||||||
conversations: "Conversations"
|
conversations: "Conversations"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ Then /^"([^"]*)" should be part of active conversation$/ do |name|
|
||||||
end
|
end
|
||||||
|
|
||||||
Then /^I should have (\d+) unread private messages?$/ do |n_unread|
|
Then /^I should have (\d+) unread private messages?$/ do |n_unread|
|
||||||
find("header #conversations_badge .badge_count").should have_content(n_unread)
|
expect(find("header #conversations-link .badge")).to have_content(n_unread)
|
||||||
end
|
end
|
||||||
|
|
||||||
Then /^I send a message with subject "([^"]*)" and text "([^"]*)" to "([^"]*)"$/ do |subject, text, person|
|
Then /^I send a message with subject "([^"]*)" and text "([^"]*)" to "([^"]*)"$/ do |subject, text, person|
|
||||||
|
|
|
||||||
|
|
@ -201,7 +201,7 @@ end
|
||||||
|
|
||||||
|
|
||||||
Then /^the notification dropdown should be visible$/ do
|
Then /^the notification dropdown should be visible$/ do
|
||||||
find(:css, "#notification_dropdown").should be_visible
|
expect(find(:css, "#notification-dropdown")).to be_visible
|
||||||
end
|
end
|
||||||
|
|
||||||
Then /^the notification dropdown scrollbar should be visible$/ do
|
Then /^the notification dropdown scrollbar should be visible$/ do
|
||||||
|
|
|
||||||
|
|
@ -73,4 +73,5 @@ include HelperMethods
|
||||||
|
|
||||||
Before do
|
Before do
|
||||||
Devise.mailer.deliveries = []
|
Devise.mailer.deliveries = []
|
||||||
|
page.driver.browser.manage.window.resize_to(1024, 500)
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@ module UserCukeHelpers
|
||||||
|
|
||||||
# go to user menu, expand it, and click logout
|
# go to user menu, expand it, and click logout
|
||||||
def manual_logout
|
def manual_logout
|
||||||
find("#user_menu li:first-child a").click
|
find("#user_menu .dropdown-toggle").click
|
||||||
find("#user_menu li:last-child a").click
|
find("#user_menu li:last-child a").click
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,22 +21,22 @@ describe("app.views.Conversations", function(){
|
||||||
});
|
});
|
||||||
|
|
||||||
it("decreases the unread message count in the header", function() {
|
it("decreases the unread message count in the header", function() {
|
||||||
var badge = "<div id=\"conversations_badge\"><div class=\"badge_count\">3</div></div>";
|
var badge = "<div id=\"conversations-link\"><div class=\"badge\">3</div></div>";
|
||||||
$("header").append(badge);
|
$("header").append(badge);
|
||||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("3");
|
expect($("#conversations-link .badge").text().trim()).toEqual("3");
|
||||||
expect($(".conversation-wrapper > .conversation .unread_message_count").text().trim()).toEqual("1");
|
expect($(".conversation-wrapper > .conversation .unread_message_count").text().trim()).toEqual("1");
|
||||||
new app.views.Conversations();
|
new app.views.Conversations();
|
||||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("2");
|
expect($("#conversations-link .badge").text().trim()).toEqual("2");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("removes the badge_count in the header if there are no unread messages left", function() {
|
it("removes the badge in the header if there are no unread messages left", function() {
|
||||||
var badge = "<div id=\"conversations_badge\"><div class=\"badge_count\">1</div></div>";
|
var badge = "<div id=\"conversations-link\"><div class=\"badge\">1</div></div>";
|
||||||
$("header").append(badge);
|
$("header").append(badge);
|
||||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("1");
|
expect($("#conversations-link .badge").text().trim()).toEqual("1");
|
||||||
expect($(".conversation-wrapper > .conversation.selected .unread_message_count").text().trim()).toEqual("1");
|
expect($(".conversation-wrapper > .conversation.selected .unread_message_count").text().trim()).toEqual("1");
|
||||||
new app.views.Conversations();
|
new app.views.Conversations();
|
||||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("0");
|
expect($("#conversations-link .badge").text().trim()).toEqual("0");
|
||||||
expect($("#conversations_badge .badge_count")).toHaveClass("hidden");
|
expect($("#conversations-link .badge")).toHaveClass("hidden");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -45,12 +45,12 @@ describe("app.views.Conversations", function(){
|
||||||
spec.loadFixture("conversations_read");
|
spec.loadFixture("conversations_read");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("does not change the badge_count in the header", function() {
|
it("does not change the badge in the header", function() {
|
||||||
var badge = "<div id=\"conversations_badge\"><div class=\"badge_count\">3</div></div>";
|
var badge = "<div id=\"conversations-link\"><div class=\"badge\">3</div></div>";
|
||||||
$("header").append(badge);
|
$("header").append(badge);
|
||||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("3");
|
expect($("#conversations-link .badge").text().trim()).toEqual("3");
|
||||||
new app.views.Conversations();
|
new app.views.Conversations();
|
||||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("3");
|
expect($("#conversations-link .badge").text().trim()).toEqual("3");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ describe("app.views.Header", function() {
|
||||||
loginAs(this.userAttrs);
|
loginAs(this.userAttrs);
|
||||||
|
|
||||||
spec.loadFixture("aspects_index");
|
spec.loadFixture("aspects_index");
|
||||||
|
gon.appConfig = {settings: {podname: "MyPod"}};
|
||||||
this.view = new app.views.Header().render();
|
this.view = new app.views.Header().render();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -13,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.$("#notification_badge .badge_count").hasClass('hidden')).toBe(false);
|
expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(false);
|
||||||
expect(this.view.$("#notification_badge .badge_count").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.$("#notification_badge .badge_count").hasClass('hidden')).toBe(true);
|
expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -28,14 +29,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, {unread_messages_count : 1}));
|
loginAs(_.extend(this.userAttrs, {unread_messages_count : 1}));
|
||||||
this.view.render();
|
this.view.render();
|
||||||
expect(this.view.$("#conversations_badge .badge_count").hasClass('hidden')).toBe(false);
|
expect(this.view.$("#conversations-link .badge").hasClass("hidden")).toBe(false);
|
||||||
expect(this.view.$("#conversations_badge .badge_count").text()).toContain("1");
|
expect(this.view.$("#conversations-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, {unread_messages_count : 0}));
|
loginAs(_.extend(this.userAttrs, {unread_messages_count : 0}));
|
||||||
this.view.render();
|
this.view.render();
|
||||||
expect(this.view.$("#conversations_badge .badge_count").hasClass('hidden')).toBe(true);
|
expect(this.view.$("#conversations-link .badge").hasClass("hidden")).toBe(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -54,36 +55,17 @@ describe("app.views.Header", function() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("#toggleUserDropdown", function() {
|
|
||||||
it("adds the class 'active'", function() {
|
|
||||||
expect(this.view.$(".dropdown")).not.toHaveClass("active");
|
|
||||||
this.view.toggleUserDropdown($.Event());
|
|
||||||
expect(this.view.$(".dropdown")).toHaveClass("active");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe("#hideUserDropdown", function() {
|
|
||||||
it("removes the class 'active' if the user clicks anywhere that isn't the menu element", function() {
|
|
||||||
this.view.toggleUserDropdown($.Event());
|
|
||||||
expect(this.view.$(".dropdown")).toHaveClass("active");
|
|
||||||
|
|
||||||
this.view.hideUserDropdown($.Event());
|
|
||||||
expect(this.view.$(".dropdown")).not.toHaveClass("active");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
describe("search", function() {
|
describe("search", function() {
|
||||||
var input;
|
var input;
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
$('#jasmine_content').html(this.view.el);
|
$("#jasmine_content").html(this.view.el);
|
||||||
input = $(this.view.el).find('#q');
|
input = $(this.view.el).find("#q");
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("focus", function() {
|
describe("focus", function() {
|
||||||
beforeEach(function(done){
|
beforeEach(function(done){
|
||||||
input.trigger('focusin');
|
input.trigger("focusin");
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -94,7 +76,7 @@ describe("app.views.Header", function() {
|
||||||
|
|
||||||
describe("blur", function() {
|
describe("blur", function() {
|
||||||
beforeEach(function(done) {
|
beforeEach(function(done) {
|
||||||
input.trigger('focusin').trigger('focusout');
|
input.trigger("focusin").trigger("focusout");
|
||||||
done();
|
done();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,34 +1,36 @@
|
||||||
describe('app.views.NotificationDropdown', function() {
|
describe("app.views.NotificationDropdown", function() {
|
||||||
beforeEach(function (){
|
beforeEach(function (){
|
||||||
spec.loadFixture('notifications');
|
spec.loadFixture("notifications");
|
||||||
|
gon.appConfig = {settings: {podname: "MyPod"}};
|
||||||
this.header = new app.views.Header();
|
this.header = new app.views.Header();
|
||||||
$("header").prepend(this.header.el);
|
$("header").prepend(this.header.el);
|
||||||
this.header.render();
|
this.header.render();
|
||||||
this.view = new app.views.NotificationDropdown({el: '#notification_badge'});
|
this.view = new app.views.NotificationDropdown({el: "#notification-dropdown"});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('showDropdown', function(){
|
context("showDropdown", function(){
|
||||||
it('Calls resetParam()', function(){
|
it("Calls resetParam()", function(){
|
||||||
spyOn(this.view, 'resetParams');
|
spyOn(this.view, "resetParams");
|
||||||
this.view.showDropdown();
|
this.view.showDropdown();
|
||||||
expect(this.view.resetParams).toHaveBeenCalled();
|
expect(this.view.resetParams).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
it('Changes CSS', function(){
|
it("Changes CSS", function(){
|
||||||
|
expect($("#notification-dropdown")).not.toHaveClass("dropdown-open");
|
||||||
this.view.showDropdown();
|
this.view.showDropdown();
|
||||||
expect($('#notification_dropdown').css('display')).toBe('block');
|
expect($("#notification-dropdown")).toHaveClass("dropdown-open");
|
||||||
});
|
});
|
||||||
it('Calls getNotifications()', function(){
|
it("Calls getNotifications()", function(){
|
||||||
spyOn(this.view, 'getNotifications');
|
spyOn(this.view, "getNotifications");
|
||||||
this.view.showDropdown();
|
this.view.showDropdown();
|
||||||
expect(this.view.getNotifications).toHaveBeenCalled();
|
expect(this.view.getNotifications).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('dropdownScroll', function(){
|
context("dropdownScroll", function(){
|
||||||
it('Calls getNotifications if is at the bottom and has more notifications to load', function(){
|
it("Calls getNotifications if is at the bottom and has more notifications to load", function(){
|
||||||
this.view.isBottom = function(){ return true; };
|
this.view.isBottom = function(){ return true; };
|
||||||
this.view.hasMoreNotifs = true;
|
this.view.hasMoreNotifs = true;
|
||||||
spyOn(this.view, 'getNotifications');
|
spyOn(this.view, "getNotifications");
|
||||||
this.view.dropdownScroll();
|
this.view.dropdownScroll();
|
||||||
expect(this.view.getNotifications).toHaveBeenCalled();
|
expect(this.view.getNotifications).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
@ -36,7 +38,7 @@ describe('app.views.NotificationDropdown', function() {
|
||||||
it("Doesn't call getNotifications if is not at the bottom", function(){
|
it("Doesn't call getNotifications if is not at the bottom", function(){
|
||||||
this.view.isBottom = function(){ return false; };
|
this.view.isBottom = function(){ return false; };
|
||||||
this.view.hasMoreNotifs = true;
|
this.view.hasMoreNotifs = true;
|
||||||
spyOn(this.view, 'getNotifications');
|
spyOn(this.view, "getNotifications");
|
||||||
this.view.dropdownScroll();
|
this.view.dropdownScroll();
|
||||||
expect(this.view.getNotifications).not.toHaveBeenCalled();
|
expect(this.view.getNotifications).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
@ -44,62 +46,62 @@ describe('app.views.NotificationDropdown', function() {
|
||||||
it("Doesn't call getNotifications if is not at the bottom", function(){
|
it("Doesn't call getNotifications if is not at the bottom", function(){
|
||||||
this.view.isBottom = function(){ return true; };
|
this.view.isBottom = function(){ return true; };
|
||||||
this.view.hasMoreNotifs = false;
|
this.view.hasMoreNotifs = false;
|
||||||
spyOn(this.view, 'getNotifications');
|
spyOn(this.view, "getNotifications");
|
||||||
this.view.dropdownScroll();
|
this.view.dropdownScroll();
|
||||||
expect(this.view.getNotifications).not.toHaveBeenCalled();
|
expect(this.view.getNotifications).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('getNotifications', function(){
|
context("getNotifications", function(){
|
||||||
it('Has more notifications', function(){
|
it("Has more notifications", function(){
|
||||||
var response = ['', '', '', '', ''];
|
var response = ["", "", "", "", ""];
|
||||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback(response); });
|
spyOn($, "getJSON").and.callFake(function(url, callback){ callback(response); });
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.hasMoreNotifs).toBe(true);
|
expect(this.view.hasMoreNotifs).toBe(true);
|
||||||
});
|
});
|
||||||
it('Has no more notifications', function(){
|
it("Has no more notifications", function(){
|
||||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback([]); });
|
spyOn($, "getJSON").and.callFake(function(url, callback){ callback([]); });
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.hasMoreNotifs).toBe(false);
|
expect(this.view.hasMoreNotifs).toBe(false);
|
||||||
});
|
});
|
||||||
it('Correctly sets the next page', function(){
|
it("Correctly sets the next page", function(){
|
||||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback([]); });
|
spyOn($, "getJSON").and.callFake(function(url, callback){ callback([]); });
|
||||||
expect(typeof this.view.nextPage).toBe('undefined');
|
expect(typeof this.view.nextPage).toBe("undefined");
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.nextPage).toBe(3);
|
expect(this.view.nextPage).toBe(3);
|
||||||
});
|
});
|
||||||
it('Increase the page count', function(){
|
it("Increase the page count", function(){
|
||||||
var response = ['', '', '', '', ''];
|
var response = ["", "", "", "", ""];
|
||||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback(response); });
|
spyOn($, "getJSON").and.callFake(function(url, callback){ callback(response); });
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.nextPage).toBe(3);
|
expect(this.view.nextPage).toBe(3);
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.nextPage).toBe(4);
|
expect(this.view.nextPage).toBe(4);
|
||||||
});
|
});
|
||||||
it('Calls renderNotifications()', function(){
|
it("Calls renderNotifications()", function(){
|
||||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback([]); });
|
spyOn($, "getJSON").and.callFake(function(url, callback){ callback([]); });
|
||||||
spyOn(this.view, 'renderNotifications');
|
spyOn(this.view, "renderNotifications");
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.renderNotifications).toHaveBeenCalled();
|
expect(this.view.renderNotifications).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
it('Adds the notifications to this.notifications', function(){
|
it("Adds the notifications to this.notifications", function(){
|
||||||
var response = ['', '', '', '', ''];
|
var response = ["", "", "", "", ""];
|
||||||
this.view.notifications.length = 0;
|
this.view.notifications.length = 0;
|
||||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback(response); });
|
spyOn($, "getJSON").and.callFake(function(url, callback){ callback(response); });
|
||||||
this.view.getNotifications();
|
this.view.getNotifications();
|
||||||
expect(this.view.notifications).toEqual(response);
|
expect(this.view.notifications).toEqual(response);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('renderNotifications', function(){
|
context("renderNotifications", function(){
|
||||||
it('Removes the previous notifications', function(){
|
it("Removes the previous notifications", function(){
|
||||||
this.view.dropdownNotifications.append('<div class="media stream_element">Notification</div>');
|
this.view.dropdownNotifications.append("<div class=\"media stream_element\">Notification</div>");
|
||||||
expect(this.view.dropdownNotifications.find('.media.stream_element').length).toBe(1);
|
expect(this.view.dropdownNotifications.find(".media.stream_element").length).toBe(1);
|
||||||
this.view.renderNotifications();
|
this.view.renderNotifications();
|
||||||
expect(this.view.dropdownNotifications.find('.media.stream_element').length).toBe(0);
|
expect(this.view.dropdownNotifications.find(".media.stream_element").length).toBe(0);
|
||||||
});
|
});
|
||||||
it('Calls hideAjaxLoader()', function(){
|
it("Calls hideAjaxLoader()", function(){
|
||||||
spyOn(this.view, 'hideAjaxLoader');
|
spyOn(this.view, "hideAjaxLoader");
|
||||||
this.view.renderNotifications();
|
this.view.renderNotifications();
|
||||||
expect(this.view.hideAjaxLoader).toHaveBeenCalled();
|
expect(this.view.hideAjaxLoader).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,45 @@
|
||||||
describe("app.views.Notifications", function(){
|
describe("app.views.Notifications", function(){
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
spec.loadFixture("notifications");
|
spec.loadFixture("notifications");
|
||||||
this.view = new app.views.Notifications({el: '#notifications_container'});
|
this.view = new app.views.Notifications({el: "#notifications_container"});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('mark read', function() {
|
context("mark read", function() {
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
this.unreadN = $('.stream_element.unread').first();
|
this.unreadN = $(".stream_element.unread").first();
|
||||||
this.guid = this.unreadN.data("guid");
|
this.guid = this.unreadN.data("guid");
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls "setRead"', function() {
|
it("calls 'setRead'", function() {
|
||||||
spyOn(this.view, "setRead");
|
spyOn(this.view, "setRead");
|
||||||
this.unreadN.find('.unread-toggle').trigger('click');
|
this.unreadN.find(".unread-toggle").trigger("click");
|
||||||
|
|
||||||
expect(this.view.setRead).toHaveBeenCalledWith(this.guid);
|
expect(this.view.setRead).toHaveBeenCalledWith(this.guid);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('mark unread', function() {
|
context("mark unread", function() {
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
this.readN = $('.stream_element.read').first();
|
this.readN = $(".stream_element.read").first();
|
||||||
this.guid = this.readN.data("guid");
|
this.guid = this.readN.data("guid");
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls "setUnread"', function() {
|
it("calls 'setUnread'", function() {
|
||||||
spyOn(this.view, "setUnread");
|
spyOn(this.view, "setUnread");
|
||||||
this.readN.find('.unread-toggle').trigger('click');
|
this.readN.find(".unread-toggle").trigger("click");
|
||||||
|
|
||||||
expect(this.view.setUnread).toHaveBeenCalledWith(this.guid);
|
expect(this.view.setUnread).toHaveBeenCalledWith(this.guid);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
context('updateView', function() {
|
context("updateView", function() {
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
this.readN = $('.stream_element.read').first();
|
this.readN = $(".stream_element.read").first();
|
||||||
this.guid = this.readN.data('guid');
|
this.guid = this.readN.data("guid");
|
||||||
this.type = this.readN.data('type');
|
this.type = this.readN.data("type");
|
||||||
});
|
});
|
||||||
|
|
||||||
it('changes the "all notifications" count', function() {
|
it("changes the 'all notifications' count", function() {
|
||||||
var badge = $(".list-group > a:eq(0) .badge");
|
var badge = $(".list-group > a:eq(0) .badge");
|
||||||
var count = parseInt(badge.text());
|
var count = parseInt(badge.text());
|
||||||
|
|
||||||
|
|
@ -50,7 +50,7 @@ describe("app.views.Notifications", function(){
|
||||||
expect(parseInt(badge.text())).toBe(count);
|
expect(parseInt(badge.text())).toBe(count);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('changes the notification type count', function() {
|
it("changes the notification type count", function() {
|
||||||
var badge = $(".list-group > a[data-type=" + this.type + "] .badge");
|
var badge = $(".list-group > a[data-type=" + this.type + "] .badge");
|
||||||
var count = parseInt(badge.text());
|
var count = parseInt(badge.text());
|
||||||
|
|
||||||
|
|
@ -61,28 +61,33 @@ describe("app.views.Notifications", function(){
|
||||||
expect(parseInt(badge.text())).toBe(count);
|
expect(parseInt(badge.text())).toBe(count);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('toggles the unread class and changes the title', function() {
|
it("toggles the unread class and changes the title", function() {
|
||||||
this.view.updateView(this.readN.data('guid'), this.readN.data('type'), true);
|
this.view.updateView(this.readN.data("guid"), this.readN.data("type"), true);
|
||||||
expect(this.readN.hasClass('unread')).toBeTruthy();
|
expect(this.readN.hasClass("unread")).toBeTruthy();
|
||||||
expect(this.readN.hasClass('read')).toBeFalsy();
|
expect(this.readN.hasClass("read")).toBeFalsy();
|
||||||
expect(this.readN.find('.unread-toggle .entypo').data('original-title')).toBe(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);
|
this.view.updateView(this.readN.data("guid"), this.readN.data("type"), false);
|
||||||
expect(this.readN.hasClass('read')).toBeTruthy();
|
expect(this.readN.hasClass("read")).toBeTruthy();
|
||||||
expect(this.readN.hasClass('unread')).toBeFalsy();
|
expect(this.readN.hasClass("unread")).toBeFalsy();
|
||||||
expect(this.readN.find('.unread-toggle .entypo').data('original-title')).toBe(Diaspora.I18n.t('notifications.mark_unread'));
|
expect(this.readN.find(".unread-toggle .entypo").data("original-title")).toBe(
|
||||||
|
Diaspora.I18n.t("notifications.mark_unread")
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
context("with a header", function() {
|
context("with a header", function() {
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}, notifications_count : 2});
|
loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}, notifications_count : 2});
|
||||||
|
gon.appConfig = {settings: {podname: "MyPod"}};
|
||||||
this.header = new app.views.Header();
|
this.header = new app.views.Header();
|
||||||
$("header").prepend(this.header.el);
|
$("header").prepend(this.header.el);
|
||||||
this.header.render();
|
this.header.render();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("changes the header notifications count", function() {
|
it("changes the header notifications count", function() {
|
||||||
var badge = $("#notification_badge .badge_count");
|
var badge = $("#notifications-link .badge");
|
||||||
var count = parseInt(badge.text(), 10);
|
var count = parseInt(badge.text(), 10);
|
||||||
|
|
||||||
this.view.updateView(this.guid, this.type, true);
|
this.view.updateView(this.guid, this.type, true);
|
||||||
|
|
@ -96,9 +101,9 @@ describe("app.views.Notifications", function(){
|
||||||
it("calls setRead for each unread notification", function(){
|
it("calls setRead for each unread notification", function(){
|
||||||
spyOn(this.view, "setRead");
|
spyOn(this.view, "setRead");
|
||||||
this.view.markAllRead();
|
this.view.markAllRead();
|
||||||
expect(this.view.setRead).toHaveBeenCalledWith(this.view.$('.stream_element.unread').eq(0).data('guid'));
|
expect(this.view.setRead).toHaveBeenCalledWith(this.view.$(".stream_element.unread").eq(0).data("guid"));
|
||||||
this.view.markAllRead();
|
this.view.markAllRead();
|
||||||
expect(this.view.setRead).toHaveBeenCalledWith(this.view.$('.stream_element.unread').eq(1).data('guid'));
|
expect(this.view.setRead).toHaveBeenCalledWith(this.view.$(".stream_element.unread").eq(1).data("guid"));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue