diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json index f44cb97d291a09ffeffd964352d45b7eb1259190..cbf92f2982a38bf5c07990faafd9ad40e3e4bdf8 100644 --- a/src/i18n/de/translation.json +++ b/src/i18n/de/translation.json @@ -28,6 +28,7 @@ "positioning-automatic": "Automatisch", "positioning-manual": "Manuell", "close-preview": "Vorschau schließen", + "preview": "Vorschau", "start-signing-process-button-running-title": "Signiervorgang läuft gerade", "remove-current-file-button-title": "Aktuellen Signierprozess abbrechen", "signed-files-label": "Signierte Dateien", @@ -40,7 +41,8 @@ "upload-status-file-text": "({{fileSize}}) wird hochgeladen und verarbeitet...", "re-upload-all-button": "Alle erneut in die Warteschlange stellen", "re-upload-all-button-title": "Alle fehlgeschlagen Signiervorgänge erneut in die Warteschlange stellen", - "signature-placement-label": "Vorschau" + "signature-placement-label": "Vorschau", + "positioning": "Positionierung" }, "pdf-preview": { "first": "Erste", diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json index 45aac29d5ec0018d343950ff381a418cf7db669e..6ecccdba91cea9dbef95aef772083f1af627eaec 100644 --- a/src/i18n/en/translation.json +++ b/src/i18n/en/translation.json @@ -28,6 +28,7 @@ "positioning-automatic": "Automatic", "positioning-manual": "Manual", "close-preview": "Close preview", + "preview": "Preview", "start-signing-process-button-running-title": "Signing process running", "remove-current-file-button-title": "Cancel current signing process", "signed-files-label": "Signed files", @@ -40,7 +41,8 @@ "upload-status-file-text": "({{fileSize}}) is currently uploading and being processed...", "re-upload-all-button": "Queue all", "re-upload-all-button-title": "Queue all failed signing processes again", - "signature-placement-label": "Preview" + "signature-placement-label": "Preview", + "positioning": "Positioning" }, "pdf-preview": { "first": "First", diff --git a/src/vpu-qualified-signature-pdf-upload.js b/src/vpu-qualified-signature-pdf-upload.js index 70ba64ecf98c83e723cde11aa021e65100c49153..967889c4674f0ca92bfe290c549e88624f9d03fa 100644 --- a/src/vpu-qualified-signature-pdf-upload.js +++ b/src/vpu-qualified-signature-pdf-upload.js @@ -528,33 +528,85 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle margin-right: 0; flex: 1 0; } + + .file-block { + border: solid 1px black; + padding: 10px; + margin-bottom: 10px; + } + + .file-block .header { + display: grid; + align-items: center; + grid-template-columns: auto 40px; + grid-gap: 10px; + margin-bottom: 10px; + } + + .file-block div.bottom-line { + display: grid; + align-items: center; + grid-template-columns: auto 190px; + grid-gap: 10px; + } + + .file-block div.bottom-line .headline { + text-align: right; + } `; } + /** + * Returns the list of queued files + * + * @returns {*[]} + */ getQueuedFilesHtml() { - return this.queuedFiles.map((file, id) => html` - <div class="file"> - <a title="${i18n.t('qualified-pdf-upload.show-preview')}" - @click="${() => { this.showPreview(id); }}"> - ${file.name} (${humanFileSize(file.size)})</a> - <button class="button" - ?disabled="${this.signingProcessEnabled}" - title="${i18n.t('qualified-pdf-upload.remove-queued-file-button-title')}" - @click="${() => { this.takeFileFromQueue(id); }}"> - <vpu-icon name="close"></vpu-icon></button> - <vpu-textswitch name1="auto" - name2="manual" - value1="${i18n.t('qualified-pdf-upload.positioning-automatic')}" - value2="${i18n.t('qualified-pdf-upload.positioning-manual')}" - ?disabled="${this.signingProcessEnabled}" - @change=${ (e) => this.queuePlacementSwitch(id, e.target.name) }></vpu-textswitch> - </div> - `); + const ids = Object.keys(this.queuedFiles); + let results = []; + + ids.forEach((id) => { + const file = this.queuedFiles[id]; + + results.push(html` + <div class="file-block"> + <div class="header"> + <span>${file.name} (${humanFileSize(file.size)})</span> + <button class="button close" + ?disabled="${this.signingProcessEnabled}" + title="${i18n.t('qualified-pdf-upload.remove-queued-file-button-title')}" + @click="${() => { this.takeFileFromQueue(id); }}"> + <vpu-icon name="close"></vpu-icon></button> + </div> + <div class="bottom-line"> + <span class="headline">${i18n.t('qualified-pdf-upload.positioning')}:</span> + <vpu-textswitch name1="auto" + name2="manual" + class="switch" + value1="${i18n.t('qualified-pdf-upload.positioning-automatic')}" + value2="${i18n.t('qualified-pdf-upload.positioning-manual')}" + ?disabled="${this.signingProcessEnabled}" + @change=${ (e) => this.queuePlacementSwitch(id, e.target.name) }></vpu-textswitch> + <span class="headline">${i18n.t('qualified-pdf-upload.preview')}:</span> + <button class="button" + ?disabled="${this.signingProcessEnabled}" + @click="${() => { this.showPreview(id); }}">${i18n.t('qualified-pdf-upload.show-preview')}</button> + </div> + </div> + `); + }); + + return results; } + /** + * Returns the list of successfully signed files + * + * @returns {*[]} + */ getSignedFilesHtml() { return this.signedFiles.map(file => html` - <div class="file"> + <div class="file-block"> <a class="is-download" title="${i18n.t('qualified-pdf-upload.download-file-button-title')}" @click="${() => {this.fileDownloadClickHandler(file);}}"> @@ -563,9 +615,14 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle `); } + /** + * Returns the list of files of failed signature processes + * + * @returns {*[]} + */ getErrorFilesHtml() { return this.errorFiles.map((data, id) => html` - <div class="file"> + <div class="file-block"> <div class="button-box"> <button class="button is-small" title="${i18n.t('qualified-pdf-upload.re-upload-file-button-title')}" @@ -615,7 +672,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle class="${classMap({hidden: !this.queueingInProgress})}"></vpu-mini-spinner> </h2> <!-- List of queued files --> - <div class="control"> + <div class="control file-list"> ${this.getQueuedFilesHtml()} </div> <!-- Text "queue empty" -->