diff --git a/assets/jsons/translations/de.json b/assets/jsons/translations/de.json index 46fb348e..28069d20 100644 --- a/assets/jsons/translations/de.json +++ b/assets/jsons/translations/de.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "Keine Maps", "button": "Maps herunterladen" + }, + "drop-zone": { + "text": "Deine Karten importieren", + "subtext": "Lasse deine ZIP-Dateien hier fallen, um deine Karten zu importieren" } } } diff --git a/assets/jsons/translations/en.json b/assets/jsons/translations/en.json index f60e2293..65459ed8 100644 --- a/assets/jsons/translations/en.json +++ b/assets/jsons/translations/en.json @@ -65,7 +65,12 @@ "empty-maps": { "text": "No maps", "button": "Download maps" + }, + "drop-zone": { + "text": "Import your maps", + "subtext": "Drop your zip files here to import your maps" } + } } }, diff --git a/assets/jsons/translations/es.json b/assets/jsons/translations/es.json index eaa0d283..5112a68d 100644 --- a/assets/jsons/translations/es.json +++ b/assets/jsons/translations/es.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "No hay mapas", "button": "Descargar mapas" + }, + "drop-zone": { + "text": "Importar tus mapas", + "subtext": "Suelta tus archivos zip aquí para importar tus mapas" } } } diff --git a/assets/jsons/translations/fr.json b/assets/jsons/translations/fr.json index 73a95500..f428d8f3 100644 --- a/assets/jsons/translations/fr.json +++ b/assets/jsons/translations/fr.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "Aucune map", "button": "Télécharger des maps" + }, + "drop-zone": { + "text": "Importer vos maps", + "subtext": "Déposez vos fichiers zip ici pour importer vos maps" } } } @@ -508,12 +512,12 @@ }, "import-map": { "titles": { - "success": "Importation de la carte terminée", - "error": "Une erreur est survenue lors de l'importation de la carte" + "success": "Importation des maps terminée", + "error": "Une erreur est survenue lors de l'importation des maps" }, "msgs": { - "success": "Toutes les cartes ont été importées avec succès.", - "some-success": "Certaines cartes ont été importées avec succès.", + "success": "Toutes les maps ont été importées avec succès.", + "some-success": "Certaines maps ont été importées avec succès.", "only-accept-zip": "Seules les fichiers ZIP sont pris en charge.", "invalid-zip": "Le(s) fichier(s) Zip ne contient/contiennent aucun fichier \"Info.dat\"." } diff --git a/assets/jsons/translations/ja.json b/assets/jsons/translations/ja.json index c5ac792c..2576642c 100644 --- a/assets/jsons/translations/ja.json +++ b/assets/jsons/translations/ja.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "マップがありません", "button": "マップをダウンロードする" + }, + "drop-zone": { + "text": "マップをインポート", + "subtext": "ZIPファイルをここにドロップしてマップをインポート" } } } diff --git a/assets/jsons/translations/ru.json b/assets/jsons/translations/ru.json index 7d58731e..d4d33ced 100644 --- a/assets/jsons/translations/ru.json +++ b/assets/jsons/translations/ru.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "Нет карт", "button": "Скачать карты" + }, + "drop-zone": { + "text": "Импортируйте свои карты", + "subtext": "Перетащите сюда файлы ZIP, чтобы импортировать свои карты" } } } diff --git a/assets/jsons/translations/zh-tw.json b/assets/jsons/translations/zh-tw.json index 7fa340df..3cccd901 100644 --- a/assets/jsons/translations/zh-tw.json +++ b/assets/jsons/translations/zh-tw.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "無譜面", "button": "下載譜面" + }, + "drop-zone": { + "text": "導入您的地圖", + "subtext": "將ZIP文件拖放到此處以導入您的地圖" } } } diff --git a/assets/jsons/translations/zh.json b/assets/jsons/translations/zh.json index c7f8994d..f73237db 100644 --- a/assets/jsons/translations/zh.json +++ b/assets/jsons/translations/zh.json @@ -65,6 +65,10 @@ "empty-maps": { "text": "无谱面", "button": "下载谱面" + }, + "drop-zone": { + "text": "导入您的地图", + "subtext": "将ZIP文件拖放到此处以导入您的地图" } } } diff --git a/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx b/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx index 436ff66f..8749074f 100644 --- a/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx +++ b/src/renderer/components/maps-playlists-panel/maps-playlists-panel.component.tsx @@ -204,11 +204,8 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) { onDrop={event => { handleFileDrop(event.dataTransfer.files); }} - overlay={ -
- Drop map files here 😃 -
- } + text={t("pages.version-viewer.maps.tabs.maps.drop-zone.text")} + subtext={t("pages.version-viewer.maps.tabs.maps.drop-zone.subtext")} > diff --git a/src/renderer/components/shared/dropzone.component.tsx b/src/renderer/components/shared/dropzone.component.tsx index 6fb5a6a1..898db61b 100644 --- a/src/renderer/components/shared/dropzone.component.tsx +++ b/src/renderer/components/shared/dropzone.component.tsx @@ -1,72 +1,88 @@ -import React, { ReactNode, useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { DragEvent, ReactNode, useCallback, useState } from "react"; +import { BsmImage } from "./bsm-image.component"; +import BeatImpatient from "../../../../assets/images/apngs/beat-impatient.png"; +import { useThemeColor } from "renderer/hooks/use-theme-color.hook"; +import Color from "color"; type Props = Readonly<{ children?: ReactNode; className?: string; - overlay?: ReactNode; - overlayColor?: string; - overlayZIndex?: number; - onDrop?: (event: React.DragEvent) => void; + text?: string; + subtext?: string; + onDrop?: (event: DragEvent) => void; }>; // Supports drop and drop functionality for files. export function Dropzone({ children, className, - overlay, - overlayColor, - overlayZIndex, - onDrop + text, + subtext, + onDrop, }: Props) { - const [dragging, setDragging] = useState(false); + const [dragCount, setDragCount] = useState(0); + const [dropZoneDragging, setDropZoneDragging] = useState(false); + const themeColor = useThemeColor("first-color"); + const color = new Color(themeColor).lighten(.25).saturate(.8).hex(); - const normalizeZIndex = (zIndex?: number) => { - return (!zIndex || zIndex <= 0) ? 50 : zIndex; - } + const handleDrop = useCallback((event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + setDragCount(0); + if (onDrop) onDrop(event); + }, []); - const renderFileOverlay = () => { - return ( -
{ - event.preventDefault(); - event.stopPropagation(); - setDragging(false); - if (onDrop) onDrop(event); - }} - onDragOver={event => { - event.preventDefault(); - event.stopPropagation(); - }} - onDragEnter={event => { - // Should consume the event 1 more time to avoid multiple onDragEnter - // triggers by the parent div - event.preventDefault(); - event.stopPropagation(); - }} - onDragLeave={event => { - event.preventDefault(); - event.stopPropagation(); - setDragging(false); - }} - > - {overlay} -
- ) - } + const onDragOver = useCallback((event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + }, []); + + const onDragEnter = useCallback((event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + setDragCount(prev => prev + 1); + }, []); + + const onDragLeave = useCallback((event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + setDragCount(prev => prev - 1); + }, []); return ( -
{ - event.preventDefault(); - event.stopPropagation(); - setDragging(true); - }}> - {dragging && renderFileOverlay()} +
+ + {dragCount ? ( +
+ + +
+
setDropZoneDragging(true)} + onDragLeave={() => setDropZoneDragging(false)} + className="relative size-full z-[1] border-dashed border-3 rounded-md flex flex-col gap-1 justify-center items-center" + style={{ borderColor: color }} + > +
+ + {text} + {subtext} +
+
+ +
+ ): undefined} + {children}
);