style(front) : mise en forme des modales de pesée (ERP-189)

- Modale pesée manuelle : titre UPPERCASE, marges 24px haut / 28px latéral /
  12px titre-bordure / 36px bordure-formulaire, bordure insérée sous le header,
  champs resserrés (gap-2), Annuler retiré, Enregistrer centré.
- Modale pesée bascule : question portée par le titre (corps sans texte),
  Annuler retiré, Valider centré.
- Marge bottom de 24px sous le bouton dans les deux modales.
- Nettoyage des clés i18n devenues inutiles (cancel / confirmMessage).
This commit is contained in:
2026-06-23 18:01:17 +02:00
parent a650fe8132
commit 681fca9aeb
3 changed files with 33 additions and 44 deletions
+1 -4
View File
@@ -729,9 +729,7 @@
"weighbridge": {
"auto": "Pesée bascule",
"manual": "Pesée manuelle",
"confirmTitle": "Pesée bascule",
"confirmMessage": "Êtes-vous sûr de vouloir déclencher une pesée ?",
"cancel": "Annuler",
"confirmTitle": "Êtes-vous sûr de vouloir déclencher une pesée ?",
"validate": "Valider",
"unavailable": "Pont bascule indisponible — passez en pesée manuelle."
},
@@ -740,7 +738,6 @@
"weight": "Poids (Kg)",
"number": "Numéro de pesée",
"save": "Enregistrer",
"cancel": "Annuler",
"weightRequired": "Le poids est obligatoire.",
"numberRequired": "Le numéro de pesée est obligatoire."
}
@@ -112,22 +112,16 @@
</template>
<!-- ── Modal « Confirmation pesée bascule » (RG-5.06) ──────────────────-->
<MalioModal v-model="autoModal.open" modal-class="max-w-md">
<!-- La question est portée par le titre ; pas de texte de corps. Bouton
« Valider » seul, centré (l'annulation se fait via la croix). -->
<MalioModal v-model="autoModal.open" modal-class="max-w-md" footer-class="justify-center pb-6">
<template #header>
<h2 class="text-[24px] font-bold">{{ t('logistique.weighingTickets.form.weighbridge.confirmTitle') }}</h2>
</template>
<p>{{ t('logistique.weighingTickets.form.weighbridge.confirmMessage') }}</p>
<p v-if="autoModal.error" class="mt-4 text-m-danger">{{ autoModal.error }}</p>
<p v-if="autoModal.error" class="text-m-danger">{{ autoModal.error }}</p>
<template #footer>
<MalioButton
variant="secondary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.weighbridge.cancel')"
@click="autoModal.open = false"
/>
<MalioButton
variant="primary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.weighbridge.validate')"
:disabled="autoModal.loading"
@click="confirmAuto"
@@ -136,11 +130,20 @@
</MalioModal>
<!-- ── Modal « Pesée manuelle » ────────────────────────────────────────-->
<MalioModal v-model="manualModal.open" modal-class="max-w-md">
<!-- Marges : titre UPPERCASE à 24px du haut (pt-6), 28px horizontaux (mx-7 header
/ px-7 body+footer), bordure à 12px sous le titre (pb-3) et insérée (mx-7,
ne touche pas les bords), formulaire à 36px sous la bordure (pt-9). -->
<MalioModal
v-model="manualModal.open"
modal-class="max-w-md"
header-class="mx-7 px-0 pt-6 pb-3 border-b border-black"
body-class="px-7 pt-9"
footer-class="px-7 justify-center pb-6"
>
<template #header>
<h2 class="text-[24px] font-bold">{{ t('logistique.weighingTickets.form.manual.title') }}</h2>
<h2 class="text-[24px] font-bold uppercase">{{ t('logistique.weighingTickets.form.manual.title') }}</h2>
</template>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<!-- Poids : champ texte verrouillé sur les chiffres (comme le formulaire). -->
<MalioInputText
v-model="manualModal.weight"
@@ -157,15 +160,8 @@
/>
</div>
<template #footer>
<MalioButton
variant="secondary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.manual.cancel')"
@click="manualModal.open = false"
/>
<MalioButton
variant="primary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.manual.save')"
:disabled="manualModal.loading"
@click="confirmManual"
@@ -114,24 +114,18 @@
</div>
<!-- ── Modal « Confirmation pesée bascule » (RG-5.06) ──────────────────-->
<MalioModal v-model="autoModal.open" modal-class="max-w-md">
<!-- La question est portée par le titre ; pas de texte de corps. Bouton
« Valider » seul, centré (l'annulation se fait via la croix). -->
<MalioModal v-model="autoModal.open" modal-class="max-w-md" footer-class="justify-center pb-6">
<template #header>
<h2 class="text-[24px] font-bold">{{ t('logistique.weighingTickets.form.weighbridge.confirmTitle') }}</h2>
</template>
<p>{{ t('logistique.weighingTickets.form.weighbridge.confirmMessage') }}</p>
<!-- Erreur de pont indisponible affichée INLINE dans la modal + invite
à la pesée manuelle (RG-5.06). -->
<p v-if="autoModal.error" class="mt-4 text-m-danger">{{ autoModal.error }}</p>
<p v-if="autoModal.error" class="text-m-danger">{{ autoModal.error }}</p>
<template #footer>
<MalioButton
variant="secondary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.weighbridge.cancel')"
@click="autoModal.open = false"
/>
<MalioButton
variant="primary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.weighbridge.validate')"
:disabled="autoModal.loading"
@click="confirmAuto"
@@ -140,11 +134,20 @@
</MalioModal>
<!-- ── Modal « Pesée manuelle » ────────────────────────────────────────-->
<MalioModal v-model="manualModal.open" modal-class="max-w-md">
<!-- Marges : titre UPPERCASE à 24px du haut (pt-6), 28px horizontaux (mx-7 header
/ px-7 body+footer), bordure à 12px sous le titre (pb-3) et insérée (mx-7,
ne touche pas les bords), formulaire à 36px sous la bordure (pt-9). -->
<MalioModal
v-model="manualModal.open"
modal-class="max-w-md"
header-class="mx-7 px-0 pt-6 pb-3 border-b border-black"
body-class="px-7 pt-9"
footer-class="px-7 justify-center pb-6"
>
<template #header>
<h2 class="text-[24px] font-bold">{{ t('logistique.weighingTickets.form.manual.title') }}</h2>
<h2 class="text-[24px] font-bold uppercase">{{ t('logistique.weighingTickets.form.manual.title') }}</h2>
</template>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<!-- Poids : champ texte verrouillé sur les chiffres (comme le formulaire). -->
<MalioInputText
v-model="manualModal.weight"
@@ -161,15 +164,8 @@
/>
</div>
<template #footer>
<MalioButton
variant="secondary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.manual.cancel')"
@click="manualModal.open = false"
/>
<MalioButton
variant="primary"
button-class="flex-1"
:label="t('logistique.weighingTickets.form.manual.save')"
:disabled="manualModal.loading"
@click="confirmManual"