mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 19:33:02 +03:00
Re-implementing the loading indicator for the Ember admin
closes #2855 , closes #2848 - New mixin that utilizes NProgress for displaying a loading indictor for all routes who's model issue a "loading" event (aka: when requesting data from the server during a route change). - Also removing (the now unnecessary) "loading" template.
This commit is contained in:
parent
3fc9075383
commit
4c72c318d5
@ -512,6 +512,7 @@ var path = require('path'),
|
||||
|
||||
'bower_components/jquery-ui/ui/jquery-ui.js',
|
||||
'bower_components/jquery-file-upload/js/jquery.fileupload.js',
|
||||
'bower_components/nprogress/nprogress.js',
|
||||
|
||||
'core/shared/lib/showdown/extensions/ghostimagepreview.js',
|
||||
'core/shared/lib/showdown/extensions/ghostgfm.js',
|
||||
|
@ -29,6 +29,7 @@
|
||||
"$": true,
|
||||
"validator": true,
|
||||
"ic": true,
|
||||
"_": true
|
||||
"_": true,
|
||||
"NProgress": true
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,9 @@
|
||||
import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, {
|
||||
|
||||
var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, loadingIndicator, {
|
||||
actions: {
|
||||
save: function () {
|
||||
this.get('controller').send('save');
|
||||
@ -54,4 +55,4 @@ var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, {
|
||||
}
|
||||
});
|
||||
|
||||
export default EditorRouteBase;
|
||||
export default EditorRouteBase;
|
||||
|
25
core/client/mixins/loading-indicator.js
Normal file
25
core/client/mixins/loading-indicator.js
Normal file
@ -0,0 +1,25 @@
|
||||
// mixin used for routes to display a loading indicator when there is network activity
|
||||
var loaderOptions = {
|
||||
'showSpinner': false
|
||||
};
|
||||
NProgress.configure(loaderOptions);
|
||||
|
||||
var loadingIndicator = Ember.Mixin.create({
|
||||
actions: {
|
||||
|
||||
loading: function () {
|
||||
NProgress.start();
|
||||
this.router.one('didTransition', function () {
|
||||
NProgress.done();
|
||||
});
|
||||
return true;
|
||||
},
|
||||
|
||||
error: function () {
|
||||
NProgress.done();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default loadingIndicator;
|
@ -1,8 +1,9 @@
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import SettingsModel from 'ghost/models/settings';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
export default AuthenticatedRoute.extend(styleBody, {
|
||||
export default AuthenticatedRoute.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['settings'],
|
||||
|
||||
model: function () {
|
||||
|
@ -1,6 +1,7 @@
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var ForgottenRoute = Ember.Route.extend(styleBody, {
|
||||
var ForgottenRoute = Ember.Route.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['ghost-forgotten']
|
||||
});
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var paginationSettings = {
|
||||
status: 'all',
|
||||
@ -8,7 +9,7 @@ var paginationSettings = {
|
||||
page: 1
|
||||
};
|
||||
|
||||
var PostsRoute = AuthenticatedRoute.extend(ShortcutsRoute, styleBody, {
|
||||
var PostsRoute = AuthenticatedRoute.extend(ShortcutsRoute, styleBody, loadingIndicator, {
|
||||
classNames: ['manage'],
|
||||
|
||||
model: function () {
|
||||
|
@ -1,6 +1,7 @@
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var PostsIndexRoute = AuthenticatedRoute.extend({
|
||||
var PostsIndexRoute = AuthenticatedRoute.extend(loadingIndicator, {
|
||||
// redirect to first post subroute
|
||||
beforeModel: function () {
|
||||
var self = this;
|
||||
|
@ -1,6 +1,7 @@
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var PostsPostRoute = AuthenticatedRoute.extend({
|
||||
var PostsPostRoute = AuthenticatedRoute.extend(loadingIndicator, {
|
||||
model: function (params) {
|
||||
var self = this,
|
||||
post,
|
||||
|
@ -1,6 +1,7 @@
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var ResetRoute = Ember.Route.extend(styleBody, {
|
||||
var ResetRoute = Ember.Route.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['ghost-reset'],
|
||||
setupController: function (controller, params) {
|
||||
controller.token = params.token;
|
||||
|
@ -1,7 +1,8 @@
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var SettingsRoute = AuthenticatedRoute.extend(styleBody, {
|
||||
var SettingsRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['settings']
|
||||
});
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var SettingsGeneralRoute = AuthenticatedRoute.extend({
|
||||
var SettingsGeneralRoute = AuthenticatedRoute.extend(loadingIndicator, {
|
||||
model: function () {
|
||||
return this.store.find('setting', { type: 'blog,theme' }).then(function (records) {
|
||||
return records.get('firstObject');
|
||||
|
@ -1,9 +1,10 @@
|
||||
import ajax from 'ghost/utils/ajax';
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var isEmpty = Ember.isEmpty;
|
||||
|
||||
var SigninRoute = Ember.Route.extend(styleBody, {
|
||||
var SigninRoute = Ember.Route.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['ghost-login'],
|
||||
|
||||
actions: {
|
||||
|
@ -1,8 +1,9 @@
|
||||
import ajax from 'ghost/utils/ajax';
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import AuthenticatedRoute from 'ghost/routes/authenticated';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var SignoutRoute = AuthenticatedRoute.extend(styleBody, {
|
||||
var SignoutRoute = AuthenticatedRoute.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['ghost-signout'],
|
||||
|
||||
beforeModel: function () {
|
||||
|
@ -1,7 +1,8 @@
|
||||
import ajax from 'ghost/utils/ajax';
|
||||
import styleBody from 'ghost/mixins/style-body';
|
||||
import loadingIndicator from 'ghost/mixins/loading-indicator';
|
||||
|
||||
var SignupRoute = Ember.Route.extend(styleBody, {
|
||||
var SignupRoute = Ember.Route.extend(styleBody, loadingIndicator, {
|
||||
classNames: ['ghost-signup'],
|
||||
|
||||
name: null,
|
||||
|
@ -1 +0,0 @@
|
||||
<h1>Loading...</h1>
|
Loading…
Reference in New Issue
Block a user