From 0a26b179140f3e4cf42874b6e7f2f5901ca7f3f7 Mon Sep 17 00:00:00 2001 From: Patrizio Bekerle <patrizio@bekerle.com> Date: Thu, 30 Apr 2020 12:44:21 +0200 Subject: [PATCH] Allow failed upload removal, decrease iframe max-width and do layout changes (#4) --- src/i18n/de/translation.json | 1 + src/i18n/en/translation.json | 1 + src/vpu-qualified-signature-pdf-upload.js | 84 +++++++++++++++-------- 3 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json index 3612756..95d7937 100644 --- a/src/i18n/de/translation.json +++ b/src/i18n/de/translation.json @@ -18,6 +18,7 @@ "upload-area-text": "Sie können in diesem Bereich PDF Dateien per Drag & Drop oder per Direktauswahl hochladen", "current-signing-process-label": "Aktueller Signierprozess", "queued-files-label": "Dateien in der Warteschlange", + "remove-failed-file-button-title": "Fehlgeschlagene Datei entfernen", "remove-queued-file-button-title": "Datei aus der Warteschlange entfernen", "start-signing-process-button": "Signiervorgang starten", "start-signing-process-button-running-title": "Signiervorgang läuft gerade", diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json index ac75c7c..b07b427 100644 --- a/src/i18n/en/translation.json +++ b/src/i18n/en/translation.json @@ -18,6 +18,7 @@ "upload-area-text": "In this area you can upload PDF files via Drag & Drop or by selecting them directly", "current-signing-process-label": "Current signing process", "queued-files-label": "Queued files", + "remove-failed-file-button-title": "Remove failed file", "remove-queued-file-button-title": "Remove file from queue", "start-signing-process-button": "Start signing process", "start-signing-process-button-running-title": "Signing process running", diff --git a/src/vpu-qualified-signature-pdf-upload.js b/src/vpu-qualified-signature-pdf-upload.js index ab9c274..c762897 100644 --- a/src/vpu-qualified-signature-pdf-upload.js +++ b/src/vpu-qualified-signature-pdf-upload.js @@ -366,8 +366,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle * @param id */ async fileQueueingClickHandler(file, id) { - this.errorFiles.splice(id, 1); - this.errorFilesCount = Object.keys(this.errorFiles).length; + this.takeFailedFileFromQueue(id); return this._("#file-upload").queueFile(file); } @@ -381,6 +380,18 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle return this._("#file-upload").takeFileFromQueue(key); } + /** + * Takes a failed file off of the queue + * + * @param key + */ + takeFailedFileFromQueue(key) { + const file = this.errorFiles.splice(key, 1); + this.errorFilesCount = Object.keys(this.errorFiles).length; + + return file; + } + static get styles() { // language=css return css` @@ -389,6 +400,15 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle ${commonStyles.getButtonCSS()} ${commonStyles.getNotificationCSS()} + .flex-container { + display: flex; + flex-flow: row wrap; + } + + .flex-container > div { + margin-right: 20px; + } + h2 { margin-bottom: inherit; } @@ -402,7 +422,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle height: 240px; border: none; /* keeps the A-Trust webpage aligned left */ - max-width: 570px; + max-width: 335px; } .files-block .file { @@ -473,6 +493,10 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle <div class="info"> ${data.file.name} (${humanFileSize(data.file.size)}) <strong class="error">${data.json["hydra:description"]}</strong> + <a class="is-remove" + title="${i18n.t('qualified-pdf-upload.remove-failed-file-button-title')}" + @click="${() => {this.takeFailedFileFromQueue(id);}}"> + <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon></a> </div> </div> `); @@ -492,34 +516,36 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle text="${i18n.t('qualified-pdf-upload.upload-area-text')}" button-label="${i18n.t('qualified-pdf-upload.upload-button-label')}"></vpu-fileupload> </div> </div> - <div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}"> - <vpu-mini-spinner></vpu-mini-spinner> - <strong>${this.uploadStatusFileName}</strong> - ${this.uploadStatusText} - </div> - <div class="files-block field ${classMap({hidden: !this.externalAuthInProgress})}"> - <h2>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h2> - <div class="file"> - <a class="is-remove" title="${i18n.t('qualified-pdf-upload.remove-current-file-button-title')}" - @click="${() => { this.externalAuthInProgress = false; }}"> - ${this.currentFileName} (${humanFileSize(this.currentFile.file !== undefined ? this.currentFile.file.size : 0)}) - <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon> - </a> + <div class="flex-container"> + <div class="files-block field ${classMap({hidden: this.queuedFilesCount === 0})}"> + <h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2> + <div class="control"> + ${this.getQueuedFilesHtml()} + </div> + <div class="control"> + <button @click="${() => { this.signingProcessEnabled = true; }}" + ?disabled="${this.signingProcessEnabled}" + title="${this.signingProcessEnabled ? i18n.t('qualified-pdf-upload.start-signing-process-button-running-title') : ""}" + class="button is-primary"> + ${i18n.t('qualified-pdf-upload.start-signing-process-button')} + </button> + </div> </div> - <iframe name="external_iframe" id="iframe"></iframe> - </div> - <div class="files-block field ${classMap({hidden: this.queuedFilesCount === 0})}"> - <h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2> - <div class="control"> - ${this.getQueuedFilesHtml()} + <div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}"> + <vpu-mini-spinner></vpu-mini-spinner> + <strong>${this.uploadStatusFileName}</strong> + ${this.uploadStatusText} </div> - <div class="control"> - <button @click="${() => { this.signingProcessEnabled = true; }}" - ?disabled="${this.signingProcessEnabled}" - title="${this.signingProcessEnabled ? i18n.t('qualified-pdf-upload.start-signing-process-button-running-title') : ""}" - class="button is-primary"> - ${i18n.t('qualified-pdf-upload.start-signing-process-button')} - </button> + <div class="files-block field ${classMap({hidden: !this.externalAuthInProgress})}"> + <h2>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h2> + <div class="file"> + <a class="is-remove" title="${i18n.t('qualified-pdf-upload.remove-current-file-button-title')}" + @click="${() => { this.externalAuthInProgress = false; }}"> + ${this.currentFileName} (${humanFileSize(this.currentFile.file !== undefined ? this.currentFile.file.size : 0)}) + <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon> + </a> + </div> + <iframe name="external_iframe" id="iframe"></iframe> </div> </div> <div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}"> -- GitLab