Skip to content
Snippets Groups Projects
Unverified Commit e40f34a6 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Update block layout (#5)

parent d7fc72a6
No related branches found
No related tags found
No related merge requests found
Pipeline #11081 passed
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/vpu-pdf-preview.js
+ 15
− 3
View file @ e40f34a6
......@@ -89,6 +89,11 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
await that.showPage(that.currentPage);
};
// Safari can't use that yet
// new ResizeObserver(async () => {
// await that.showPage(that.currentPage);
// }).observe(this._('#pdf-main-container'));
// add fabric.js canvas for signature positioning
this.fabricCanvas = new fabric.Canvas(this._('#fabric-canvas'));
// add signature image
......@@ -144,6 +149,11 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
* @param page_no
*/
async showPage(page_no) {
// we need to wait unil the last rendering is finished
if (this.isPageRenderingInProgress) {
return;
}
const that = this;
this.isPageRenderingInProgress = true;
this.currentPage = page_no;
......@@ -154,9 +164,9 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
// original width of the pdf page at scale 1
const pdf_original_width = page.getViewport({ scale: 1 }).width;
// set the canvas width to the width of the container
this.fabricCanvas.setWidth(this._('#pdf-main-container').clientWidth);
this.canvas.width = this._('#pdf-main-container').clientWidth;
// set the canvas width to the width of the container (minus the borders)
this.fabricCanvas.setWidth(this._('#pdf-main-container').clientWidth - 2);
this.canvas.width = this._('#pdf-main-container').clientWidth - 2;
// as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered
// const scale_required = this.fabricCanvas.width / pdf_original_width;
......@@ -187,10 +197,12 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
});
} catch(error) {
console.error(error.message);
that.isPageRenderingInProgress = false;
}
});
} catch(error) {
console.error(error.message);
that.isPageRenderingInProgress = false;
}
}
......
src/vpu-qualified-signature-pdf-upload.js
+ 84
− 77
View file @ e40f34a6
......@@ -430,18 +430,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
${commonStyles.getButtonCSS()}
${commonStyles.getNotificationCSS()}
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-container > div {
margin-right: 20px;
}
#pdf-preview {
flex: 1 0;
margin-right: 0;
min-width: 320px;
}
......@@ -498,9 +487,23 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
color: #e4154b;
}
.emtpy-queue {
.empty-queue {
margin: 10px 0;
}
#grid-container {
display: flex;
flex-flow: row wrap;
}
#grid-container > div {
margin-right: 20px;
}
#grid-container > div:last-child {
margin-right: 0;
flex: 1 0;
}
`;
}
......@@ -577,77 +580,81 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
></vpu-fileupload>
</div>
</div>
<div class="flex-container">
<div class="files-block field ${classMap({hidden: !this.queueBlockEnabled})}">
<h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2>
<div class="control">
${this.getQueuedFilesHtml()}
<div id="grid-container">
<div class="left-container">
<div class="files-block field ${classMap({hidden: !this.queueBlockEnabled})}">
<h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2>
<div class="control">
${this.getQueuedFilesHtml()}
</div>
<div class="empty-queue control ${classMap({hidden: this.queuedFilesCount !== 0})}">
${i18n.t('qualified-pdf-upload.queued-files-empty1')}<br />
${i18n.t('qualified-pdf-upload.queued-files-empty2')}
</div>
<div class="control">
<button @click="${() => { this.signingProcessEnabled = true; }}"
?disabled="${this.queuedFilesCount === 0}"
class="button is-primary ${classMap({hidden: this.signingProcessEnabled})}">
${i18n.t('qualified-pdf-upload.start-signing-process-button')}
</button>
<button @click="${() => { this.signingProcessEnabled = false; this.externalAuthInProgress = false; }}"
?disabled="${this.queuedFilesCount === 0}"
class="button ${classMap({hidden: !this.signingProcessEnabled})}">
${i18n.t('qualified-pdf-upload.stop-signing-process-button')}
</button>
</div>
</div>
<div class="emtpy-queue control ${classMap({hidden: this.queuedFilesCount !== 0})}">
${i18n.t('qualified-pdf-upload.queued-files-empty1')}<br />
${i18n.t('qualified-pdf-upload.queued-files-empty2')}
<div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}">
<h2>${i18n.t('qualified-pdf-upload.signed-files-label')}</h2>
<div class="control">
${this.getSignedFilesHtml()}
</div>
</div>
<div class="control">
<button @click="${() => { this.signingProcessEnabled = true; }}"
?disabled="${this.queuedFilesCount === 0}"
class="button is-primary ${classMap({hidden: this.signingProcessEnabled})}">
${i18n.t('qualified-pdf-upload.start-signing-process-button')}
</button>
<button @click="${() => { this.signingProcessEnabled = false; this.externalAuthInProgress = false; }}"
?disabled="${this.queuedFilesCount === 0}"
class="button ${classMap({hidden: !this.signingProcessEnabled})}">
${i18n.t('qualified-pdf-upload.stop-signing-process-button')}
</button>
<div class="field ${classMap({hidden: this.signedFilesCount === 0})}">
<div class="control">
<vpu-button id="zip-download-button" value="${i18n.t('qualified-pdf-upload.download-zip-button')}" title="${i18n.t('qualified-pdf-upload.download-zip-button-tooltip')}" @click="${this.zipDownloadClickHandler}" type="is-primary"></vpu-button>
</div>
</div>
</div>
<div id="pdf-preview" class="field ${classMap({hidden: !this.signaturePlacementInProgress})}">
<h2>${i18n.t('qualified-pdf-upload.signature-placement-label')}</h2>
<div class="file">
<a class="is-remove" title="${i18n.t('qualified-pdf-upload.close-preview')}"
@click="${() => { this.signaturePlacementInProgress = false; }}">
${this.currentFile.name} (${humanFileSize(this.currentFile !== undefined ? this.currentFile.size : 0)})
<vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
</a>
<div class="files-block error-files field ${classMap({hidden: this.errorFilesCount === 0})}">
<h2 class="error">${i18n.t('qualified-pdf-upload.error-files-label')}</h2>
<div class="control">
${this.getErrorFilesHtml()}
</div>
</div>
<vpu-pdf-preview lang="${this.lang}" @vpu-pdf-preview-accept="${this.storePDFData}"></vpu-pdf-preview>
</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="field ${classMap({hidden: this.errorFilesCount === 0})}">
<div class="control">
<vpu-button id="re-upload-all-button" ?disabled="${this.uploadInProgress}" value="${i18n.t('qualified-pdf-upload.re-upload-all-button')}" title="${i18n.t('qualified-pdf-upload.re-upload-all-button-title')}" @click="${this.reUploadAllClickHandler}" type="is-primary"></vpu-button>
</div>
</div>
<iframe name="external_iframe" id="iframe"></iframe>
</div>
</div>
<div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}">
<h2>${i18n.t('qualified-pdf-upload.signed-files-label')}</h2>
<div class="control">
${this.getSignedFilesHtml()}
</div>
</div>
<div class="field ${classMap({hidden: this.signedFilesCount === 0})}">
<div class="control">
<vpu-button id="zip-download-button" value="${i18n.t('qualified-pdf-upload.download-zip-button')}" title="${i18n.t('qualified-pdf-upload.download-zip-button-tooltip')}" @click="${this.zipDownloadClickHandler}" type="is-primary"></vpu-button>
</div>
</div>
<div class="files-block error-files field ${classMap({hidden: this.errorFilesCount === 0})}">
<h2 class="error">${i18n.t('qualified-pdf-upload.error-files-label')}</h2>
<div class="control">
${this.getErrorFilesHtml()}
</div>
</div>
<div class="field ${classMap({hidden: this.errorFilesCount === 0})}">
<div class="control">
<vpu-button id="re-upload-all-button" ?disabled="${this.uploadInProgress}" value="${i18n.t('qualified-pdf-upload.re-upload-all-button')}" title="${i18n.t('qualified-pdf-upload.re-upload-all-button-title')}" @click="${this.reUploadAllClickHandler}" type="is-primary"></vpu-button>
<div class="right-container">
<div id="pdf-preview" class="field ${classMap({hidden: !this.signaturePlacementInProgress})}">
<h2>${i18n.t('qualified-pdf-upload.signature-placement-label')}</h2>
<div class="file">
<a class="is-remove" title="${i18n.t('qualified-pdf-upload.close-preview')}"
@click="${() => { this.signaturePlacementInProgress = false; }}">
${this.currentFile.name} (${humanFileSize(this.currentFile !== undefined ? this.currentFile.size : 0)})
<vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
</a>
</div>
<vpu-pdf-preview lang="${this.lang}" @vpu-pdf-preview-accept="${this.storePDFData}"></vpu-pdf-preview>
</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>
<iframe name="external_iframe" id="iframe"></iframe>
</div>
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment