MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Animations on admin template editor (partial)

This commit is contained in:
Kristian Ntavidi 2021-07-23 13:16:40 +03:00
parent 59e3af2fa0
commit d8a2ad281c
6 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dmp-frontend/src/app/ui/admin/dataset-profile/editor/animations/animations.ts
View File

@ -78,6 +78,13 @@ export const GENERAL_ANIMATIONS = [
trigger('action-btn',[
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)'}))])
])
]),
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}))]),
]),
]

8
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html
View File

@ -76,7 +76,7 @@
</mat-form-field>
</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">
<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}}"
@ -117,7 +117,7 @@
<div class="row">
<!-- 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" >
<div class="row bg-white" style="position: relative;" (click)="setTargetField(field)"
@ -173,7 +173,7 @@
<div class="col-12 previewer">
<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">
<ng-container *ngIf="!previewDirty">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
@ -184,7 +184,7 @@
</span>
</div>
<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>
</div>

5
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss
View File

@ -129,6 +129,11 @@ $blue-color-light: #5cf7f2;
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{
// padding-bottom: 1.25em !important;
// }

2
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.html
View File

@ -1,5 +1,5 @@
<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" >

15
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts
View File

@ -9,11 +9,13 @@ import { debounceTime, delay, tap } from 'rxjs/operators';
import { FieldEditorModel } from '../../../admin/field-editor-model';
import { FieldSetEditorModel } from '../../../admin/field-set-editor-model';
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
import { GENERAL_ANIMATIONS } from '../../animations/animations';
@Component({
selector: 'app-dataset-profile-editor-section-fieldset-component',
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 {
@ -144,7 +146,8 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
this.numbering = this.tocentry.numbering;
this._selectedFieldSetId = null;
this.scroller.next(null);
// this.scroller.next(null);
this._scrollOnTop(true);
}else if(this.tocentry.type === ToCEntryType.FieldSet){
this.form = this.tocentry.form.parent.parent;
const numberingArray = this.tocentry.numbering.split('.');
@ -170,10 +173,14 @@ export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnC
el.scrollIntoView({behavior: "smooth", block:'start'});
}
}
private _scrollOnTop(){
private _scrollOnTop(instant?: boolean){
const el = this.myElement.nativeElement.querySelector('#topofcontainer');
if(el){
el.scrollIntoView({behavior:'smooth', block:'end'});
if(instant){
el.scrollIntoView({ block:'end'});
}else{
el.scrollIntoView({behavior:'smooth', block:'end'});
}
}
}
ngOnInit() {

9
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -276,7 +276,7 @@
<div class="row" *ngIf="selectedTocEntry">
<!-- 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">
<div class="row">
<!-- PAGE NAME -->
@ -388,11 +388,10 @@
</mat-horizontal-stepper>
<!--
<ng-container *ngIf="false">
<div class="d-flex">
<!-- SAVE BUTTON -->
<div class="col-6 d-flex" *ngIf="!viewOnly">
<div class="row mt-4">
<ng-container *ngIf="false">
@ -411,7 +410,6 @@
translate}}</button>
</div>
</div>
<!-- SAVE BUTTON WHEN FINALIZED-->
<div class="col-6 d-flex" *ngIf="showUpdateButton()">
<div class="row mt-4">
<ng-container *ngIf="false">
@ -424,7 +422,6 @@
translate}}</button>
</div>
</div>
<!-- DELETE BUTTON -->
<div class="col-6 d-flex justify-content-end" *ngIf="!isNew">
<div class="row mt-4">
<button mat-raised-button color="primary" (click)="delete()">
@ -434,7 +431,7 @@
</div>
</div>
</ng-container>
</ng-container> -->
<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">