Animations on admin template editor (partial)
This commit is contained in:
parent
59e3af2fa0
commit
d8a2ad281c
|
@ -78,6 +78,13 @@ export const GENERAL_ANIMATIONS = [
|
||||||
trigger('action-btn',[
|
trigger('action-btn',[
|
||||||
transition(":enter", [style({opacity:0, transform:'scale(0)'}), animate('400ms ease', style({'opacity':1, transform:'scale(1)'}))]),
|
transition(":enter", [style({opacity:0, transform:'scale(0)'}), animate('400ms ease', style({'opacity':1, transform:'scale(1)'}))]),
|
||||||
transition(":leave", [style({opacity:1,transform:'scale(1)'}), animate('400ms ease', style({'opacity':0, transform:'scale(0)'}))])
|
transition(":leave", [style({opacity:1,transform:'scale(1)'}), animate('400ms ease', style({'opacity':0, transform:'scale(0)'}))])
|
||||||
])
|
]),
|
||||||
|
trigger('fade-in',[
|
||||||
|
transition(":enter", [style({opacity:0}), animate('1000ms 800ms ease', style({'opacity':1}))]),
|
||||||
|
]),
|
||||||
|
trigger('fade-in-fast',[
|
||||||
|
transition(":enter", [style({opacity:0}), animate('1000ms 200ms ease', style({'opacity':1}))]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
|
@ -76,7 +76,7 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="position: relative;" class="col-12" *ngIf="hasFocus">
|
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
|
||||||
<div class="row" *ngIf="showDescription">
|
<div class="row" *ngIf="showDescription">
|
||||||
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
|
<mat-form-field class="col p-0 underline-line-field" appearance="legacy">
|
||||||
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
|
||||||
|
@ -117,7 +117,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<!-- FIELDS -->
|
<!-- FIELDS -->
|
||||||
<div class="col-12" *ngIf="hasFocus">
|
<div class="col-12" *ngIf="hasFocus" [@fade-in] >
|
||||||
|
|
||||||
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
|
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index" >
|
||||||
<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
|
<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
|
||||||
|
@ -173,7 +173,7 @@
|
||||||
|
|
||||||
<div class="col-12 previewer">
|
<div class="col-12 previewer">
|
||||||
<div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
|
<div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
|
||||||
<span style="font-weight: bold; font-style: italic;">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
|
<span class="previewer-text">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
|
||||||
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value">
|
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('viewStyle').get('renderStyle').value">
|
||||||
<ng-container *ngIf="!previewDirty">
|
<ng-container *ngIf="!previewDirty">
|
||||||
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
|
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
|
||||||
|
@ -184,7 +184,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
|
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;" >
|
||||||
<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value">
|
<div *ngIf="previewForm && showPreview && firstField?.get('viewStyle').get('renderStyle').value" [@fade-in-fast]>
|
||||||
<app-form-section-inner [form]="previewForm">
|
<app-form-section-inner [form]="previewForm">
|
||||||
</app-form-section-inner>
|
</app-form-section-inner>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -129,6 +129,11 @@ $blue-color-light: #5cf7f2;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.previewer-text{
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
// ::ng-deep .underline-line-field .mat-form-field-appearance-legacy .mat-form-field-wapper{
|
// ::ng-deep .underline-line-field .mat-form-field-appearance-legacy .mat-form-field-wapper{
|
||||||
// padding-bottom: 1.25em !important;
|
// padding-bottom: 1.25em !important;
|
||||||
// }
|
// }
|
|
@ -1,5 +1,5 @@
|
||||||
<div id="topofcontainer"></div>
|
<div id="topofcontainer"></div>
|
||||||
<div class="row" [id]="idprefix+form.get('id').value" *ngIf="form">
|
<div class="row" [id]="idprefix+form.get('id').value" *ngIf="form" [@fade-in-fast]>
|
||||||
|
|
||||||
|
|
||||||
<div class="col-12" >
|
<div class="col-12" >
|
||||||
|
|
|
@ -9,11 +9,13 @@ import { debounceTime, delay, tap } from 'rxjs/operators';
|
||||||
import { FieldEditorModel } from '../../../admin/field-editor-model';
|
import { FieldEditorModel } from '../../../admin/field-editor-model';
|
||||||
import { FieldSetEditorModel } from '../../../admin/field-set-editor-model';
|
import { FieldSetEditorModel } from '../../../admin/field-set-editor-model';
|
||||||
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
|
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
|
||||||
|
import { GENERAL_ANIMATIONS } from '../../animations/animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dataset-profile-editor-section-fieldset-component',
|
selector: 'app-dataset-profile-editor-section-fieldset-component',
|
||||||
templateUrl: './dataset-profile-editor-section-fieldset.component.html',
|
templateUrl: './dataset-profile-editor-section-fieldset.component.html',
|
||||||
styleUrls: ['./dataset-profile-editor-section-fieldset.component.scss']
|
styleUrls: ['./dataset-profile-editor-section-fieldset.component.scss'],
|
||||||
|
animations:[GENERAL_ANIMATIONS]
|
||||||
})
|
})
|
||||||
|
|
||||||
export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnChanges, OnDestroy {
|
export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnChanges, OnDestroy {
|
||||||
|
@ -144,7 +146,8 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
|
||||||
this.numbering = this.tocentry.numbering;
|
this.numbering = this.tocentry.numbering;
|
||||||
this._selectedFieldSetId = null;
|
this._selectedFieldSetId = null;
|
||||||
|
|
||||||
this.scroller.next(null);
|
// this.scroller.next(null);
|
||||||
|
this._scrollOnTop(true);
|
||||||
}else if(this.tocentry.type === ToCEntryType.FieldSet){
|
}else if(this.tocentry.type === ToCEntryType.FieldSet){
|
||||||
this.form = this.tocentry.form.parent.parent;
|
this.form = this.tocentry.form.parent.parent;
|
||||||
const numberingArray = this.tocentry.numbering.split('.');
|
const numberingArray = this.tocentry.numbering.split('.');
|
||||||
|
@ -170,10 +173,14 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
|
||||||
el.scrollIntoView({behavior: "smooth", block:'start'});
|
el.scrollIntoView({behavior: "smooth", block:'start'});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
private _scrollOnTop(){
|
private _scrollOnTop(instant?: boolean){
|
||||||
const el = this.myElement.nativeElement.querySelector('#topofcontainer');
|
const el = this.myElement.nativeElement.querySelector('#topofcontainer');
|
||||||
if(el){
|
if(el){
|
||||||
el.scrollIntoView({behavior:'smooth', block:'end'});
|
if(instant){
|
||||||
|
el.scrollIntoView({ block:'end'});
|
||||||
|
}else{
|
||||||
|
el.scrollIntoView({behavior:'smooth', block:'end'});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
|
@ -276,7 +276,7 @@
|
||||||
<div class="row" *ngIf="selectedTocEntry">
|
<div class="row" *ngIf="selectedTocEntry">
|
||||||
|
|
||||||
<!-- PAGE INFO -->
|
<!-- PAGE INFO -->
|
||||||
<div class="col-12 content-displayer" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page">
|
<div class="col-12 content-displayer" *ngIf="selectedTocEntry.type === tocEntryEnumValues.Page" [@fade-in-fast]>
|
||||||
<form [formGroup]="selectedTocEntry.form" class="page-infos">
|
<form [formGroup]="selectedTocEntry.form" class="page-infos">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- PAGE NAME -->
|
<!-- PAGE NAME -->
|
||||||
|
@ -388,11 +388,10 @@
|
||||||
</mat-horizontal-stepper>
|
</mat-horizontal-stepper>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
<ng-container *ngIf="false">
|
<ng-container *ngIf="false">
|
||||||
|
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<!-- SAVE BUTTON -->
|
|
||||||
<div class="col-6 d-flex" *ngIf="!viewOnly">
|
<div class="col-6 d-flex" *ngIf="!viewOnly">
|
||||||
<div class="row mt-4">
|
<div class="row mt-4">
|
||||||
<ng-container *ngIf="false">
|
<ng-container *ngIf="false">
|
||||||
|
@ -411,7 +410,6 @@
|
||||||
translate}}</button>
|
translate}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- SAVE BUTTON WHEN FINALIZED-->
|
|
||||||
<div class="col-6 d-flex" *ngIf="showUpdateButton()">
|
<div class="col-6 d-flex" *ngIf="showUpdateButton()">
|
||||||
<div class="row mt-4">
|
<div class="row mt-4">
|
||||||
<ng-container *ngIf="false">
|
<ng-container *ngIf="false">
|
||||||
|
@ -424,7 +422,6 @@
|
||||||
translate}}</button>
|
translate}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- DELETE BUTTON -->
|
|
||||||
<div class="col-6 d-flex justify-content-end" *ngIf="!isNew">
|
<div class="col-6 d-flex justify-content-end" *ngIf="!isNew">
|
||||||
<div class="row mt-4">
|
<div class="row mt-4">
|
||||||
<button mat-raised-button color="primary" (click)="delete()">
|
<button mat-raised-button color="primary" (click)="delete()">
|
||||||
|
@ -434,7 +431,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container> -->
|
||||||
|
|
||||||
<div class="scroll-on-top">
|
<div class="scroll-on-top">
|
||||||
<button mat-fab (click)="scrollOnTop()" *ngIf="showScrollOnTopButton" [@scroll-on-top-btn] [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.BACK-TO-TOP'| translate">
|
<button mat-fab (click)="scrollOnTop()" *ngIf="showScrollOnTopButton" [@scroll-on-top-btn] [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.BACK-TO-TOP'| translate">
|
||||||
|
|
Loading…
Reference in New Issue