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 @@ {{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}}