inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-16353] - Refactoring error component to get typography from theme (#8932)

Browse Source 
* [AAE-16353] - Refactoring error component to get typography from theme

* AAE-16353: updated class list
This commit is contained in:
Ehsan Rezaei
2023-09-26 14:23:15 +02:00
committed by GitHub
parent 919a8ba80c
commit 5345838744
3 changed files with 35 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lib/core/src/lib/templates/error-content/error-content.component.html
View File

@@ -1,13 +1,15 @@
<div class="adf-error-content">
<p class="adf-error-content-code">
{{ errorCodeTranslated }}
</p>
<div class="adf-error-content-shadow"></div>
<p class="adf-error-content-title">
{{ 'ERROR_CONTENT.' + errorCodeTranslated + '.TITLE' | translate }}
</p>
<p class="adf-error-content-description">
{{ 'ERROR_CONTENT.' + errorCodeTranslated + '.DESCRIPTION' | translate }}
</p>
<ng-content select="[adf-error-content-actions]"></ng-content>
</div>
<ng-container *ngIf="{ isSmallScreen: isSmallScreen$ | async } as screenSize">
<div class="adf-error-content">
<p class="adf-error-content-code {{ screenSize.isSmallScreen ? 'adf-error-content-code--small mat-display-3': 'mat-display-4' }}">
{{ errorCodeTranslated }}
</p>
<div class="adf-error-content-shadow {{ screenSize.isSmallScreen ? 'adf-error-content-shadow--small': '' }}"></div>
<p class="adf-error-content-title {{ screenSize.isSmallScreen ? 'mat-headline': 'mat-display-2' }}">
{{ 'ERROR_CONTENT.' + errorCodeTranslated + '.TITLE' | translate }}
</p>
<p class="adf-error-content-description {{ screenSize.isSmallScreen ? 'mat-subheading-2': 'mat-headline' }}">
{{ 'ERROR_CONTENT.' + errorCodeTranslated + '.DESCRIPTION' | translate }}
</p>
<ng-content select="[adf-error-content-actions]"></ng-content>
</div>
</ng-container>

45
lib/core/src/lib/templates/error-content/error-content.component.scss
View File

@@ -3,12 +3,15 @@
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
&-code {
font-size: 110px;
font-weight: 300;
margin-top: 200px;
margin-bottom: 45px;
&--small {
margin-top: 100px;
margin-bottom: 25px;
}
}
&-shadow {
@@ -16,44 +19,16 @@
height: 3px;
opacity: 0.54;
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39);
}
margin-bottom: 40px;
&-title {
font-size: 46px;
font-weight: normal;
margin-top: 40px;
margin-bottom: 10px;
&--small {
width: 100px;
}
}
&-description {
font-size: var(--theme-headline-font-size);
font-weight: normal;
text-align: center;
width: 50%;
min-width: 250px;
margin-bottom: 60px;
line-height: 30px;
}
}
@media screen and (max-width: 959px) {
.adf-error-content {
&-code {
margin-top: 100px;
font-size: 50px;
margin-bottom: 25px;
}
&-shadow {
width: 100px;
}
&-title {
font-size: var(--theme-headline-font-size);
}
&-description {
font-size: var(--theme-subheading-2-font-size);
}
}
}

11
lib/core/src/lib/templates/error-content/error-content.component.ts
View File

@@ -24,6 +24,10 @@ import {
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslationService } from '../../translation/translation.service';
import { Observable } from 'rxjs';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { map } from 'rxjs/operators';
@Component({
selector: 'adf-error-content',
templateUrl: './error-content.component.html',
@@ -41,9 +45,12 @@ export class ErrorContentComponent implements OnInit {
errorCode: string = ErrorContentComponent.UNKNOWN_ERROR;
errorCodeTranslated: string;
isSmallScreen$: Observable<boolean>;
constructor(private route: ActivatedRoute,
private translateService: TranslationService) {
private translateService: TranslationService,
private breakpointObserver: BreakpointObserver
) {
}
ngOnInit() {
@@ -54,6 +61,8 @@ export class ErrorContentComponent implements OnInit {
this.errorCodeTranslated = errorHasTranslation ? code : ErrorContentComponent.UNKNOWN_ERROR;
});
}
this.isSmallScreen$ = this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(map(({ matches }) => matches));
}
checkErrorExists(errorCode: string ) {