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"});
|
||||
|
||||
var conv = $(".conversation-wrapper .stream_element.selected"),
|
||||
cBadge = $("#conversations_badge .badge_count");
|
||||
cBadge = $("#conversations-link .badge");
|
||||
|
||||
if(conv.hasClass("unread") ){
|
||||
var unreadCount = parseInt(conv.find(".unread_message_count").text(), 10);
|
||||
|
|
|
|||
|
|
@ -7,46 +7,29 @@ app.views.Header = app.views.Base.extend({
|
|||
className: "dark-header",
|
||||
|
||||
events: {
|
||||
"click ul.dropdown li:first-child": "toggleUserDropdown",
|
||||
"focusin #q": "toggleSearchActive",
|
||||
"focusout #q": "toggleSearchActive"
|
||||
},
|
||||
|
||||
initialize: function(){
|
||||
$(document.body).click($.proxy(this.hideUserDropdown, this));
|
||||
|
||||
return this;
|
||||
presenter: function() {
|
||||
return _.extend({}, this.defaultPresenter(), {
|
||||
podname: gon.appConfig.settings.podname
|
||||
});
|
||||
},
|
||||
|
||||
postRenderTemplate: function(){
|
||||
new app.views.Notifications({ el: '#notification_dropdown' });
|
||||
new app.views.NotificationDropdown({ el: '#notification_badge' });
|
||||
new app.views.Search({ el: '#header-search-form' });
|
||||
new app.views.Notifications({ el: "#notification-dropdown" });
|
||||
this.notificationDropdown = new app.views.NotificationDropdown({ el: "#notification-dropdown" });
|
||||
new app.views.Search({ el: "#header-search-form" });
|
||||
},
|
||||
|
||||
menuElement: function(){ return this.$("ul.dropdown"); },
|
||||
|
||||
toggleUserDropdown: 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){
|
||||
toggleSearchActive: function(evt){
|
||||
// jQuery produces two events for focus/blur (for bubbling)
|
||||
// don't rely on which event arrives first, by allowing for both variants
|
||||
var is_active = (_.indexOf(['focus','focusin'], ev.type) !== -1);
|
||||
$(ev.target).toggleClass('active', is_active);
|
||||
var isActive = (_.indexOf(["focus","focusin"], evt.type) !== -1);
|
||||
$(evt.target).toggleClass("active", isActive);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ app.views.Help = app.views.StaticContentView.extend({
|
|||
},
|
||||
|
||||
chatEnabled: function(){
|
||||
return gon.chatEnabled;
|
||||
return gon.appConfig.chat.enabled;
|
||||
},
|
||||
|
||||
getChatIcons: function(){
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
||||
|
||||
app.views.NotificationDropdown = app.views.Base.extend({
|
||||
events:{
|
||||
"click #notifications-badge": "toggleDropdown"
|
||||
events: {
|
||||
"click #notifications-link": "toggleDropdown"
|
||||
},
|
||||
|
||||
initialize: function(){
|
||||
|
|
@ -12,38 +12,37 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
|||
this.perPage = 5;
|
||||
this.hasMoreNotifs = true;
|
||||
this.badge = this.$el;
|
||||
this.dropdown = $('#notification_dropdown');
|
||||
this.dropdownNotifications = this.dropdown.find('.notifications');
|
||||
this.ajaxLoader = this.dropdown.find('.ajax_loader');
|
||||
this.dropdown = $("#notification-dropdown");
|
||||
this.dropdownNotifications = this.dropdown.find(".notifications");
|
||||
this.ajaxLoader = this.dropdown.find(".ajax_loader");
|
||||
this.perfectScrollbarInitialized = false;
|
||||
},
|
||||
|
||||
toggleDropdown: function(evt){
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
if (!$("#notifications-link .entypo.bell:visible").length) { return true; }
|
||||
evt.preventDefault();
|
||||
if(this.dropdownShowing()){ this.hideDropdown(evt); }
|
||||
else{ this.showDropdown(); }
|
||||
},
|
||||
|
||||
dropdownShowing: function(){
|
||||
return this.dropdown.css('display') === 'block';
|
||||
return this.dropdown.hasClass("dropdown-open");
|
||||
},
|
||||
|
||||
showDropdown: function(){
|
||||
this.resetParams();
|
||||
this.ajaxLoader.show();
|
||||
this.badge.addClass('active');
|
||||
this.dropdown.css('display', 'block');
|
||||
this.dropdownNotifications.addClass('loading');
|
||||
this.dropdown.addClass("dropdown-open");
|
||||
this.dropdownNotifications.addClass("loading");
|
||||
this.getNotifications();
|
||||
},
|
||||
|
||||
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);
|
||||
if(!inDropdown && !inHovercard && this.dropdownShowing()){
|
||||
this.badge.removeClass('active');
|
||||
this.dropdown.css('display', 'none');
|
||||
this.dropdown.removeClass("dropdown-open");
|
||||
if(this.perfectScrollbarInitialized) {
|
||||
this.dropdownNotifications.perfectScrollbar("destroy");
|
||||
this.perfectScrollbarInitialized = false;
|
||||
|
|
@ -52,9 +51,9 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
|||
},
|
||||
|
||||
dropdownScroll: function(){
|
||||
var isLoading = ($('.loading').length === 1);
|
||||
var isLoading = ($(".loading").length === 1);
|
||||
if (this.isBottom() && this.hasMoreNotifs && !isLoading){
|
||||
this.dropdownNotifications.addClass('loading');
|
||||
this.dropdownNotifications.addClass("loading");
|
||||
this.getNotifications();
|
||||
}
|
||||
},
|
||||
|
|
@ -71,7 +70,7 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
|||
},
|
||||
|
||||
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();
|
||||
return currentPosition + 50 >= bottom;
|
||||
},
|
||||
|
|
@ -89,21 +88,21 @@ app.views.NotificationDropdown = app.views.Base.extend({
|
|||
|
||||
hideAjaxLoader: function(){
|
||||
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.find('img').css('opacity', 1);
|
||||
self.ajaxLoader.find("img").css("opacity", 1);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
renderNotifications: function(){
|
||||
var self = this;
|
||||
this.dropdownNotifications.find('.media.stream_element').remove();
|
||||
this.dropdownNotifications.find(".media.stream_element").remove();
|
||||
$.each(self.notifications, function(index, notifications){
|
||||
$.each(notifications, function(index, notification){
|
||||
if($.inArray(notification, notifications) === -1){
|
||||
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,
|
||||
allNotes = $(".list-group > a:eq(0) .badge"),
|
||||
typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
|
||||
headerBadge = $("#notification_badge .badge_count"),
|
||||
headerBadge = $("#notifications-link .badge"),
|
||||
note = $(".stream_element[data-guid=" + guid + "]"),
|
||||
markAllReadLink = $("a#mark_all_read_link"),
|
||||
translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread";
|
||||
|
|
@ -70,7 +70,8 @@ app.views.Notifications = Backbone.View.extend({
|
|||
|
||||
[allNotes, typeNotes, headerBadge].forEach(function(element){
|
||||
element.text(function(i, text){
|
||||
return parseInt(text) + change });
|
||||
return parseInt(text) + change;
|
||||
});
|
||||
});
|
||||
|
||||
[allNotes, typeNotes].forEach(function(badge) {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
@import 'new_styles/interactions';
|
||||
@import 'new_styles/spinner';
|
||||
@import 'lightbox';
|
||||
@import 'timeago';
|
||||
@import 'vendor/fileuploader';
|
||||
@import 'vendor/autoSuggest';
|
||||
|
||||
|
|
@ -38,7 +39,6 @@
|
|||
/* new SPV */
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
@import 'bootstrap-headerfix';
|
||||
@import 'opengraph';
|
||||
@import 'single-post-view';
|
||||
@import 'new_styles/poll';
|
||||
|
|
|
|||
|
|
@ -42,17 +42,16 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
background-color: #fafafa;
|
||||
background-color: rgba(250,250,250,0.95);
|
||||
}
|
||||
|
||||
.ac_even {
|
||||
background-color: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
}
|
||||
|
||||
.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
|
||||
// Navbar collapse
|
||||
//** 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.
|
||||
// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,433 +1,128 @@
|
|||
.timeago {
|
||||
color: $text-grey;
|
||||
header > .dark-header > nav {
|
||||
border-bottom: none;
|
||||
}
|
||||
box-shadow: 1px 0 2px $black;
|
||||
|
||||
body > header {
|
||||
@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 {
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
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;
|
||||
}
|
||||
}
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
/* When the user is not connected */
|
||||
ul#landing_nav {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
text-shadow: 0 1px 0 #000;
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
|
||||
&.login {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px #666;
|
||||
padding: 5px 8px;
|
||||
background-color: #000;
|
||||
border-top: 1px solid #000;
|
||||
|
||||
&:hover { background-color: #222; }
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
.col-lg-10 { padding: 0; }
|
||||
}
|
||||
@media (min-width: $grid-float-breakpoint) {
|
||||
input[type="search"] {
|
||||
@include transition(width);
|
||||
margin-top: 2px;
|
||||
width: 200px;
|
||||
&:not(.active) {
|
||||
background-color: $navbar-inverse-bg;
|
||||
border-color: $gray-light;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child { margin-right: 0; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Extract here from application.sass because
|
||||
* needed for the header in the bootstrap part
|
||||
*/
|
||||
ul.dropdown {
|
||||
padding: 0px;
|
||||
|
||||
li {
|
||||
display: none;
|
||||
|
||||
a { display: block; }
|
||||
|
||||
&:first-child {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
height: auto;
|
||||
display: inline;
|
||||
.entypo {
|
||||
color: inherit;
|
||||
font-size: $font-size-h3;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nav-badge {
|
||||
margin-bottom: -2px;
|
||||
.badge {
|
||||
background-color: $brand-danger;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
z-index: 30;
|
||||
li { display: block; }
|
||||
#user_menu {
|
||||
.avatar {
|
||||
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 {
|
||||
0% { top : -100px; }
|
||||
15% { top : 34px; }
|
||||
85% { top : 34px; }
|
||||
15% { top : 44px; }
|
||||
85% { top : 44px; }
|
||||
100% { top : -100px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
margin-top: 40px;
|
||||
margin-top: 50px;
|
||||
padding : none;
|
||||
|
||||
&.lock {
|
||||
|
|
@ -88,5 +88,5 @@ a.tag { word-break: break-all; }
|
|||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,44 +46,6 @@
|
|||
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; }
|
||||
|
||||
.no_notifications { text-align: center; }
|
||||
|
|
@ -94,3 +56,43 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
|
||||
#notification_dropdown {
|
||||
left: auto;
|
||||
right: 507px;
|
||||
}
|
||||
|
||||
#view_all_notifications {
|
||||
float: left;
|
||||
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;">
|
||||
|
||||
<a href="/stream">
|
||||
<div alt="logo" class="diaspora_header_logo logos-header-logo">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<span class="header-nav">
|
||||
<span>
|
||||
<a href="/stream">
|
||||
{{t "my_stream"}}
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<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"}}
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1">
|
||||
<div class="navbar-header">
|
||||
<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="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="/stream" class="navbar-brand">
|
||||
{{ podname }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="dropdown" id="user_menu">
|
||||
<li class="user-menu-trigger">
|
||||
<div class="user-menu-more-indicator">
|
||||
▼
|
||||
</div>
|
||||
{{{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>
|
||||
<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>
|
||||
</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">
|
||||
<form id="header-search-form" accept-charset="UTF-8" action="/search" class="search_form" method="get">
|
||||
<input name="utf8" type="hidden" value="✓">
|
||||
<input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input">
|
||||
</form>
|
||||
</div>
|
||||
<span class="badge {{#unless current_user.notifications_count}} hidden {{/unless}}">
|
||||
{{current_user.notifications_count}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<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>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<div class="header">
|
||||
<div class="pull-right">
|
||||
<a href="#" id="mark_all_read_link" class="btn btn-default btn-sm {{#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>
|
||||
</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 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 :mobile_switch
|
||||
before_action :gon_set_current_user
|
||||
before_action :gon_set_appconfig
|
||||
before_action :gon_set_preloads
|
||||
|
||||
inflection_method :grammatical_gender => :gender
|
||||
|
|
@ -142,6 +143,13 @@ class ApplicationController < ActionController::Base
|
|||
current_user.getting_started? ? getting_started_path : stream_path
|
||||
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
|
||||
return unless user_signed_in?
|
||||
a_ids = session[:a_ids] || []
|
||||
|
|
|
|||
|
|
@ -1,5 +1,2 @@
|
|||
class HelpController < ApplicationController
|
||||
def faq
|
||||
gon.chatEnabled = AppConfig.chat.enabled?
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -4,18 +4,31 @@
|
|||
|
||||
%header
|
||||
- unless current_user
|
||||
.container{style: "position:relative;"}
|
||||
= link_to content_tag(:div, nil, class: 'diaspora_header_logo logos-header-logo'), root_path
|
||||
.dark-header
|
||||
%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
|
||||
- if AppConfig.settings.enable_registrations? && !current_page?(controller: '/registrations', action: :new)
|
||||
%li= link_to t('devise.shared.links.sign_up'), new_user_registration_path, class: 'login'
|
||||
%li= link_to t('devise.shared.links.sign_in'), new_user_session_path, class: 'login'
|
||||
#lightbox
|
||||
#lightbox-content
|
||||
%a#lightbox-close-link(href='#')
|
||||
[x]
|
||||
=t('javascripts.header.close')
|
||||
%img#lightbox-image
|
||||
#lightbox-imageset
|
||||
#lightbox-backdrop
|
||||
.collapse.navbar-collapse#navbar-collapse
|
||||
%ul.nav.navbar-nav.navbar-right
|
||||
- if AppConfig.settings.enable_registrations? && !current_page?(controller: "/registrations", action: :new)
|
||||
%li= link_to t("devise.shared.links.sign_up"), new_user_registration_path, class: 'login'
|
||||
%li= link_to t('devise.shared.links.sign_in'), new_user_session_path, class: 'login'
|
||||
|
||||
#lightbox
|
||||
#lightbox-content
|
||||
%a#lightbox-close-link(href='#')
|
||||
[x]
|
||||
=t('javascripts.header.close')
|
||||
%img#lightbox-image
|
||||
#lightbox-imageset
|
||||
#lightbox-backdrop
|
||||
|
|
|
|||
|
|
@ -642,6 +642,7 @@ en:
|
|||
admin: "Admin"
|
||||
view_all: "View all"
|
||||
recent_notifications: "Recent notifications"
|
||||
toggle_navigation: "Toggle navigation"
|
||||
application:
|
||||
powered_by: "Powered by diaspora*"
|
||||
whats_new: "What’s new?"
|
||||
|
|
|
|||
|
|
@ -218,6 +218,7 @@ en:
|
|||
help: "Help"
|
||||
admin: "Admin"
|
||||
log_out: "Log out"
|
||||
toggle_navigation: "Toggle navigation"
|
||||
|
||||
notifications: "Notifications"
|
||||
conversations: "Conversations"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ Then /^"([^"]*)" should be part of active conversation$/ do |name|
|
|||
end
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
find(:css, "#notification_dropdown").should be_visible
|
||||
expect(find(:css, "#notification-dropdown")).to be_visible
|
||||
end
|
||||
|
||||
Then /^the notification dropdown scrollbar should be visible$/ do
|
||||
|
|
|
|||
|
|
@ -73,4 +73,5 @@ include HelperMethods
|
|||
|
||||
Before do
|
||||
Devise.mailer.deliveries = []
|
||||
page.driver.browser.manage.window.resize_to(1024, 500)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ module UserCukeHelpers
|
|||
|
||||
# go to user menu, expand it, and click 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
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -21,22 +21,22 @@ describe("app.views.Conversations", 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);
|
||||
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");
|
||||
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() {
|
||||
var badge = "<div id=\"conversations_badge\"><div class=\"badge_count\">1</div></div>";
|
||||
it("removes the badge in the header if there are no unread messages left", function() {
|
||||
var badge = "<div id=\"conversations-link\"><div class=\"badge\">1</div></div>";
|
||||
$("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");
|
||||
new app.views.Conversations();
|
||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("0");
|
||||
expect($("#conversations_badge .badge_count")).toHaveClass("hidden");
|
||||
expect($("#conversations-link .badge").text().trim()).toEqual("0");
|
||||
expect($("#conversations-link .badge")).toHaveClass("hidden");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -45,12 +45,12 @@ describe("app.views.Conversations", function(){
|
|||
spec.loadFixture("conversations_read");
|
||||
});
|
||||
|
||||
it("does not change the badge_count in the header", function() {
|
||||
var badge = "<div id=\"conversations_badge\"><div class=\"badge_count\">3</div></div>";
|
||||
it("does not change the badge in the header", function() {
|
||||
var badge = "<div id=\"conversations-link\"><div class=\"badge\">3</div></div>";
|
||||
$("header").append(badge);
|
||||
expect($("#conversations_badge .badge_count").text().trim()).toEqual("3");
|
||||
expect($("#conversations-link .badge").text().trim()).toEqual("3");
|
||||
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);
|
||||
|
||||
spec.loadFixture("aspects_index");
|
||||
gon.appConfig = {settings: {podname: "MyPod"}};
|
||||
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(){
|
||||
loginAs(_.extend(this.userAttrs, {notifications_count : 1}));
|
||||
this.view.render();
|
||||
expect(this.view.$("#notification_badge .badge_count").hasClass('hidden')).toBe(false);
|
||||
expect(this.view.$("#notification_badge .badge_count").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.$("#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(){
|
||||
loginAs(_.extend(this.userAttrs, {unread_messages_count : 1}));
|
||||
this.view.render();
|
||||
expect(this.view.$("#conversations_badge .badge_count").hasClass('hidden')).toBe(false);
|
||||
expect(this.view.$("#conversations_badge .badge_count").text()).toContain("1");
|
||||
expect(this.view.$("#conversations-link .badge").hasClass("hidden")).toBe(false);
|
||||
expect(this.view.$("#conversations-link .badge").text()).toContain("1");
|
||||
});
|
||||
|
||||
it("does not display a count when the current user has a notification", function(){
|
||||
loginAs(_.extend(this.userAttrs, {unread_messages_count : 0}));
|
||||
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() {
|
||||
var input;
|
||||
|
||||
beforeEach(function() {
|
||||
$('#jasmine_content').html(this.view.el);
|
||||
input = $(this.view.el).find('#q');
|
||||
$("#jasmine_content").html(this.view.el);
|
||||
input = $(this.view.el).find("#q");
|
||||
});
|
||||
|
||||
describe("focus", function() {
|
||||
beforeEach(function(done){
|
||||
input.trigger('focusin');
|
||||
input.trigger("focusin");
|
||||
done();
|
||||
});
|
||||
|
||||
|
|
@ -94,7 +76,7 @@ describe("app.views.Header", function() {
|
|||
|
||||
describe("blur", function() {
|
||||
beforeEach(function(done) {
|
||||
input.trigger('focusin').trigger('focusout');
|
||||
input.trigger("focusin").trigger("focusout");
|
||||
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 (){
|
||||
spec.loadFixture('notifications');
|
||||
spec.loadFixture("notifications");
|
||||
gon.appConfig = {settings: {podname: "MyPod"}};
|
||||
this.header = new app.views.Header();
|
||||
$("header").prepend(this.header.el);
|
||||
this.header.render();
|
||||
this.view = new app.views.NotificationDropdown({el: '#notification_badge'});
|
||||
this.view = new app.views.NotificationDropdown({el: "#notification-dropdown"});
|
||||
});
|
||||
|
||||
context('showDropdown', function(){
|
||||
it('Calls resetParam()', function(){
|
||||
spyOn(this.view, 'resetParams');
|
||||
context("showDropdown", function(){
|
||||
it("Calls resetParam()", function(){
|
||||
spyOn(this.view, "resetParams");
|
||||
this.view.showDropdown();
|
||||
expect(this.view.resetParams).toHaveBeenCalled();
|
||||
});
|
||||
it('Changes CSS', function(){
|
||||
it("Changes CSS", function(){
|
||||
expect($("#notification-dropdown")).not.toHaveClass("dropdown-open");
|
||||
this.view.showDropdown();
|
||||
expect($('#notification_dropdown').css('display')).toBe('block');
|
||||
expect($("#notification-dropdown")).toHaveClass("dropdown-open");
|
||||
});
|
||||
it('Calls getNotifications()', function(){
|
||||
spyOn(this.view, 'getNotifications');
|
||||
it("Calls getNotifications()", function(){
|
||||
spyOn(this.view, "getNotifications");
|
||||
this.view.showDropdown();
|
||||
expect(this.view.getNotifications).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
context('dropdownScroll', function(){
|
||||
it('Calls getNotifications if is at the bottom and has more notifications to load', function(){
|
||||
context("dropdownScroll", function(){
|
||||
it("Calls getNotifications if is at the bottom and has more notifications to load", function(){
|
||||
this.view.isBottom = function(){ return true; };
|
||||
this.view.hasMoreNotifs = true;
|
||||
spyOn(this.view, 'getNotifications');
|
||||
spyOn(this.view, "getNotifications");
|
||||
this.view.dropdownScroll();
|
||||
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(){
|
||||
this.view.isBottom = function(){ return false; };
|
||||
this.view.hasMoreNotifs = true;
|
||||
spyOn(this.view, 'getNotifications');
|
||||
spyOn(this.view, "getNotifications");
|
||||
this.view.dropdownScroll();
|
||||
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(){
|
||||
this.view.isBottom = function(){ return true; };
|
||||
this.view.hasMoreNotifs = false;
|
||||
spyOn(this.view, 'getNotifications');
|
||||
spyOn(this.view, "getNotifications");
|
||||
this.view.dropdownScroll();
|
||||
expect(this.view.getNotifications).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
context('getNotifications', function(){
|
||||
it('Has more notifications', function(){
|
||||
var response = ['', '', '', '', ''];
|
||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback(response); });
|
||||
context("getNotifications", function(){
|
||||
it("Has more notifications", function(){
|
||||
var response = ["", "", "", "", ""];
|
||||
spyOn($, "getJSON").and.callFake(function(url, callback){ callback(response); });
|
||||
this.view.getNotifications();
|
||||
expect(this.view.hasMoreNotifs).toBe(true);
|
||||
});
|
||||
it('Has no more notifications', function(){
|
||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback([]); });
|
||||
it("Has no more notifications", function(){
|
||||
spyOn($, "getJSON").and.callFake(function(url, callback){ callback([]); });
|
||||
this.view.getNotifications();
|
||||
expect(this.view.hasMoreNotifs).toBe(false);
|
||||
});
|
||||
it('Correctly sets the next page', function(){
|
||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback([]); });
|
||||
expect(typeof this.view.nextPage).toBe('undefined');
|
||||
it("Correctly sets the next page", function(){
|
||||
spyOn($, "getJSON").and.callFake(function(url, callback){ callback([]); });
|
||||
expect(typeof this.view.nextPage).toBe("undefined");
|
||||
this.view.getNotifications();
|
||||
expect(this.view.nextPage).toBe(3);
|
||||
});
|
||||
it('Increase the page count', function(){
|
||||
var response = ['', '', '', '', ''];
|
||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback(response); });
|
||||
it("Increase the page count", function(){
|
||||
var response = ["", "", "", "", ""];
|
||||
spyOn($, "getJSON").and.callFake(function(url, callback){ callback(response); });
|
||||
this.view.getNotifications();
|
||||
expect(this.view.nextPage).toBe(3);
|
||||
this.view.getNotifications();
|
||||
expect(this.view.nextPage).toBe(4);
|
||||
});
|
||||
it('Calls renderNotifications()', function(){
|
||||
spyOn($, 'getJSON').and.callFake(function(url, callback){ callback([]); });
|
||||
spyOn(this.view, 'renderNotifications');
|
||||
it("Calls renderNotifications()", function(){
|
||||
spyOn($, "getJSON").and.callFake(function(url, callback){ callback([]); });
|
||||
spyOn(this.view, "renderNotifications");
|
||||
this.view.getNotifications();
|
||||
expect(this.view.renderNotifications).toHaveBeenCalled();
|
||||
});
|
||||
it('Adds the notifications to this.notifications', function(){
|
||||
var response = ['', '', '', '', ''];
|
||||
it("Adds the notifications to this.notifications", function(){
|
||||
var response = ["", "", "", "", ""];
|
||||
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();
|
||||
expect(this.view.notifications).toEqual(response);
|
||||
});
|
||||
});
|
||||
|
||||
context('renderNotifications', function(){
|
||||
it('Removes the previous notifications', function(){
|
||||
this.view.dropdownNotifications.append('<div class="media stream_element">Notification</div>');
|
||||
expect(this.view.dropdownNotifications.find('.media.stream_element').length).toBe(1);
|
||||
context("renderNotifications", function(){
|
||||
it("Removes the previous notifications", function(){
|
||||
this.view.dropdownNotifications.append("<div class=\"media stream_element\">Notification</div>");
|
||||
expect(this.view.dropdownNotifications.find(".media.stream_element").length).toBe(1);
|
||||
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(){
|
||||
spyOn(this.view, 'hideAjaxLoader');
|
||||
it("Calls hideAjaxLoader()", function(){
|
||||
spyOn(this.view, "hideAjaxLoader");
|
||||
this.view.renderNotifications();
|
||||
expect(this.view.hideAjaxLoader).toHaveBeenCalled();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
describe("app.views.Notifications", function(){
|
||||
beforeEach(function() {
|
||||
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() {
|
||||
this.unreadN = $('.stream_element.unread').first();
|
||||
this.unreadN = $(".stream_element.unread").first();
|
||||
this.guid = this.unreadN.data("guid");
|
||||
});
|
||||
|
||||
it('calls "setRead"', function() {
|
||||
it("calls 'setRead'", function() {
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
context('mark unread', function() {
|
||||
context("mark unread", function() {
|
||||
beforeEach(function() {
|
||||
this.readN = $('.stream_element.read').first();
|
||||
this.readN = $(".stream_element.read").first();
|
||||
this.guid = this.readN.data("guid");
|
||||
});
|
||||
|
||||
it('calls "setUnread"', function() {
|
||||
it("calls 'setUnread'", function() {
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
context('updateView', function() {
|
||||
context("updateView", function() {
|
||||
beforeEach(function() {
|
||||
this.readN = $('.stream_element.read').first();
|
||||
this.guid = this.readN.data('guid');
|
||||
this.type = this.readN.data('type');
|
||||
this.readN = $(".stream_element.read").first();
|
||||
this.guid = this.readN.data("guid");
|
||||
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 count = parseInt(badge.text());
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ describe("app.views.Notifications", function(){
|
|||
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 count = parseInt(badge.text());
|
||||
|
||||
|
|
@ -61,28 +61,33 @@ describe("app.views.Notifications", function(){
|
|||
expect(parseInt(badge.text())).toBe(count);
|
||||
});
|
||||
|
||||
it('toggles the unread class and changes the title', function() {
|
||||
this.view.updateView(this.readN.data('guid'), this.readN.data('type'), true);
|
||||
expect(this.readN.hasClass('unread')).toBeTruthy();
|
||||
expect(this.readN.hasClass('read')).toBeFalsy();
|
||||
expect(this.readN.find('.unread-toggle .entypo').data('original-title')).toBe(Diaspora.I18n.t('notifications.mark_read'));
|
||||
it("toggles the unread class and changes the title", function() {
|
||||
this.view.updateView(this.readN.data("guid"), this.readN.data("type"), true);
|
||||
expect(this.readN.hasClass("unread")).toBeTruthy();
|
||||
expect(this.readN.hasClass("read")).toBeFalsy();
|
||||
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);
|
||||
expect(this.readN.hasClass('read')).toBeTruthy();
|
||||
expect(this.readN.hasClass('unread')).toBeFalsy();
|
||||
expect(this.readN.find('.unread-toggle .entypo').data('original-title')).toBe(Diaspora.I18n.t('notifications.mark_unread'));
|
||||
this.view.updateView(this.readN.data("guid"), this.readN.data("type"), false);
|
||||
expect(this.readN.hasClass("read")).toBeTruthy();
|
||||
expect(this.readN.hasClass("unread")).toBeFalsy();
|
||||
expect(this.readN.find(".unread-toggle .entypo").data("original-title")).toBe(
|
||||
Diaspora.I18n.t("notifications.mark_unread")
|
||||
);
|
||||
});
|
||||
|
||||
context("with a header", function() {
|
||||
beforeEach(function() {
|
||||
loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}, notifications_count : 2});
|
||||
gon.appConfig = {settings: {podname: "MyPod"}};
|
||||
this.header = new app.views.Header();
|
||||
$("header").prepend(this.header.el);
|
||||
this.header.render();
|
||||
});
|
||||
|
||||
it("changes the header notifications count", function() {
|
||||
var badge = $("#notification_badge .badge_count");
|
||||
var badge = $("#notifications-link .badge");
|
||||
var count = parseInt(badge.text(), 10);
|
||||
|
||||
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(){
|
||||
spyOn(this.view, "setRead");
|
||||
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();
|
||||
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