diff --git a/app/assets/javascripts/app/views/location_view.js b/app/assets/javascripts/app/views/location_view.js index f6aedec15..364f3fa39 100644 --- a/app/assets/javascripts/app/views/location_view.js +++ b/app/assets/javascripts/app/views/location_view.js @@ -9,8 +9,8 @@ app.views.Location = Backbone.View.extend({ this.getLocation(); }, - render: function(){ - $("", { alt: "ajax-loader", src: ImagePaths.get("ajax-loader2.gif") }).appendTo(this.el); + render: function() { + $("
").appendTo(this.el); }, getLocation: function(){ diff --git a/app/assets/javascripts/app/views/notification_dropdown_view.js b/app/assets/javascripts/app/views/notification_dropdown_view.js index b10895956..90e24f41e 100644 --- a/app/assets/javascripts/app/views/notification_dropdown_view.js +++ b/app/assets/javascripts/app/views/notification_dropdown_view.js @@ -14,7 +14,7 @@ app.views.NotificationDropdown = app.views.Base.extend({ this.badge = this.$el; this.dropdown = $("#notification-dropdown"); this.dropdownNotifications = this.dropdown.find(".notifications"); - this.ajaxLoader = this.dropdown.find(".ajax_loader"); + this.ajaxLoader = this.dropdown.find(".ajax-loader"); this.perfectScrollbarInitialized = false; }, @@ -86,9 +86,9 @@ app.views.NotificationDropdown = app.views.Base.extend({ hideAjaxLoader: function(){ var self = this; - this.ajaxLoader.find("img").fadeTo(200, 0, function(){ + this.ajaxLoader.find(".spinner").fadeTo(200, 0, function(){ self.ajaxLoader.hide(200, function(){ - self.ajaxLoader.find("img").css("opacity", 1); + self.ajaxLoader.find(".spinner").css("opacity", 1); }); }); }, diff --git a/app/assets/javascripts/widgets/infinite-scroll.js b/app/assets/javascripts/widgets/infinite-scroll.js deleted file mode 100644 index 3d81082f8..000000000 --- a/app/assets/javascripts/widgets/infinite-scroll.js +++ /dev/null @@ -1,61 +0,0 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later - -/* Copyright (c) 2010-2011, Diaspora Inc. This file is - * licensed under the Affero General Public License version 3 or later. See - * the COPYRIGHT file. - */ - -(function() { - var InfiniteScroll = function() { - var self = this; - this.options = { - bufferPx: 500, - debug: false, - donetext: Diaspora.I18n.t("infinite_scroll.no_more"), - loadingText: "", - loadingImg: ImagePaths.get("ajax-loader2.gif"), - navSelector: "#pagination", - nextSelector: ".paginate", - itemSelector: ".stream_element", - pathParse: function(pathStr) { - var newPath = pathStr.replace("?", "?only_posts=true&"), - lastTime = $('#main_stream .stream_element').last().find(".time").attr("integer"); - - if(lastTime === undefined){ - lastTime = $('#main_stream').data('time_for_scroll'); - } - - return newPath.replace(/max_time=\d+/, "max_time=" + lastTime); - } - }; - - this.subscribe("widget/ready", function(evt, opts) { - $.extend(self.options, opts); - if($('#main_stream').length !== 0) { - $('#main_stream').infinitescroll(self.options, function(newElements) { - self.globalPublish("stream/scrolled", newElements); - }); - } else if($('#people_stream').length !== 0) { - $("#people_stream").infinitescroll($.extend(self.options, { - navSelector : ".pagination", - nextSelector : ".next_page", - pathParse : function(pathStr, nextPage) { - return pathStr.replace("page=2", "page=" + nextPage); - } - }), function(newElements) { - self.globalPublish("stream/scrolled", newElements); - }); - } - }); - - this.reInitialize = function() { - $("#main_stream").infinitescroll("destroy"); - self.publish("widget/ready"); - }; - - this.globalSubscribe("stream/reloaded", self.reInitialize, this); - }; - - Diaspora.Widgets.InfiniteScroll = InfiniteScroll; -})(); -// @license-end diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index a215136f7..a0b6d7d0c 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -16,7 +16,7 @@ @import 'hovercard'; @import 'new_styles/base'; @import 'new_styles/interactions'; -@import 'new_styles/spinner'; +@import 'spinner'; @import 'lightbox'; @import 'timeago'; @import 'vendor/fileuploader'; diff --git a/app/assets/stylesheets/autocomplete.scss b/app/assets/stylesheets/autocomplete.scss index d5c0726f1..051dd6580 100644 --- a/app/assets/stylesheets/autocomplete.scss +++ b/app/assets/stylesheets/autocomplete.scss @@ -42,9 +42,18 @@ text-overflow: ellipsis; } -.ac_loading { - background: white image-url('ajax-loader2.gif') right 5px center no-repeat; - background-size: 18px; +.ac_input + .spinner { + display: none; +} + +.ac_input.ac_loading + .spinner { + display: inline-block; + height: 18px; + margin-left: -26px; + margin-right: 8px; + margin-top: 7px; + position: absolute; + width: 18px; } .ac_odd { diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss index f747209df..b63f217f5 100644 --- a/app/assets/stylesheets/header.scss +++ b/app/assets/stylesheets/header.scss @@ -58,9 +58,13 @@ header > .dark-header > nav { } & > .pull-right > .aspect_membership_dropdown { display: none; } } - .ajax_loader { + .ajax-loader { border-bottom: 1px solid $border-grey; padding: 10px; + .spinner { + height: 30px; + width: 30px; + } } .view_all { background-color: $link-color; diff --git a/app/assets/stylesheets/new_styles/_animations.scss b/app/assets/stylesheets/new_styles/_animations.scss index d5210066e..0c65e1a83 100644 --- a/app/assets/stylesheets/new_styles/_animations.scss +++ b/app/assets/stylesheets/new_styles/_animations.scss @@ -1,7 +1,13 @@ /* flash message animations - header height is about 50px */ @keyframes expose { - 0% { top : -100px; } - 15% { top : 44px; } - 85% { top : 44px; } - 100% { top : -100px; } + 0% { top : -100px; } + 15% { top : 44px; } + 85% { top : 44px; } + 100% { top : -100px; } +} + +/* spinner animation */ +@keyframes spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } diff --git a/app/assets/stylesheets/new_styles/_spinner.scss b/app/assets/stylesheets/new_styles/_spinner.scss deleted file mode 100644 index 674f5cb2a..000000000 --- a/app/assets/stylesheets/new_styles/_spinner.scss +++ /dev/null @@ -1,20 +0,0 @@ -#paginate, #infscr-loading { - margin-top: 10px; - padding: 8px 0; - text-align: center; - width: 100%; - display: block; - clear: both; -} - -.loader { - background-image : image-url("ajax-loader2.gif"); - display: inline-block; - width : 32px; - height: 32px; - - &.hidden{ - display : none; - } -} - diff --git a/app/assets/stylesheets/publisher.scss b/app/assets/stylesheets/publisher.scss index fe33611fa..47675321b 100644 --- a/app/assets/stylesheets/publisher.scss +++ b/app/assets/stylesheets/publisher.scss @@ -24,6 +24,7 @@ #fileInfo { display: none !important; } #publisher_spinner { + margin: 20px; text-align: center; } @@ -105,12 +106,20 @@ } } + &.with_location .loader { + height: 20px; + width: 20px; + } &.with_location #location_container { height: 30px; + margin-bottom: 0; border-top: 1px dashed $border-grey; input[type='text'] { - margin-bottom: 0; + border: none; color: $text-grey; + height: 20px; + margin-bottom: 0; + padding: 0; } } &.active #button_container { diff --git a/app/assets/stylesheets/spinner.scss b/app/assets/stylesheets/spinner.scss new file mode 100644 index 000000000..9302fc434 --- /dev/null +++ b/app/assets/stylesheets/spinner.scss @@ -0,0 +1,28 @@ +#paginate, #infscr-loading { + margin-top: 10px; + padding: 8px 0; + text-align: center; + width: 100%; + display: block; + clear: both; +} + +.loader { + display: inline-block; + width : 32px; + height: 32px; +} + +.spinner { + width: 100%; + height: 100%; + margin: auto; + border-radius: 50%; + border-width: 3px; + border-style: solid; + border-color: $border-dark-grey transparent $border-dark-grey $border-dark-grey; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-name: spinner; + animation-timing-function: linear; +} diff --git a/app/assets/stylesheets/vendor/autoSuggest.css b/app/assets/stylesheets/vendor/autoSuggest.css index cf87b15e1..1f33c1b06 100644 --- a/app/assets/stylesheets/vendor/autoSuggest.css +++ b/app/assets/stylesheets/vendor/autoSuggest.css @@ -10,10 +10,6 @@ ul.as-selections { padding: 0; } -ul.as-selections.loading { - background: asset_path("ajax-loader2.gif") right center no-repeat; -} - ul.as-selections li { float: left; margin: 1px 4px 1px 0; diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs index 044fc4af8..f00f23729 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -47,8 +47,8 @@
-
- Ajax-loader +
+
@@ -102,6 +102,7 @@ diff --git a/app/views/aspects/_aspect_stream.haml b/app/views/aspects/_aspect_stream.haml index 87e6af915..1673ce9e7 100644 --- a/app/views/aspects/_aspect_stream.haml +++ b/app/views/aspects/_aspect_stream.haml @@ -15,6 +15,7 @@ #paginate %span.loader.hidden + .spinner - if current_user.contacts.size < 2 = render 'aspects/no_contacts_message' diff --git a/app/views/people/index.html.haml b/app/views/people/index.html.haml index 281cc65e7..a2076c3b2 100644 --- a/app/views/people/index.html.haml +++ b/app/views/people/index.html.haml @@ -25,8 +25,9 @@ } ); %p - = t('.searching') - = image_tag('ajax-loader2.gif', class: 'loader') + = t(".searching") + .loader + .spinner - else %p = t('.no_one_found') diff --git a/app/views/people/show.html.haml b/app/views/people/show.html.haml index 021592551..0d634d10f 100644 --- a/app/views/people/show.html.haml +++ b/app/views/people/show.html.haml @@ -31,6 +31,7 @@ #paginate %span.loader.hidden + .spinner %a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"} ⇧ diff --git a/app/views/publisher/_publisher.html.haml b/app/views/publisher/_publisher.html.haml index 7fa043743..7585a7121 100644 --- a/app/views/publisher/_publisher.html.haml +++ b/app/views/publisher/_publisher.html.haml @@ -48,7 +48,8 @@ = hidden_field_tag 'aspect_ids[]', aspect_id.to_s #publisher_spinner{class: 'hidden'} - = image_tag 'ajax-loader2.gif' + .loader + .spinner .options_and_submit.col-sm-12 .public_toggle .btn.btn-default.pull-left#hide_publisher{title: t('shared.publisher.discard_post')} diff --git a/app/views/shared/_modal.haml b/app/views/shared/_modal.haml index 9fca27ef5..8305ac291 100644 --- a/app/views/shared/_modal.haml +++ b/app/views/shared/_modal.haml @@ -12,4 +12,6 @@ %h3.modal-title{id: "#{id}Label"} = title .modal-body - = image_tag("ajax-loader2.gif", id: "modalWaiter", class: "img-responsive center-block") + #modalWaiter.text-center + .loader + .spinner diff --git a/app/views/tags/show.haml b/app/views/tags/show.haml index 1151d29f9..56dd1d43e 100644 --- a/app/views/tags/show.haml +++ b/app/views/tags/show.haml @@ -32,6 +32,7 @@ #paginate %span.loader.hidden + .spinner %a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"} ⇧ diff --git a/app/views/users/getting_started.haml b/app/views/users/getting_started.haml index 009618b39..7b58b6d4a 100644 --- a/app/views/users/getting_started.haml +++ b/app/views/users/getting_started.haml @@ -24,7 +24,9 @@ = label_tag 'profile[first_name]', t('profiles.edit.your_name') = text_field_tag 'profile[first_name]', current_user.first_name, class: "form-control" .form-group - = image_tag 'ajax-loader2.gif', id: "gs-name-form-spinner", class: "hidden" + #gs-name-form-spinner.hidden + .loader + .spinner = label_tag :your_photo, t('profiles.edit.your_photo') = render 'photos/new_profile_photo', aspect: :getting_started, person: current_user.person