Implement new non-digest based loadingIndicator

pull/5117/head
Oliver Günther 8 years ago
parent 3a9018be6f
commit 422f5ec2fa
No known key found for this signature in database
GPG Key ID: 88872239EB414F99
  1. 14
      app/assets/stylesheets/content/_loading_indicator.lsg
  2. 62
      app/assets/stylesheets/content/_loading_indicator.sass
  3. 1
      app/assets/stylesheets/default.css.sass
  4. 1
      app/assets/stylesheets/layout/_work_package.sass
  5. 3
      app/assets/stylesheets/layout/_work_package_mobile.sass
  6. 5
      app/assets/stylesheets/open_project_global/_variables.sass
  7. 69
      frontend/app/components/common/loading-indicator/loading-indicator.service.ts
  8. 12
      frontend/app/components/routing/wp-list/wp-list.controller.ts
  9. 7
      frontend/app/components/routing/wp-list/wp.list.html

@ -0,0 +1,14 @@
# Loading indicator
<div class="loading-indicator">
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
<div class="block-4"></div>
<div class="block-5"></div>
</div>
<div class="loading-indicator--background">
</div>

@ -0,0 +1,62 @@
// Based on spinkit by Tobias Ahlin.
//
// The MIT License (MIT)
// Copyright (c) 2015 Tobias Ahlin
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
.loading-indicator--background
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: $loading-indicator-bg-color
opacity: $loading-indicator-bg-opacity
z-index: 1000
.loading-indicator
margin: 80px auto
width: 100px
height: 50px
text-align: center
font-size: 10px
[class^='block-']
background-color: $loading-indicator-spinner-color
height: 100%
width: 6px
display: inline-block
animation: block-waveStretchDelay 1.2s infinite ease-in-out
.block-1
animation-delay: -1.2s
.block-2
animation-delay: -1.1s
.block-3
animation-delay: -1s
.block-4
animation-delay: -0.9s
.block-5
animation-delay: -0.8s
@keyframes block-waveStretchDelay
0%, 40%, 100%
transform: scaleY(0.4)
20%
transform: scaleY(1)

@ -77,6 +77,7 @@
@import content/information_section
@import content/widget_box
@import content/list
@import content/loading_indicator
@import content/work_packages

@ -105,6 +105,7 @@
overflow-x: auto
.work-packages--list-table-area
position: relative // required for loading indicator
height: calc(100% - 55px)
table

@ -44,9 +44,6 @@
height: 100% !important
overflow: visible
.work-packages--list-table-area
position: relative
.work-packages--list
padding-bottom: 55px

@ -219,3 +219,8 @@ $table-row-border-color: #E7E7E7 !default
$table-row-highlighting-color: #e4f7fb !default
$table-header-border-color: #D7D7D7 !default
$table-header-shadow-color: #DDDDDD !default
$loading-indicator-bg-color: $body-background !default
$loading-indicator-bg-opacity: 0.8 !default
$loading-indicator-spinner-color: $primary-color !default

@ -26,12 +26,63 @@
// See doc/COPYRIGHT.rdoc for more details.
// ++
/**
* An object holding promises for page load indication for cg-busy.
*
* @see https://github.com/cgross/angular-busy/
*/
angular
.module('openproject.workPackages.services')
.value('loadingIndicator', {});
export const indicatorLocationSelector = '.loading-indicator--location';
export const indicatorBackgroundSelector = '.loading-indicator--background';
export class LoadingIndicator {
constructor(public indicator:JQuery, public element:JQuery) {}
public set promise(promise:ng.IPromise<any>) {
this.start();
promise.finally(() => {
this.stop();
});
}
public start() {
this.indicator.prepend(this.element);
}
public stop() {
this.indicator.find(indicatorBackgroundSelector).remove();
}
}
export class LoadingIndicatorService {
private indicatorTemplate;
constructor() {
this.indicatorTemplate = `
<div class="loading-indicator--background">
<div class="loading-indicator">
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
<div class="block-4"></div>
<div class="block-5"></div>
</div>
</div>
`;
}
// Provide a shortcut to the primarily used indicator
// (aka mainPage)
public get table() {
return this.indicator('table');
}
// Return an indicator by name
public indicator(name:string):LoadingIndicator {
let indicator = this.getIndicatorAt(name);
return new LoadingIndicator(indicator, jQuery(this.indicatorTemplate));
}
private getIndicatorAt(name:string):JQuery {
return jQuery(indicatorLocationSelector).filter(`[data-indicator-name="${name}"`);
}
}
import {opServicesModule} from '../../../angular-modules';
opServicesModule.service('loadingIndicator', LoadingIndicatorService);

