Merge pull request #1389 from geoadmin/feat-PB-1866-make-delete-modal-easier-to-understand

PB-1866: Make delete drawing window easier to understand

Author: pakb

packages/mapviewer/src/modules/drawing/components/DrawingToolbox.vue

@@ -163,7 +163,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
         />
         <div :class="[{ 'drawing-toolbox-closed': !drawMenuOpen }, 'drawing-toolbox']">
             <div
-                class="card text-center drawing-toolbox-content shadow-lg rounded-bottom rounded-top-0 rounded-start-0"
+                class="card drawing-toolbox-content rounded-bottom rounded-top-0 rounded-start-0 text-center shadow-lg"
                 :class="{ 'rounded-bottom-0': isPhoneMode }"
             >
                 <GeoadminTooltip
@@ -173,7 +173,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                 >
                     <div
                         v-if="online"
-                        class="d-flex justify-content-center align-items-center gap-2 mt-3 mx-4"
+                        class="d-flex justify-content-center align-items-center mx-4 mt-3 gap-2"
                     >
                         <label
                             for="drawing-name"
@@ -282,7 +282,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                         class="row mt-2"
                     >
                         <div
-                            class="col text-center text-muted"
+                            class="col text-muted text-center"
                             data-cy="drawing-toolbox-disclaimer"
                         >
                             <!-- eslint-disable vue/no-v-html-->
@@ -297,7 +297,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                 class="text-center"
             >
                 <button
-                    class="button-open-close-draw-menu btn btn-dark m-auto ps-4 pe-4 rounded-0 rounded-bottom"
+                    class="button-open-close-draw-menu btn btn-dark rounded-0 rounded-bottom m-auto pe-4 ps-4"
                     data-cy="menu-button"
                     @click="drawMenuOpen = !drawMenuOpen"
                 >
