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"> <ng-container *ngIf="{ isSmallScreen: isSmallScreen$ | async } as screenSize">
<p class="adf-error-content-code"> <div class="adf-error-content">
{{ errorCodeTranslated }} <p class="adf-error-content-code {{ screenSize.isSmallScreen ? 'adf-error-content-code--small mat-display-3': 'mat-display-4' }}">
</p> {{ errorCodeTranslated }}
<div class="adf-error-content-shadow"></div> </p>
<p class="adf-error-content-title"> <div class="adf-error-content-shadow {{ screenSize.isSmallScreen ? 'adf-error-content-shadow--small': '' }}"></div>
{{ 'ERROR_CONTENT.' + errorCodeTranslated + '.TITLE' | translate }} <p class="adf-error-content-title {{ screenSize.isSmallScreen ? 'mat-headline': 'mat-display-2' }}">
</p> {{ 'ERROR_CONTENT.' + errorCodeTranslated + '.TITLE' | translate }}
<p class="adf-error-content-description"> </p>
{{ 'ERROR_CONTENT.' + errorCodeTranslated + '.DESCRIPTION' | translate }} <p class="adf-error-content-description {{ screenSize.isSmallScreen ? 'mat-subheading-2': 'mat-headline' }}">
</p> {{ 'ERROR_CONTENT.' + errorCodeTranslated + '.DESCRIPTION' | translate }}
<ng-content select="[adf-error-content-actions]"></ng-content> </p>
</div> <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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center;
&-code { &-code {
font-size: 110px;
font-weight: 300;
margin-top: 200px; margin-top: 200px;
margin-bottom: 45px;
&--small {
margin-top: 100px;
margin-bottom: 25px;
}
} }
&-shadow { &-shadow {
@@ -16,44 +19,16 @@
height: 3px; height: 3px;
opacity: 0.54; opacity: 0.54;
box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39); box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39);
} margin-bottom: 40px;
&-title { &--small {
font-size: 46px; width: 100px;
font-weight: normal; }
margin-top: 40px;
margin-bottom: 10px;
} }
&-description { &-description {
font-size: var(--theme-headline-font-size);
font-weight: normal;
text-align: center;
width: 50%; width: 50%;
min-width: 250px; min-width: 250px;
margin-bottom: 60px; 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'; } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { TranslationService } from '../../translation/translation.service'; import { TranslationService } from '../../translation/translation.service';
import { Observable } from 'rxjs';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { map } from 'rxjs/operators';
@Component({ @Component({
selector: 'adf-error-content', selector: 'adf-error-content',
templateUrl: './error-content.component.html', templateUrl: './error-content.component.html',
@@ -41,9 +45,12 @@ export class ErrorContentComponent implements OnInit {
errorCode: string = ErrorContentComponent.UNKNOWN_ERROR; errorCode: string = ErrorContentComponent.UNKNOWN_ERROR;
errorCodeTranslated: string; errorCodeTranslated: string;
isSmallScreen$: Observable<boolean>;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private translateService: TranslationService) { private translateService: TranslationService,
private breakpointObserver: BreakpointObserver
) {
} }
ngOnInit() { ngOnInit() {
@@ -54,6 +61,8 @@ export class ErrorContentComponent implements OnInit {
this.errorCodeTranslated = errorHasTranslation ? code : ErrorContentComponent.UNKNOWN_ERROR; this.errorCodeTranslated = errorHasTranslation ? code : ErrorContentComponent.UNKNOWN_ERROR;
}); });
} }
this.isSmallScreen$ = this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).pipe(map(({ matches }) => matches));
} }
checkErrorExists(errorCode: string ) { checkErrorExists(errorCode: string ) {