Fix style on dialog import dmp from file

This commit is contained in:
apapachristou 2020-11-18 16:23:16 +02:00
parent 52317c10f9
commit 0159baf8ed
12 changed files with 66 additions and 12 deletions

View File

@ -23,7 +23,8 @@
<div class="col-12 d-flex justify-content-center attach-btn"> <div class="col-12 d-flex justify-content-center attach-btn">
<button mat-button type="button" class="col-auto attach-file" (click)="fileInput.click()"> <button mat-button type="button" class="col-auto attach-file" (click)="fileInput.click()">
<mat-icon class="mr-2">input</mat-icon> <mat-icon class="mr-2">input</mat-icon>
{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}} <span *ngIf="!hasFile()">{{'GENERAL.START-NEW-DMP-DIALOG.UPLOAD-FILE' | translate}}</span>
<span *ngIf="hasFile()">{{'GENERAL.START-NEW-DMP-DIALOG.REPLACE-FILE' | translate}}</span>
</button> </button>
<form> <form>
<input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json"> <input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json">
@ -41,7 +42,7 @@
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button> <button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-button type="button" (click)="confirm()" [disabled]="data.fileList.length === 0" [ngClass]="{'next-btn-disabled': data.fileList.length === 0, 'next-btn': data.fileList.length !== 0}">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button> <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>
</div> </div>

View File

@ -46,7 +46,7 @@
font-weight: 500; font-weight: 500;
} }
.next-btn-disabled { .next-btn[disabled] {
width: 100px; width: 100px;
height: 43px; height: 43px;
background: #ffffff 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
@ -55,11 +55,25 @@
opacity: 1; opacity: 1;
} }
.next-btn:hover { .next-btn:not([disabled]):hover {
background: #129d99; background-color: #129d99;
color: #ffffff; color: #ffffff;
} }
// .next-btn-disabled {
// width: 100px;
// height: 43px;
// background: #ffffff 0% 0% no-repeat padding-box;
// border: 1px solid #b5b5b5;
// border-radius: 30px;
// opacity: 1;
// }
// .next-btn:hover {
// background: #129d99;
// color: #ffffff;
// }
.attach-btn { .attach-btn {
top: -20px; top: -20px;
} }
@ -93,12 +107,26 @@
width: auto !important; width: auto !important;
max-width: 500px !important; max-width: 500px !important;
min-height: 1rem !important; min-height: 1rem !important;
background-color: #e0e0e0 !important;
background-image: none !important;
color: rgba(0, 0, 0, 0.87) !important;
font-weight: 500 !important;
border-radius: 24px !important;
line-height: 1.25 !important;
} }
.file-label { .file-label {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 14px !important;
}
::ng-deep ngx-dropzone-remove-badge {
opacity: 1 !important;
margin-left: .5rem !important;
position: initial !important;
} }
::ng-deep .upload-form .mat-form-field-appearance-outline .mat-form-field-outline { ::ng-deep .upload-form .mat-form-field-appearance-outline .mat-form-field-outline {

View File

@ -119,4 +119,8 @@ export class DmpUploadDialogue extends BaseComponent {
request.criteria = criteria; request.criteria = criteria;
return this._service.searchDMPProfiles(request); return this._service.searchDMPProfiles(request);
} }
hasFile(): boolean {
return this.files && this.files.length > 0;
}
} }

View File

@ -15,6 +15,7 @@ $mat-card-header-size: 40px !default;
font-weight: 300; font-weight: 300;
color: #212121; color: #212121;
height: 1.875rem; height: 1.875rem;
line-height: 1.875rem;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }

View File

@ -199,7 +199,7 @@
</div> </div>
</div> </div>
<div *ngIf="!hasZenodo()" class="col-md-4 link-zenodo-btn"> <div *ngIf="!hasZenodo()" class="col-md-4 link-zenodo-btn">
<div><button mat-raised-button type="button" (click)="loginToZenodo()" class="confirm default-btn">{{'USER-PROFILE.ZENODO.AUTHORIZE' | translate}}</button></div> <div><button mat-raised-button type="button" (click)="loginToZenodo()" class="confirm accent-btn mt-3">{{'USER-PROFILE.ZENODO.AUTHORIZE' | translate}}</button></div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -142,6 +142,20 @@
font-weight: 500; font-weight: 500;
} }
.accent-btn {
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
min-width: 162px;
max-width: 256px;
height: 40px;
color: #129d99;
font-size: 0.87rem;
font-weight: 500;
}
.vertical-line { .vertical-line {
border-left: 2px solid #129d99; border-left: 2px solid #129d99;
} }

View File