@@ -310,9 +310,20 @@ const debounceSaveDrawingName = debounce(async (newName) => {
             v-if="showClearConfirmationModal"
             show-confirmation-buttons
             fluid
+            confirm-key="confirm_delete"
+            confirm-icon="far fa-trash-alt"
             @close="onCloseClearConfirmation"
         >
-            {{ t('confirm_remove_all_features') }}
+            <div class="mb-2">
+                {{ t('confirm_remove_all_features') }}
+            </div>
+            <div class="alert alert-warning">
+                <FontAwesomeIcon
+                    class="me-1"
+                    icon="warning"
+                />
+                {{ t('confirm_no_cancel') }}
+            </div>
         </ModalWithBackdrop>
         <ModalWithBackdrop
             v-if="showShareModal"

packages/mapviewer/src/modules/i18n/locales/de.json

@@ -88,7 +88,9 @@
     "cms_release_url": "https://www.geo.admin.ch/de/#Neue-Daten-und-Aktualisierungen",
     "commune": "Gemeinde",
     "compare": "Vergleichen",
-    "confirm_remove_all_features": "Wollen Sie wirklich alle Objekte löschen?",
+    "confirm_delete": "Alles löschen",
+    "confirm_no_cancel": "Dieser Vorgang kann nicht rückgängig gemacht werden.",
+    "confirm_remove_all_features": "Möchten Sie wirklich Ihre gesamte Zeichnung löschen?",
     "confirm_remove_selected_features": "Wollen Sie wirklich alle selektierten Objekte löschen?",
     "connect": "Verbinden",
     "contact_us": "Kontakt",

packages/mapviewer/src/modules/i18n/locales/en.json

@@ -88,7 +88,9 @@
     "cms_release_url": "https://www.geo.admin.ch/en/#New-data-and-updates ",
     "commune": "City",
     "compare": "Compare",
-    "confirm_remove_all_features": "Do you really want to delete all features?",
+    "confirm_delete": "Delete everything",
+    "confirm_no_cancel": " This action can't be cancelled.",
+    "confirm_remove_all_features": "Do you really want to delete your entire drawing?",
     "confirm_remove_selected_features": "Do you really want to delete the selected features?",
     "connect": "Connect",
     "contact_us": "Contact",

packages/mapviewer/src/modules/i18n/locales/fr.json

@@ -88,7 +88,9 @@
     "cms_release_url": "https://www.geo.admin.ch/fr/#Nouvelles-données-et-mises-à-jour",
     "commune": "Commune",
     "compare": "Comparer",
-    "confirm_remove_all_features": "Voulez-vous vraiment effacer tous les objets?",
+    "confirm_delete": "Tout effacer",
+    "confirm_no_cancel": " Cette action ne peut pas être annulée.",
+    "confirm_remove_all_features": "Voulez-vous vraiment supprimer l'intégralité de votre dessin ?",
     "confirm_remove_selected_features": "Voulez-vous vraiment effacer les objets sélectionnés?",
     "connect": "Connecter",
     "contact_us": "Contact",

packages/mapviewer/src/modules/i18n/locales/it.json

@@ -88,7 +88,9 @@
     "cms_release_url": "https://www.geo.admin.ch/it/#Nuovi-dati-e-aggiornamenti ",
     "commune": "Comune",
     "compare": "Confrontare",
-    "confirm_remove_all_features": "Volete veramente cancellare tutti gli oggetti?",
+    "confirm_delete": "Elimina tutto",
+    "confirm_no_cancel": " Questa azione non potrà essere annullata.",
+    "confirm_remove_all_features": "È sicuro di voler eliminare l'intero disegno?",
     "confirm_remove_selected_features": "Volete veramente cancellare gli oggetti selezionati?",
     "connect": "Connessione",
     "contact_us": "Contatto",

packages/mapviewer/src/modules/i18n/locales/rm.json

@@ -88,7 +88,9 @@
     "cms_release_url": "https://www.geo.admin.ch/de/#Neue-Daten-und-Aktualisierungen",
     "commune": "Vischnanca",
     "compare": "Confruntar",
-    "confirm_remove_all_features": "Vulais Vus propi stizzar tut ils objects?",
+    "confirm_delete": "Stizzar tut",
+    "confirm_no_cancel": " Quest'acziun na po betg vegnir revocada.",
+    "confirm_remove_all_features": "Ès Vus segir che Vus vulais stizzar tut il design?",
     "confirm_remove_selected_features": "Stizzar tut ils objects?",
     "connect": "Connectar",
     "contact_us": "Contact",

packages/mapviewer/src/utils/components/ModalWithBackdrop.vue

@@ -37,9 +37,25 @@ const { title, allowPrint, showConfirmationButtons, fluid, headerPrimary, top, h
             type: Boolean,
             default: false,
         },
+        confirmKey: {
+            type: String,
+            default: 'success',
+        },
+        cancelKey: {
+            type: String,
+            default: 'cancel',
+        },
+        confirmIcon: {
+            type: String,
+            default: null,
+        },
+        cancelIcon: {
+            type: String,
+            default: null,
+        },
         /**
-         * Hide the modal with backdrop, can be used to temporarily hide the modal without loosing its
-         * content
+         * Hide the modal with backdrop, can be used to temporarily hide the modal without loosing
+         * its content
          */
         hide: {
             type: Boolean,
@@ -69,7 +85,7 @@ function onHideParentModal(hide) {
 <template>
     <teleport to="#main-component">
         <!-- Must teleport inside main-component in order for dynamic outlines to work and to be
-        sure that it is always on top of the reset. -->
+        sure that it is always on top of the rest. -->
         <div
             v-show="!hide && !hideForPrint"
             data-cy="modal-with-backdrop"
@@ -94,11 +110,11 @@ function onHideParentModal(hide) {
                 >
                     <div
                         class="card-header d-flex align-middle"
-                        :class="{ 'bg-primary text-white border-primary': headerPrimary }"
+                        :class="{ 'bg-primary border-primary text-white': headerPrimary }"
                     >
                         <span
                             v-if="title"
-                            class="flex-grow-1 text-start text-truncate"
+                            class="flex-grow-1 text-truncate text-start"
                             data-cy="modal-with-backdrop-title"
                         >
                             {{ title }}
@@ -122,27 +138,35 @@ function onHideParentModal(hide) {
                     </div>
                     <div
                         ref="modalContent"
-                        class="card-body pt-3 ps-4 pe-4"
+                        class="card-body pe-4 ps-4 pt-3"
                         data-cy="modal-content"
                     >
                         <slot />
                         <div
                             v-if="showConfirmationButtons"
-                            class="mt-1 d-flex justify-content-end"
+                            class="d-flex justify-content-end mt-1"
                         >
                             <button
                                 class="btn btn-light me-2"
                                 data-cy="modal-cancel-button"
                                 @click.stop="onClose(false)"
                             >
-                                {{ t('cancel') }}
+                                <FontAwesomeIcon
+                                    v-if="!!cancelIcon"
+                                    :icon="cancelIcon"
+                                ></FontAwesomeIcon>
+                                {{ t(cancelKey) }}
                             </button>
                             <button
                                 class="btn btn-primary"
                                 data-cy="modal-confirm-button"
                                 @click.stop="onClose(true)"
                             >
-                                {{ t('success') }}
+                                <FontAwesomeIcon
+                                    v-if="!!confirmIcon"
+                                    :icon="confirmIcon"
+                                ></FontAwesomeIcon>
+                                {{ t(confirmKey) }}
                             </button>
                         </div>
                     </div>