mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-30 14:06:13 +00:00
signature: improve layout and some functionalities of the signature app
This commit is contained in:
nobohan
parent
c428e6665f
commit
c968d6c541
@ -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>
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@ const appMessages = {
|
||||
signature_confirmation: 'Confirmation de la signature',
|
||||
sign: 'Signer',
|
||||
choose_another_signature: 'Choisir une autre signature',
|
||||
cancel: 'Annuler',
|
||||
cancel_signing: 'Refuser de signer',
|
||||
last_sign_zone: 'Zone de signature précédente',
|
||||
next_sign_zone: 'Zone de signature suivante',
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
{{ encore_entry_link_tags('mod_bootstrap') }}
|
||||
{{ encore_entry_link_tags('mod_forkawesome') }}
|
||||
{{ encore_entry_link_tags('chill') }}
|
||||
{{ encore_entry_link_tags('vue_document_signature') }}
|
||||
|
||||
</head>
|
||||
|
||||
@ -27,7 +28,7 @@
|
||||
<div class="container-xxl">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
|
||||
<h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
|
||||
<h4>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h4>
|
||||
<div class="row" id="document-signature"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user