From f767fc6a25f3b2590c2dc9656309c4d769ace667 Mon Sep 17 00:00:00 2001 From: sumn2u Date: Sat, 6 Jul 2024 11:55:01 -0500 Subject: [PATCH] design fixes in image upload section --- client/src/ImageUpload/ImageUpload.test.js | 6 ++++++ client/src/ImageUpload/index.jsx | 4 ++-- client/src/Localization/translation-de-DE.js | 4 ++-- client/src/Localization/translation-en-EN.js | 4 ++-- client/src/SetupPage/index.jsx | 19 ++++++++++++++----- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/client/src/ImageUpload/ImageUpload.test.js b/client/src/ImageUpload/ImageUpload.test.js index d8fe732..6bb9e2e 100644 --- a/client/src/ImageUpload/ImageUpload.test.js +++ b/client/src/ImageUpload/ImageUpload.test.js @@ -38,6 +38,12 @@ jest.mock('react-i18next', () => ({ "error.server_connection": "Server connection error", }[key]), }), + Trans: ({ i18nKey, values }) => { + const translations = { + "configuration.image_upload.description": `Upload images to be annotated, or drag and drop images here. Files supported: .jpg, .jpeg, .png and max number of images: ${values.maxImages}`, + }; + return ; + }, })); diff --git a/client/src/ImageUpload/index.jsx b/client/src/ImageUpload/index.jsx index bb6aa53..b49e264 100644 --- a/client/src/ImageUpload/index.jsx +++ b/client/src/ImageUpload/index.jsx @@ -5,7 +5,7 @@ import { Box, Typography, IconButton } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; import axios from 'axios'; import { useSnackbar } from '../SnackbarContext'; -import { useTranslation } from "react-i18next"; +import { useTranslation, Trans } from "react-i18next"; import useMediaQuery from '@mui/material/useMediaQuery'; import config from '../config.js'; @@ -177,7 +177,7 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => { ) : ( - {t("configuration.image_upload.description")} {config.UPLOAD_LIMIT} + )} diff --git a/client/src/Localization/translation-de-DE.js b/client/src/Localization/translation-de-DE.js index 63038d3..7ab1486 100644 --- a/client/src/Localization/translation-de-DE.js +++ b/client/src/Localization/translation-de-DE.js @@ -40,13 +40,13 @@ const translationDeDE = { "configuration.region_types_allowed": "Erlaubte Regionstypen", "configuration.region_types_allowed.description": "Welche Arten von Regionen können auf dem Bild gezeichnet werden.", "configuration.labels": "Verfügbare Labels", - "configuration.labels.option.id": "ID", + "configuration.labels.option.id": "Id", "configuration.labels.option.description": "Beschreibung (optional)", "configuration.labels.description": "Wenn Sie Regionen auf einem Bild kennzeichnen, sind dies die zulässigen Klassifikationen oder Tags.", "configuration.regions": "Standard-Regionstyp", "configuration.regions.description": "Wählen Sie den Standard-Regionstyp, der auf dem Bild gezeichnet werden kann.", "error.configuration.image_upload.max": "Maximale Anzahl von Bildern erreicht", - "configuration.image_upload.description": "Laden Sie Bilder hoch, die annotiert werden sollen, oder ziehen Sie Bilder hierher. Unterstützte Dateien: .jpg, .jpeg, .png und maximale Anzahl von Bildern:", + "configuration.image_upload.description": "Laden Sie Bilder hoch, die annotiert werden sollen, oder ziehen Sie Bilder hierher. Unterstützte Dateien: .jpg, .jpeg, .png und maximale Anzahl von Bildern: {{maxImages}}", "configuration.image_upload.file_drop": "Dateien hierher ziehen", "download.configuration": "Konfiguration", "download.image_mask": "Maskiertes Bild", diff --git a/client/src/Localization/translation-en-EN.js b/client/src/Localization/translation-en-EN.js index 583a705..d2a8f60 100644 --- a/client/src/Localization/translation-en-EN.js +++ b/client/src/Localization/translation-en-EN.js @@ -41,13 +41,13 @@ const translationEnEN = { "configuration.region_types_allowed": "Region Types Allowed", "configuration.region_types_allowed.description": "What types of regions can be drawn on the image.", "configuration.labels": "Available Labels", - "configuration.labels.option.id": "id", + "configuration.labels.option.id": "Id", "configuration.labels.option.description": "Description (optional)", "configuration.labels.description": "If you're labeling regions on an image, these are the allowed classifications or tags.", "configuration.regions": "Default Region Type", "configuration.regions.description": "Choose default region type that can be drawn on the image.", "error.configuration.image_upload.max": "Maximum number of images reached", - "configuration.image_upload.description": "Upload images to be annotated, or drag and drop images here. Files supported: .jpg, .jpeg, .png and max number of images:", + "configuration.image_upload.description": "Upload images to be annotated, or drag and drop images here. Files supported: .jpg, .jpeg, .png and max number of images: {{maxImages}}", "configuration.image_upload.file_drop": "Drop files here", "download.configuration": "Configuration", "download.image_mask": "Masked Image", diff --git a/client/src/SetupPage/index.jsx b/client/src/SetupPage/index.jsx index 8e419e9..93d685f 100644 --- a/client/src/SetupPage/index.jsx +++ b/client/src/SetupPage/index.jsx @@ -153,7 +153,8 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel, showAnnotat {currentTab === "datatype" && ( - + + <> + )} {currentTab === "configure" && ( - + {settings.taskChoice === "image_classification" && ( <> @@ -192,12 +194,19 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel, showAnnotat )} - + )} {currentTab === "images" && ( <> - - + ({ + paddingTop: isSmallDevice ? '0' : '0.5rem', + padding: isSmallDevice ? '1.5rem' : '1rem', + [theme.breakpoints.down('sm')]: { + padding: '1rem', + }, + })} + width={isSmallDevice ? "auto" : "55vw"}> + {t("btn.upload_images")}