Merge pull request #3925 from Ocelot-Social-Community/supported-img-formats

feat: 🍰 Show Supported Image Formats Implemented

webapp/assets/_new/styles/tokens.scss

@@ -279,7 +279,7 @@ $size-avatar-large: 114px;
 $size-image-max-height: 2000px;
 $size-image-cropper-max-height: 600px;
 $size-image-cropper-min-height: 400px;
-$size-image-uploader-min-height: 200px;
+$size-image-uploader-min-height: 250px;
 
 /**
  * @tokens Size Icons

webapp/components/ImageUploader/ImageUploader.vue

@@ -20,6 +20,9 @@
         :title="$t('actions.delete')"
         @click.stop="deleteImage"
       />
+      <div v-if="!hasImage" class="supported-formats">
+        {{ $t('contribution.teaserImage.supportedFormats') }}
+      </div>
     </vue-dropzone>
     <div v-show="showCropper" class="crop-overlay">
       <img id="cropping-image" />
@@ -195,6 +198,11 @@ export default {
       right: $space-small;
       z-index: $z-index-surface;
     }
+
+    > .supported-formats {
+      margin-top: 150px;
+      font-weight: bold;
+    }
   }
 }
 </style>

webapp/locales/de.json

@@ -258,7 +258,8 @@
     "newPost": "Erstelle einen neuen Beitrag",
     "success": "Gespeichert!",
     "teaserImage": {
-      "cropperConfirm": "Bestätigen"
+      "cropperConfirm": "Bestätigen",
+      "supportedFormats": "Füge ein Bild im Dateiformat JPG, PNG oder GIF ein"
     },
     "title": "Titel"
   },

webapp/locales/en.json

@@ -258,7 +258,8 @@
     "newPost": "Create a new Post",
     "success": "Saved!",
     "teaserImage": {
-      "cropperConfirm": "Confirm"
+      "cropperConfirm": "Confirm",
+      "supportedFormats": "Insert a picture of file format JPG , PNG or GIF"
     },
     "title": "Title"
   },

webapp/locales/es.json

@@ -256,7 +256,8 @@
     "newPost": "Crear una nueva contribución",
     "success": "¡Guardado!",
     "teaserImage": {
-      "cropperConfirm": "Confirmar"
+      "cropperConfirm": "Confirmar",
+      "supportedFormats": "Insertar una imagen de formato de archivo JPG, PNG o GIF"
     },
     "title": "Título"
   },

webapp/locales/fr.json

@@ -256,7 +256,8 @@
     "newPost": "Créer un nouveau Post",
     "success": "Enregistré!",
     "teaserImage": {
-      "cropperConfirm": "Confirmer"
+      "cropperConfirm": "Confirmer",
+      "supportedFormats": "Insérer une image au format de fichier JPG, PNG ou GIF"
     },
     "title": "Titre"
   },

webapp/locales/it.json

@@ -261,7 +261,8 @@
     "newPost": "",
     "success": "",
     "teaserImage": {
-      "cropperConfirm": "Confermare"
+      "cropperConfirm": "Confermare",
+      "supportedFormats": "Inserisci un'immagine in formato file JPG, PNG o GIF"
     },
     "title": ""
   },

webapp/locales/nl.json

@@ -68,7 +68,8 @@
     "delete": "Bijdrage verwijderen",
     "edit": "Bijdrage bewerken",
     "teaserImage": {
-      "cropperConfirm": "Bevestigen"
+      "cropperConfirm": "Bevestigen",
+      "supportedFormats": "Voeg een afbeelding in met het bestandsformaat JPG, PNG of GIF"
     }
   },
   "disable": {

webapp/locales/pl.json

@@ -119,7 +119,8 @@
     "newPost": "Utwórz nowy wpis",
     "success": "Zapisano!",
     "teaserImage": {
-      "cropperConfirm": "Potwierdzać"
+      "cropperConfirm": "Potwierdzać",
+      "supportedFormats": "Wstaw zdjęcie w formacie pliku JPG, PNG lub GIF"
     }
   },
   "delete": {

webapp/locales/pt.json

@@ -252,7 +252,8 @@
     "newPost": "Criar uma nova publicação",
     "success": "Salvo!",
     "teaserImage": {
-      "cropperConfirm": "Confirmar"
+      "cropperConfirm": "Confirmar",
+      "supportedFormats": "Insira uma imagem do formato JPG, PNG ou GIF"
     },
     "title": "Título"
   },

webapp/locales/ru.json

@@ -256,7 +256,8 @@
     "newPost": "Создать пост",
     "success": "Сохранено!",
     "teaserImage": {
-      "cropperConfirm": "Подтвердить"
+      "cropperConfirm": "Подтвердить",
+      "supportedFormats": "Вставьте изображение файла формата JPG, PNG или GIF"
     },
     "title": "Заголовок"
   },