SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

update style CroppingModal

Browse Source
This commit is contained in:
ArtChaos189 2023-08-12 16:31:27 +03:00
parent 0478f603fa
commit 551e492c0f
1 changed files with 58 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/ui_kit/Modal/CroppingModal.tsx
View File

@ -2,7 +2,7 @@ import React, { FC, useRef, useState } from "react";
import { saveAs } from "file-saver";
import ReactCrop, { Crop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
import { Box, Button, Modal, Slider, Typography } from "@mui/material";
import { Box, Button, Modal, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
import quiz from "../../assets/quiz-template-6.png";
import { ResetIcon } from "@icons/ResetIcon";
@ -12,44 +12,47 @@ interface Iprops {
onClose: () => void;
}
const style = {
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "620px",
bgcolor: "background.paper",
boxShadow: 24,
padding: "20px",
borderRadius: "8px",
};
const styleSlider = {
width: "250px",
color: "#7E2AEA",
height: "12px",
"& .MuiSlider-track": {
border: "none",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid "#9A9AAF"`,
},
"& .MuiSlider-thumb": {
height: 26,
width: 26,
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
},
},
};
export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(786));
const style = {
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: isMobile ? "343px" : "620px",
bgcolor: "background.paper",
boxShadow: 24,
padding: "20px",
borderRadius: "8px",
};
const styleSlider = {
width: isMobile ? "350px" : "250px",
color: "#7E2AEA",
height: "12px",
"& .MuiSlider-track": {
border: "none",
},
"& .MuiSlider-rail": {
backgroundColor: "#F2F3F7",
border: `1px solid "#9A9AAF"`,
},
"& .MuiSlider-thumb": {
height: 26,
width: 26,
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD`,
},
},
};
const [src, setSrc] = useState<string | ArrayBuffer | null>(quiz);
const [crop, setCrop] = useState<Crop>({ unit: "px", y: 0, x: 0, width: 100, height: 100 });
const [completedCrop, setCompletedCrop] = useState<Crop | null>(null);
@ -57,6 +60,8 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const [darken, setDarken] = useState(0);
const fileInputRef = useRef<HTMLInputElement>(null);
console.log(src);
const onCropComplete = (crop: Crop) => {
setCompletedCrop(crop);
};
@ -90,8 +95,20 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
const img = new Image();
img.src = image as string;
const scaleX = imageSize < 580 ? img.naturalWidth / (580 * (imageSize / 200)) : img.naturalWidth / 580;
const scaleY = img.naturalHeight / 320;
let scaleX = 360 / 580;
let scaleY = 219 / 320;
if (img.naturalWidth) {
scaleX = img.naturalWidth / 580;
}
if (img.naturalHeight) {
scaleY = img.naturalHeight / 320;
}
console.log(scaleX);
console.log(scaleY);
const canvas = document.createElement("canvas");
canvas.width = crop.width!;
@ -193,7 +210,7 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
px
</Box>
<Box sx={{ display: "flex", alignItems: "end", justifyContent: "space-between" }}>
<Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
<ResetIcon
onClick={() => {
setCrop((prevCrop: Crop) => ({