@ -32,6 +32,7 @@ import {ErrorResource} from '../../api/api-v3/hal-resources/error-resource.servi
import {States} from '../../states.service';
import {WorkPackageTableColumnsService} from '../../wp-fast-table/state/wp-table-columns.service';
import { Observable } from 'rxjs/Observable';
import {LoadingIndicatorService} from '../../common/loading-indicator/loading-indicator.service';
function WorkPackagesListController($scope,
$rootScope,
@ -50,11 +51,10 @@ function WorkPackagesListController($scope,
AuthorisationService,
UrlParamsHelper,
OPERATORS_AND_LABELS_BY_FILTER_TYPE,
loadingIndicator,
loadingIndicator:LoadingIndicatorService,
I18n) {
$scope.projectIdentifier = $state.params.projectPath || null;
$scope.loadingIndicator = loadingIndicator;
$scope.I18n = I18n;
$scope.text = {
'jump_to_pagination': I18n.t('js.work_packages.jump_marks.pagination'),
@ -68,7 +68,7 @@ function WorkPackagesListController($scope,
$scope.disableNewWorkPackage = true;
$scope.queryError = false;
loadingIndicator.mainPage = wpListService.fromQueryParams($state.params, $scope.projectIdentifier)
loadingIndicator.table.promise = wpListService.fromQueryParams($state.params, $scope.projectIdentifier)
.then((json:api.ex.WorkPackagesMeta) => {
// Update work package states
@ -199,7 +199,7 @@ function WorkPackagesListController($scope,
};
$scope.loadQuery = function (queryId) {
loadingIndicator.mainPage = $state.go('work-packages.list',
loadingIndicator.table.promise= $state.go('work-packages.list',
{'query_id': queryId,
'query_props': null});
};
@ -207,7 +207,7 @@ function WorkPackagesListController($scope,
function updateResults() {
$scope.$broadcast('openproject.workPackages.updateResults');
loadingIndicator.mainPage = wpListService.fromQueryInstance($scope.query, $scope.projectIdentifier)
loadingIndicator.table.promise = wpListService.fromQueryInstance($scope.query, $scope.projectIdentifier)
.then(function (json:api.ex.WorkPackagesMeta) {
wpCacheService.updateWorkPackageList(json.work_packages);
setupWorkPackagesTable(json);
@ -260,7 +260,7 @@ function WorkPackagesListController($scope,
workPackageId: id
}
loadingIndicator.mainPage = $state.go(
loadingIndicator.table.promise = $state.go(
'work-packages.show',
angular.extend($state.params, params)
);

@ -69,10 +69,9 @@
<span ng-bind="::text.jump_to_pagination"></span>
</accessible-by-keyboard>
<div class="work-packages--list"
cg-busy="{promise: loadingIndicator.mainPage, message: I18n.t('js.label_please_wait')}">
<div class="work-packages--list-table-area">
<div class="work-packages--list">
<div class="work-packages--list-table-area loading-indicator--location"
data-indicator-name="table">
<wp-table ng-if="columns"
project-identifier="projectIdentifier"
columns="columns"

Loading…
Cancel
Save