Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-5085: Dossier right container skeleton & dark mode

Browse Source
This commit is contained in:
Adina Țeudan 2022-12-21 13:35:42 +02:00
parent c65ce41447
commit 6f7abc6d9d
14 changed files with 91 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/app.module.ts
View File

@ -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,
];

23
apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html
View File

@ -3,25 +3,14 @@
<div class="overlay-shadow"></div>
<div class="container animate-flicker">
<div class="skeleton-line sk-h-24 sk-w-250 mb-20"></div>
<div class="skeleton-line sk-h-12 sk-w-340 mb-32"></div>
<div class="sk-line sk-h-24 sk-w-250 mb-20"></div>
<div class="sk-line sk-h-12 sk-w-340 mb-32"></div>
<div *ngFor="let template of [].constructor(3)" class="dialog">
<div class="flex-2">
<div class="skeleton-line sk-h-20 sk-w-200 mb-16"></div>
<div *ngFor="let line of [].constructor(4)" class="skeleton-line sk-h-12 sk-w-110 mb-16"></div>
</div>
<div class="flex-3 row align-center" *ngFor="let column of [].constructor(2)">
<div class="flex-1 mr-16">
<mat-icon svgIcon="red:skeleton-template-stats"></mat-icon>
</div>
<div class="flex-1">
<div class="mb-16 d-flex align-center" *ngFor="let line of [].constructor(4)">
<div class="flex-1 skeleton-line sk-h-6 sk-w-12 mr-10"></div>
<div class="flex-1 skeleton-line sk-h-8 sk-w-110"></div>
</div>
</div>
<div class="flex-2 p-24">
<div class="sk-line sk-h-20 sk-w-200 mb-16"></div>
<div *ngFor="let line of [].constructor(4)" class="sk-line sk-h-12 sk-w-100 mb-16"></div>
</div>
<redaction-skeleton-stats *ngFor="let column of [].constructor(2)" class="flex-3 p-24"></redaction-skeleton-stats>
</div>
</div>

17
apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss
View File

@ -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);
}
}

29
apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.html
View File

@ -6,7 +6,7 @@
<div class="sk-line sk-h-8 sk-w-56 mr-16"></div>
<ng-container *ngFor="let filter of [].constructor(3)">
<div class="sk-square mr-4"></div>
<div class="sk-line sk-h-8 sk-w-110 mr-25"></div>
<div class="sk-line sk-h-8 sk-w-100 mr-25"></div>
</ng-container>
</div>
<div class="flex-align-items-center">
@ -23,17 +23,17 @@
<div class="header-item">
<div class="header-title w-100p">
<iqser-round-checkbox></iqser-round-checkbox>
<div class="sk-line sk-h-8 sk-w-110"></div>
<div class="sk-line sk-h-8 sk-w-100"></div>
</div>
</div>
<div class="sk-table">
<div class="sk-table-column">
<div class="sk-table-header">
<div class="sk-line sk-h-8 sk-w-110"></div>
<div class="sk-line sk-h-8 sk-w-100"></div>
</div>
<div *ngFor="let column of [].constructor(12)" class="sk-table-cell">
<div class="sk-line sk-h-8 sk-w-110"></div>
<div class="sk-line sk-h-8 sk-w-100"></div>
</div>
</div>
@ -84,7 +84,26 @@
</div>
</div>
<div class="right-container"></div>
<div class="right-container">
<div class="header mb-24">
<div class="sk-line sk-h-24 sk-w-200"></div>
<div class="sk-square"></div>
</div>
<div class="sk-line sk-h-8 sk-w-70 mb-12"></div>
<div class="sk-line sk-h-12 sk-w-100 mb-40"></div>
<div class="sk-line sk-h-8 sk-w-70 mb-8"></div>
<div class="flex-align-items-center mb-20">
<div class="sk-circle w-32 mr-6"></div>
<div class="sk-line sk-h-8 sk-w-70"></div>
</div>
<div class="sk-line sk-h-8 sk-w-70 mb-10"></div>
<div class="d-flex mb-24">
<div *ngFor="let circle of [].constructor(9)" class="sk-circle w-32 mr-2"></div>
</div>
<redaction-skeleton-stats class="mb-32"></redaction-skeleton-stats>
<div *ngFor="let line of [].constructor(8)" class="sk-line sk-h-8 sk-w-250 mb-16"></div>
<div *ngFor="let line of [].constructor(4)" class="sk-line sk-h-8 sk-w-200 mt-16"></div>
</div>
</div>
</section>

