From e2df50e18f721e2abeae320a6e0c2eccd486740f Mon Sep 17 00:00:00 2001 From: Jean Andreani Date: Mon, 29 Jan 2024 16:20:50 +0000 Subject: [PATCH] fix : UI / UX --- src/components/Button.vue | 44 +++++-- src/components/Link.vue | 6 + src/components/Viewer.vue | 1 + src/locales/en.json | 6 + src/locales/fr.json | 8 +- src/locales/hu.json | 6 + src/views/MySequenceView.vue | 204 +++++++++++++++++-------------- src/views/MySequencesView.vue | 33 ++--- src/views/UploadPicturesView.vue | 26 +++- 9 files changed, 216 insertions(+), 118 deletions(-) diff --git a/src/components/Button.vue b/src/components/Button.vue index 9e6a180..f818966 100644 --- 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); } } diff --git a/src/components/Link.vue b/src/components/Link.vue index 85f53ab..9777c57 100644 --- 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); diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue index f7fd403..f7e85c4 100644 --- a/src/components/Viewer.vue +++ b/src/components/Viewer.vue @@ -143,6 +143,7 @@ async function setupViewerMap(tiles: string): Promise { async function setupMap(tiles: string): Promise { let paramsMap: MapInterface paramsMap = { minZoom: 7 } + //virer if (tiles && tiles.length) { const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles paramsMap = { diff --git a/src/locales/en.json b/src/locales/en.json index f5983cd..c5af2ee 100644 --- 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...", diff --git a/src/locales/fr.json b/src/locales/fr.json index 549d82b..33b9e93 100644 --- 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...", diff --git a/src/locales/hu.json b/src/locales/hu.json index eb58934..9146a24 100644 --- 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…", diff --git a/src/views/MySequenceView.vue b/src/views/MySequenceView.vue index 65079cd..e7ac89b 100644 --- a/src/views/MySequenceView.vue +++ b/src/views/MySequenceView.vue @@ -2,7 +2,7 @@
+

+ {{ sequence.title }} +

+
+
+
+
-
- {{ - sequenceStatus - }} -

- {{ sequence.title }} -

-
- - -

- {{ sequence.title }} -

-
-
-
-
-
-
- {{ $t('pages.sequence.created') }} - {{ - formatDate(new Date(sequence.created), 'Do MMMM YYYY') - }} - {{ $t('pages.sequence.duration') }} - {{ sequence.duration }} - {{ $t('pages.sequence.taken') }} - {{ formatDate(sequence.taken, 'Do MMMM YYYY') }} -
-
- {{ $t('pages.sequence.duration_begin') }} - {{ - formatDate( - sequence.extent.temporal.interval[0][0], - 'Do MMMM YYYY, HH:mm:ss' - ) - }} - {{ $t('pages.sequence.duration_end') }} - {{ - formatDate( - sequence.extent.temporal.interval[0][1], - 'Do MMMM YYYY, HH:mm:ss' - ) - }} - {{ $t('pages.sequence.camera') }} {{ sequence.camera }} - - {{ sequence.cameraModel }} +
+
+ {{ $t('pages.sequence.created') }} + {{ + formatDate(new Date(sequence.created), 'Do MMMM YYYY') + }} + {{ $t('pages.sequence.duration') }} + {{ sequence.duration }} + {{ $t('pages.sequence.taken') }} + {{ formatDate(sequence.taken, 'Do MMMM YYYY') }} +
+
+ {{ $t('pages.sequence.duration_begin') }} + {{ + formatDate( + sequence.extent.temporal.interval[0][0], + 'Do MMMM YYYY, HH:mm:ss' + ) + }} + {{ $t('pages.sequence.duration_end') }} + {{ + formatDate( + sequence.extent.temporal.interval[0][1], + 'Do MMMM YYYY, HH:mm:ss' + ) + }} + {{ $t('pages.sequence.camera') }} {{ sequence.camera }} - + {{ sequence.cameraModel }} +
@@ -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 { diff --git a/src/views/MySequencesView.vue b/src/views/MySequencesView.vue index 21ef4ed..e9a0ede 100644 --- a/src/views/MySequencesView.vue +++ b/src/views/MySequencesView.vue @@ -150,7 +150,7 @@ />
-
+
{{ item.title }} @@ -166,14 +166,14 @@ {{ formatDate( item.extent.temporal.interval[0][0], - 'Do MMMM YYYY HH:mm:ss' + 'Do MMM YYYY HH:mm:ss' ) }}
- {{ formatDate(item.created, 'Do MMMM YYYY HH:mm:ss') }} + {{ formatDate(item.created, 'Do MMM YYYY HH:mm:ss') }}
@@ -184,8 +184,8 @@
{{ $t('pages.upload.leave_message') }} @@ -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 { + 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 { if (!pictures.value || !pictures.value.length) { return @@ -236,6 +254,9 @@ async function uploadPicture(): Promise { } 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); }