From 51fde0095d0ed86e968d6789f2fee2d26c3bcdeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 29 Nov 2022 03:35:33 +0200 Subject: [PATCH 1/5] RED-5085: Skeleton loader WIP (Dashboard) --- apps/red-ui/src/app/app-routing.module.ts | 5 +- apps/red-ui/src/app/app.component.html | 6 +++ apps/red-ui/src/app/app.module.ts | 15 +++++- .../dashboard-skeleton.component.html | 17 +++++++ .../dashboard-skeleton.component.scss | 51 +++++++++++++++++++ .../dashboard-skeleton.component.ts | 9 ++++ .../skeleton-top-bar.component.html | 15 ++++++ .../skeleton-top-bar.component.scss | 9 ++++ .../skeleton-top-bar.component.ts | 12 +++++ libs/common-ui | 2 +- 10 files changed, 137 insertions(+), 4 deletions(-) create mode 100644 apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html create mode 100644 apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss create mode 100644 apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts create mode 100644 apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html create mode 100644 apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss create mode 100644 apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 23e8b18d8..2e45e3b41 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -119,9 +119,9 @@ const routes: IqserRoutes = [ { path: 'dashboard', loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule), - canActivate: [CompositeRouteGuard, IqserPermissionsGuard], + canActivate: [CompositeRouteGuard], data: { - routeGuards: [IqserAuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard], + routeGuards: [IqserAuthGuard, RedRoleGuard, IqserPermissionsGuard, DossierTemplatesGuard, DashboardGuard], permissions: { allow: [ ROLES.any, @@ -140,6 +140,7 @@ const routes: IqserRoutes = [ [DEFAULT_REDIRECT_KEY]: '/auth-error', }, }, + skeleton: 'Dashboard', }, }, { diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html index 6f2b09693..7120cae70 100644 --- a/apps/red-ui/src/app/app.component.html +++ b/apps/red-ui/src/app/app.component.html @@ -5,3 +5,9 @@ + + + + + + diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 3c25bae90..399d01523 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -14,6 +14,7 @@ import { IqserLoadingModule, IqserPermissionsModule, IqserPermissionsService, + IqserSharedModule, IqserTranslateModule, IqserUsersModule, LanguageService, @@ -27,6 +28,7 @@ import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '@environments/environment'; import { AuthErrorComponent } from '@components/auth-error/auth-error.component'; import { NotificationsComponent } from '@components/notifications/notifications.component'; +import { DashboardSkeletonComponent } from '@components/dashboard-skeleton/dashboard-skeleton.component'; import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component'; import { AppRoutingModule } from './app-routing.module'; import { SharedModule } from '@shared/shared.module'; @@ -59,10 +61,20 @@ import { LicenseService } from '@services/license.service'; import { TenantIdInterceptor } from '@utils/tenant-id-interceptor'; import { UI_CACHES } from '@utils/constants'; import { RedRoleGuard } from '@users/red-role.guard'; +import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component'; const screens = [BaseScreenComponent, DownloadsListScreenComponent]; -const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, BreadcrumbsComponent, ...screens]; +const components = [ + AppComponent, + AuthErrorComponent, + NotificationsComponent, + SpotlightSearchComponent, + BreadcrumbsComponent, + DashboardSkeletonComponent, + SkeletonTopBarComponent, + ...screens, +]; export const appModuleFactory = (config: AppConfig) => { @NgModule({ @@ -83,6 +95,7 @@ export const appModuleFactory = (config: AppConfig) => { existingUserService: UserService, existingRoleGuard: RedRoleGuard, }), + IqserSharedModule, CachingModule.forRoot(UI_CACHES), IqserHelpModeModule.forRoot(links), PdfViewerModule, diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html new file mode 100644 index 000000000..2f89e274d --- /dev/null +++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html @@ -0,0 +1,17 @@ + + +
+ +
+
+
+ +
+
+
+
+
+
+
+
+
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss new file mode 100644 index 000000000..50f65e0b7 --- /dev/null +++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss @@ -0,0 +1,51 @@ +@use 'common-mixins'; + +:host { + min-height: 100vh; + background-color: var(--iqser-alt-background); + display: flex; + flex-direction: column; + align-items: center; + + .container { + padding: 32px; + width: 900px; + max-width: 100%; + box-sizing: border-box; + } +} + +.skeleton { + background-color: var(--iqser-grey-4); + + &.line { + border-radius: 12px; + } +} + +.dialog { + flex-direction: row; + max-width: unset; + min-height: unset; + margin: 0 0 16px 0; + + > div { + padding: 24px; + display: flex; + flex-direction: column; + overflow: hidden; + + &:not(:first-child) { + justify-content: center; + border-left: 1px solid var(--iqser-separator); + } + } +} + +.stats-subtitle { + flex-direction: column; + + > div { + margin-top: 10px; + } +} diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts new file mode 100644 index 000000000..67c47d282 --- /dev/null +++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'redaction-dashboard-skeleton', + templateUrl: './dashboard-skeleton.component.html', + styleUrls: ['./dashboard-skeleton.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DashboardSkeletonComponent {} diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html new file mode 100644 index 000000000..e83646bf0 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html @@ -0,0 +1,15 @@ +
+
+ +
+ + +
+ +
+
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss new file mode 100644 index 000000000..02e36c560 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss @@ -0,0 +1,9 @@ +:host { + display: contents; +} + +.top-bar .actions { + display: flex; + align-items: center; + justify-content: flex-end; +} diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts new file mode 100644 index 000000000..1ac32cbd5 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Title } from '@angular/platform-browser'; + +@Component({ + selector: 'redaction-skeleton-top-bar', + templateUrl: './skeleton-top-bar.component.html', + styleUrls: ['./skeleton-top-bar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SkeletonTopBarComponent { + constructor(readonly titleService: Title) {} +} diff --git a/libs/common-ui b/libs/common-ui index cb3f1e3ee..a786f06e8 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit cb3f1e3eea6353711d2e5bdfe8664b1b4b8e70e2 +Subproject commit a786f06e8c2de98a21c02e3445d5c415dc05b279 From aa3a52b4b28a2bb7bf8665149c534b0dfad69ce0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 29 Nov 2022 04:17:10 +0200 Subject: [PATCH 2/5] RED-5085: Done skeleton loading on dashboard --- apps/red-ui/src/app/app.module.ts | 2 +- .../dashboard-skeleton.component.html | 17 ------------ .../dashboard-skeleton.component.html | 27 +++++++++++++++++++ .../dashboard-skeleton.component.scss | 22 +++++++-------- .../dashboard-skeleton.component.ts | 0 .../src/app/modules/icons/icons.module.ts | 1 + .../icons/general/skeleton-template-stats.svg | 6 +++++ 7 files changed, 45 insertions(+), 30 deletions(-) delete mode 100644 apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html create mode 100644 apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html rename apps/red-ui/src/app/components/{ => skeleton}/dashboard-skeleton/dashboard-skeleton.component.scss (82%) rename apps/red-ui/src/app/components/{ => skeleton}/dashboard-skeleton/dashboard-skeleton.component.ts (100%) create mode 100644 apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 399d01523..040277809 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -28,7 +28,7 @@ import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '@environments/environment'; import { AuthErrorComponent } from '@components/auth-error/auth-error.component'; import { NotificationsComponent } from '@components/notifications/notifications.component'; -import { DashboardSkeletonComponent } from '@components/dashboard-skeleton/dashboard-skeleton.component'; +import { DashboardSkeletonComponent } from '@components/skeleton/dashboard-skeleton/dashboard-skeleton.component'; import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component'; import { AppRoutingModule } from './app-routing.module'; import { SharedModule } from '@shared/shared.module'; diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html deleted file mode 100644 index 2f89e274d..000000000 --- a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - -
- -
-
-
- -
-
-
-
-
-
-
-
-
diff --git a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html new file mode 100644 index 000000000..b7fd59ae4 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html @@ -0,0 +1,27 @@ + + +
+ +
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss similarity index 82% rename from apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss rename to apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss index 50f65e0b7..25ba98779 100644 --- a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss +++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss @@ -15,12 +15,14 @@ } } -.skeleton { +.skeleton-line { background-color: var(--iqser-grey-4); + border-radius: 12px; +} - &.line { - border-radius: 12px; - } +mat-icon { + width: unset; + height: unset; } .dialog { @@ -39,13 +41,9 @@ justify-content: center; border-left: 1px solid var(--iqser-separator); } - } -} - -.stats-subtitle { - flex-direction: column; - - > div { - margin-top: 10px; + + &.row { + flex-direction: row; + } } } diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.ts similarity index 100% rename from apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts rename to apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.ts diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index 9b1eeb327..c62acabbc 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -68,6 +68,7 @@ export class IconsModule { 'rss', 'rule', 'secret', + 'skeleton-template-stats', 'status', 'status-info', 'template', diff --git a/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg b/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg new file mode 100644 index 000000000..7ef7ac10b --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg @@ -0,0 +1,6 @@ + + + + + + From c65ce4144732ba68406c3f26f367a23c5cd93901 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 14 Dec 2022 17:45:19 +0200 Subject: [PATCH 3/5] RED-5085: Dossier skeleton WIP --- apps/red-ui/src/app/app-routing.module.ts | 3 +- apps/red-ui/src/app/app.component.html | 8 +- apps/red-ui/src/app/app.module.ts | 2 + .../dashboard-skeleton.component.scss | 5 - .../dossier-skeleton.component.html | 115 ++++++++++++++++++ .../dossier-skeleton.component.scss | 84 +++++++++++++ .../dossier-skeleton.component.ts | 35 ++++++ .../modules/archive/archive-routing.module.ts | 1 + 8 files changed, 245 insertions(+), 8 deletions(-) create mode 100644 apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html create mode 100644 apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss create mode 100644 apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 2e45e3b41..0033f3247 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -48,6 +48,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [ allow: [ROLES.dossierAttributes.read, ROLES.dossierAttributes.readConfig], redirectTo: '/auth-error', }, + skeleton: 'dossier', }, loadChildren: () => import('./modules/dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule), }, @@ -140,7 +141,7 @@ const routes: IqserRoutes = [ [DEFAULT_REDIRECT_KEY]: '/auth-error', }, }, - skeleton: 'Dashboard', + skeleton: 'dashboard', }, }, { diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html index 7120cae70..a5f32ccc0 100644 --- a/apps/red-ui/src/app/app.component.html +++ b/apps/red-ui/src/app/app.component.html @@ -6,8 +6,12 @@ - + - + + + + + diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 040277809..daf187ca9 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -62,6 +62,7 @@ import { TenantIdInterceptor } from '@utils/tenant-id-interceptor'; import { UI_CACHES } from '@utils/constants'; import { RedRoleGuard } from '@users/red-role.guard'; import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component'; +import { DossierSkeletonComponent } from '@components/skeleton/dossier-skeleton/dossier-skeleton.component'; const screens = [BaseScreenComponent, DownloadsListScreenComponent]; @@ -72,6 +73,7 @@ const components = [ SpotlightSearchComponent, BreadcrumbsComponent, DashboardSkeletonComponent, + DossierSkeletonComponent, SkeletonTopBarComponent, ...screens, ]; diff --git a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss index 25ba98779..67cebe653 100644 --- a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss +++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss @@ -15,11 +15,6 @@ } } -.skeleton-line { - background-color: var(--iqser-grey-4); - border-radius: 12px; -} - mat-icon { width: unset; height: unset; diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html new file mode 100644 index 000000000..952c948dd --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html @@ -0,0 +1,115 @@ + + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+
+
+ + + +
+ + + + + +
+
+ + + +
+ + + +
+
+ diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss new file mode 100644 index 000000000..129522635 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss @@ -0,0 +1,84 @@ +@use 'common-mixins'; + +:host { + background-color: var(--iqser-background); + display: block; +} + +.w-100p { + width: 100%; +} + +.right-container { + display: flex; + width: 375px; + min-width: 375px; + padding: 16px 24px 16px 24px; + + mat-icon { + width: 100%; + height: 100%; + } +} + +.sk-table { + display: flex; + + .sk-table-header, + .sk-table-cell { + padding: 0 10px; + border-bottom: 1px solid var(--iqser-separator); + box-sizing: border-box; + } + + .sk-table-column { + display: flex; + flex-direction: column; + flex: 1; + + &:first-child { + flex: 3; + + .sk-table-header, + .sk-table-cell { + padding-left: 56px; + } + } + + .sk-line { + margin: auto 0; + } + + &:last-child { + flex: 2; + + .sk-table-header, + .sk-table-cell { + padding-right: 21px; + } + + .sk-line { + margin-left: auto; + } + } + + &:nth-child(4), + &:nth-child(5) { + .sk-line, + .sk-circle { + margin: auto; + } + } + } + + .sk-table-header { + height: 30px; + padding-top: 11px; + } + + .sk-table-cell { + height: 80px; + display: flex; + align-items: center; + } +} diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts new file mode 100644 index 000000000..4b5724e8e --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts @@ -0,0 +1,35 @@ +import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; + +@Component({ + selector: 'redaction-dossier-skeleton', + templateUrl: './dossier-skeleton.component.html', + styleUrls: ['./dossier-skeleton.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DossierSkeletonComponent implements OnInit { + @ViewChild('workload1', { static: true }) workload1: TemplateRef; + @ViewChild('workload2', { static: true }) workload2: TemplateRef; + @ViewChild('workload3', { static: true }) workload3: TemplateRef; + @ViewChild('workload4', { static: true }) workload4: TemplateRef; + @ViewChild('workload5', { static: true }) workload5: TemplateRef; + @ViewChild('workload6', { static: true }) workload6: TemplateRef; + + workloadTemplates: TemplateRef[]; + + ngOnInit(): void { + this.workloadTemplates = [ + this.workload1, + this.workload3, + this.workload2, + this.workload3, + this.workload4, + this.workload5, + this.workload1, + this.workload5, + this.workload6, + this.workload6, + this.workload2, + this.workload5, + ]; + } +} diff --git a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts b/apps/red-ui/src/app/modules/archive/archive-routing.module.ts index 905d3924a..69315fb0d 100644 --- a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts +++ b/apps/red-ui/src/app/modules/archive/archive-routing.module.ts @@ -20,6 +20,7 @@ const routes: Routes = [ routeGuards: [DossierFilesGuard], breadcrumbs: [BreadcrumbTypes.dossierTemplate, BreadcrumbTypes.dossier], dossiersService: ARCHIVED_DOSSIERS_SERVICE, + skeleton: 'dossier', }, loadChildren: () => import('../dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule), }, From 6f7abc6d9dac39a21e667f4ea59efab51be085ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 21 Dec 2022 13:35:42 +0200 Subject: [PATCH 4/5] RED-5085: Dossier right container skeleton & dark mode --- apps/red-ui/src/app/app.module.ts | 3 ++ .../dashboard-skeleton.component.html | 23 ++++----------- .../dashboard-skeleton.component.scss | 17 ++--------- .../dossier-skeleton.component.html | 29 +++++++++++++++---- .../dossier-skeleton.component.scss | 11 ++++--- .../skeleton-stats.component.html | 10 +++++++ .../skeleton-stats.component.scss | 10 +++++++ .../skeleton-stats.component.ts | 9 ++++++ .../src/app/modules/icons/icons.module.ts | 2 +- apps/red-ui/src/assets/config/config.json | 4 +-- .../assets/icons/general/skeleton-stats.svg | 13 +++++++++ .../icons/general/skeleton-template-stats.svg | 6 ---- apps/red-ui/src/styles.scss | 2 ++ libs/common-ui | 2 +- 14 files changed, 91 insertions(+), 50 deletions(-) create mode 100644 apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html create mode 100644 apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.scss create mode 100644 apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts create mode 100644 apps/red-ui/src/assets/icons/general/skeleton-stats.svg delete mode 100644 apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index daf187ca9..b08fc3adb 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -63,6 +63,7 @@ import { UI_CACHES } from '@utils/constants'; import { RedRoleGuard } from '@users/red-role.guard'; import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component'; import { DossierSkeletonComponent } from '@components/skeleton/dossier-skeleton/dossier-skeleton.component'; +import { SkeletonStatsComponent } from '@components/skeleton/skeleton-stats/skeleton-stats.component'; const screens = [BaseScreenComponent, DownloadsListScreenComponent]; @@ -75,6 +76,8 @@ const components = [ DashboardSkeletonComponent, DossierSkeletonComponent, SkeletonTopBarComponent, + SkeletonStatsComponent, + ...screens, ]; diff --git a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html index b7fd59ae4..92bf9dabb 100644 --- a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html +++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html @@ -3,25 +3,14 @@
-
-
+
+
-
-
-
-
-
-
- -
- -
-
-
-
-
-
+
+
+
+
diff --git a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss index 67cebe653..535465137 100644 --- a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss +++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss @@ -15,11 +15,6 @@ } } -mat-icon { - width: unset; - height: unset; -} - .dialog { flex-direction: row; max-width: unset; @@ -27,18 +22,12 @@ mat-icon { margin: 0 0 16px 0; > div { - padding: 24px; display: flex; flex-direction: column; overflow: hidden; + } - &:not(:first-child) { - justify-content: center; - border-left: 1px solid var(--iqser-separator); - } - - &.row { - flex-direction: row; - } + redaction-skeleton-stats { + border-left: 1px solid var(--iqser-separator); } } diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html index 952c948dd..fcaa9e487 100644 --- a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html @@ -6,7 +6,7 @@
-
+
@@ -23,17 +23,17 @@
-
+
-
+
-
+
@@ -84,7 +84,26 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
diff --git a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss index 129522635..3f2bcbc90 100644 --- a/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss +++ b/apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss @@ -11,13 +11,16 @@ .right-container { display: flex; + flex-direction: column; width: 375px; min-width: 375px; - padding: 16px 24px 16px 24px; + padding: 16px 24px; + overflow: hidden; - mat-icon { - width: 100%; - height: 100%; + .header { + display: flex; + align-items: center; + justify-content: space-between; } } diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html new file mode 100644 index 000000000..6d01a6bd8 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html @@ -0,0 +1,10 @@ +
+ +
+ +
+
+
+
+
+
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.scss b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.scss new file mode 100644 index 000000000..01079ba9d --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.scss @@ -0,0 +1,10 @@ +:host { + display: flex; + align-items: center; +} + +mat-icon { + width: unset; + height: unset; + color: var(--iqser-skeleton-color); +} diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts new file mode 100644 index 000000000..ba2b3f882 --- /dev/null +++ b/apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'redaction-skeleton-stats', + templateUrl: './skeleton-stats.component.html', + styleUrls: ['./skeleton-stats.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SkeletonStatsComponent {} diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index c62acabbc..71e2161bc 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -68,7 +68,7 @@ export class IconsModule { 'rss', 'rule', 'secret', - 'skeleton-template-stats', + 'skeleton-stats', 'status', 'status-info', 'template', diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index f4b69417a..c2b4d2dfb 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -1,7 +1,7 @@ { "ADMIN_CONTACT_NAME": null, "ADMIN_CONTACT_URL": null, - "API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1", + "API_URL": "https://dev-04.iqser.cloud/redaction-gateway-v1", "APP_NAME": "RedactManager", "AUTO_READ_TIME": 3, "BACKEND_APP_VERSION": "4.4.40", @@ -11,7 +11,7 @@ "MAX_RETRIES_ON_SERVER_ERROR": 3, "OAUTH_CLIENT_ID": "redaction", "OAUTH_IDP_HINT": null, - "OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction", + "OAUTH_URL": "https://dev-04.iqser.cloud/auth/realms/redaction", "RECENT_PERIOD_IN_HOURS": 24, "SELECTION_MODE": "structural", "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview", diff --git a/apps/red-ui/src/assets/icons/general/skeleton-stats.svg b/apps/red-ui/src/assets/icons/general/skeleton-stats.svg new file mode 100644 index 000000000..66933075a --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/skeleton-stats.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg b/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg deleted file mode 100644 index 7ef7ac10b..000000000 --- a/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 0e445cf4b..fd6f16587 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -80,6 +80,7 @@ $iqser-tab-hover: vars.$grey-6, $iqser-loading-progress: vars.$grey-7, $iqser-highlight-color: #fffcc4, + $iqser-skeleton-color: vars.$grey-4, $iqser-font-family: 'Inter, sans-serif', $iqser-app-name-font-family: 'OpenSans Extrabold, sans-serif' ); @@ -132,6 +133,7 @@ $dark-accent-10: darken(vars.$accent, 10%); $iqser-tab-hover: vars.$accent, $iqser-loading-progress: $light-accent-10, $iqser-highlight-color: #905854, + $iqser-skeleton-color: vars.$grey-10, $iqser-font-family: 'Inter, sans-serif', $iqser-app-name-font-family: 'OpenSans Extrabold, sans-serif' ); diff --git a/libs/common-ui b/libs/common-ui index a786f06e8..f85bf0d99 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit a786f06e8c2de98a21c02e3445d5c415dc05b279 +Subproject commit f85bf0d9904dcdbb16058d187bf6755ad868004e From 2dc62c9fb1902485593a5babc7582b4425bc0690 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 21 Dec 2022 13:36:18 +0200 Subject: [PATCH 5/5] RED-5085: Update common-ui --- libs/common-ui | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/common-ui b/libs/common-ui index f85bf0d99..9340cda21 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit f85bf0d9904dcdbb16058d187bf6755ad868004e +Subproject commit 9340cda21abe78b653c876b7d0fd045ecda28a57