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