DigitaleBibliothek / Frontend / 73e70e65463

Commits

Tim Donohue authored and GitHub committed 73e70e65463 Merge 13 Jul 2021

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

improve positioning of buttons in the submission form

src/app/submission/form/footer/submission-form-footer.component.html

Modified

-1
+<div class="row" *ngIf="!!submissionId">
-2
+  <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>
-3
+    <button *ngIf="(showDepositAndDiscard | async)"
-4
+            type="button"
-5
+            class="btn btn-danger"
-+
+            [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
-7
+            (click)="$event.preventDefault();confirmDiscard(content)">
-8
+      <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
-9
+    </button>
-10
+  </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>
-50
+</div>
-51
-52
+<ng-template #content let-c="close" let-d="dismiss">
-53
+  <div class="modal-header">
-54
+    <h4 class="modal-title text-danger">{{'submission.general.discard.confirm.title' | translate}}</h4>
-55
+    <button type="button" class="close" aria-label="Close" (click)="d('cancel')">
-56
+      <span aria-hidden="true">&times;</span>
-57
+    </button>
-58
+  </div>
-59
+  <div class="modal-body">

Frontend

Commits

Jira Issues

Add shortcut