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

styling changes 

*upload-file
This commit is contained in:
Sofia Papacharalampous 2024-03-15 15:44:54 +02:00
parent c479d86ee4
commit 327991c473
4 changed files with 44 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dmp-frontend/src/app/ui/dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component.html
View File

@ -1,29 +1,30 @@
<div class="container form-container">
<div class="row d-flex justify-content-between align-items-center m-0">
<div class="col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-dmp-logo.png" onerror="this.style.display='none'"></a></div>
<div class="col-auto ml-auto close-btn" (click)="close()">
<div class="start-new-dmp-dialog-wrapper">
<div class="d-flex justify-content-between">
<div class="pl-0 col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-dmp-logo.png" onerror="this.style.display='none'"></a></div>
<div class="col-auto close-btn" (click)="close()">
<mat-icon class="close-icon">close</mat-icon>
</div>
</div>
<div class="row content">
<div class="col-12">
<h1 mat-dialog-title class="title p-0">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
<div class="content">
<div class="col-12 p-0">
<h1 class="title p-0">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
</div>
<div class="col-12">
<div class="col-12 p-0">
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
</div>
<div class="col-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-auto">
<div class="d-flex justify-content-between align-items-center">
<div class="col-auto p-0">
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon>
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
</button>
</div>
<div class="col-auto pl-0 pr-0">
<p class="">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
<div class="col-auto p-0">
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
</div>
<div class="col-auto">
<div class="col-auto p-0">
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
<mat-icon>chevron_right</mat-icon>
{{ 'NAV-BAR.START-WIZARD' | translate }}
@ -32,15 +33,16 @@
</div>
</div>
</div>
<div class="row m-0 pt-4">
<div class="col-auto">
<div class="d-flex justify-content-between pt-4">
<div class="pr-2">
<mat-icon class="material-icons-outlined warn">info</mat-icon>
</div>
<span class="col">
<span>
<b>{{'GENERAL.START-NEW-DMP-DIALOG.IMPORT' | translate }}</b> {{'GENERAL.START-NEW-DMP-DIALOG.FUNCTION-SUPPORTS' | translate }}
<b>{{'GENERAL.START-NEW-DMP-DIALOG.JSON-FILES' | translate }}</b> {{'GENERAL.START-NEW-DMP-DIALOG.PRODUCED' | translate }}
<b><a href="https://github.com/RDA-DMP-Common/RDA-DMP-Common-Standard" target="_blank">{{'GENERAL.START-NEW-DMP-DIALOG.RDA-SPECIFICATIONS' | translate }}</a></b>
{{'GENERAL.START-NEW-DMP-DIALOG.MACHINE-ACTIONABLE' | translate }}
</span>
</div>
</div>
</div>

12
dmp-frontend/src/app/ui/dmp/new/start-new-dmp-dialogue/start-new-dmp-dialog.component.scss
View File

@ -1,5 +1,12 @@
::ng-deep .mat-dialog-container {
border-radius: 8px;
:host ::ng-deep {
display: block;
padding: 24px;
}
.start-new-dmp-dialog-wrapper {
width: 33.0rem;
min-height: 14rem;
padding: 0.28rem 0.34rem 0.875rem 0.625rem;
}
.form-container {
@ -39,6 +46,7 @@
.title {
font-size: 2.375rem;
line-height: 2.0rem;
margin-bottom: 1.1875rem;
}

25
dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html
View File

@ -1,26 +1,26 @@
<div class="confirmation-dialog">
<div class="d-flex justify-content-between">
<div class="confirmation-message col align-self-center">
<div class="confirmation-message align-self-center">
<h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4>
</div>
<div class="col-auto close-btn justify-content-end" (click)="close()">
<div class="close-btn justify-content-end" (click)="close()">
<mat-icon>close</mat-icon>
</div>
</div>
<div class="">
<div class="upload-form col-12">
<mat-form-field>
<div class="upload-form col-12 pr-0 pl-0">
<mat-form-field class="w-100">
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
</mat-form-field>
</div>
<div class="col-12">
<div class="col-12 pr-0 pl-0">
<ngx-dropzone class="drop-file" (change)="selectFile($event)" [accept]="'text/xml, application/json'" [multiple]="false">
<ngx-dropzone-preview class="file-preview" *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label class="file-label">{{ f.name }}</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
</div>
<div class="col-12 d-flex justify-content-center attach-btn">
<div class="col-12 mb-2 d-flex justify-content-center attach-btn">
<button mat-button type="button" class="col-auto attach-file" (click)="fileInput.click()">
<mat-icon class="mr-2">input</mat-icon>
<span *ngIf="!hasFile()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
@ -40,11 +40,14 @@
</div> -->
</div>
<div class="d-flex justify-content-between">
<div class="col-auto">
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto">
<button mat-button type="button" (click)="confirm()" [disabled]="data.fileList.length === 0 || files.length === 0" class="next-btn">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
<div></div>
<div class="d-flex justify-content-between">
<div class="col-auto">
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto">
<button mat-button type="button" (click)="confirm()" [disabled]="data.fileList.length === 0 || files.length === 0" class="next-btn">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
</div>
</div>
</div>
</div>

2
dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.scss
View File

@ -1,5 +1,5 @@
.confirmation-dialog {
padding: 1.0rem;
padding: 1.5rem;
.confirmation-message {
padding-bottom: 20px;