diff --git a/Changelog.md b/Changelog.md index 0d7ecab02..0c1cbe039 100644 --- a/Changelog.md +++ b/Changelog.md @@ -34,6 +34,7 @@ bind to an UNIX socket at `unix:tmp/diaspora.sock`. Please change your local * Replace jquery.autoresize with autosize [#6104](https://github.com/diaspora/diaspora/pull/6104) * Improve mobile conversation design [#6087](https://github.com/diaspora/diaspora/pull/6087) * Replace remaining faceboxes with Bootstrap modals [#6106](https://github.com/diaspora/diaspora/pull/6106) +* Rewrite header using Bootstrap 3 [#6109](https://github.com/diaspora/diaspora/pull/6109) ## Bug fixes * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852) diff --git a/app/assets/javascripts/app/views/conversations_view.js b/app/assets/javascripts/app/views/conversations_view.js index cd4addf41..c1328e83a 100644 --- a/app/assets/javascripts/app/views/conversations_view.js +++ b/app/assets/javascripts/app/views/conversations_view.js @@ -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); diff --git a/app/assets/javascripts/app/views/header_view.js b/app/assets/javascripts/app/views/header_view.js index 814ef3a87..6434f1a89 100644 --- a/app/assets/javascripts/app/views/header_view.js +++ b/app/assets/javascripts/app/views/header_view.js @@ -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; } }); diff --git a/app/assets/javascripts/app/views/help_view.js b/app/assets/javascripts/app/views/help_view.js index f1ec4618f..d0cf0e4d5 100644 --- a/app/assets/javascripts/app/views/help_view.js +++ b/app/assets/javascripts/app/views/help_view.js @@ -210,7 +210,7 @@ app.views.Help = app.views.StaticContentView.extend({ }, chatEnabled: function(){ - return gon.chatEnabled; + return gon.appConfig.chat.enabled; }, getChatIcons: function(){ diff --git a/app/assets/javascripts/app/views/notification_dropdown_view.js b/app/assets/javascripts/app/views/notification_dropdown_view.js index 43e509019..522a03015 100644 --- a/app/assets/javascripts/app/views/notification_dropdown_view.js +++ b/app/assets/javascripts/app/views/notification_dropdown_view.js @@ -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(); } }); }); diff --git a/app/assets/javascripts/app/views/notifications_view.js b/app/assets/javascripts/app/views/notifications_view.js index 583c8ce0f..00bb5e6c8 100644 --- a/app/assets/javascripts/app/views/notifications_view.js +++ b/app/assets/javascripts/app/views/notifications_view.js @@ -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) { diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index f913a9131..4bc1621b4 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -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'; diff --git a/app/assets/stylesheets/autocomplete.scss b/app/assets/stylesheets/autocomplete.scss index 4f3394ae6..5fa51c6c4 100644 --- a/app/assets/stylesheets/autocomplete.scss +++ b/app/assets/stylesheets/autocomplete.scss @@ -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 { diff --git a/app/assets/stylesheets/bootstrap-headerfix.scss b/app/assets/stylesheets/bootstrap-headerfix.scss deleted file mode 100644 index 792b44c6c..000000000 --- a/app/assets/stylesheets/bootstrap-headerfix.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/app/assets/stylesheets/bootstrap-variables.scss b/app/assets/stylesheets/bootstrap-variables.scss index 599a7303a..6c8376e97 100644 --- a/app/assets/stylesheets/bootstrap-variables.scss +++ b/app/assets/stylesheets/bootstrap-variables.scss @@ -16,8 +16,8 @@ // $gray-light: lighten($gray-base, 46.7%) // #777 // $gray-lighter: lighten($gray-base, 93.5%) // #eee -$brand-primary: darken(#0097FF,5%); // darker creation-blue -$brand-success: #8EDE3D; +$brand-primary: darken(#0097FF,5%) !default; // darker creation-blue +$brand-success: #8EDE3D !default; // $brand-info: #5bc0de // $brand-warning: #f0ad4e // $brand-danger: #d9534f @@ -33,7 +33,7 @@ $brand-success: #8EDE3D; // $text-color: $gray-dark //** Global textual link color. -$link-color: rgb(42,156,235); +$link-color: rgb(42,156,235) !default; //** Link hover color set via `darken()` function. // $link-hover-color: darken($link-color, 15%) //** Link hover decoration. @@ -50,9 +50,9 @@ $link-color: rgb(42,156,235); // $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace // $font-family-base: $font-family-sans-serif -$font-size-base: 13px; +$font-size-base: 13px !default; // $font-size-large: ceil(($font-size-base * 1.25)) // ~18px -$font-size-small: 11px; +$font-size-small: 11px !default; // $font-size-h1: floor(($font-size-base * 2.6)) // ~36px // $font-size-h2: floor(($font-size-base * 2.15)) // ~30px @@ -158,7 +158,7 @@ $font-size-small: 11px; // $btn-primary-bg: $brand-primary // $btn-primary-border: darken($btn-primary-bg, 5%) -$btn-success-color: #333; +$btn-success-color: #333 !default; // $btn-success-bg: $brand-success // $btn-success-border: darken($btn-success-bg, 5%) @@ -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 !default; // $screen-md-min //** Point at which the navbar begins collapsing. // $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) @@ -856,7 +856,7 @@ $btn-success-color: #333; //** Blockquote small color // $blockquote-small-color: $gray-light //** Blockquote font size -$blockquote-font-size: $font-size-base; +$blockquote-font-size: $font-size-base !default; //** Blockquote border color // $blockquote-border-color: $gray-lighter //** Page header border color diff --git a/app/assets/stylesheets/color_themes/_color_theme_override.scss b/app/assets/stylesheets/color_themes/_color_theme_override.scss index d21280f41..c9c0385a7 100644 --- a/app/assets/stylesheets/color_themes/_color_theme_override.scss +++ b/app/assets/stylesheets/color_themes/_color_theme_override.scss @@ -1,45 +1,5 @@ /* Raw CSS */ body { - header { - .container { - #nav_badges > #notification_dropdown { - a#mark_all_read_link, .stream_element a { - color: $link-color; - } - - div.view_all { - background-color: $main-color; - } - } - - #global_search > form > input.ac_input { - background-color: $header-search-color; - border-color: $main-color-dark; - - &:hover { - background-color: lighten($header-search-color, 2%); - } - - &:focus { - background-color: white; - } - } - - ul#user_menu.active { - box-shadow: 0 1px 3px $main-color-dark; - background-color: $main-color-dark; - - li { - border-color: darken($main-color-dark, 5%); - - &.user-menu-item a:hover { - background-color: lighten($main-color-dark, 15%); - } - } - } - } - } - a, a.tag, .btn-link, @@ -57,7 +17,6 @@ body { color: fade-out($link-color, 0.4); } - #main_stream .stream_element { &.post_preview { background-color: $main-color-essence; @@ -65,13 +24,9 @@ body { } } - #leftNavBar .hoverable:hover { background-color: $main-color-essence } + #leftNavBar .hoverable:hover { background-color: $main-color-essence; } - .poll_form .progress .bar { background-color: $main-color-dark } + .poll_form .progress .bar { background-color: $main-color-dark; } - #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active { - border-bottom-color: $main-color; - } - - .badge { background-color: $main-color } + .badge { background-color: $brand-primary; } } diff --git a/app/assets/stylesheets/color_themes/dark_green/_style.scss b/app/assets/stylesheets/color_themes/dark_green/_style.scss index 6039cc718..f8fe658e7 100644 --- a/app/assets/stylesheets/color_themes/dark_green/_style.scss +++ b/app/assets/stylesheets/color_themes/dark_green/_style.scss @@ -1,17 +1,18 @@ /* Main color(s) */ -$main-color: #009900; +$brand-primary: #009900; /* Shades */ -$main-color-essence: fade-out($main-color, 0.8); -$main-color-light: lighten($main-color, 10%); -$main-color-dark: darken($main-color, 20%); +$main-color-essence: fade-out($brand-primary, 0.8); +$main-color-light: lighten($brand-primary, 10%); +$main-color-dark: darken($brand-primary, 20%); /* Bootstrap Variables */ -$btn-primary-bg: $main-color; -$link-color: $main-color; +$btn-primary-bg: $brand-primary; +$link-color: $brand-primary; /* Custom Variables */ $header-background-color: $main-color-dark; +$navbar-inverse-bg: $main-color-dark; $header-search-color: lighten($header-background-color, 10%); @import "color_themes/color_theme_override" diff --git a/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss b/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss index c39132caa..1895f02bb 100644 --- a/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss +++ b/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss @@ -1,17 +1,18 @@ /* Main color(s) */ -$main-color: #1034A6; +$brand-primary: #1034A6; /* Shades */ -$main-color-essence: fade-out($main-color, 0.8); -$main-color-light: lighten($main-color, 10%); -$main-color-dark: darken($main-color, 15%); +$main-color-essence: fade-out($brand-primary, 0.8); +$main-color-light: lighten($brand-primary, 10%); +$main-color-dark: darken($brand-primary, 15%); /* Bootstrap Variables */ -$btn-primary-bg: $main-color; -$link-color: $main-color; +$btn-primary-bg: $brand-primary; +$link-color: $brand-primary; /* Custom Variables */ $header-background-color: $main-color-dark; +$navbar-inverse-bg: $main-color-dark; $header-search-color: lighten($header-background-color, 15%); @import "color_themes/color_theme_override" diff --git a/app/assets/stylesheets/color_themes/magenta/_style.scss b/app/assets/stylesheets/color_themes/magenta/_style.scss index 8b13dc77f..0f9b4be1f 100644 --- a/app/assets/stylesheets/color_themes/magenta/_style.scss +++ b/app/assets/stylesheets/color_themes/magenta/_style.scss @@ -1,17 +1,18 @@ /* Main color(s) */ -$main-color: #FF00FF; +$brand-primary: #FF00FF; /* Shades */ -$main-color-essence: fade-out($main-color, 0.8); -$main-color-light: lighten($main-color, 10%); -$main-color-dark: darken($main-color, 30%); +$main-color-essence: fade-out($brand-primary, 0.8); +$main-color-light: lighten($brand-primary, 10%); +$main-color-dark: darken($brand-primary, 30%); /* Bootstrap Variables */ -$btn-primary-bg: darken($main-color, 5%); -$link-color: $main-color; +$btn-primary-bg: darken($brand-primary, 5%); +$link-color: $brand-primary; /* Custom Variables */ $header-background-color: $main-color-dark; +$navbar-inverse-bg: $main-color-dark; $header-search-color: lighten($header-background-color, 10%); @import "color_themes/color_theme_override" diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss index cbafb6364..07c582884 100644 --- a/app/assets/stylesheets/header.scss +++ b/app/assets/stylesheets/header.scss @@ -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; + } } } diff --git a/app/assets/stylesheets/new_styles/_animations.scss b/app/assets/stylesheets/new_styles/_animations.scss index 93ca29ad3..d5210066e 100644 --- a/app/assets/stylesheets/new_styles/_animations.scss +++ b/app/assets/stylesheets/new_styles/_animations.scss @@ -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; } } diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 5717a8189..95ecb30d8 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -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; - } + } } diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index 099bcc7ca..990247836 100644 --- a/app/assets/stylesheets/notifications.scss +++ b/app/assets/stylesheets/notifications.scss @@ -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; } + } +} diff --git a/app/assets/stylesheets/rtl.scss b/app/assets/stylesheets/rtl.scss index 95392bea5..cf8f2865f 100644 --- a/app/assets/stylesheets/rtl.scss +++ b/app/assets/stylesheets/rtl.scss @@ -30,12 +30,6 @@ body { margin-right: -20px; } - -#notification_dropdown { - left: auto; - right: 507px; -} - #view_all_notifications { float: left; margin-right: 0; diff --git a/app/assets/stylesheets/timeago.scss b/app/assets/stylesheets/timeago.scss new file mode 100644 index 000000000..cbc0e917b --- /dev/null +++ b/app/assets/stylesheets/timeago.scss @@ -0,0 +1,3 @@ +.timeago { + color: $text-grey; +} diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs index d7ade2b5a..8d6ce060d 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -1,109 +1,125 @@ -
- - - - - - - - - {{t "my_stream"}} - - - - - - {{t "my_activity"}} - - - - - + + +
+ diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index faa0b49ba..13bd0d314 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -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] || [] diff --git a/app/controllers/help_controller.rb b/app/controllers/help_controller.rb index 3d65e1f0d..4799488ae 100644 --- a/app/controllers/help_controller.rb +++ b/app/controllers/help_controller.rb @@ -1,5 +1,2 @@ class HelpController < ApplicationController - def faq - gon.chatEnabled = AppConfig.chat.enabled? - end end diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index 654dececb..e244caca5 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -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 diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 038dfdf84..0a814cb26 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -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?" diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index d856b716f..f6755516f 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -218,6 +218,7 @@ en: help: "Help" admin: "Admin" log_out: "Log out" + toggle_navigation: "Toggle navigation" notifications: "Notifications" conversations: "Conversations" diff --git a/features/desktop/closes_account.feature b/features/desktop/closes_account.feature index 26b93607c..ece4afe58 100644 --- a/features/desktop/closes_account.feature +++ b/features/desktop/closes_account.feature @@ -8,7 +8,8 @@ Feature: Close account Given I am signed in When I go to the users edit page And I click on selector "#close_account" - Then I should see "Hey, please don’t go!" within "#closeAccountModal" + Then I should see a modal + And I should see "Hey, please don’t go!" within "#closeAccountModal" When I put in my password in "close_account_password" And I press "close_account_confirm" And I confirm the alert diff --git a/features/mobile/closes_account.feature b/features/mobile/closes_account.feature index f2458dba6..ceb74fd14 100644 --- a/features/mobile/closes_account.feature +++ b/features/mobile/closes_account.feature @@ -8,12 +8,13 @@ Feature: Close account Given I am signed in When I go to the users edit page And I click on selector "#close_account" - Then I should see "Hey, please don’t go!" within "#closeAccountModal" - When I put in my password in "close_account_password" + Then I should see a modal + And I should see "Hey, please don’t go!" within "#closeAccountModal" + When I put in my password in the close account modal And I press "close_account_confirm" And I confirm the alert + Then I should be on the mobile new user session page - When I am on the new user session page - And I try to sign in manually + When I try to sign in manually Then I should be on the new user session page And I should see a flash message with a warning diff --git a/features/step_definitions/conversations_steps.rb b/features/step_definitions/conversations_steps.rb index 8f5a78d99..51224deee 100644 --- a/features/step_definitions/conversations_steps.rb +++ b/features/step_definitions/conversations_steps.rb @@ -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| diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index a5510c84e..03fd058d7 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -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 diff --git a/features/step_definitions/modal_steps.rb b/features/step_definitions/modal_steps.rb index f672d9f03..36dbd9295 100644 --- a/features/step_definitions/modal_steps.rb +++ b/features/step_definitions/modal_steps.rb @@ -1,3 +1,14 @@ -Then /I should see the mention modal/ do +Then /^I should see a modal$/ do + step %{I should see a ".modal.in"} +end + +Then /^I should see the mention modal$/ do step %{I should see a "#mentionModal.in"} end + +When /^I put in my password in the close account modal$/ do + # Capybara helpers fill_in, set and send_keys currently don't work + # inside of Bootstrap modals on Travis CI + execute_script("$(\"#closeAccountModal input#close_account_password\").val(\"#{@me.password}\")") + expect(find("#closeAccountModal input#close_account_password").value).to eq(@me.password) +end diff --git a/features/support/env.rb b/features/support/env.rb index cad3ec70f..956e26888 100644 --- a/features/support/env.rb +++ b/features/support/env.rb @@ -73,4 +73,5 @@ include HelperMethods Before do Devise.mailer.deliveries = [] + page.driver.browser.manage.window.resize_to(1024, 500) end diff --git a/features/support/paths.rb b/features/support/paths.rb index d1b923091..c19a72654 100644 --- a/features/support/paths.rb +++ b/features/support/paths.rb @@ -1,47 +1,43 @@ module NavigationHelpers def path_to(page_name) case page_name - when /^person_photos page$/ - person_photos_path(@me.person) - when /^the home(?: )?page$/ - stream_path - when /^step (\d)$/ - if $1.to_i == 1 - getting_started_path - else - getting_started_path(:step => $1) - end - when /^the tag page for "([^\"]*)"$/ - tag_path($1) - when /^its ([\w ]+) page$/ - send("#{$1.gsub(/\W+/, '_')}_path", @it) - when /^the ([\w ]+) page$/ - send("#{$1.gsub(/\W+/, '_')}_path") - when /^my edit profile page$/ - edit_profile_path - when /^my profile page$/ - person_path(@me.person) - when /^my acceptance form page$/ - invite_code_path(InvitationCode.first) - when /^the requestors profile$/ - person_path(Request.where(:recipient_id => @me.person.id).first.sender) - when /^"([^\"]*)"'s page$/ - p = User.find_by_email($1).person - { path: person_path(p), - # '#diaspora_handle' on desktop, '.description' on mobile - special_elem: { selector: '#diaspora_handle, .description', text: p.diaspora_handle } - } - when /^"([^\"]*)"'s photos page$/ - p = User.find_by_email($1).person - person_photos_path p - when /^my account settings page$/ - edit_user_path - when /^forgot password page$/ - new_user_password_path - when /^"(\/.*)"/ - $1 - else - raise "Can't find mapping from \"#{page_name}\" to a path." + when /^person_photos page$/ + person_photos_path(@me.person) + when /^the home(?: )?page$/ + stream_path + when /^the tag page for "([^\"]*)"$/ + tag_path(Regexp.last_match(1)) + when /^its ([\w ]+) page$/ + send("#{Regexp.last_match(1).gsub(/\W+/, '_')}_path", @it) + when /^the mobile ([\w ]+) page$/ + public_send("#{Regexp.last_match(1).gsub(/\W+/, '_')}_path", format: "mobile") + when /^the ([\w ]+) page$/ + public_send("#{Regexp.last_match(1).gsub(/\W+/, '_')}_path") + when /^my edit profile page$/ + edit_profile_path + when /^my profile page$/ + person_path(@me.person) + when /^my acceptance form page$/ + invite_code_path(InvitationCode.first) + when /^the requestors profile$/ + person_path(Request.where(recipient_id: @me.person.id).first.sender) + when /^"([^\"]*)"'s page$/ + p = User.find_by_email(Regexp.last_match(1)).person + {path: person_path(p), + # '#diaspora_handle' on desktop, '.description' on mobile + special_elem: {selector: "#diaspora_handle, .description", text: p.diaspora_handle} + } + when /^"([^\"]*)"'s photos page$/ + p = User.find_by_email(Regexp.last_match(1)).person + person_photos_path p + when /^my account settings page$/ + edit_user_path + when /^forgot password page$/ + new_user_password_path + when %r{^"(/.*)"} + Regexp.last_match(1) + else + raise "Can't find mapping from \"#{page_name}\" to a path." end end @@ -56,12 +52,12 @@ module NavigationHelpers def navigate_to(page_name) path = path_to(page_name) - unless path.is_a?(Hash) - visit(path) - else + if path.is_a?(Hash) visit(path[:path]) await_elem = path[:special_elem] find(await_elem.delete(:selector), await_elem) + else + visit(path) end end diff --git a/features/support/user_cuke_helpers.rb b/features/support/user_cuke_helpers.rb index 20603dde8..06ccd99ed 100644 --- a/features/support/user_cuke_helpers.rb +++ b/features/support/user_cuke_helpers.rb @@ -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 diff --git a/spec/javascripts/app/views/conversations_view_spec.js b/spec/javascripts/app/views/conversations_view_spec.js index 44abb5022..9f67cb1e8 100644 --- a/spec/javascripts/app/views/conversations_view_spec.js +++ b/spec/javascripts/app/views/conversations_view_spec.js @@ -21,22 +21,22 @@ describe("app.views.Conversations", function(){ }); it("decreases the unread message count in the header", function() { - var badge = "
3
"; + var badge = "
3
"; $("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 = "
1
"; + it("removes the badge in the header if there are no unread messages left", function() { + var badge = "
1
"; $("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 = "
3
"; + it("does not change the badge in the header", function() { + var badge = "
3
"; $("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"); }); }); }); diff --git a/spec/javascripts/app/views/header_view_spec.js b/spec/javascripts/app/views/header_view_spec.js index 384c92a59..1106d6d6f 100644 --- a/spec/javascripts/app/views/header_view_spec.js +++ b/spec/javascripts/app/views/header_view_spec.js @@ -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(); }); diff --git a/spec/javascripts/app/views/help_view_spec.js b/spec/javascripts/app/views/help_view_spec.js index 7a2555a3f..3c400d678 100644 --- a/spec/javascripts/app/views/help_view_spec.js +++ b/spec/javascripts/app/views/help_view_spec.js @@ -1,9 +1,7 @@ describe("app.views.Help", function(){ beforeEach(function(){ + gon.appConfig = {chat: {enabled: false}}; this.view = new app.views.Help(); - }); - - beforeEach(function(){ Diaspora.I18n.load({"tutorials":"tutorials","tutorial":"tutorial","irc":"IRC","wiki":"wiki","markdown":"Markdown","here":"here","foundation_website":"diaspora foundation website","third_party_tools":"third party tools","getting_started_tutorial":"'Getting started' tutorial series","getting_help":{"title":"Getting help","getting_started_q":"Help! I need some basic help to get me started!","getting_started_a":"You're in luck. Try the %{tutorial_series} on our project site. It will take you step-by-step through the registration process and teach you all the basic things you need to know about using diaspora*.","get_support_q":"What if my question is not answered in this FAQ? Where else can I get support?","get_support_a_website":"visit our %{link}","get_support_a_tutorials":"check out our %{tutorials}","get_support_a_wiki":"search the %{link}","get_support_a_irc":"join us on %{irc} (Live chat)","get_support_a_hashtag":"ask in a public post on diaspora* using the %{question} hashtag"},"account_and_data_management":{"title":"Account and data management","move_pods_q":"How do I move my seed (account) from one pod to another?","move_pods_a":"In the future you will be able to export your seed from a pod and import it on another, but this is not currently possible. You could always open a new account and add your contacts to aspects on that new seed, and ask them to add your new seed to their aspects.","download_data_q":"Can I download a copy of all of my data contained in my seed (account)?","download_data_a":"Yes. At the bottom of the Account tab of your settings page there are two buttons for downloading your data.","close_account_q":"How do I delete my seed (account)?","close_account_a":"Go to the bottom of your settings page and click the Close Account button.","data_visible_to_podmin_q":"How much of my information can my pod administrator see?","data_visible_to_podmin_a":"Communication *between* pods is always encrypted (using SSL and diaspora*'s own transport encryption), but the storage of data on pods is not encrypted. If they wanted to, the database administrator for your pod (usually the person running the pod) could access all your profile data and everything that you post (as is the case for most websites that store user data). Running your own pod provides more privacy since you then control access to the database.","data_other_podmins_q":"Can the administrators of other pods see my information?","data_other_podmins_a":"Once you are sharing with someone on another pod, any posts you share with them and a copy of your profile data are stored (cached) on their pod, and are accessible to that pod's database administrator. When you delete a post or profile data it is deleted from your pod and any other pods where it had previously been stored."},"aspects":{"title":"Aspects","what_is_an_aspect_q":"What is an aspect?","what_is_an_aspect_a":"Aspects are the way you group your contacts on diaspora*. An aspect is one of the faces you show to the world. It might be who you are at work, or who you are to your family, or who you are to your friends in a club you belong to.","who_sees_post_q":"When I post to an aspect, who sees it?","who_sees_post_a":"If you make a limited post, it will only be visible the people you have put in that aspect (or those aspects, if it is made to multiple aspects). Contacts you have that aren't in the aspect have no way of seeing the post, unless you've made it public. Only public posts will ever be visible to anyone who you haven't placed into one of your aspects.","restrict_posts_i_see_q":"Can I restrict the posts I see to just those from certain aspects?","restrict_posts_i_see_a":"Yes. Click on My Aspects in the side-bar and then click individual aspects in the list to select or deselect them. Only the posts by people in the selected aspects will appear in your stream.","contacts_know_aspect_q":"Do my contacts know which aspects I have put them in?","contacts_know_aspect_a":"No. They cannot see the name of the aspect under any circumstances.","contacts_visible_q":"What does \"make contacts in this aspect visible to each other\" mean?","contacts_visible_a":"If you check this option then contacts from that aspect will be able to see who else is in it, on your profile page under your picture. It's best to select this option only if the contacts in that aspect all know each other. They still won't be able to see what the aspect is called.","remove_notification_q":"If I remove someone from an aspect, or all of my aspects, are they notified of this?","remove_notification_a":"No.","rename_aspect_q":"Can I rename an aspect?","rename_aspect_a":"Yes. In your list of aspects on the left side of the main page, point your mouse at the aspect you want to rename. Click the little 'edit' pencil that appears to the right. Click rename in the box that appears.","change_aspect_of_post_q":"Once I have posted something, can I change the aspect(s) that can see it?","change_aspect_of_post_a":"No, but you can always make a new post with the same content and post it to a different aspect.","post_multiple_aspects_q":"Can I post content to multiple aspects at once?","post_multiple_aspects_a":"Yes. When you are making a post, use the aspect selector button to select or deselect aspects. Your post will be visible to all the aspects you select. You could also select the aspects you want to post to in the side-bar. When you post, the aspect(s) that you have selected in the list on the left will automatically be selected in the aspect selector when you start to make a new post.","person_multiple_aspects_q":"Can I add a person to multiple aspects?","person_multiple_aspects_a":"Yes. Go to your contacts page and click my contacts. For each contact you can use the menu on the right to add them to (or remove them from) as many aspects as you want. Or you can add them to a new aspect (or remove them from an aspect) by clicking the aspect selector button on their profile page. Or you can even just move the pointer over their name where you see it in the stream, and a 'hover-card' will appear. You can change the aspects they are in right there.","delete_aspect_q":"How do I delete an aspect?","delete_aspect_a":"In your list of aspects on the left side of the main page, point your mouse at the aspect you want to delete. Click the little 'edit' pencil that appears on the right. Click the delete button in the box that appears."},"mentions":{"title":"Mentions","what_is_a_mention_q":"What is a \"mention\"?","what_is_a_mention_a":"A mention is a link to a person's profile page that appears in a post. When someone is mentioned they receive a notification that calls their attention to the post.","how_to_mention_q":"How do I mention someone when making a post?","how_to_mention_a":"Type the \"@\" sign and start typing their name. A drop down menu should appear to let you select them more easily. Note that it is only possible to mention people you have added to an aspect.","mention_in_comment_q":"Can I mention someone in a comment?","mention_in_comment_a":"No, not currently.","see_mentions_q":"Is there a way to see the posts in which I have been mentioned?","see_mentions_a":"Yes, click \"Mentions\" in the left hand column on your home page."},"pods":{"title":"Pods","what_is_a_pod_q":"What is a pod?","what_is_a_pod_a":"A pod is a server running the diaspora* software and connected to the diaspora* network. \"Pod\" is a metaphor referring to pods on plants which contain seeds, in the way that a server contains a number of user accounts. There are many different pods. You can add friends from other pods and communicate with them. (You can think of a diaspora* pod as similar to an email provider: there are public pods, private pods, and with some effort you can even run your own).","find_people_q":"I just joined a pod, how can I find people to share with?","find_people_a":"Invite your friends using the email link in the side-bar. Follow #tags to discover others who share your interests, and add those who post things that interest you to an aspect. Shout out that you're #newhere in a public post.","use_search_box_q":"How do I use the search box to find particular individuals?","use_search_box_a":"If you know their full diaspora* ID (e.g. username@podname.org), you can find them by searching for it. If you are on the same pod you can search for just their username. An alternative is to search for them by their profile name (the name you see on screen). If a search does not work the first time, try it again."},"posts_and_posting":{"title":"Posts and posting","hide_posts_q":"How do I hide a post? / How do I stop getting notifications about a post that I commented on?","hide_posts_a":"If you point your mouse at the top of a post, an X appears on the right. Click it to hide the post and mute notifications about it. You can still see the post if you visit the profile page of the person who posted it.","format_text_q":"How can I format the text in my posts (bold, italics, etc.)?","format_text_a":"By using a simplified system called %{markdown}. You can find the full Markdown syntax %{here}. The preview button is really helpful here, as you can see how your message will look before you share it.","insert_images_q":"How do I insert images into posts?","insert_images_a":"Click the little camera icon to insert an image into a post. Press the photo icon again to add another photo, or you can select multiple photos to upload in one go.","insert_images_comments_q":"Can I insert images into comments?","insert_images_comments_a1":"The following Markdown code","image_text":"image text","image_url":"image url","insert_images_comments_a2":"can be used to insert images from the web into comments as well as posts.","size_of_images_q":"Can I customize the size of images in posts or comments?","size_of_images_a":"No. Images are resized automatically to fit the stream. Markdown does not have a code for specifying the size of an image.","embed_multimedia_q":"How do I embed a video, audio, or other multimedia content into a post?","embed_multimedia_a":"You can usually just paste the URL (e.g. http://www.youtube.com/watch?v=nnnnnnnnnnn ) into your post and the video or audio will be embedded automatically. Some of the sites that are supported are: YouTube, Vimeo, SoundCloud, Flickr and a few more. diaspora* uses oEmbed for this feature. We're supporting new sites all the time. Remember to always post simple, full links: no shortened links; no operators after the base URL; and give it a little time before you refresh the page after posting for seeing the preview.","character_limit_q":"What is the character limit for posts?","character_limit_a":"65,535 characters. That's 65,395 more characters than you get on Twitter! ;)","char_limit_services_q":"What is the character limit for posts shared through a connected service with a smaller character count?","char_limit_services_a":"In that case your post is limited to the smaller character count (140 in the case of Twitter; 1000 in the case of Tumblr), and the number of characters you have left to use is displayed when that service's icon is highlighted. You can still post to these services if your post is longer than their limit, but the text is truncated on those services.","stream_full_of_posts_q":"Why is my stream full of posts from people I don't know and don't share with?","stream_full_of_posts_a1":"Your stream is made up of three types of posts:","stream_full_of_posts_li1":"Posts by people you are sharing with, which come in two types: public posts and limited posts shared with an aspect that you are part of. To remove these posts from your stream, simply stop sharing with the person.","stream_full_of_posts_li2":"Public posts containing one of the tags that you follow. To remove these, stop following the tag.","stream_full_of_posts_li3":"Public posts by people listed in the Community Spotlight. These can be removed by unchecking the “Show Community Spotlight in Stream?” option in the Account tab of your Settings."},"private_posts":{"title":"Private posts","who_sees_post_q":"When I post a message to an aspect (i.e., a private post), who can see it?","who_sees_post_a":"Only logged-in diaspora* users you have placed in that aspect can see your private post.","can_comment_q":"Who can comment on or like my private post?","can_comment_a":"Only logged-in diaspora* users you have placed in that aspect can comment on or like your private post.","can_reshare_q":"Who can reshare my private post?","can_reshare_a":"Nobody. Private posts are not resharable. Logged-in diaspora* users in that aspect can potentially copy and paste it, however.","see_comment_q":"When I comment on or like a private post, who can see it?","see_comment_a":"Only the people that the post was shared with (the people who are in the aspects selected by the original poster) can see its comments and likes. "},"private_profiles":{"title":"Private profiles","who_sees_profile_q":"Who sees my private profile?","who_sees_profile_a":"Any logged-in user that you are sharing with (meaning, you have added them to one of your aspects). However, people following you, but whom you do not follow, will see only your public information.","whats_in_profile_q":"What's in my private profile?","whats_in_profile_a":"Biography, location, gender, and birthday. It's the stuff in the bottom section of the edit profile page. All this information is optional – it's up to you whether you fill it in. Logged-in users who you have added to your aspects are the only people who can see your private profile. They will also see the private posts that made to the aspect(s) they are in, mixed in with your public posts, when they visit your profile page.","who_sees_updates_q":"Who sees updates to my private profile?","who_sees_updates_a":"Anyone in your aspects sees changes to your private profile. "},"public_posts":{"title":"Public posts","who_sees_post_q":"When I post something publicly, who can see it?","who_sees_post_a":"Anyone using the internet can potentially see a post you mark public, so make sure you really do want your post to be public. It's a great way of reaching out to the world.","find_public_post_q":"How can other people find my public post?","find_public_post_a":"Your public posts will appear in the streams of anyone following you. If you included #tags in your public post, anyone following those tags will find your post in their streams. Every public post also has a specific URL that anyone can view, even if they're not logged in - thus public posts may be linked to directly from Twitter, blogs, etc. Public posts may also be indexed by search engines.","can_comment_reshare_like_q":"Who can comment on, reshare, or like my public post?","can_comment_reshare_like_a":"Any logged-in diaspora* user can comment on, reshare, or like your public post.","see_comment_reshare_like_q":"When I comment on, reshare, or like a public post, who can see it?","see_comment_reshare_like_a":"Any logged-in diaspora* user and anyone else on the internet. Comments, likes, and reshares of public posts are also public.","deselect_aspect_posting_q":"What happens when I deselect one or more aspects when making a public post?","deselect_aspect_posting_a":"Deselecting aspects does not affect a public post. It will still appear in the streams of all of your contacts. To make a post visible only to specific aspects, you need to select those aspects from the button under the publisher."},"public_profiles":{"title":"Public profiles","who_sees_profile_q":"Who sees my public profile?","who_sees_profile_a":"Any logged-in diaspora* user, as well as the wider internet, can see it. Each profile has a direct URL, so it may be linked to directly from outside sites. It may be indexed by search engines.","whats_in_profile_q":"What's in my public profile","whats_in_profile_a":"Your name, the five tags you chose to describe yourself, and your photo. It's the stuff in the top section of the edit profile page. You can make this profile information as identifiable or anonymous as you like. Your profile page also shows any public posts you have made.","who_sees_updates_q":"Who sees updates to my public profile?","who_sees_updates_a":"Anyone can see changes if they visit your profile page.","what_do_tags_do_q":"What do the tags on my public profile do?","what_do_tags_do_a":"They help people get to know you. Your profile picture will also appear on the left-hand side of those particular tag pages, along with anyone else who has them in their public profile."},"resharing_posts":{"title":"Resharing posts","reshare_public_post_aspects_q":"Can I reshare a public post with only certain aspects?","reshare_public_post_aspects_a":"No, when you reshare a public post it automatically becomes one of your public posts. To share it with certain aspects, copy and paste the contents of the post into a new post.","reshare_private_post_aspects_q":"Can I reshare a private post with only certain aspects?","reshare_private_post_aspects_a":"No, it is not possible to reshare a private post. This is to respect the intentions of the original poster who only shared it with a particular group of people."},"sharing":{"title":"Sharing","add_to_aspect_q":"What happens when I add someone to one of my aspects? Or when someone adds me to one of their aspects?","add_to_aspect_a1":"Let's say that Amy adds Ben to an aspect, but Ben has not (yet) added Amy to an aspect:","add_to_aspect_li1":"Ben will receive a notification that Amy has \"started sharing\" with Ben.","add_to_aspect_li2":"Amy will start to see Ben's public posts in her stream.","add_to_aspect_li3":"Amy will not see any of Ben's private posts.","add_to_aspect_li4":"Ben will not see Amy's public or private posts in his stream.","add_to_aspect_li5":"But if Ben goes to Amy's profile page, then he will see Amy's private posts that she makes to her aspect that has him in it (as well as her public posts which anyone can see there).","add_to_aspect_li6":"Ben will be able to see Amy's private profile (bio, location, gender, birthday).","add_to_aspect_li7":"Amy will appear under \"Only sharing with me\" on Ben's contacts page.","add_to_aspect_a2":"This is known as asymmetrical sharing. If and when Ben also adds Amy to an aspect then it would become mutual sharing, with both Amy's and Ben's public posts and relevant private posts appearing in each other's streams, etc. ","only_sharing_q":"Who are the people listed in \"Only sharing with me\" on my contacts page?","only_sharing_a":"These are people that have added you to one of their aspects, but who are not (yet) in any of your aspects. In other words, they are sharing with you, but you are not sharing with them (asymmetrical sharing). If you add them to an aspect, they will then appear under that aspect and not under \"only sharing with you\". See above.","list_not_sharing_q":"Is there a list of people whom I have added to one of my aspects, but who have not added me to one of theirs?","list_not_sharing_a":"No, but you can see whether or not someone is sharing with you by visiting their profile page. If they are, the bar under their profile picture will be green; if not, it'll be grey. You should get a notification each time someone starts sharing with you.","see_old_posts_q":"When I add someone to an aspect, can they see older posts that I have already posted to that aspect?","see_old_posts_a":"No. They will only be able to see new posts to that aspect. They (and everyone else) can see your older public posts on your profile page, and they may also see them in their stream."},"tags":{"title":"Tags","what_are_tags_for_q":"What are tags for?","what_are_tags_for_a":"Tags are a way to categorize a post, usually by topic. Searching for a tag shows all posts with that tag that you can see (both public and private posts). This lets people who are interested in a given topic find public posts about it.","tags_in_comments_q":"Can I put tags in comments or just in posts?","tags_in_comments_a":"A tag added to a comment will still appear as a link to that tag's page, but it will not make that post (or comment) appear on that tag page. This only works for tags in posts.","followed_tags_q":"What are \"#Followed Tags\" and how do I follow a tag?","followed_tags_a":"After searching for a tag you can click the button at the top of the tag's page to \"follow\" that tag. It will then appear in your list of followed tags on the left. Clicking one of your followed tags takes you to that tag's page so you can see recent posts containing that tag. Click on #Followed Tags to see a stream of posts that include one of any of your followed tags. ","people_tag_page_q":"Who are the people listed on the left-hand side of a tag page?","people_tag_page_a":"They are people who have listed that tag to describe themselves in their public profile.","filter_tags_q":"How can I filter/exclude some tags from my stream?","filter_tags_a":"This is not yet available directly through diaspora*, but some %{third_party_tools} have been written that might provide this."},"miscellaneous":{"title":"Miscellaneous","back_to_top_q":"Is there a quick way to go back to the top of a page after I scroll down?","back_to_top_a":"Yes. After scrolling down a page, click on the grey arrow that appears in the bottom right corner of your browser window.","photo_albums_q":"Are there photo or video albums?","photo_albums_a":"No, not currently. However you can view a stream of their uploaded pictures from the Photos section in the side-bar of their profile page.","subscribe_feed_q":"Can I subscribe to someone's public posts with a feed reader?","subscribe_feed_a":"Yes, but this is still not a polished feature and the formatting of the results is still pretty rough. If you want to try it anyway, go to someone's profile page and click the feed button in your browser, or you can copy the profile URL (i.e. https://joindiaspora.com/people/somenumber), and paste it into a feed reader. The resulting feed address looks like this: https://joindiaspora.com/public/username.atom Diaspora uses Atom rather than RSS.","diaspora_app_q":"Is there a diaspora* app for Android or iOS?","diaspora_app_a":"There are several Android apps in very early development. Several are long-abandoned projects and so do not work well with the current version of diaspora*. Don't expect much from these apps at the moment. Currently the best way to access diaspora* from your mobile device is through a browser, because we've designed a mobile version of the site which should work well on all devices. There is currently no app for iOS. Again, diaspora* should work fine via your browser."}}, "en"); Diaspora.Page = "HelpFaq"; }); @@ -138,7 +136,7 @@ describe("app.views.Help", function(){ describe("chat section", function(){ describe("chat enabled", function(){ beforeEach(function(){ - gon.chatEnabled = true; + gon.appConfig = {chat: {enabled: true}}; this.view = new app.views.Help(); this.view.render(); }); @@ -150,7 +148,7 @@ describe("app.views.Help", function(){ describe("chat disabled", function(){ beforeEach(function(){ - gon.chatEnabled = false; + gon.appConfig = {chat: {enabled: false}}; this.view = new app.views.Help(); this.view.render(); }); diff --git a/spec/javascripts/app/views/notification_dropdown_view_spec.js b/spec/javascripts/app/views/notification_dropdown_view_spec.js index f6972c5be..2a51663d6 100644 --- a/spec/javascripts/app/views/notification_dropdown_view_spec.js +++ b/spec/javascripts/app/views/notification_dropdown_view_spec.js @@ -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('
Notification
'); - expect(this.view.dropdownNotifications.find('.media.stream_element').length).toBe(1); + context("renderNotifications", function(){ + it("Removes the previous notifications", function(){ + this.view.dropdownNotifications.append("
Notification
"); + 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(); }); diff --git a/spec/javascripts/app/views/notifications_view_spec.js b/spec/javascripts/app/views/notifications_view_spec.js index f8a50f20f..77e9f081f 100644 --- a/spec/javascripts/app/views/notifications_view_spec.js +++ b/spec/javascripts/app/views/notifications_view_spec.js @@ -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")); }); }); });