Signature: move buttons to a top toolbar + change behavior on a new zone

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

@@ -27,8 +27,8 @@
     </modal>
   </teleport>
   <div class="col-12 m-auto">
-    <div class="row justify-content-center border-bottom pdf-tools">
+    <div class="row justify-content-center border pdf-tools d-md-none">
-      <div v-if="pageCount > 1" class="col-4 text-center turn-page">
+      <div v-if="pageCount > 1" class="col text-center turn-page">
         <button
           class="btn btn-light btn-sm"
           :disabled="page <= 1"
@@ -36,7 +36,7 @@
         >
           ❮
         </button>
-        <span>page {{ page }} / {{ pageCount }}</span>
+        <span>{{ page }}/{{ pageCount }}</span>
         <button
           class="btn btn-light btn-sm"
           :disabled="page >= pageCount"
@@ -45,7 +45,101 @@
           ❯
         </button>
       </div>
-      <div v-if="signature.zones.length > 1" class="col-4 col-xl-3 text-end">
+      <div v-if="signature.zones.length > 1" class="col-3 p-0">
+        <button
+          :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ $t("last_zone") }}
+        </button>
+      </div>
+      <div v-if="signature.zones.length > 1" class="col-3 p-0">
+        <button
+          :disabled="userSignatureZone?.index >= signature.zones.length - 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ $t("next_zone") }}
+        </button>
+      </div>
+      <div class="col text-end p-0">
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-if="signature.zones.length > 1"
+          :title="$t('choose_another_signature')"
+        >
+          {{ $t("another_zone") }}
+        </button>
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-else
+        >
+          {{ $t("cancel") }}
+        </button>
+      </div>
+      <div class="col-1">
+        <button
+          class="btn btn-create btn-sm"
+          :class="{ active: canvasEvent === 'add' }"
+          @click="toggleAddZone()"
+          :title="$t('add_sign_zone')"
+        ></button>
+      </div>
+    </div>
+
+    <div
+      class="row justify-content-center border pdf-tools d-none d-md-flex"
+    >
+      <div v-if="pageCount > 1" class="col-2 text-center turn-page p-0">
+        <button
+          class="btn btn-light btn-sm"
+          :disabled="page <= 1"
+          @click="turnPage(-1)"
+        >
+          ❮
+        </button>
+        <span>{{ page }} / {{ pageCount }}</span>
+        <button
+          class="btn btn-light btn-sm"
+          :disabled="page >= pageCount"
+          @click="turnPage(1)"
+        >
+          ❯
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 1"
+        class="col text-end d-lg-none"
+      >
+        <button
+          :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ $t("last_zone") }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 1"
+        class="col text-start d-lg-none"
+      >
+        <button
+          :disabled="userSignatureZone?.index >= signature.zones.length - 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ $t("next_zone") }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 1"
+        class="col text-end d-none d-lg-flex p-0"
+      >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
           class="btn btn-light btn-sm"
@@ -54,7 +148,10 @@
           {{ $t("last_sign_zone") }}
         </button>
       </div>
-      <div v-if="signature.zones.length > 1" class="col-4 col-xl-3 text-start">
+      <div
+        v-if="signature.zones.length > 1"
+        class="col text-start d-none d-lg-flex p-0"
+      >
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -63,6 +160,34 @@
           {{ $t("next_sign_zone") }}
         </button>
       </div>
+      <div class="col text-end p-0">
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-if="signature.zones.length > 1"
+        >
+          {{ $t("choose_another_signature") }}
+        </button>
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-else
+        >
+          {{ $t("cancel") }}
+        </button>
+      </div>
+      <div class="col text-end p-0 pe-xxl-4">
+        <button
+          class="btn btn-create btn-sm"
+          :class="{ active: canvasEvent === 'add' }"
+          @click="toggleAddZone()"
+          :title="$t('add_sign_zone')"
+        >
+          {{ $t("add_zone") }}
+        </button>
+      </div>
     </div>
   </div>
   <div class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center">
@@ -74,29 +199,6 @@
     id="action-buttons"
     v-if="signedState !== 'signed'"
   >
