opendev/storyboard-webclient
Code Issues Proposed changes

Added class and view variable for state transitions.

Browse Source 
When we are in the process of transitioning between states, the
application now provides two indicators for UI switching. First,
the class 'resolving' is added to the body element, for CSS targeting.
Secondly, a $rootScope variable named isResolving is set during the
transition, and a root-level loading view has been added.

This permits us to do the lion's share of our data loading in a state's
resolve: {} declaration, and render the final view as a fait accompli.

Change-Id: Ia3580617eba89a0454f383b708c246e4b1901107
This commit is contained in:
Michael Krotscheck 2015-03-02 13:59:21 -08:00
parent 2c71c40ce5
commit a33eaccb48
2 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/storyboard/module.js
View File

@ -62,6 +62,28 @@ angular.module('storyboard',
}
});
})
.run(function ($log, $rootScope, $document) {
'use strict';
var resolvingClassName = 'resolving';
var body = $document.find('body');
// Apply a global class to the application when we're in the middle of
// a state resolution, as well as a global scope variable that UI views
// can switch on.
$rootScope.$on('$stateChangeStart', function () {
body.addClass(resolvingClassName);
$rootScope.isResolving = true;
});
$rootScope.$on('$stateChangeSuccess', function () {
body.removeClass(resolvingClassName);
$rootScope.isResolving = false;
});
$rootScope.$on('$stateChangeError', function () {
body.removeClass(resolvingClassName);
$rootScope.isResolving = false;
});
})
.run(function ($log, $rootScope, $state) {
'use strict';

14
src/index.html
View File

@ -50,7 +50,19 @@
<header ng-include src="'app/storyboard/template/header_menu.html'"></header>
<div ng-include src="'app/storyboard/template/side_menu.html'"></div>
<div ui-view class="main"></div>
<div ng-if="isResolving">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="text-center text-muted">
<br/>
<i class="fa fa-refresh fa-lg fa-spin"></i>
</p>
</div>
</div>
</div>
</div>
<div ui-view class="main" ng-if="!isResolving"></div>
<notifications></notifications>
</body>
</html>