Data transfer: move transfer button in the modal footer
This commit is contained in:
parent
ea935df5b7
commit
d399f40ad6
|
@ -1,15 +1,17 @@
|
|||
<a (click)="open()"
|
||||
[title]="'Send data to cloud storage [demo]'"
|
||||
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
|
||||
> <span icon="cloud-upload"></span>
|
||||
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
|
||||
<span uk-icon="cloud-upload"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a (click)="open()"
|
||||
[title]="'Send data to cloud storage [demo]'"
|
||||
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
|
||||
> <span icon="cloud-upload"></span>
|
||||
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
|
||||
<span uk-icon="cloud-upload"></span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- 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 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.
|
||||
|
@ -25,7 +27,7 @@
|
|||
</div>
|
||||
<div class="uk-grid uk-child-width-1-2 uk-grid-divider">
|
||||
<!-- 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>
|
||||
<div input type="select" [(value)]="selectedSourceUrl" placeholder="Zenodo DOI URL" hint="Select..."
|
||||
[options]="sourceUrls" (valueChange)="this.parse()"></div>
|
||||
|
@ -41,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
|
||||
[options]="destinationOptions"></div>
|
||||
|
@ -62,12 +64,7 @@
|
|||
<ng-container *ngIf="selectedDestination.id == 'ftp'">
|
||||
<p>Comming soon!</p>
|
||||
</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 *ngIf="status == 'loading'" class="uk-flex uk-flex-center uk-text-muted">
|
||||
|
|
|
@ -11,7 +11,25 @@ declare var UIkit;
|
|||
|
||||
@Component({
|
||||
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 {
|
||||
subscriptions = [];
|
||||
|
@ -86,7 +104,8 @@ export class EGIDataTransferComponent {
|
|||
}
|
||||
this.isOpen = true;
|
||||
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.init();
|
||||
this.egiTransferModal.open();
|
||||
|
|
Loading…
Reference in New Issue