mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-27 09:36:19 -05:00
UX: More spinner upgrades
This commit is contained in:
Robin Ward
parent
074fa81182
commit
0d12ed2231
16 changed files with 43 additions and 67 deletions
|
|
@ -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'));
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -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')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#if condition}}
|
||||
{{loading-spinner}}
|
||||
<div {{bind-attr class=":spinner size"}}></div>
|
||||
{{else}}
|
||||
{{yield}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -56,5 +56,5 @@
|
|||
{{i18n login.authenticating}}
|
||||
{{/if}}
|
||||
|
||||
{{loading-spinner condition=showSpinner class="login-spinner"}}
|
||||
{{loading-spinner condition=showSpinner size="small"}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,6 @@
|
|||
min-width: 96px;
|
||||
text-align: center;
|
||||
}
|
||||
#revision-loading {
|
||||
.fa {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
#revisions .row:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,4 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if loading}}
|
||||
<i class="fa fa-spin fa-spinner"></i>
|
||||
{{/if}}
|
||||
{{loading-spinner condition=loading}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue