Merge branch 'fix/ui-ux-fixs' into 'develop'

fix : UI / UX See merge request geovisio/website!120
2024-01-29 16:20:50 +00:00
parent 5d83e9df13 e2df50e18f
commit fe68941ea9
9 changed files with 216 additions and 118 deletions
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -55,6 +55,17 @@ defineProps({
    visibility: visible;
  }
 }
+.row-reverse {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0;
+  font-size: toRem(1.2);
+  .icon {
+    margin-left: toRem(0.5);
+    margin-right: 0;
+  }
+}
 .button--black {
  color: var(--white);
  background-color: var(--black);
@@ -84,17 +95,28 @@ defineProps({
  color: var(--white);
 }
 .button--red {
-  color: var(--red);
-  background-color: transparent;
-  border: toRem(0.1) solid var(--red);
+  color: var(--white);
+  background-color: var(--red-pale);
+  border: toRem(0.1) solid var(--red-pale);
  .icon {
    margin-right: 0;
    font-size: toRem(1.4);
-    color: var(--red);
+    color: var(--white);
  }
  .text {
    margin-left: toRem(1);
  }
+  &.background-white {
+    color: var(--red-pale);
+    .icon {
+      color: var(--red-pale);
+    }
+    &.disabled {
+      .icon {
+        color: var(--grey-pale);
+      }
+    }
+  }
 }
 .button--white {
  color: var(--blue);
@@ -131,6 +153,14 @@ defineProps({
 .background-white {
  background-color: var(--white);
 }
+.link--blue {
+  color: var(--blue);
+  text-decoration: underline;
+  .icon {
+    font-size: toRem(1.4);
+    color: var(--blue);
+  }
+}
 .link--grey {
  color: var(--grey-semi-dark);
  .icon {
@@ -146,11 +176,11 @@ defineProps({
  }
 }
 .link--red {
-  color: var(--red);
-  background-color: var(--white);
+  color: var(--red-pale);
+  text-decoration: underline;
  .icon {
    font-size: toRem(1.4);
-    color: var(--red);
+    color: var(--red-pale);
  }
 }

--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -117,6 +117,12 @@ function triggerButton() {
  color: var(--grey-semi-dark);
  text-decoration: underline;
  font-weight: inherit;
+  font-size: toRem(1.4);
+  .icon {
+    color: var(--grey-semi-dark);
+    font-size: toRem(1.4);
+    margin-right: toRem(0.5);
+  }
 }
 .link--blue-dark {
  color: var(--blue-dark);
--- a/src/components/Viewer.vue
+++ b/src/components/Viewer.vue
@@ -143,6 +143,7 @@ async function setupViewerMap(tiles: string): Promise<void> {
 async function setupMap(tiles: string): Promise<void> {
  let paramsMap: MapInterface
  paramsMap = { minZoom: 7 }
+  //virer
  if (tiles && tiles.length) {
    const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
    paramsMap = {
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -51,6 +51,7 @@
      "sequence_waiting": "Still processing",
      "sequence_hidden": "Hidden",
      "hide_sequence_tooltip": "Hide this sequences",
+      "back_button": "Back to my sequence list",
      "delete_sequence_tooltip": "Permanently delete this sequence",
      "hide_photo_tooltip": "Hide selected pictures",
      "delete_photo_tooltip": "Permanently delete selected pictures",
@@ -83,6 +84,9 @@
      "radio_date_placeholder": "03/01/2024",
      "radio_datetime_placeholder": "03/01/2024 12:00 AM",
      "radio_date": "date",
+      "hide_button": "Hide",
+      "show_button": "Show",
+      "delete_button": "Delete",
      "filter_date_reset_button": "Reset",
      "filter_date_close_button": "Close",
      "no_sequence_found": "No sequence found",
@@ -152,6 +156,8 @@
      "text_import": "Upload your jpg files here. Each picture or series of pictures constitutes a \"sequence\". You can then find them in the \"my pictures\" section and choose to hide, show or delete them.",
      "subtitle_process": "Upload processing",
      "uploading_process": "Upload in progress...",
+      "uploading_cancel": "Cancel sending photos",
+      "cancel_message": "⚠️ Please note, the download will be interrupted if you validate and the sequence will be deleted.",
      "sequence_title": "Sequence ",
      "import": "Uploads",
      "upload_pending": "Upload in progress...",
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -51,6 +51,7 @@
      "sequence_waiting": "En cours de publication",
      "sequence_hidden": "Masquée",
      "hide_sequence_tooltip": "Masque la séquence sur la carte",
+      "back_button": "Retourner à la liste de mes séquences",
      "delete_sequence_tooltip": "Supprime définitivement la séquence",
      "hide_photo_tooltip": "Masque les photos sur la carte",
      "delete_photo_tooltip": "Supprime définitivement les photos",
@@ -82,6 +83,9 @@
      "filter_date_title": "Filtrer par date de prise de vue :",
      "radio_date_placeholder": "2024-01-03",
      "radio_date": "date",
+      "hide_button": "Masquer",
+      "show_button": "Afficher",
+      "delete_button": "Supprimer",
      "filter_date_reset_button": "Réinitialiser",
      "filter_date_close_button": "Fermer",
      "no_sequence_found": "Aucune séquence trouvée",
@@ -91,7 +95,7 @@
      "sequence_creation": "Versement",
      "sequence_creation_tooltip": "Filtre par date de versement",
      "sequence_date_tooltip": "Filtre par date de prise de vue",
-      "reset_filter_button": "Réinitialiser tous les filtres",
+      "reset_filter_button": "Réinitialiser les filtres",
      "filter_bbox_button": "Chercher dans cette zone",
      "sequence_status": "Statut",
      "sequence_published": "Publiée",
@@ -152,6 +156,8 @@
      "text_import": "Déposez ici vos fichiers jpg. Chaque image ou série d’images constitue une « séquence ». Vous pourrez ensuite les retrouver dans la section « mes images » et choisir de les masquer, les afficher ou les supprimer.",
      "subtitle_process": "Traitements de l'import",
      "uploading_process": "Envoi en cours...",
+      "uploading_cancel": "Annuler l'envoi des photos",
+      "cancel_message": "⚠️ Attention, le téléchargement sera interrompu si vous validez et la séquence sera supprimée.",
      "sequence_title": "Séquence du ",
      "import": "Imports",
      "upload_pending": "Transfert en cours...",
--- a/src/locales/hu.json
+++ b/src/locales/hu.json
@@ -51,6 +51,7 @@
      "sequence_waiting": "Feldolgozás alatt",
      "sequence_hidden": "Rejtett",
      "hide_sequence_tooltip": "A sorozat elrejtése",
+      "back_button": "Vissza a sorozatlistámhoz",
      "delete_sequence_tooltip": "A sorozat végleges törlése",
      "hide_photo_tooltip": "A kiválasztott fényképek elrejtése",
      "delete_photo_tooltip": "A kiválasztottt fényképek végleges törlése",
@@ -83,6 +84,9 @@
      "radio_date_placeholder": "03/01/2024",
      "radio_datetime_placeholder": "03/01/2024 12:00 AM",
      "radio_date": "dátum",
+      "hide_button": "Elrejt",
+      "show_button": "Előadás",
+      "delete_button": "Töröl",
      "filter_date_reset_button": "Visszaállítás",
      "filter_date_close_button": "Bezárás",
      "no_sequence_found": "Nem található felvétel",
@@ -152,6 +156,8 @@
      "text_import": "Ide töltse fel a JPG-fájljait. Minden kép vagy képsorozat egy „sorozatot” alkot. Megtalálhatja azokat a „saját fényképek” szakaszban, és elrejtheti, megjelenítheti vagy törölheti azokat.",
      "subtitle_process": "Feltöltés feldolgozása",
      "uploading_process": "Feltöltés folyamatban…",
+      "uploading_cancel": "Fényképek küldésének megszakítása",
+      "cancel_message": "⚠️ Felhívjuk figyelmét, hogy a letöltés megszakad, ha érvényesíti, és a sorozat törlődik.",
      "sequence_title": "Sorozat ",
      "import": "Feltöltések",
      "upload_pending": "Feltöltés folyamatban…",
--- a/src/views/MySequenceView.vue
+++ b/src/views/MySequenceView.vue
@@ -2,7 +2,7 @@
  <main :class="['entry-page', { 'menu-is-open': menuIsOpen }]">
    <div class="button-close">
      <Button
-        look="no-text"
+        look="no-text-blue-dark"
        :icon="menuIsOpen ? 'bi bi-chevron-right' : 'bi bi-chevron-left'"
        @trigger="menuIsOpen = !menuIsOpen"
      />
@@ -14,95 +14,105 @@
      />
    </section>
    <div v-if="sequence && !isLoading" class="menu-right">
-      <div class="menu-top" ref="collapseMenu">
-        <div class="header-menu">
-          <button
-            data-bs-target="#collapseTarget"
-            data-bs-toggle="collapse"
-            class="button-collapse"
-            @click="toggleMenu"
+      <div ref="collapseMenu">
+        <div class="back-button">
+          <Link
+            icon="bi bi-arrow-left"
+            :text="$t('pages.sequence.back_button')"
+            :route="{ name: 'my-sequences' }"
+            look="link--grey"
+          />
+        </div>
+        <div class="menu-top">
+          <div class="header-menu">
+            <button
+              data-bs-target="#collapseTarget"
+              data-bs-toggle="collapse"
+              class="button-collapse"
+              @click="toggleMenu"
+            >
+              <div class="wrapper-title">
+                <span :class="[sequence.status, 'sequence-status']">{{
+                  sequenceStatus
+                }}</span>
+                <h1 class="title desktop">
+                  {{ sequence.title }}
+                </h1>
+              </div>
+              <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
+            </button>
+            <h1 class="title responsive">
+              {{ sequence.title }}
+            </h1>
+          </div>
+          <div v-if="isSequenceOwner" class="wrapper-button">
+            <Button
+              :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
+              :text="
+                sequence.status === 'ready'
+                  ? $t('pages.sequence.button_disable')
+                  : $t('pages.sequence.button_enable')
+              "
+              look="button--white background-white"
+              :icon="
+                sequence.status === 'ready' ? 'bi bi-eye-slash' : 'bi bi-eye'
+              "
+              class="disable-button"
+              @trigger="patchCollection"
+            />
+            <Button
+              :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
+              :text="$t('pages.sequence.button_delete')"
+              look="button--red background-white"
+              icon="bi bi-trash"
+              @trigger="deleteCollection"
+            />
+          </div>
+          <div
+            :class="[sequence.status, 'collapse py-2 show']"
+            id="collapseTarget"
          >
-            <div class="wrapper-title">
-              <span :class="[sequence.status, 'sequence-status']">{{
-                sequenceStatus
-              }}</span>
-              <h1 class="title desktop">
-                {{ sequence.title }}
-              </h1>
-            </div>
-            <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
-          </button>
-          <h1 class="title responsive">
-            {{ sequence.title }}
-          </h1>
-        </div>
-        <div v-if="isSequenceOwner" class="wrapper-button">
-          <Button
-            :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
-            :text="
-              sequence.status === 'ready'
-                ? $t('pages.sequence.button_disable')
-                : $t('pages.sequence.button_enable')
-            "
-            look="button--white background-white"
-            :icon="
-              sequence.status === 'ready' ? 'bi bi-eye-slash' : 'bi bi-eye'
-            "
-            class="disable-button"
-            @trigger="patchCollection"
-          />
-          <Button
-            :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
-            :text="$t('pages.sequence.button_delete')"
-            look="button--red background-white"
-            icon="bi bi-trash"
-            @trigger="deleteCollection"
-          />
-        </div>
-        <div
-          :class="[sequence.status, 'collapse py-2 show']"
-          id="collapseTarget"
-        >
-          <div class="block-collapse">
-            <div class="wrapper-info-top">
-              <span v-if="sequence.created"
-                >{{ $t('pages.sequence.created') }}
-                {{
-                  formatDate(new Date(sequence.created), 'Do MMMM YYYY')
-                }}</span
-              >
-              <span v-if="sequence.duration"
-                >{{ $t('pages.sequence.duration') }}
-                {{ sequence.duration }}</span
-              >
-              <span v-if="sequence.taken"
-                >{{ $t('pages.sequence.taken') }}
-                {{ formatDate(sequence.taken, 'Do MMMM YYYY') }}</span
-              >
-            </div>
-            <div class="wrapper-info-top">
-              <span v-if="sequence.extent.temporal.interval[0][0]"
-                >{{ $t('pages.sequence.duration_begin') }}
-                {{
-                  formatDate(
-                    sequence.extent.temporal.interval[0][0],
-                    'Do MMMM YYYY, HH:mm:ss'
-                  )
-                }}</span
-              >
-              <span v-if="sequence.extent.temporal.interval[0][1]"
-                >{{ $t('pages.sequence.duration_end') }}
-                {{
-                  formatDate(
-                    sequence.extent.temporal.interval[0][1],
-                    'Do MMMM YYYY, HH:mm:ss'
-                  )
-                }}</span
-              >
-              <span v-if="sequence.camera"
-                >{{ $t('pages.sequence.camera') }} {{ sequence.camera }} -
-                {{ sequence.cameraModel }}</span
-              >
+            <div class="block-collapse">
+              <div class="wrapper-info-top">
+                <span v-if="sequence.created"
+                  >{{ $t('pages.sequence.created') }}
+                  {{
+                    formatDate(new Date(sequence.created), 'Do MMMM YYYY')
+                  }}</span
+                >
+                <span v-if="sequence.duration"
+                  >{{ $t('pages.sequence.duration') }}
+                  {{ sequence.duration }}</span
+                >
+                <span v-if="sequence.taken"
+                  >{{ $t('pages.sequence.taken') }}
+                  {{ formatDate(sequence.taken, 'Do MMMM YYYY') }}</span
+                >
+              </div>
+              <div class="wrapper-info-top">
+                <span v-if="sequence.extent.temporal.interval[0][0]"
+                  >{{ $t('pages.sequence.duration_begin') }}
+                  {{
+                    formatDate(
+                      sequence.extent.temporal.interval[0][0],
+                      'Do MMMM YYYY, HH:mm:ss'
+                    )
+                  }}</span
+                >
+                <span v-if="sequence.extent.temporal.interval[0][1]"
+                  >{{ $t('pages.sequence.duration_end') }}
+                  {{
+                    formatDate(
+                      sequence.extent.temporal.interval[0][1],
+                      'Do MMMM YYYY, HH:mm:ss'
+                    )
+                  }}</span
+                >
+                <span v-if="sequence.camera"
+                  >{{ $t('pages.sequence.camera') }} {{ sequence.camera }} -
+                  {{ sequence.cameraModel }}</span
+                >
+              </div>
            </div>
          </div>
        </div>
@@ -195,6 +205,7 @@ import { useSequenceStore } from '@/store/sequence'
 import { storeToRefs } from 'pinia'
 import { useCookies } from 'vue3-cookies'
 import Button from '@/components/Button.vue'
+import Link from '@/components/Link.vue'
 import Toast from '@/components/Toast.vue'
 import Pagination from '@/components/Pagination.vue'
 import InputCheckbox from '@/components/InputCheckbox.vue'
@@ -619,6 +630,11 @@ async function patchOrDeleteCollectionItems(
  height: calc(100vh - #{toRem(8)});
  overflow: auto;
 }
+.back-button {
+  width: fit-content;
+  margin-left: toRem(2);
+  margin-top: toRem(2);
+}
 .wrapper-loader {
  display: flex;
  justify-content: center;
@@ -686,21 +702,21 @@ async function patchOrDeleteCollectionItems(
 }
 .sequence-status {
  @include text(xs-r-regular);
-  border-radius: toRem(3);
+  border-radius: toRem(1);
  padding: toRem(0.5) toRem(1);
  margin-right: toRem(1);
  color: var(--white);
  &.ready {
-    background-color: var(--orange);
-    border: toRem(0.1) solid var(--orange);
+    background-color: var(--green);
+    border: toRem(0.1) solid var(--green);
  }
  &.waiting-for-process {
    background-color: var(--yellow);
    border: toRem(0.1) solid var(--yellow);
  }
  &.hidden {
-    background-color: var(--blue-geovisio);
-    border: toRem(0.1) solid var(--blue-geovisio);
+    background-color: var(--red-pale);
+    border: toRem(0.1) solid var(--red-pale);
  }
 }
 .button-collapse {
--- a/src/views/MySequencesView.vue
+++ b/src/views/MySequencesView.vue
@@ -150,7 +150,7 @@
                />
              </div>
            </div>
-            <div>
+            <div class="sequence-title">
              <span>
                {{ item.title }}
              </span>
@@ -166,14 +166,14 @@
                {{
                  formatDate(
                    item.extent.temporal.interval[0][0],
-                    'Do MMMM YYYY HH:mm:ss'
+                    'Do MMM YYYY HH:mm:ss'
                  )
                }}
              </span>
            </div>
            <div>
              <span>
-                {{ formatDate(item.created, 'Do MMMM YYYY HH:mm:ss') }}
+                {{ formatDate(item.created, 'Do MMM YYYY HH:mm:ss') }}
              </span>
            </div>
            <div>
@@ -184,8 +184,8 @@
          </router-link>
          <div class="wrapper-button">
            <Button
-              :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
-              look="button--white background-white no-text"
+              :text="sequenceButtonText(item['geovisio:status'])"
+              look="link--blue row-reverse"
              :icon="
                item['geovisio:status'] === 'ready'
                  ? 'bi bi-eye-slash'
@@ -195,8 +195,8 @@
              @trigger="patchCollection(item)"
            />
            <Button
-              :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
-              look="button--red background-white no-text"
+              :text="$t('pages.sequences.delete_button')"
+              look="link--red row-reverse"
              icon="bi bi-trash"
              @trigger="deleteCollection(item)"
            />
@@ -409,6 +409,10 @@ function sequenceStatus(status: string): string {
  if (status === 'hidden') return t('pages.sequences.sequence_hidden')
  return t('pages.sequences.sequence_waiting')
 }
+function sequenceButtonText(status: string): string {
+  if (status === 'hidden') return t('pages.sequences.show_button')
+  return t('pages.sequences.hide_button')
+}
 function onResizeMap(width: any): void {
  if (width && collectionBbox.value.length) {
    width.value = width
@@ -481,6 +485,7 @@ function goToSequence(sequence: SequenceLinkInterface): void {
      sequence.extent.spatial.bbox[0][1]
    ],
    zoom: 10,
+    //peut être à virer
    duration: 0
  })
 }
@@ -671,19 +676,14 @@ watchEffect(() => {
  align-items: center;
  margin: auto;
  background-color: var(--blue-pale);
-  padding: toRem(2);
+  padding-right: toRem(2);
+  padding-left: toRem(2);
  &:nth-child(2n) {
    background-color: var(--white);
  }
  &:hover {
-    background-color: var(--blue);
+    background-color: var(--blue-semi);
    color: var(--white);
-    .button-item {
-      & > *,
-      & > :nth-child(2) {
-        color: var(--white);
-      }
-    }
  }
 }
 .wrapper-button {
@@ -732,6 +732,9 @@ watchEffect(() => {
  height: toRem(15);
  z-index: 1;
 }
+.sequence-title {
+  text-decoration: underline;
+}
 .ready {
  color: var(--green);
 }
--- a/src/views/UploadPicturesView.vue
+++ b/src/views/UploadPicturesView.vue
@@ -63,6 +63,13 @@
                class="uploading-img"
              />
              <span>{{ $t('pages.upload.uploading_process') }}</span>
+              <div class="cancel-button">
+                <Button
+                  :text="$t('pages.upload.uploading_cancel')"
+                  look="button--red"
+                  @trigger="cancelUpload"
+                />
+              </div>
              <span class="loader-text-warning">{{
                $t('pages.upload.leave_message')
              }}</span>
@@ -127,6 +134,7 @@ import {
 } from '@/views/utils/upload/request'
 import { sortByName } from '@/views/utils/upload/index'
 import authConfig from '../composables/auth'
+import { deleteACollection } from '@/views/utils/sequence/request'

 const { authConf } = authConfig()
 const { t } = useI18n()
@@ -213,6 +221,16 @@ function addPictures(value: FileList): void {
  loadPercentage.value = '0%'
  uploadPicture()
 }
+async function cancelUpload(): Promise<void> {
+  const answer = window.confirm(t('pages.upload.cancel_message'))
+  if (answer) {
+    pictures.value = []
+    isLoading.value = false
+    if (uploadedSequence.value) {
+      await deleteACollection(uploadedSequence.value.id)
+    }
+  }
+}
 async function uploadPicture(): Promise<void> {
  if (!pictures.value || !pictures.value.length) {
    return
@@ -236,6 +254,9 @@ async function uploadPicture(): Promise<void> {
  }
  let i = 0
  for (let el of picturesToUpload) {
+    if (pictures.value.length === 0) {
+      break
+    }
    const body = new FormData()
    i++
    body.append('position', i.toString())
@@ -343,10 +364,13 @@ h3 {
 .uploading-img {
  height: toRem(20);
 }
+.cancel-button {
+  margin-top: toRem(1);
+}
 .loader-text-warning {
  text-align: center;
  @include text(s-r-regular);
-  color: var(--orange);
+  color: var(--red-pale);
  margin-top: toRem(1);
  width: toRem(31);
 }