Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-23 08:03:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

signature: improve layout and some functionalities of the signature app

Browse Source
This commit is contained in:
nobohan
2024-07-04 17:10:20 +02:00
parent c428e6665f
commit c968d6c541
3 changed files with 77 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
View File

@@ -16,7 +16,52 @@
</modal>
</teleport>
<div class="col-12">
<div class="row justify-content-center">
<div
class="row justify-content-center mb-2"
v-if="signature.zones.length > 1"
>
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light btn-sm" @click="turn_signature(-1)">
{{ $t("last_sign_zone") }}
</button>
</div>
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light btn-sm" @click="turn_signature(1)">
{{ $t("next_sign_zone") }}
</button>
</div>
</div>
<div
id="turn-page"
class="row justify-content-center mb-2"
v-if="pageCount > 1"
>
<div class="col-6-sm col-3-md text-center">
<button
class="btn btn-light btn-sm"
:disabled="page <= 1"
@click="turn_page(-1)"
>
❮
</button>
<span>page {{ page }} / {{ pageCount }}</span>
<button
class="btn btn-light btn-sm"
:disabled="page >= pageCount"
@click="turn_page(1)"
>
❯
</button>
</div>
</div>
</div>
<div class="col-12 text-center">
<canvas class="m-auto" id="canvas"></canvas>
</div>
<div class="col-12 p-4" id="action-buttons">
<div class="row">
<div class="col-6">
<button
class="btn btn-action me-2"
@@ -29,9 +74,18 @@
class="btn btn-misc"
:hidden="!userSignatureZones"
@click="undo_sign"
v-if="signature.zones.length > 1"
>
{{ $t("choose_another_signature") }}
</button>
<button
class="btn btn-misc"
:hidden="!userSignatureZones"
@click="undo_sign"
v-else
>
{{ $t("cancel") }}
</button>
</div>
<div class="col-6">
<button class="btn float-end btn-delete" @click="undo_sign">
@@ -39,42 +93,6 @@
</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light" @click="turn_signature(-1)">
{{ $t("last_sign_zone") }}
</button>
</div>
<div class="col-4 gap-2 d-grid">
<button class="btn btn-light" @click="turn_signature(1)">
{{ $t("next_sign_zone") }}
</button>
</div>
</div>
<div class="row justify-content-center" v-if="pageCount > 1">
<div class="col-3 text-center">
<button
class="btn btn-light"
:disabled="page <= 1"
@click="turn_page(-1)"
>
❮
</button>
page {{ page }} / {{ pageCount }}
<button
class="btn btn-light"
:disabled="page >= pageCount"
@click="turn_page(1)"
>
❯
</button>
</div>
</div>
</div>
<div class="col-12 text-center">
<canvas class="m-auto" id="canvas"></canvas>
</div>
</template>
@@ -180,7 +198,8 @@ const hit_signature = (
canvasHeight: number
) => {
const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.PDFPage.width;
const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.PDFPage.height;
const scaleYToCanvas = (y: number) =>
(y * canvasHeight) / zone.PDFPage.height;
return (
scaleXToCanvas(zone.x) < xy[0] &&
xy[0] < scaleXToCanvas(zone.x + zone.width) &&
@@ -189,7 +208,8 @@ const hit_signature = (
);
};
const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) => {
undo_sign();
signature.zones
.filter((z) => z.PDFPage.index + 1 === page.value)
.map((z) => {
@@ -206,6 +226,7 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
userSignatureZones.value = z;
}
});
};
const turn_page = async (upOrDown: number) => {
userSignatureZones.value = null;
@@ -292,8 +313,20 @@ download_and_open();
</script>
<style scoped lang="scss">
canvas {
width: 100%;
#canvas {
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
}
div#action-buttons {
position: sticky;
bottom: 0px;
background-color: white;
z-index: 100;
}
div#turn-page {
span {
font-size: 0.8rem;
margin: 0 0.4rem;
}
}
</style>