From a5ee78910afb9fd68b86f7892ba0c85378650ce1 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 12 May 2020 12:50:13 +0300 Subject: [PATCH 1/6] fix(theme-shared): fix loader bar problem --- .../components/loader-bar/loader-bar.component.scss | 5 ++++- .../components/loader-bar/loader-bar.component.ts | 13 +++++++++---- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss index 2dd3482e27..19a4f2ee8f 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss @@ -16,6 +16,9 @@ left: 0; position: fixed; top: 0; - transition: width 0.4s ease; + + &.progressing { + transition: width 0.4s ease; + } } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index 441359e476..de37ca18f7 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -12,6 +12,7 @@ import { filter } from 'rxjs/operators';
Date: Tue, 12 May 2020 12:52:19 +0300 Subject: [PATCH 3/6] chore: change fn name resolves #3650 --- .../src/lib/components/loader-bar/loader-bar.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index de37ca18f7..426f3bb0f2 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -90,7 +90,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.isLoading = true; - const progress = () => { + const moveOn = () => { if (this.progressLevel < 75) { this.progressLevel += Math.random() * 10; } else if (this.progressLevel < 90) { @@ -103,8 +103,8 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.cdRef.detectChanges(); }; - progress(); - this.interval = interval(this.intervalPeriod).subscribe(() => progress()); + moveOn(); + this.interval = interval(this.intervalPeriod).subscribe(() => moveOn()); } stopLoading() { From 2a21eb7639c1b64d5d8bf149b36b35b4871fd3d5 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 12 May 2020 12:56:49 +0300 Subject: [PATCH 4/6] refactor(theme-shared): improve code quality --- .../src/lib/components/loader-bar/loader-bar.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index 426f3bb0f2..61f4d2f663 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -104,7 +104,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { }; moveOn(); - this.interval = interval(this.intervalPeriod).subscribe(() => moveOn()); + this.interval = interval(this.intervalPeriod).subscribe(moveOn); } stopLoading() { From e9159fd1b969f8caa164926a9a50859b168e46f4 Mon Sep 17 00:00:00 2001 From: Ahmet Date: Thu, 14 May 2020 16:39:01 +0300 Subject: [PATCH 5/6] Added escape blocks for text templating documentation --- docs/en/Text-Templating.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/en/Text-Templating.md b/docs/en/Text-Templating.md index 9cad6598f1..18a360c5c8 100644 --- a/docs/en/Text-Templating.md +++ b/docs/en/Text-Templating.md @@ -17,7 +17,7 @@ You can use the rendered output for any purpose, like sending emails or preparin Here, a simple template: ```` -Hello {{model.name}} :) +Hello {%{{{model.name}}}%} :) ```` You can define a class with a `Name` property to render this template: @@ -114,7 +114,7 @@ public class DemoTemplateDefinitionProvider : TemplateDefinitionProvider Example `Hello.tpl` content is shown below: ```` -Hello {{model.name}} :) +Hello {%{{{model.name}}}%} :) ```` The [Virtual File System](Virtual-File-System.md) requires to add your files in the `ConfigureServices` method of your [module](Module-Development-Basics.md) class: @@ -204,7 +204,7 @@ Inline localization uses the [localization system](Localization.md) to localize Assuming you need to send an email to a user to reset her/his password. Here, the template content: ```` -{{L "ResetMyPassword"}} +{%{{{L "ResetMyPassword"}}}%} ```` `L` function is used to localize the given key based on the current user culture. You need to define the `ResetMyPassword` key inside your localization file: @@ -314,12 +314,12 @@ First, create a template file just like before: - {{content}} + {%{{{content}}}%} ```` -* A layout template must have a **{{content}}** part as a place holder for the rendered child content. +* A layout template must have a **{%{{{content}}}%}** part as a place holder for the rendered child content. The register your template in the template definition provider: @@ -357,7 +357,7 @@ ABP passes the `model` that can be used to access to the model inside the templa An example template content: ```` -A global object value: {{myGlobalObject}} +A global object value: {%{{{myGlobalObject}}}%} ```` This template assumes that that is a `myGlobalObject` object in the template rendering context. You can provide it like shown below: @@ -413,7 +413,7 @@ public class TemplateContentDemo : ITransientDependency The result will be the raw template content: ```` -Hello {{model.name}} :) +Hello {%{{{model.name}}}%} :) ```` * `GetContentOrNullAsync` returns `null` if no content defined for the requested template. From d3543c7c4c33fb0b262200d90ea42bc1b5a571ca Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Thu, 14 May 2020 18:46:14 +0300 Subject: [PATCH 6/6] refactor: move ops to seperate methods and properties --- .../loader-bar/loader-bar.component.ts | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index 61f4d2f663..41a5850131 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular import { NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router'; import { takeUntilDestroy } from '@ngx-validate/core'; import { Actions, ofActionSuccessful } from '@ngxs/store'; -import { interval, Subscription, timer } from 'rxjs'; +import { Subscription, timer } from 'rxjs'; import { filter } from 'rxjs/operators'; @Component({ @@ -30,6 +30,10 @@ export class LoaderBarComponent implements OnDestroy, OnInit { @Input() color = '#77b6ff'; + @Input() + filter = (action: StartLoader | StopLoader) => + action.payload.url.indexOf('openid-configuration') < 0; + @Input() isLoading = false; @@ -43,9 +47,23 @@ export class LoaderBarComponent implements OnDestroy, OnInit { stopDelay = 800; - @Input() - filter = (action: StartLoader | StopLoader) => - action.payload.url.indexOf('openid-configuration') < 0; + private readonly clearProgress = () => { + this.progressLevel = 0; + this.cdRef.detectChanges(); + }; + + private readonly reportProgress = () => { + if (this.progressLevel < 75) { + this.progressLevel += 1 + Math.random() * 9; + } else if (this.progressLevel < 90) { + this.progressLevel += 0.4; + } else if (this.progressLevel < 100) { + this.progressLevel += 0.1; + } else { + this.interval.unsubscribe(); + } + this.cdRef.detectChanges(); + }; get boxShadow(): string { return `0 0 10px rgba(${this.color}, 0.5)`; @@ -53,7 +71,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { constructor(private actions: Actions, private router: Router, private cdRef: ChangeDetectorRef) {} - ngOnInit() { + private subscribeToLoadActions() { this.actions .pipe( ofActionSuccessful(StartLoader, StopLoader), @@ -64,7 +82,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit { if (action instanceof StartLoader) this.startLoading(); else this.stopLoading(); }); + } + private subscribeToRouterEvents() { this.router.events .pipe( filter( @@ -81,6 +101,11 @@ export class LoaderBarComponent implements OnDestroy, OnInit { }); } + ngOnInit() { + this.subscribeToLoadActions(); + this.subscribeToRouterEvents(); + } + ngOnDestroy() { if (this.interval) this.interval.unsubscribe(); } @@ -90,32 +115,17 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.isLoading = true; - const moveOn = () => { - if (this.progressLevel < 75) { - this.progressLevel += Math.random() * 10; - } else if (this.progressLevel < 90) { - this.progressLevel += 0.4; - } else if (this.progressLevel < 100) { - this.progressLevel += 0.1; - } else { - this.interval.unsubscribe(); - } - this.cdRef.detectChanges(); - }; - - moveOn(); - this.interval = interval(this.intervalPeriod).subscribe(moveOn); + this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); } stopLoading() { if (this.interval) this.interval.unsubscribe(); + this.progressLevel = 100; this.isLoading = false; + if (this.timer && !this.timer.closed) return; - this.timer = timer(this.stopDelay).subscribe(() => { - this.progressLevel = 0; - this.cdRef.detectChanges(); - }); + this.timer = timer(this.stopDelay).subscribe(this.clearProgress); } }