-    <div class="row mb-3">
-      <div class="col-12 d-flex justify-content-end">
-        <div class="col-4 col-xl-3 gap-2 d-grid">
-          <button
-            v-if="adding"
-            class="btn btn-misc btn-cancel me-2 btn-sm"
-            @click="removeNewZone()"
-          >
-            {{ $t("remove_sign_zone") }}
-          </button>
-        </div>
-        <div class="col-4 gap-2 d-grid">
-          <button
-            class="btn btn-create btn-sm"
-            :class="{ active: canvasEvent === 'add' }"
-            @click="toggleAddZone()"
-          >
-            {{ $t("add_sign_zone") }}
-          </button>
-        </div>
-      </div>
-    </div>
-
     <div class="row">
       <div class="col-4">
         <button
@@ -108,22 +210,6 @@
         </button>
       </div>
       <div class="col-8 d-flex justify-content-end">
-        <button
-          class="btn btn-misc me-2"
-          :hidden="!userSignatureZone"
-          @click="undoSign"
-          v-if="signature.zones.length > 1"
-        >
-          {{ $t("choose_another_signature") }}
-        </button>
-        <button
-          class="btn btn-misc me-2"
-          :hidden="!userSignatureZone"
-          @click="undoSign"
-          v-else
-        >
-          {{ $t("cancel") }}
-        </button>
         <a class="btn btn-delete" :href="getReturnPath()">
           {{ $t("cancel_signing") }}
         </a>
@@ -455,6 +541,7 @@ const undoSign = async () => {
   setTimeout(() => drawAllZones(page.value), 200);
   userSignatureZone.value = null;
   adding.value = false;
+  canvasEvent.value = "select";
 };
 
 const toggleAddZone = () => {
@@ -464,7 +551,6 @@ const toggleAddZone = () => {
 };
 
 const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
-  userSignatureZone.value = null;
   const BOX_WIDTH = 180;
   const BOX_HEIGHT = 90;
   const PDFPageHeight = canvas.height;
@@ -490,6 +576,7 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
     },
   };
   signature.zones.push(newZone);
+  userSignatureZone.value = newZone;
 
   await setPage(page.value);
   setTimeout(() => drawAllZones(page.value), 200);
@@ -497,15 +584,6 @@ const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
   adding.value = true;
 };
 
-const removeNewZone = async () => {
-  signature.zones = signature.zones.filter((z) => z.index !== null);
-  userSignatureZone.value = null;
-  await setPage(page.value);
-  setTimeout(() => drawAllZones(page.value), 200);
-  canvasEvent.value = "select";
-  adding.value = false;
-};
-
 const getReturnPath = () =>
   window.location.search
     ? window.location.search.split("?returnPath=")[1] ??
@@ -527,9 +605,10 @@ div#action-buttons {
 }
 div.pdf-tools {
   background-color: #f3f3f3;
-  @media (min-width: 1200px) {
+  font-size: 0.8rem;
-    background: none;
+  @media (min-width: 1400px) {
-    border: none !important;
+    // background: none;
+    // border: none !important;
   }
 }
 div.turn-page {

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

@@ -10,14 +10,18 @@ const appMessages = {
         you_are_going_to_sign: 'Vous allez signer le document',
         signature_confirmation: 'Confirmation de la signature',
         sign: 'Signer',
-        choose_another_signature: 'Choisir une autre zone de signature',
+        choose_another_signature: 'Choisir une autre zone',
         cancel: 'Annuler',
         cancel_signing: 'Refuser de signer',
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
+        add_sign_zone: 'Ajouter une zone de signature',
+        last_zone: 'Zone précédente',
+        next_zone: 'Zone suivante',
+        add_zone: 'Ajouter une zone',
+        another_zone: 'Autre zone',
         electronic_signature_in_progress: 'Signature électronique en cours...',
         loading: 'Chargement...',
-        add_sign_zone: 'Ajouter une zone de signature',
         remove_sign_zone: 'Enlever la zone',
     }
 }