Commit 8e99a240 authored by Steffen van Bergerem's avatar Steffen van Bergerem

Use css spinner instead of gif

parent 248fa921
......@@ -9,8 +9,8 @@ app.views.Location = Backbone.View.extend({
this.getLocation();
},
render: function(){
$("<img/>", { alt: "ajax-loader", src: ImagePaths.get("ajax-loader2.gif") }).appendTo(this.el);
render: function() {
$("<div class=\"loader\"><div class=\"spinner\"></div></div>").appendTo(this.el);
},
getLocation: function(){
......
......@@ -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);
});
});
},
......
// @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
......@@ -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';
......
......@@ -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 {
......
......@@ -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;
......
/* 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); }
}
......@@ -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 {
......
......@@ -8,13 +8,21 @@
}
.loader {
background-image : image-url("ajax-loader2.gif");
display: inline-block;
width : 32px;
height: 32px;
&.hidden{
display : none;
}
}
.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;
}
......@@ -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;
......
......@@ -47,8 +47,8 @@
</h4>
</div>
<div class="notifications">
<div class="ajax_loader">
<img class="img-responsive center-block" alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
<div class="ajax-loader">
<div class="spinner"></div>
</div>
</div>
<div class="view_all">
......@@ -102,6 +102,7 @@
<form id="header-search-form" accept-charset="UTF-8" action="/search" class="navbar-form navbar-right" role="search" method="get">
<div class="form-group">
<input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input form-control input-sm">
<div class="spinner"></div>
</div>
<input name="utf8" type="hidden" value="✓">
</form>
......
......@@ -15,6 +15,7 @@
#paginate
%span.loader.hidden
.spinner
- if current_user.contacts.size < 2
= render 'aspects/no_contacts_message'
......@@ -25,8 +25,9 @@
} );
%p
= t('.searching')
= image_tag('ajax-loader2.gif', class: 'loader')
= t(".searching")
.loader
.spinner
- else
%p
= t('.no_one_found')
......
......@@ -31,6 +31,7 @@
#paginate
%span.loader.hidden
.spinner
%a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"}
&#8679;
......
......@@ -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')}
......
......@@ -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
......@@ -32,6 +32,7 @@
#paginate
%span.loader.hidden
.spinner
%a{id:"back-to-top", title:"#{t('layouts.application.back_to_top')}", href:"#"}
&#8679;
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment