From 0d12ed2231473a203c89a3ad592de66523b66565 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 13 Nov 2014 14:15:36 -0500
Subject: [PATCH] UX: More spinner upgrades

---
 ...ps_logs_view.js => admin-backups-logs.js.es6} |  5 +++--
 .../conditional-loading-spinner.js.es6           |  7 ++++++-
 .../discourse/helpers/loading-spinner.es6        | 16 +++++++++-------
 .../components/conditional-loading-spinner.hbs   |  2 +-
 .../javascripts/discourse/templates/composer.hbs |  6 ++++--
 .../discourse/templates/exception.hbs            |  4 +---
 .../discourse/templates/modal/create-account.hbs |  2 +-
 .../discourse/templates/modal/history.hbs        |  6 ++----
 .../discourse/templates/modal/login.hbs          |  2 +-
 .../javascripts/discourse/templates/topic.hbs    |  7 ++-----
 app/assets/stylesheets/common/base/compose.scss  | 12 ------------
 .../stylesheets/common/base/discourse.scss       | 12 ++++++++++++
 app/assets/stylesheets/common/base/history.scss  |  5 -----
 app/assets/stylesheets/common/base/modal.scss    | 10 ----------
 app/assets/stylesheets/desktop/login.scss        | 10 ----------
 .../javascripts/discourse/templates/poll.hbs     |  4 +---
 16 files changed, 43 insertions(+), 67 deletions(-)
 rename app/assets/javascripts/admin/views/{admin_backups_logs_view.js => admin-backups-logs.js.es6} (91%)

diff --git a/app/assets/javascripts/admin/views/admin_backups_logs_view.js b/app/assets/javascripts/admin/views/admin-backups-logs.js.es6
similarity index 91%
rename from app/assets/javascripts/admin/views/admin_backups_logs_view.js
rename to app/assets/javascripts/admin/views/admin-backups-logs.js.es6
index 0bf9728b4f3..49d24732e2f 100644
--- a/app/assets/javascripts/admin/views/admin_backups_logs_view.js
+++ b/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'));
     }
   },
 
diff --git a/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6 b/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6
index 4f927121531..ca6d0386ae5 100644
--- a/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6
+++ b/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')
 });
diff --git a/app/assets/javascripts/discourse/helpers/loading-spinner.es6 b/app/assets/javascripts/discourse/helpers/loading-spinner.es6
index 71e4332e591..4d0cdb7af23 100644
--- a/app/assets/javascripts/discourse/helpers/loading-spinner.es6
+++ b/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;
-    if (hash && hash.class) {
-      html = "<div class='spinner " + hash.class + "'></div>";
-    }
-    return new Handlebars.SafeString(html);
+    return new Handlebars.SafeString(renderSpinner((hash && hash.size) ? hash.size : undefined));
   }
 });
 
-export { spinnerHTML };
+export { spinnerHTML, renderSpinner };
diff --git a/app/assets/javascripts/discourse/templates/components/conditional-loading-spinner.hbs b/app/assets/javascripts/discourse/templates/components/conditional-loading-spinner.hbs
index 4d0c7131511..d1d27ae58e0 100644
--- a/app/assets/javascripts/discourse/templates/components/conditional-loading-spinner.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index ad0c7b53c22..d605773741c 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/exception.hbs b/app/assets/javascripts/discourse/templates/exception.hbs
index 63ff0b64b56..ba19a38b818 100644
--- a/app/assets/javascripts/discourse/templates/exception.hbs
+++ b/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}}
-        <i class="fa fa-spin fa-spinner"></i>
-      {{/if}}
+      {{loading-spinner condition=loading}}
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
index 3777855e948..2faa73d77b3 100644
--- a/app/assets/javascripts/discourse/templates/modal/create-account.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/modal/history.hbs b/app/assets/javascripts/discourse/templates/modal/history.hbs
index 20c513e94bc..9b9b52da5da 100644
--- a/app/assets/javascripts/discourse/templates/modal/history.hbs
+++ b/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}}
-          <div id='revision-loading'><i class='fa fa-spinner fa-spin'></i>{{i18n loading}}</div>
-        {{else}}
+        {{#loading-spinner condition=loading size="small"}}
           {{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>
diff --git a/app/assets/javascripts/discourse/templates/modal/login.hbs b/app/assets/javascripts/discourse/templates/modal/login.hbs
index a9051c1fe57..4c0fae6487a 100644
--- a/app/assets/javascripts/discourse/templates/modal/login.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/login.hbs
@@ -56,5 +56,5 @@
     &nbsp; {{i18n login.authenticating}}
   {{/if}}
 
-  {{loading-spinner condition=showSpinner class="login-spinner"}}
+  {{loading-spinner condition=showSpinner size="small"}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 535819412d2..56cbdb99860 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/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}}
-          <div class='spinner small'></div>
-        {{else}}
+        {{#loading-spinner condition=postStream.loadingFilter}}
           {{#if postStream.loadedAllPosts}}
 
             {{view 'topic-closing' topic=model}}
@@ -109,7 +106,7 @@
             {{/if}}
 
           {{/if}}
-        {{/if}}
+        {{/loading-spinner}}
 
       </section>
     </div>
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 43494417362..cfcfd296daa 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/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;
     }
   }
-
 }
-
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index f5084768b31..dcc2590fb08 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/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;
+  }
 }
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index a00c076cc0a..a583cab7798 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/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;
   }
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 3b1158eb28c..2688a184754 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index f690c2e6069..39c86a70e61 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/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;
   }
diff --git a/plugins/poll/assets/javascripts/discourse/templates/poll.hbs b/plugins/poll/assets/javascripts/discourse/templates/poll.hbs
index 27a856ab93a..7d26c141d90 100644
--- a/plugins/poll/assets/javascripts/discourse/templates/poll.hbs
+++ b/plugins/poll/assets/javascripts/discourse/templates/poll.hbs
@@ -38,6 +38,4 @@
 {{/if}}
 </div>
 
-{{#if loading}}
-  <i class="fa fa-spin fa-spinner"></i>
-{{/if}}
+{{loading-spinner condition=loading}}