signature: improve layout and some functionalities of the signature app

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue

@@ -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 {
+#canvas {
-  width: 100%;
+  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>
 

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts

@@ -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',

src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig

@@ -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>