Merge pull request #6277 from svbergerem/use-css-spinner
Use css spinner instead of gif
This commit is contained in:
Dennis Schubert
commit
db9c39b6eb
19 changed files with 88 additions and 107 deletions
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
28
app/assets/stylesheets/spinner.scss
Normal file
28
app/assets/stylesheets/spinner.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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:"#"}
|
||||
⇧
|
||||
|
|
|
|||
|
|
@ -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:"#"}
|
||||
⇧
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue