MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Data transfer: move transfer button in the modal footer

This commit is contained in:
argirok 2022-10-17 12:42:01 +03:00
parent ea935df5b7
commit d399f40ad6
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
utils/dataTransfer/transferData.component.html
View File

@ -1,15 +1,17 @@
<a (click)="open()" <a (click)="open()"
[title]="'Send data to cloud storage [demo]'" [title]="'Send data to cloud storage [demo]'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'" [attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
> <span icon="cloud-upload"></span> > <span icon="cloud-upload"></span>
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal"> <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<span uk-icon="cloud-upload"></span> <span uk-icon="cloud-upload"></span>
</span> </span>
</a> </a>
<!-- This is the modal --> <!-- This is the modal -->
<modal-alert #egiTransferModal large="true" > <modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'success'
||status == 'loading' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)"
(alertOutput)="transfer()" >
<div *ngIf="!accessToken" class=""> <div *ngIf="!accessToken" class="">
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center"> <div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in. In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
@ -25,7 +27,7 @@
</div> </div>
<div class="uk-grid uk-child-width-1-2 uk-grid-divider"> <div class="uk-grid uk-child-width-1-2 uk-grid-divider">
<!-- Source --> <!-- Source -->
<div class="uk-first-column"> <div class="uk-first-column source">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available Zenodo DOI URLs:</p>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..." <div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
[options]="sourceUrls" (valueChange)="this.parse()"></div> [options]="sourceUrls" (valueChange)="this.parse()"></div>
@ -41,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Destination --> <!-- Destination -->
<div> <div class="destination">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type:</p> <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the Destination Storage type:</p>
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..." <div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
[options]="destinationOptions"></div> [options]="destinationOptions"></div>
@ -62,12 +64,7 @@
<ng-container *ngIf="selectedDestination.id == 'ftp'"> <ng-container *ngIf="selectedDestination.id == 'ftp'">
<p>Comming soon!</p> <p>Comming soon!</p>
</ng-container> </ng-container>
<button (click)="transfer()"
class="uk-button uk-button-primary uk-margin-top uk-float-right"
[class.uk-disabled]="destinationPath.length == 0 || status == 'success' ||status == 'loading' || !validatePath() || (!this.downloadElements || this.downloadElements.length == 0)">
>> Transfer
</button>
</div> </div>
</div> </div>
<div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted"> <div *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">

23
utils/dataTransfer/transferData.component.ts
View File

@ -11,7 +11,25 @@ declare var UIkit;
@Component({ @Component({
selector: 'egi-transfer-data', selector: 'egi-transfer-data',
templateUrl:'./transferData.component.html' templateUrl:'./transferData.component.html' ,
styles:[`
/*Arrow*/
/*.source:first-child::after {
content: "";
font-size: 20px;
font-weight: 600;
text-align: center;
padding-bottom: 5%;
position: absolute;
background-image: url('/assets/arrow.svg');
right: -16%;
top: 33%;
width: 20%;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}*/
`]
}) })
export class EGIDataTransferComponent { export class EGIDataTransferComponent {
subscriptions = []; subscriptions = [];
@ -86,7 +104,8 @@ export class EGIDataTransferComponent {
} }
this.isOpen = true; this.isOpen = true;
this.egiTransferModal.cancelButton = false; this.egiTransferModal.cancelButton = false;
this.egiTransferModal.okButton = false; this.egiTransferModal.okButton = true;
this.egiTransferModal.okButtonText = ">> Transfer";
this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]"; this.egiTransferModal.alertTitle = "EOSC data transfer service [demo]";
this.init(); this.init();
this.egiTransferModal.open(); this.egiTransferModal.open();