Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wating spinner

master
Boris Voropaev 2024-01-09 14:36:47 +03:00
parent 0e7a90c7ac
commit 7896205cb9
9 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/_modules/pages/tree/item/pages-tree-item.component.ts
View File

@ -110,13 +110,11 @@ export class PagesTreeItemComponent {
clone() {
this.dialog.confirm(`Копировать страницу ${this.page.name}?`).subscribe(
resp=>{
resp=>{
if (resp) {
this.dialog.waiting('Осуществляется копирование выбранных страниц')
this.dialog.waiting('Выполняется копирование данных. Подождите, пожалуйста')
this.pagesService.clone(this.page.id, {recursive: true}).subscribe(res => {
this.dialog.waiting(null)
console.log('end')
this.dialog.waiting(null);
this.listsService.refresh(this.parentListId);
this.refresh();
});

18
src/app/_modules/widjet/cms-dialog/cms-dialog.component.html
View File

@ -30,11 +30,17 @@
</cms-modal>
<cms-modal *ngIf="showWaiting" [blocked]="true">
<div header>
<h4>Ожидание</h4>
</div>
<div body>
{{waiting}}
</div>
<div body>
<div>
{{waiting}}
</div>
<spinner>
<ico [size]="48" ico="spinner_48"></ico>
</spinner>
</div>
</cms-modal>

12
src/app/_modules/widjet/cms-dialog/cms-dialog.component.scss
View File

@ -3,4 +3,16 @@
justify-content: flex-end;
gap: 20px;
margin-bottom: 24px;
}
[body]{
display: flex;
flex-direction: column;
spinner {
align-self: center;
padding-top: 16px;
}
div{
text-align: center;
}
}

4
src/app/_modules/widjet/cms-modal/cms-modal.component.html
View File

@ -2,9 +2,9 @@
</div>
<div class="cms-modal-bar">
<div class="cms-modal-header">
<div class="cms-modal-header" *ngIf="!blocked">
<ng-content select="[header]"></ng-content>
<ico (click)="cls()" *ngIf="!blocked"></ico>
<ico (click)="cls()"></ico>
</div>
<div class="cms-modal-body">
<ng-content></ng-content>

3
src/app/_modules/widjet/spinner/spinner.component.html Normal file
View File

@ -0,0 +1,3 @@
<div class="spinner">
<ng-content></ng-content>
</div>

61
src/app/_modules/widjet/spinner/spinner.component.scss Normal file
View File

@ -0,0 +1,61 @@
.spinner {
display: inline-flex;
-webkit-animation-name: rotation;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotation;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotation;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-moz-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-o-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}

10
src/app/_modules/widjet/spinner/spinner.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent {
}

7
src/app/_modules/widjet/widjet.module.ts
View File

@ -15,6 +15,7 @@ import { SwiperGalleryComponent } from './swiper-gallery/swiper-gallery.componen
import {FullscreenGalleryComponent} from "@app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component";
import { CmsModalComponent } from './cms-modal/cms-modal.component';
import { CmsDialogComponent } from './cms-dialog/cms-dialog.component';
import { SpinnerComponent } from './spinner/spinner.component';
@NgModule({
@ -36,7 +37,8 @@ import { CmsDialogComponent } from './cms-dialog/cms-dialog.component';
SwiperGalleryComponent,
FullscreenGalleryComponent,
CmsModalComponent,
CmsDialogComponent
CmsDialogComponent,
SpinnerComponent
],
exports: [
IcoComponent,
@ -50,7 +52,8 @@ import { CmsDialogComponent } from './cms-dialog/cms-dialog.component';
SwiperGalleryComponent,
FullscreenGalleryComponent,
CmsModalComponent,
CmsDialogComponent
CmsDialogComponent,
SpinnerComponent
]
})
export class WidjetModule {

14
src/vniigaz-v2/images/ico/spinner_48.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" id="ico">
<circle cx="24" cy="8" r="2" fill="#C2C2C2"/>
<circle cx="40" cy="24" r="2" fill="#F0F0F0"/>
<circle cx="8" cy="24" r="2" fill="#D1D1D1"/>
<circle cx="24" cy="40" r="2" fill="#E0E0E0"/>
<circle cx="32" cy="10.1406" r="2" fill="#FAFAFA"/>
<circle cx="37.8555" cy="32" r="2" fill="#EBEBEB"/>
<circle cx="10.1406" cy="16" r="2" fill="#CCCCCC"/>
<circle cx="16" cy="37.8594" r="2" fill="#DBDBDB"/>
<circle cx="16" cy="10.1406" r="2" fill="#C7C7C7"/>
<circle cx="37.8555" cy="16" r="2" fill="#F5F5F5"/>
<circle cx="10.1406" cy="32" r="2" fill="#D6D6D6"/>
<circle cx="32" cy="37.8594" r="2" fill="#E6E6E6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 737 B