diff --git a/app/assets/javascripts/discourse/helpers/loading-spinner.es6 b/app/assets/javascripts/discourse/helpers/loading-spinner.es6 index 05a18fb463e..71e4332e591 100644 --- a/app/assets/javascripts/discourse/helpers/loading-spinner.es6 +++ b/app/assets/javascripts/discourse/helpers/loading-spinner.es6 @@ -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); } }); diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs index 7dd2e37f041..ad0c7b53c22 100644 --- a/app/assets/javascripts/discourse/templates/composer.hbs +++ b/app/assets/javascripts/discourse/templates/composer.hbs @@ -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> diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 06707d8d1be..43494417362 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -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;