Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

moving the loading dialog to component

Browse source
This commit is contained in:
Chneemann 2024-05-20 09:34:37 +02:00
parent aa7176aaef
commit 4068aecb7a
9 changed files with 106 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/app/components/login/loading-dialog/loading-dialog.component.html Normal file
View file

@ -0,0 +1,13 @@
@if (sharedService.isBtnDisabled) {
<div class="loading-dialog">
<div id="loading" class="loader"></div>
<div id="loadingText" class="loading-text">
<p>
{{ "login.loginDialog0" | translate }}
</p>
<p>
{{ "login.loginDialog1" | translate }}
</p>
</div>
</div>
}

49
src/app/components/login/loading-dialog/loading-dialog.component.scss Normal file
View file

@ -0,0 +1,49 @@
.loading-dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
backdrop-filter: blur(5px);
background-color: rgba($color: #000, $alpha: 0.2);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.loader {
position: fixed;
border: 16px solid var(--white);
border-top: 16px solid var(--light-blue);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin: auto;
margin-top: 20px;
}
.loading-text {
position: fixed;
text-align: center;
margin-top: 200px;
color: var(--white);
text-shadow: 3px 3px 3px var(--black);
p {
font-size: 21px;
font-weight: 400px;
margin-bottom: 6px;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

23
src/app/components/login/loading-dialog/loading-dialog.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoadingDialogComponent } from './loading-dialog.component';
describe('LoadingDialogComponent', () => {
let component: LoadingDialogComponent;
let fixture: ComponentFixture<LoadingDialogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [LoadingDialogComponent]
})
.compileComponents();
fixture = TestBed.createComponent(LoadingDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
src/app/components/login/loading-dialog/loading-dialog.component.ts Normal file
View file

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
import { SharedService } from '../../../services/shared.service';
import { TranslateModule } from '@ngx-translate/core';
@Component({
selector: 'app-loading-dialog',
standalone: true,
imports: [TranslateModule],
templateUrl: './loading-dialog.component.html',
styleUrl: './loading-dialog.component.scss',
})
export class LoadingDialogComponent {
constructor(public sharedService: SharedService) {}
}

14
src/app/components/login/login.component.html
View file

@ -108,16 +108,4 @@
</form>
<app-footer></app-footer>
</section>
@if (sharedService.isBtnDisabled) {
<div class="loading-dialog">
<div id="loading" class="loader"></div>
<div id="loadingText" class="loading-text">
<p>
{{ "login.loginDialog0" | translate }}
</p>
<p>
{{ "login.loginDialog1" | translate }}
</p>
</div>
</div>
}
<app-loading-dialog></app-loading-dialog>

52
src/app/components/login/login.component.scss
View file

@ -87,58 +87,6 @@ section {
padding: 12px 0;
}
/*------------- LOADER -------------*/
.loading-dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
backdrop-filter: blur(5px);
background-color: rgba($color: #000, $alpha: 0.2);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.loader {
position: fixed;
border: 16px solid var(--white);
border-top: 16px solid var(--light-blue);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin: auto;
margin-top: 20px;
}
.loading-text {
position: fixed;
text-align: center;
margin-top: 200px;
color: var(--white);
text-shadow: 3px 3px 3px var(--black);
p {
font-size: 21px;
font-weight: 400px;
margin-bottom: 6px;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*------------- RESPONSIVE -------------*/
@media (max-height: 800px) {

2
src/app/components/login/login.component.ts
View file

@ -9,6 +9,7 @@ import { SharedService } from '../../services/shared.service';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
import { TranslateModule } from '@ngx-translate/core';
import { LoadingDialogComponent } from './loading-dialog/loading-dialog.component';
@Component({
selector: 'app-login',
@ -20,6 +21,7 @@ import { TranslateModule } from '@ngx-translate/core';
FooterComponent,
HeaderComponent,
TranslateModule,
LoadingDialogComponent,
],
templateUrl: './login.component.html',
styleUrl: './login.component.scss',

2
src/app/components/login/register/register.component.html
View file

@ -170,6 +170,7 @@
!registerData.mail ||
password.invalid ||
!registerData.password ||
!checkbox.valid ||
sharedService.isBtnDisabled ||
registerData.password.length < 6 ||
registerData.password !== registerData.passwordConfirm ||
@ -181,3 +182,4 @@
</form>
<app-footer></app-footer>
</section>
<app-loading-dialog></app-loading-dialog>

2
src/app/components/login/register/register.component.ts
View file

@ -10,6 +10,7 @@ import { SharedService } from '../../../services/shared.service';
import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
import { RouterModule } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { LoadingDialogComponent } from '../loading-dialog/loading-dialog.component';
@Component({
selector: 'app-register',
@ -23,6 +24,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
CommonModule,
RouterModule,
TranslateModule,
LoadingDialogComponent,
],
templateUrl: './register.component.html',
styleUrl: './register.component.scss',