remove edit modal from favicon dropzone
This commit is contained in:
nflnkr
parent
9e92209088
commit
ef389f97b1
@ -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: {
|
||||
|
||||
125
src/pages/startPage/FaviconDropZone.tsx
Normal file
125
src/pages/startPage/FaviconDropZone.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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
|
||||
sx={{ height: "48px", width: "48px" }}
|
||||
deleteIconSx={{ right: -40, top: -10 }}
|
||||
<FaviconDropZone
|
||||
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
|
||||
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>
|
||||
{favIconDropZoneElement}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
@ -695,25 +668,7 @@ export default function StartPageSettings() {
|
||||
>
|
||||
Favicon
|
||||
</Typography>
|
||||
<Box
|
||||
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>
|
||||
{favIconDropZoneElement}
|
||||
</>
|
||||
)}
|
||||
{(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user