UX: More spinner upgrades

app/assets/javascripts/admin/views/admin-backups-logs.js.es6

@@ -1,5 +1,6 @@
-Discourse.AdminBackupsLogsView = Discourse.View.extend({
+import { renderSpinner } from 'discourse/helpers/loading-spinner';
 
+export default Discourse.View.extend({
   classNames: ["admin-backups-logs"],
 
   _initialize: function() { this._reset(); }.on("init"),
@@ -38,7 +39,7 @@ Discourse.AdminBackupsLogsView = Discourse.View.extend({
     }
     // add a loading indicator
     if (this.get("controller.status.isOperationRunning")) {
-      buffer.push("<i class='fa fa-spinner fa-spin'></i>");
+      buffer.push(renderSpinner('small'));
     }
   },
 

app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6

@@ -1,3 +1,8 @@
 export default Ember.Component.extend({
-  layoutName: 'components/conditional-loading-spinner'
+  classNameBindings: ['containerClass'],
+  layoutName: 'components/conditional-loading-spinner',
+
+  containerClass: function() {
+    return (this.get('size') === 'small') ? 'inline-spinner' : undefined;
+  }.property('size')
 });

app/assets/javascripts/discourse/helpers/loading-spinner.es6

@@ -1,5 +1,11 @@
 import ConditionalLoadingSpinner from 'discourse/components/conditional-loading-spinner';
-var spinnerHTML = "<div class='spinner'></div>";
+
+function renderSpinner(cssClass) {
+  var html = "<div class='spinner";
+  if (cssClass) { html += ' ' + cssClass; }
+  return html + "'></div>";
+}
+var spinnerHTML = renderSpinner();
 
 /**
    If you use it as a regular helper {{loading-spinner}} you'll just get the
@@ -18,12 +24,8 @@ Handlebars.registerHelper('loading-spinner', function(options) {
     Discourse.Utilities.normalizeHash(hash, types);
     return Ember.Handlebars.helpers.view.call(this, ConditionalLoadingSpinner, options);
   } else {
-    var html = spinnerHTML;
+    return new Handlebars.SafeString(renderSpinner((hash && hash.size) ? hash.size : undefined));
-    if (hash && hash.class) {
-      html = "<div class='spinner " + hash.class + "'></div>";
-    }
-    return new Handlebars.SafeString(html);
   }
 });
 
-export { spinnerHTML };
+export { spinnerHTML, renderSpinner };

app/assets/javascripts/discourse/templates/components/conditional-loading-spinner.hbs

@@ -1,5 +1,5 @@
 {{#if condition}}
-  {{loading-spinner}}
+  <div {{bind-attr class=":spinner size"}}></div>
 {{else}}
   {{yield}}
 {{/if}}

app/assets/javascripts/discourse/templates/composer.hbs

@@ -1,4 +1,6 @@
-{{loading-spinner class="composer-loading"}}
+<div class='composer-loading'>
+  {{loading-spinner}}
+</div>
 
 <div class='contents'>
 
@@ -77,7 +79,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"}}>
-              {{loading-spinner}} {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
+              {{loading-spinner size="small"}} {{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>

app/assets/javascripts/discourse/templates/exception.hbs

@@ -16,9 +16,7 @@
       {{#each buttonData in enabledButtons}}
         <button class="btn {{unbound buttonData.classes}}" {{action buttonData.action}}>{{boundI18n buttonData.key}}</button>
       {{/each}}
-      {{#if loading}}
+      {{loading-spinner condition=loading}}
-        <i class="fa fa-spin fa-spinner"></i>
-      {{/if}}
     </div>
   </div>
 </div>

app/assets/javascripts/discourse/templates/modal/create-account.hbs

@@ -88,7 +88,7 @@
   {{#if showCreateForm}}
     <div class="modal-footer">
       <button class='btn btn-large btn-primary' {{bind-attr disabled="submitDisabled"}} {{action "createAccount"}}>{{i18n create_account.title}}</button>
-      {{#loading-spinner condition=formSubmitted class="create-spinner"}}
+      {{#loading-spinner condition=formSubmitted size="small"}}
         <button class="btn btn-large" id="login-link" {{action "showLogin"}}>
           {{i18n log_in}}
         </button>

app/assets/javascripts/discourse/templates/modal/history.hbs

@@ -4,11 +4,9 @@
       <button title="{{i18n post.revisions.controls.first}}" {{bind-attr class=":btn :standard :no-text displayGoToFirst::invisible" disabled=loading}} {{action "loadFirstVersion"}}><i class="fa fa-fast-backward"></i></button>
       <button title="{{i18n post.revisions.controls.previous}}" {{bind-attr class=":btn :standard :no-text displayGoToPrevious::invisible" disabled=loading}} {{action "loadPreviousVersion"}}><i class="fa fa-backward"></i></button>
       <div id="revision-numbers" {{bind-attr class="displayRevisions::invisible"}}>
-        {{#if loading}}
+        {{#loading-spinner condition=loading size="small"}}
-          <div id='revision-loading'><i class='fa fa-spinner fa-spin'></i>{{i18n loading}}</div>
-        {{else}}
           {{boundI18n revisionsTextKey previousBinding="previousVersion" currentBinding="current_version" totalBinding="version_count"}}
-        {{/if}}
+        {{/loading-spinner}}
       </div>
       <button title="{{i18n post.revisions.controls.next}}" {{bind-attr class=":btn :standard :no-text displayGoToNext::invisible" disabled=loading}} {{action "loadNextVersion"}}><i class="fa fa-forward"></i></button>
       <button title="{{i18n post.revisions.controls.last}}" {{bind-attr class=":btn :standard :no-text displayGoToLast::invisible" disabled=loading}} {{action "loadLastVersion"}}><i class="fa fa-fast-forward"></i></button>

app/assets/javascripts/discourse/templates/modal/login.hbs

@@ -56,5 +56,5 @@
       {{i18n login.authenticating}}
   {{/if}}
 
-  {{loading-spinner condition=showSpinner class="login-spinner"}}
+  {{loading-spinner condition=showSpinner size="small"}}
 </div>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -5,7 +5,6 @@
 </div>
 
 {{#if postStream.loaded}}
-
   {{#if postStream.firstPostPresent}}
     <div id='topic-title'>
       <div class='container'>
@@ -90,9 +89,7 @@
         </div>
         <div id='topic-bottom'></div>
 
-        {{#if postStream.loadingFilter}}
+        {{#loading-spinner condition=postStream.loadingFilter}}
-          <div class='spinner small'></div>
-        {{else}}
           {{#if postStream.loadedAllPosts}}
 
             {{view 'topic-closing' topic=model}}
@@ -109,7 +106,7 @@
             {{/if}}
 
           {{/if}}
-        {{/if}}
+        {{/loading-spinner}}
 
       </section>
     </div>

app/assets/stylesheets/common/base/compose.scss

@@ -135,16 +135,6 @@ div.ac-wrap {
   }
 }
 
-#file-uploading {
-  .spinner {
-    width: 10px;
-    height: 10px;
-    margin: 0 5px 0 0;
-    display: inline-block;
-    float: left;
-  }
-}
-
 #reply-control {
   .composer-loading {
     position: absolute;
@@ -158,6 +148,4 @@ div.ac-wrap {
       @include visible;
     }
   }
-
 }
-

app/assets/stylesheets/common/base/discourse.scss

@@ -195,6 +195,11 @@ body {
   }
 }
 
+.inline-spinner {
+  display: inline-block;
+  margin: 0;
+}
+
 .spinner {
   margin: 30px auto 0 auto;
   position: relative;
@@ -205,4 +210,11 @@ body {
   border: 4px solid dark-light-diff($primary, $secondary, 50%, -50%);
   border-right-color: transparent;
   border-radius: 50%;
+
+  &.small {
+    width: 10px;
+    height: 10px;
+    margin: 0;
+    display: inline-block;
+  }
 }

app/assets/stylesheets/common/base/history.scss

@@ -6,11 +6,6 @@
     min-width: 96px;
     text-align: center;
   }
-  #revision-loading {
-    .fa {
-      margin-right: 7px;
-    }
-  }
   #revisions .row:first-of-type {
     margin-top: 10px;
   }

app/assets/stylesheets/common/base/modal.scss

@@ -74,16 +74,6 @@
   margin-left: 15px;
   padding: 14px 15px 15px;
   border-top: 1px solid scale-color-diff();
-  .login-spinner, .create-spinner {
-    display: inline-block;
-    margin: 0;
-    .spinner {
-      margin: 0;
-      width: 10px;
-      height: 10px;
-      display: inline-block;
-    }
-  }
 }
 .modal-footer:before,
 .modal-footer:after {

app/assets/stylesheets/desktop/login.scss

@@ -18,12 +18,6 @@
   }
 }
 
-.login-modal {
-  .fa-spinner {
-    font-size: 18px;
-  }
-}
-
 // Create account
 
 #new-account-link {
@@ -55,10 +49,6 @@
     }
   }
 
-  .fa-spinner {
-    font-size: 18px;
-  }
-
   .tos-agree {
     margin-bottom: 12px;
   }

plugins/poll/assets/javascripts/discourse/templates/poll.hbs

@@ -38,6 +38,4 @@
 {{/if}}
 </div>
 
-{{#if loading}}
+{{loading-spinner condition=loading}}
-  <i class="fa fa-spin fa-spinner"></i>
-{{/if}}