codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 17:46:05 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Use new loading spinner when uploading an image

Browse source
This commit is contained in:
Robin Ward 2014-11-13 12:55:47 -05:00
parent 1629b47bde
commit 7b50244e98
3 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/discourse/helpers/loading-spinner.es6
View file

@ -18,7 +18,11 @@ Handlebars.registerHelper('loading-spinner', function(options) {
Discourse.Utilities.normalizeHash(hash, types);
return Ember.Handlebars.helpers.view.call(this, ConditionalLoadingSpinner, options);
} else {
return new Handlebars.SafeString(spinnerHTML);
var html = spinnerHTML;
if (hash && hash.class) {
html = "<div class='spinner " + hash.class + "'></div>";
}
return new Handlebars.SafeString(html);
}
});

4
app/assets/javascripts/discourse/templates/composer.hbs
View file

@ -1,4 +1,4 @@
{{loading-spinner}}
{{loading-spinner class="composer-loading"}}
<div class='contents'>
@ -77,7 +77,7 @@
<div class="composer-bottom-right">
<a href="#" {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
<div id="file-uploading" {{bind-attr class="view.isUploading::hidden"}}>
<i class='fa fa-spinner fa-spin'></i> {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
{{loading-spinner}} {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
</div>
{{#if site.mobileView}}
<a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n upload}}</a>

14
app/assets/stylesheets/common/base/compose.scss
View file

@ -135,14 +135,24 @@ div.ac-wrap {
}
}
#reply-control {
#file-uploading {
.spinner {
width: 10px;
height: 10px;
margin: 0 5px 0 0;
display: inline-block;
float: left;
}
}
#reply-control {
.composer-loading {
position: absolute;
@include fades-in(0.25s);
left: 45%;
top: 20%;
}
&.loading {
&.composer-loading {
.spinner {
z-index: 1000;
@include visible;