Merge pull request #1269 from 4Science/submission-footer-improvement

improve positioning of buttons in the submission form
This commit is contained in:
Tim Donohue
2021-07-13 11:18:06 -05:00
committed by GitHub
3 changed files with 47 additions and 34 deletions

View File

@@ -1,43 +1,52 @@
<div class="row" *ngIf="!!submissionId">
<div class="col">
<!-- a class="btn btn-outline-primary" role="button" href="#"><i class="fas fa-times"></i> {{'submission.general.cancel' |translate}}</a -->
</div>
<div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
<div class="progress w-75">
<div *ngIf="(processingSaveStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
<div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
</div>
</div>
<div *ngIf="!(processingSaveStatus | async) && !(processingDepositStatus | async)" class="col text-right">
<button type="button"
class="btn btn-secondary"
id="save"
[disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
(click)="save($event)">
<span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
</button>
<button type="button"
[class.btn-primary]="!(showDepositAndDiscard | async)"
[class.btn-secondary]="(showDepositAndDiscard | async)"
class="btn"
id="saveForLater"
[disabled]="(processingSaveStatus | async)"
(click)="saveLater($event)">
<span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
</button>
<button *ngIf="(showDepositAndDiscard | async)"
type="button"
class="btn btn-primary"
[disabled]="(submissionIsInvalid | async)" (click)="deposit($event)">
<span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
</button>
<button *ngIf="(showDepositAndDiscard | async)"
type="button"
class="btn btn-danger"
[disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
(click)="$event.preventDefault();confirmDiscard(content)">
<i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
</button>
</div>
<div class="col text-right d-flex justify-content-end align-items-center">
<span *ngIf="!(hasUnsavedModification | async) && !(processingSaveStatus | async) && !(processingDepositStatus | async)">
<i class="fas fa-check-circle"></i> {{'submission.general.info.saved' | translate}}
</span>
<span *ngIf="(hasUnsavedModification | async) && !(processingSaveStatus | async) && !(processingDepositStatus | async)">
<i class="fas fa-exclamation-circle"></i> {{'submission.general.info.pending-changes' | translate}}
</span>
<div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
<div class="progress w-75">
<div *ngIf="(processingSaveStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
<div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
</div>
</div>
<div class="ml-2">
<button type="button"
class="btn btn-secondary"
id="save"
[disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
(click)="save($event)">
<span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
</button>
<button type="button"
[class.btn-primary]="!(showDepositAndDiscard | async)"
[class.btn-secondary]="(showDepositAndDiscard | async)"
class="btn"
id="saveForLater"
[disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
(click)="saveLater($event)">
<span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
</button>
<button *ngIf="(showDepositAndDiscard | async)"
type="button"
class="btn btn-success"
[disabled]="(submissionIsInvalid | async) || (processingSaveStatus | async) || (processingDepositStatus | async)"
(click)="deposit($event)">
<span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
</button>
</div>
</div>
</div>
<ng-template #content let-c="close" let-d="dismiss">

View File

@@ -205,7 +205,7 @@ describe('SubmissionFormFooterComponent Component', () => {
comp.showDepositAndDiscard = observableOf(true);
compAsAny.submissionIsInvalid = observableOf(true);
fixture.detectChanges();
const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
const depositBtn: any = fixture.debugElement.query(By.css('.btn-success'));
expect(depositBtn.nativeElement.disabled).toBeTruthy();
});
@@ -214,7 +214,7 @@ describe('SubmissionFormFooterComponent Component', () => {
comp.showDepositAndDiscard = observableOf(true);
compAsAny.submissionIsInvalid = observableOf(false);
fixture.detectChanges();
const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
const depositBtn: any = fixture.debugElement.query(By.css('.btn-success'));
expect(depositBtn.nativeElement.disabled).toBeFalsy();
});

View File

@@ -3172,6 +3172,10 @@
"submission.general.discard.submit": "Discard",
"submission.general.info.saved": "Saved",
"submission.general.info.pending-changes": "Unsaved changes",
"submission.general.save": "Save",
"submission.general.save-later": "Save for later",
@@ -3198,7 +3202,7 @@
"submission.import-external.source.loading": "Loading ...",
"submission.import-external.source.sherpaJournal": "SHERPA Journals",
"submission.import-external.source.sherpaJournalIssn": "SHERPA Journals by ISSN",
"submission.import-external.source.sherpaPublisher": "SHERPA Publishers",