@ -85,7 +85,8 @@
"PRODUCED": "produced", "PRODUCED": "produced",
"RDA-SPECIFICATIONS": "according to RDA specifications", "RDA-SPECIFICATIONS": "according to RDA specifications",
"MACHINE-ACTIONABLE": "for machine-actionable DMPs", "MACHINE-ACTIONABLE": "for machine-actionable DMPs",
"UPLOAD-FILE": "Upload File" "UPLOAD-FILE": "Upload File",
"REPLACE-FILE": "Replace File"
}, },
"INVITATION-DIALOG": { "INVITATION-DIALOG": {
"HINT": "Press comma or enter between authors", "HINT": "Press comma or enter between authors",

View File

@ -85,7 +85,8 @@
"PRODUCED": "produced", "PRODUCED": "produced",
"RDA-SPECIFICATIONS": "according to RDA specifications", "RDA-SPECIFICATIONS": "according to RDA specifications",
"MACHINE-ACTIONABLE": "for machine-actionable DMPs", "MACHINE-ACTIONABLE": "for machine-actionable DMPs",
"UPLOAD-FILE": "Upload File" "UPLOAD-FILE": "Upload File",
"REPLACE-FILE": "Replace File"
}, },
"INVITATION-DIALOG": { "INVITATION-DIALOG": {
"HINT": "Press comma or enter between authors", "HINT": "Press comma or enter between authors",

View File

@ -85,7 +85,8 @@
"PRODUCED": "produced", "PRODUCED": "produced",
"RDA-SPECIFICATIONS": "according to RDA specifications", "RDA-SPECIFICATIONS": "according to RDA specifications",
"MACHINE-ACTIONABLE": "for machine-actionable DMPs", "MACHINE-ACTIONABLE": "for machine-actionable DMPs",
"UPLOAD-FILE": "Upload File" "UPLOAD-FILE": "Upload File",
"REPLACE-FILE": "Replace File"
}, },
"INVITATION-DIALOG": { "INVITATION-DIALOG": {
"HINT": "Press comma or enter between authors", "HINT": "Press comma or enter between authors",

View File

@ -85,7 +85,8 @@
"PRODUCED": "που έχουν παραχθεί", "PRODUCED": "που έχουν παραχθεί",
"RDA-SPECIFICATIONS": "σύμφωνα με τις προδιαγραφές του RDA", "RDA-SPECIFICATIONS": "σύμφωνα με τις προδιαγραφές του RDA",
"MACHINE-ACTIONABLE": "για μηχαναγνώσιμα Σχέδια Διαχείρισης Δεδομένων", "MACHINE-ACTIONABLE": "για μηχαναγνώσιμα Σχέδια Διαχείρισης Δεδομένων",
"UPLOAD-FILE": "Μεταφόρτωση Αρχείου" "UPLOAD-FILE": "Μεταφόρτωση Αρχείου",
"REPLACE-FILE": "Replace File"
}, },
"INVITATION-DIALOG": { "INVITATION-DIALOG": {
"HINT": "Προσθέστε κόμμα ή πατήστε το κουμπί “enter” ανάμεσα στους συγγραφείς", "HINT": "Προσθέστε κόμμα ή πατήστε το κουμπί “enter” ανάμεσα στους συγγραφείς",

View File

@ -85,7 +85,8 @@
"PRODUCED": "vytvorené", "PRODUCED": "vytvorené",
"RDA-SPECIFICATIONS": "podľa špecifikácií RDS", "RDA-SPECIFICATIONS": "podľa špecifikácií RDS",
"MACHINE-ACTIONABLE": "pre strojovo využiteľné DMP", "MACHINE-ACTIONABLE": "pre strojovo využiteľné DMP",
"UPLOAD-FILE": "Nahrať súbor" "UPLOAD-FILE": "Nahrať súbor",
"REPLACE-FILE": "Replace File"
}, },
"INVITATION-DIALOG": { "INVITATION-DIALOG": {
"HINT": "Po každom vložení pozvánky nového užívateľa stlačte čiarku", "HINT": "Po každom vložení pozvánky nového užívateľa stlačte čiarku",

View File

@ -85,7 +85,8 @@
"PRODUCED": "produced", "PRODUCED": "produced",
"RDA-SPECIFICATIONS": "according to RDA specifications", "RDA-SPECIFICATIONS": "according to RDA specifications",
"MACHINE-ACTIONABLE": "for machine-actionable DMPs", "MACHINE-ACTIONABLE": "for machine-actionable DMPs",
"UPLOAD-FILE": "Upload File" "UPLOAD-FILE": "Upload File",
"REPLACE-FILE": "Replace File"
}, },
"INVITATION-DIALOG": { "INVITATION-DIALOG": {
"HINT": "Press comma or enter between authors", "HINT": "Press comma or enter between authors",