11
apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.scss
View File

@ -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;
}
}

10
apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="flex-1 mr-16">
<mat-icon svgIcon="red:skeleton-stats"></mat-icon>
</div>
<div class="flex-1">
<div *ngFor="let line of [].constructor(4)" class="mb-16 d-flex align-center">
<div class="flex-1 sk-line sk-h-6 sk-w-12 mr-10"></div>
<div class="flex-1 sk-line sk-h-8 sk-w-100"></div>
</div>
</div>

10
apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.scss Normal file
View File

@ -0,0 +1,10 @@
:host {
display: flex;
align-items: center;
}
mat-icon {
width: unset;
height: unset;
color: var(--iqser-skeleton-color);
}

9
apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts Normal file
View File

@ -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 {}

2
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -68,7 +68,7 @@ export class IconsModule {
'rss',
'rule',
'secret',
'skeleton-template-stats',
'skeleton-stats',
'status',
'status-info',
'template',

4
apps/red-ui/src/assets/config/config.json
View File

@ -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",

13
apps/red-ui/src/assets/icons/general/skeleton-stats.svg Normal file
View File

@ -0,0 +1,13 @@
<svg fill="none" height="160" viewBox="0 0 160 160" width="160" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M79.9993 0C124.182 0 160 35.817 160 80C160 124.183 124.182 160 79.9993 160C35.817 160 0 124.183 0 80C0 35.817 35.817 0 79.9993 0ZM80.1281 15.4951C44.7254 15.4951 16.0257 44.1948 16.0257 79.5981C16.0257 115.001 44.7254 143.701 80.1281 143.701C115.531 143.701 144.232 115.001 144.232 79.5981C144.232 44.1948 115.531 15.4951 80.1281 15.4951Z"
fill="currentColor"
fill-rule="evenodd" />
<path
d="M122 92.5H34C30.6863 92.5 28 95.1863 28 98.5C28 101.814 30.6863 104.5 34 104.5H122C125.314 104.5 128 101.814 128 98.5C128 95.1863 125.314 92.5 122 92.5Z"
fill="currentColor" />
<path
d="M88.5 60.5H71.5C64.8726 60.5 59.5 65.8726 59.5 72.5C59.5 79.1274 64.8726 84.5 71.5 84.5H88.5C95.1274 84.5 100.5 79.1274 100.5 72.5C100.5 65.8726 95.1274 60.5 88.5 60.5Z"
fill="currentColor" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 982 B

6
apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg
View File

@ -1,6 +0,0 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.9993 0C124.182 0 160 35.817 160 80C160 124.183 124.182 160 79.9993 160C35.817 160 0 124.183 0 80C0 35.817 35.817 0 79.9993 0ZM80.1281 15.4951C44.7254 15.4951 16.0257 44.1948 16.0257 79.5981C16.0257 115.001 44.7254 143.701 80.1281 143.701C115.531 143.701 144.232 115.001 144.232 79.5981C144.232 44.1948 115.531 15.4951 80.1281 15.4951Z" fill="#E2E4E9"/>
<path d="M122 92.5H34C30.6863 92.5 28 95.1863 28 98.5C28 101.814 30.6863 104.5 34 104.5H122C125.314 104.5 128 101.814 128 98.5C128 95.1863 125.314 92.5 122 92.5Z" fill="#E2E4E9"/>
<path d="M88.5 60.5H71.5C64.8726 60.5 59.5 65.8726 59.5 72.5C59.5 79.1274 64.8726 84.5 71.5 84.5H88.5C95.1274 84.5 100.5 79.1274 100.5 72.5C100.5 65.8726 95.1274 60.5 88.5 60.5Z" fill="#E2E4E9"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 890 B

2
apps/red-ui/src/styles.scss
View File

@ -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'
);

2
libs/common-ui

@ -1 +1 @@
Subproject commit a786f06e8c2de98a21c02e3445d5c415dc05b279
Subproject commit f85bf0d9904dcdbb16058d187bf6755ad868004e