Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2946 from awesomerobot/master 

trying out a new css-only loading spinner
This commit is contained in:
Régis Hanol 2014-11-05 17:44:33 +01:00
parent 568033f623 59e0c1b9cd
commit d22b668393
21 changed files with 66 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/templates/email_preview_digest.hbs
View File

@ -19,7 +19,7 @@
</div> </div>
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if showHtml}} {{#if showHtml}}
{{{html_content}}} {{{html_content}}}

4
app/assets/javascripts/admin/templates/flags.hbs
View File

@ -9,7 +9,7 @@
<div class="admin-container"> <div class="admin-container">
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if length}} {{#if length}}
<table class='admin-flags'> <table class='admin-flags'>
@ -160,7 +160,7 @@
</tbody> </tbody>
</table> </table>
{{#if view.loading}} {{#if view.loading}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
{{else}} {{else}}

2
app/assets/javascripts/admin/templates/logs/screened_emails.hbs
View File

@ -1,7 +1,7 @@
<p>{{i18n admin.logs.screened_emails.description}}</p> <p>{{i18n admin.logs.screened_emails.description}}</p>
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if model.length}} {{#if model.length}}

2
app/assets/javascripts/admin/templates/logs/screened_ip_addresses.hbs
View File

@ -4,7 +4,7 @@
<br/> <br/>
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if model.length}} {{#if model.length}}

2
app/assets/javascripts/admin/templates/logs/screened_urls.hbs
View File

@ -1,7 +1,7 @@
<p>{{i18n admin.logs.screened_urls.description}}</p> <p>{{i18n admin.logs.screened_urls.description}}</p>
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if model.length}} {{#if model.length}}

2
app/assets/javascripts/admin/templates/logs/staff_action_logs.hbs
View File

@ -45,7 +45,7 @@
{{#if loading}} {{#if loading}}
<br/> <br/>
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if model.length}} {{#if model.length}}
{{view "staff-action-logs-list" content=controller}} {{view "staff-action-logs-list" content=controller}}

2
app/assets/javascripts/admin/templates/user_badges.hbs
View File

@ -7,7 +7,7 @@
</div> </div>
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
<div class='admin-container user-badges'> <div class='admin-container user-badges'>
<h2>{{i18n admin.badges.grant_badge}}</h2> <h2>{{i18n admin.badges.grant_badge}}</h2>

2
app/assets/javascripts/admin/templates/users_list.hbs
View File

@ -38,7 +38,7 @@
</div> </div>
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{else}} {{else}}
{{#if model.length}} {{#if model.length}}
<table class='table'> <table class='table'>

4
app/assets/javascripts/discourse/controllers/topic.js.es6
View File

@ -510,9 +510,11 @@ export default ObjectController.extend(Discourse.SelectedPostsCount, {
}.property('isPrivateMessage'), }.property('isPrivateMessage'),
loadingHTML: function() { loadingHTML: function() {
return "<div class='spinner'></div>"; return "{{loading-spinner}}";
}.property(), }.property(),
recoverTopic: function() { recoverTopic: function() {
this.get('content').recover(); this.get('content').recover();
}, },

4
app/assets/javascripts/discourse/helpers/loading-spinner.es6 Normal file
View File

@ -0,0 +1,4 @@
Handlebars.registerHelper('loading-spinner', function(property, options) {
var spinner = "<div class='spinner-wrap'><div class='spinner'><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>";
return new Handlebars.SafeString(spinner);
});

4
app/assets/javascripts/discourse/templates/badges/show.hbs
View File

@ -36,11 +36,11 @@
{{/each}} {{/each}}
</div> </div>
{{#if canLoadMore}} {{#if canLoadMore}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
{{else}} {{else}}
{{#unless userBadgesLoaded}} {{#unless userBadgesLoaded}}
<div class='spinner'></div> {{loading-spinner}}
{{/unless}} {{/unless}}
{{/if}} {{/if}}
</div> </div>

2
app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
View File

@ -56,5 +56,5 @@
</div> </div>
{{/if}} {{/if}}
{{else}} {{else}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}

2
app/assets/javascripts/discourse/templates/composer.hbs
View File

@ -1,4 +1,4 @@
<div class='spinner'></div> {{loading-spinner}}
<div class='contents'> <div class='contents'>

2
app/assets/javascripts/discourse/templates/discovery.hbs
View File

@ -11,7 +11,7 @@
</div> </div>
<div {{bind-attr class="loadingSpinner::hidden"}}> <div {{bind-attr class="loadingSpinner::hidden"}}>
<div class='spinner'></div> {{loading-spinner}}
</div> </div>

2
app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
View File

@ -53,5 +53,5 @@
</div> </div>
{{/if}} {{/if}}
{{else}} {{else}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}

8
app/assets/javascripts/discourse/templates/topic.hbs
View File

@ -73,7 +73,7 @@
{{render 'topic-progress'}} {{render 'topic-progress'}}
{{#if postStream.loadingAbove}} {{#if postStream.loadingAbove}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
{{#unless postStream.loadingFilter}} {{#unless postStream.loadingFilter}}
@ -90,7 +90,7 @@
{{/unless}} {{/unless}}
{{#if postStream.loadingBelow}} {{#if postStream.loadingBelow}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
</div> </div>
<div id='topic-bottom'></div> <div id='topic-bottom'></div>
@ -137,13 +137,13 @@
{{/if}} {{/if}}
</div> </div>
{{#if retrying}} {{#if retrying}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </div>
{{else}} {{else}}
<div class='container'> <div class='container'>
<div class='spinner'></div> {{loading-spinner}}
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}

2
app/assets/javascripts/discourse/templates/user/invited.hbs
View File

@ -70,7 +70,7 @@
{{/each}} {{/each}}
</table> </table>
{{#if invitesLoading}} {{#if invitesLoading}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
{{else}} {{else}}

2
app/assets/javascripts/discourse/templates/user/notifications.hbs
View File

@ -23,7 +23,7 @@
{{/each}} {{/each}}
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}
{{#unless canLoadMore}} {{#unless canLoadMore}}
<div class='end-of-stream'></div> <div class='end-of-stream'></div>

2
app/assets/javascripts/discourse/templates/user/posts.hbs
View File

@ -27,5 +27,5 @@
</div> </div>
{{/each}} {{/each}}
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}

2
app/assets/javascripts/discourse/templates/user/stream.hbs
View File

@ -26,5 +26,5 @@
</div> </div>
{{/grouped-each}} {{/grouped-each}}
{{#if loading}} {{#if loading}}
<div class='spinner'></div> {{loading-spinner}}
{{/if}} {{/if}}

54
app/assets/stylesheets/common/base/discourse.scss
View File

@ -148,26 +148,44 @@ body {
} }
.spinner { .spinner {
width: 20px; height: 50px; width: 50px;
margin: 0 auto; margin: 20px auto 0 auto;
padding: 25px 15px; -webkit-animation: spin 1s steps(12, end) infinite;
background: { animation: spin 1s steps(12, end) infinite;
image: image-url("spinner_96.gif");
repeat: no-repeat;
size: 50px;
};
-webkit-animation: spinner .25s;
animation: spinner .25s;
margin-top: 10px;
} }
//loading spinner fade-in .spinner i {
@-webkit-keyframes spinner { height: 12px; width: 4px;
from {opacity: 0} margin-left: -2px;
to {opacity: 1} display: block;
}@keyframes fade { position: absolute;
from {opacity: 0} left: 50%;
to {opacity: 1} transform-origin: center 25px;
background: $primary;
border-radius: 10px;
}
.spinner i:nth-child(1) { opacity: 0.08; }
.spinner i:nth-child(2) { transform: rotate(30deg); opacity: 0.167; }
.spinner i:nth-child(3) { transform: rotate(60deg); opacity: 0.25; }
.spinner i:nth-child(4) { transform: rotate(90deg); opacity: 0.33; }
.spinner i:nth-child(5) { transform: rotate(120deg); opacity: 0.4167; }
.spinner i:nth-child(6) { transform: rotate(150deg); opacity: 0.5; }
.spinner i:nth-child(7) { transform: rotate(180deg); opacity: 0.583; }
.spinner i:nth-child(8) { transform: rotate(210deg); opacity: 0.67; }
.spinner i:nth-child(9) { transform: rotate(240deg); opacity: 0.75; }
.spinner i:nth-child(10) { transform: rotate(270deg); opacity: 0.833; }
.spinner i:nth-child(11) { transform: rotate(300deg); opacity: 0.9167; }
.spinner i:nth-child(12) { transform: rotate(330deg); opacity: 1; }
@-webkit-keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} }
.avatar-wrapper { .avatar-wrapper {