From 32592b7d90d4782018eacf0d8c880af0cad7752c Mon Sep 17 00:00:00 2001 From: Greg Date: Mon, 16 Oct 2023 20:21:20 +0400 Subject: [PATCH] feat: complete WEB-5319 preloader for articles --- .../documentation.component.html | 5 +- .../documentation.component.scss | 9 +++ .../documentation/documentation.component.ts | 9 +++ src/app/ui-kit/loader/index.ts | 2 + src/app/ui-kit/loader/loader.component.html | 3 + src/app/ui-kit/loader/loader.component.scss | 57 +++++++++++++++++++ .../ui-kit/loader/loader.component.spec.ts | 22 +++++++ src/app/ui-kit/loader/loader.component.ts | 9 +++ src/app/ui-kit/loader/loader.module.ts | 10 ++++ src/app/ui-kit/ui-kit.module.ts | 4 +- 10 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 src/app/ui-kit/loader/index.ts create mode 100644 src/app/ui-kit/loader/loader.component.html create mode 100644 src/app/ui-kit/loader/loader.component.scss create mode 100644 src/app/ui-kit/loader/loader.component.spec.ts create mode 100644 src/app/ui-kit/loader/loader.component.ts create mode 100644 src/app/ui-kit/loader/loader.module.ts diff --git a/src/app/components/documentation/documentation.component.html b/src/app/components/documentation/documentation.component.html index c2bc2391..1f9d07dd 100644 --- a/src/app/components/documentation/documentation.component.html +++ b/src/app/components/documentation/documentation.component.html @@ -32,15 +32,16 @@ + +
-
-
+

Was this article helpful?

Thanks for the rating!

diff --git a/src/app/components/documentation/documentation.component.scss b/src/app/components/documentation/documentation.component.scss index cea36562..3f8cb456 100644 --- a/src/app/components/documentation/documentation.component.scss +++ b/src/app/components/documentation/documentation.component.scss @@ -1,5 +1,11 @@ @import '../../../scss/variables'; +gcore-loader { + ::ng-deep.dot-flashing { + margin: 0 auto; + } +} + .doc-wrapper { display: flex; align-items: stretch; @@ -26,6 +32,9 @@ } .doc-content { + display: flex; + flex-direction: column; + justify-content: space-between; width: 100%; max-width: 43rem; margin: 0 auto; diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts index d6e198a2..bfff572d 100644 --- a/src/app/components/documentation/documentation.component.ts +++ b/src/app/components/documentation/documentation.component.ts @@ -49,6 +49,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr public activeTab: string; public baseHref: string = environment.baseHref; public isArticleRated: boolean = false; + public isArticleReady: boolean = false; private routerSubscription: Subscription; @@ -73,6 +74,14 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr }); if (this.scullyContainer.nativeElement) { + if (this.scullyContainer.nativeElement.childElementCount > 1) { + this.isArticleReady = true; + this.changeDetectorRef.detectChanges(); + } else { + this.isArticleReady = false; + this.changeDetectorRef.detectChanges(); + } + this.scullyContainer.nativeElement.querySelectorAll(':not(.gc-gallery p) > img').forEach((img: Element) => { this.ngZone.runOutsideAngular(() => { this.renderer.listen(img, 'click', (event) => this.expandImage(event)); diff --git a/src/app/ui-kit/loader/index.ts b/src/app/ui-kit/loader/index.ts new file mode 100644 index 00000000..b9d06d8a --- /dev/null +++ b/src/app/ui-kit/loader/index.ts @@ -0,0 +1,2 @@ +export * from './loader.component'; +export * from './loader.module'; diff --git a/src/app/ui-kit/loader/loader.component.html b/src/app/ui-kit/loader/loader.component.html new file mode 100644 index 00000000..ca7b0a25 --- /dev/null +++ b/src/app/ui-kit/loader/loader.component.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/src/app/ui-kit/loader/loader.component.scss b/src/app/ui-kit/loader/loader.component.scss new file mode 100644 index 00000000..9a10b13e --- /dev/null +++ b/src/app/ui-kit/loader/loader.component.scss @@ -0,0 +1,57 @@ +@import '../../../scss/variables.scss'; + +/** + * ============================================== + * Dot Flashing https://codepen.io/nzbin/pen/GGrXbp + * ============================================== + */ +.dot-flashing { + position: relative; + width: 10px; + height: 10px; + border-radius: 5px; + background-color: $contentLink; + color: $contentLink; + animation: dotFlashing 1s infinite linear alternate; + animation-delay: 0.5s; +} + +.dot-flashing::before, +.dot-flashing::after { + content: ''; + display: inline-block; + position: absolute; + top: 0; +} + +.dot-flashing::before { + left: -15px; + width: 10px; + height: 10px; + border-radius: 5px; + background-color: $contentLink; + color: $contentLink; + animation: dotFlashing 1s infinite alternate; + animation-delay: 0s; +} + +.dot-flashing::after { + left: 15px; + width: 10px; + height: 10px; + border-radius: 5px; + background-color: $contentLink; + color: $contentLink; + animation: dotFlashing 1s infinite alternate; + animation-delay: 1s; +} + +@keyframes dotFlashing { + 0% { + background-color: $contentLink; + } + 50%, + 100% { + background-color: #fff; + } +} diff --git a/src/app/ui-kit/loader/loader.component.spec.ts b/src/app/ui-kit/loader/loader.component.spec.ts new file mode 100644 index 00000000..76c51d54 --- /dev/null +++ b/src/app/ui-kit/loader/loader.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoaderComponent } from './loader.component'; + +describe('LoaderComponent', () => { + let component: LoaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [LoaderComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(LoaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ui-kit/loader/loader.component.ts b/src/app/ui-kit/loader/loader.component.ts new file mode 100644 index 00000000..bce8e67d --- /dev/null +++ b/src/app/ui-kit/loader/loader.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'gcore-loader', + templateUrl: './loader.component.html', + styleUrls: ['./loader.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class LoaderComponent {} diff --git a/src/app/ui-kit/loader/loader.module.ts b/src/app/ui-kit/loader/loader.module.ts new file mode 100644 index 00000000..925d2b27 --- /dev/null +++ b/src/app/ui-kit/loader/loader.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { LoaderComponent } from './loader.component'; + +@NgModule({ + declarations: [LoaderComponent], + imports: [CommonModule], + exports: [LoaderComponent], +}) +export class LoaderModule {} diff --git a/src/app/ui-kit/ui-kit.module.ts b/src/app/ui-kit/ui-kit.module.ts index b22da923..57d715cd 100644 --- a/src/app/ui-kit/ui-kit.module.ts +++ b/src/app/ui-kit/ui-kit.module.ts @@ -6,6 +6,7 @@ import { SearchBoxComponent } from './search-box/search-box.component'; import { CallToActionBoxComponent } from './call-to-action-box/call-to-action-box.component'; import { PaginationComponent } from './pagination'; import { ModalComponent } from './modal'; +import { LoaderComponent, LoaderModule } from './loader'; @NgModule({ declarations: [ @@ -15,7 +16,7 @@ import { ModalComponent } from './modal'; PaginationComponent, ModalComponent, ], - imports: [FormsModule, CommonModule], + imports: [FormsModule, CommonModule, LoaderModule], exports: [ RedirectLinkButtonComponent, SearchBoxComponent, @@ -23,6 +24,7 @@ import { ModalComponent } from './modal'; FormsModule, PaginationComponent, ModalComponent, + LoaderComponent, ], providers: [], })