remove edit modal from favicon dropzone

src/model/quizSettings.ts

@@ -38,7 +38,6 @@ export interface QuizConfig {
         button: string;
         position: QuizStartpageAlignType;
         favIcon: string | null;
-        originalFavIcon: string | null;
         logo: string | null;
         originalLogo: string | null;
         background: {
@@ -72,7 +71,6 @@ export const defaultQuizConfig: QuizConfig = {
         button: "",
         position: "left",
         favIcon: null,
-        originalFavIcon: null,
         logo: null,
         originalLogo: null,
         background: {

src/pages/startPage/FaviconDropZone.tsx

@@ -0,0 +1,125 @@
+import UploadIcon from "@icons/UploadIcon";
+import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { enqueueSnackbar } from "notistack";
+import { useState } from "react";
+import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
+import { useDisclosure } from "../../utils/useDisclosure";
+
+
+const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+interface Props {
+    imageUrl: string | null;
+    onImageUploadClick: (image: Blob) => void;
+    onDeleteClick: () => void;
+}
+
+export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) {
+    const theme = useTheme();
+    const quiz = useCurrentQuiz();
+    const [isDropReady, setIsDropReady] = useState<boolean>(false);
+    const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
+
+    if (!quiz) return null; // TODO throw and catch with error boundary 
+
+    async function handleImageUpload(file: File) {
+        if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
+        if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
+
+        onImageUploadClick(file);
+        closeImageUploadModal();
+    }
+
+    const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        setIsDropReady(false);
+
+        const file = event.dataTransfer.files[0];
+        if (!file || imageUrl) return;
+
+        handleImageUpload(file);
+    };
+
+    return (
+        <Box sx={{
+            display: "flex",
+            gap: "10px",
+        }}>
+            <UploadImageModal
+                isOpen={isImageUploadOpen}
+                onClose={closeImageUploadModal}
+                handleImageChange={handleImageUpload}
+            />
+            <Box
+                onDragEnter={() => !imageUrl && setIsDropReady(true)}
+                onDragExit={() => setIsDropReady(false)}
+                onDragOver={e => e.preventDefault()}
+                onDrop={onDrop}
+                sx={{
+                    width: "48px",
+                    height: "48px",
+                    backgroundColor: theme.palette.background.default,
+                    border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
+                    borderRadius: "8px",
+                }}>
+                <ButtonBase
+                    onClick={imageUrl ? undefined : openImageUploadModal}
+                    sx={{
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        borderRadius: "8px",
+                        overflow: "hidden",
+                    }}
+                >
+                    {imageUrl ?
+                        <img
+                            src={imageUrl}
+                            style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "scale-down",
+                            }}
+                        />
+                        :
+                        <UploadIcon />
+                    }
+                </ButtonBase>
+            </Box>
+            <Box sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "start",
+            }}>
+                {imageUrl &&
+                    <ButtonBase onClick={onDeleteClick}>
+                        <Typography
+                            sx={{
+                                color: theme.palette.orange.main,
+                                fontSize: "16px",
+                                lineHeight: "19px",
+                                textDecoration: "underline",
+                            }}
+                        >
+                            Удалить
+                        </Typography>
+                    </ButtonBase>
+                }
+                <Typography
+                    sx={{
+                        color: theme.palette.orange.main,
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        textDecoration: "underline",
+                        mt: "auto",
+                    }}
+                >
+                    5 MB максимум
+                </Typography>
+            </Box>
+        </Box>
+    );
+};

src/pages/startPage/StartPageSettings.tsx

@@ -37,6 +37,7 @@ import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
 import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
+import FaviconDropZone from "./FaviconDropZone";
 
 
 const designTypes = [
@@ -86,19 +87,9 @@ export default function StartPageSettings() {
     if (!quiz) return null; // TODO throw and catch with error boundary
 
     const favIconDropZoneElement = (
-        <DropZone
+        <FaviconDropZone
-            sx={{ height: "48px", width: "48px" }}
-            deleteIconSx={{ right: -40, top: -10 }}
             imageUrl={quiz.config.startpage.favIcon}
-            originalImageUrl={quiz.config.startpage.originalFavIcon}
             onImageUploadClick={async file => {
-                const resizedImage = await resizeFavIcon(file);
-                uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
-                    quiz.config.startpage.favIcon = url;
-                    quiz.config.startpage.originalFavIcon = url;
-                });
-            }}
-            onImageSaveClick={async file => {
                 const resizedImage = await resizeFavIcon(file);
                 uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
                     quiz.config.startpage.favIcon = url;
@@ -613,25 +604,7 @@ export default function StartPageSettings() {
                                 >
                                     Favicon
                                 </Typography>
-                                <Box
+                                {favIconDropZoneElement}
-                                    sx={{
-                                        display: "flex",
-                                        alignItems: "end",
-                                        gap: "10px",
-                                    }}
-                                >
-                                    {favIconDropZoneElement}
-                                    <Typography
-                                        sx={{
-                                            color: theme.palette.orange.main,
-                                            fontSize: "16px",
-                                            lineHeight: "19px",
-                                            textDecoration: "underline",
-                                        }}
-                                    >
-                                        5 MB максимум
-                                    </Typography>
-                                </Box>
                             </>
                         )}
                     </Box>
@@ -695,25 +668,7 @@ export default function StartPageSettings() {
                             >
                                 Favicon
                             </Typography>
-                            <Box
+                            {favIconDropZoneElement}
-                                sx={{
-                                    display: "flex",
-                                    alignItems: "end",
-                                    gap: "10px",
-                                }}
-                            >
-                                {favIconDropZoneElement}
-                                <Typography
-                                    sx={{
-                                        color: theme.palette.orange.main,
-                                        fontSize: "16px",
-                                        lineHeight: "19px",
-                                        textDecoration: "underline",
-                                    }}
-                                >
-                                    5 MB максимум
-                                </Typography>
-                            </Box>
                         </>
                     )}
                     {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (