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
Branches
No related tags found
No related merge requests found
Pipeline #11081 passed
Stage: test
Stage: deploy
Show 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,13 +580,14 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
></vpu-fileupload>
</div>
</div>
<div class="flex-container">
<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="emtpy-queue control ${classMap({hidden: this.queuedFilesCount !== 0})}">
<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>
......@@ -600,6 +604,30 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
</button>
</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>
</div>
</div>
<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">
......@@ -628,27 +656,6 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
<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>
</div>
</div>
<div class="notification is-warning ${classMap({hidden: this.isLoggedIn() || this.isLoading()})}">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment