From 422f5ec2fa32da09fed335b6c2c4e9e7b4417c61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Thu, 2 Feb 2017 15:42:37 +0100 Subject: [PATCH] Implement new non-digest based loadingIndicator --- .../content/_loading_indicator.lsg | 14 ++++ .../content/_loading_indicator.sass | 62 +++++++++++++++++ app/assets/stylesheets/default.css.sass | 1 + .../stylesheets/layout/_work_package.sass | 1 + .../layout/_work_package_mobile.sass | 3 - .../open_project_global/_variables.sass | 5 ++ .../loading-indicator.service.ts | 69 ++++++++++++++++--- .../routing/wp-list/wp-list.controller.ts | 12 ++-- .../components/routing/wp-list/wp.list.html | 7 +- 9 files changed, 152 insertions(+), 22 deletions(-) create mode 100644 app/assets/stylesheets/content/_loading_indicator.lsg create mode 100644 app/assets/stylesheets/content/_loading_indicator.sass diff --git a/app/assets/stylesheets/content/_loading_indicator.lsg b/app/assets/stylesheets/content/_loading_indicator.lsg new file mode 100644 index 0000000000..d6550fe4eb --- /dev/null +++ b/app/assets/stylesheets/content/_loading_indicator.lsg @@ -0,0 +1,14 @@ +# Loading indicator + +
+
+
+
+
+
+
+ + +
+ +
diff --git a/app/assets/stylesheets/content/_loading_indicator.sass b/app/assets/stylesheets/content/_loading_indicator.sass new file mode 100644 index 0000000000..0c3d221d28 --- /dev/null +++ b/app/assets/stylesheets/content/_loading_indicator.sass @@ -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) diff --git a/app/assets/stylesheets/default.css.sass b/app/assets/stylesheets/default.css.sass index af240e11d5..0ecc17ae1e 100644 --- a/app/assets/stylesheets/default.css.sass +++ b/app/assets/stylesheets/default.css.sass @@ -77,6 +77,7 @@ @import content/information_section @import content/widget_box @import content/list +@import content/loading_indicator @import content/work_packages diff --git a/app/assets/stylesheets/layout/_work_package.sass b/app/assets/stylesheets/layout/_work_package.sass index 675bac3683..0902b45f8e 100644 --- a/app/assets/stylesheets/layout/_work_package.sass +++ b/app/assets/stylesheets/layout/_work_package.sass @@ -105,6 +105,7 @@ overflow-x: auto .work-packages--list-table-area + position: relative // required for loading indicator height: calc(100% - 55px) table diff --git a/app/assets/stylesheets/layout/_work_package_mobile.sass b/app/assets/stylesheets/layout/_work_package_mobile.sass index b32f9f3cb1..f095d3d6ba 100644 --- a/app/assets/stylesheets/layout/_work_package_mobile.sass +++ b/app/assets/stylesheets/layout/_work_package_mobile.sass @@ -44,9 +44,6 @@ height: 100% !important overflow: visible - .work-packages--list-table-area - position: relative - .work-packages--list padding-bottom: 55px diff --git a/app/assets/stylesheets/open_project_global/_variables.sass b/app/assets/stylesheets/open_project_global/_variables.sass index 8673ac0a1e..3fed6a9fd2 100644 --- a/app/assets/stylesheets/open_project_global/_variables.sass +++ b/app/assets/stylesheets/open_project_global/_variables.sass @@ -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 diff --git a/frontend/app/components/common/loading-indicator/loading-indicator.service.ts b/frontend/app/components/common/loading-indicator/loading-indicator.service.ts index 0af38735c2..90ba96d40d 100644 --- a/frontend/app/components/common/loading-indicator/loading-indicator.service.ts +++ b/frontend/app/components/common/loading-indicator/loading-indicator.service.ts @@ -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) { + 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 = ` +
+
+
+
+
+
+
+
+
+ `; + } + + // 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); diff --git a/frontend/app/components/routing/wp-list/wp-list.controller.ts b/frontend/app/components/routing/wp-list/wp-list.controller.ts index dcab03a0a8..caa235f31d 100644 --- a/frontend/app/components/routing/wp-list/wp-list.controller.ts +++ b/frontend/app/components/routing/wp-list/wp-list.controller.ts @@ -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) ); diff --git a/frontend/app/components/routing/wp-list/wp.list.html b/frontend/app/components/routing/wp-list/wp.list.html index 4d3190d466..d2fb2f92a8 100644 --- a/frontend/app/components/routing/wp-list/wp.list.html +++ b/frontend/app/components/routing/wp-list/wp.list.html @@ -69,10 +69,9 @@ -
- -
+
+