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

cropmodal десктоп версия

Browse Source
This commit is contained in:
Надежда 2024-08-07 20:26:57 +03:00
parent 6a0f561c91
commit 5652ed2070
4 changed files with 145 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/icons/AmoTrash.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
height?: string;
width?: string;
}
export default function AmoTrash({ color, height, width }: Props) {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.4994 6H4.5" stroke="#FC2012" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.5 18.7492V8.74609H18.5V18.7492C18.5 20.1299 17.3807 21.2492 16 21.2492H8C6.61929 21.2492 5.5 20.1299 5.5 18.7492Z" fill="#FC2012" stroke="#F02B2B"/>
<path d="M15.75 6V4.5C15.75 4.10218 15.592 3.72064 15.3107 3.43934C15.0294 3.15804 14.6478 3 14.25 3H9.75C9.35218 3 8.97064 3.15804 8.68934 3.43934C8.40804 3.72064 8.25 4.10218 8.25 4.5V6" stroke="#FC2012" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</Box>
);
}

124
src/ui_kit/Modal/CropModal/CropGeneral.tsx
View File

@ -29,7 +29,8 @@ import { CropAspectRatio, DEFAULTCROPRULES, EditedImage } from "@/model/CropModa
const styleSlider: SxProps<Theme> = { const styleSlider: SxProps<Theme> = {
color: "#7E2AEA", color: "#7E2AEA",
height: "12px", height: "10px",
p: "18px 0",
"& .MuiSlider-track": { "& .MuiSlider-track": {
border: "none", border: "none",
}, },
@ -38,8 +39,8 @@ const styleSlider: SxProps<Theme> = {
border: `1px solid #9A9AAF`, border: `1px solid #9A9AAF`,
}, },
"& .MuiSlider-thumb": { "& .MuiSlider-thumb": {
height: 26, height: 24,
width: 26, width: 24,
border: `6px solid #7E2AEA`, border: `6px solid #7E2AEA`,
backgroundColor: "white", backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white, boxShadow: `0px 0px 0px 3px white,
@ -74,7 +75,7 @@ export const CropGeneral: FC<Props> = ({
async function handleRotateClick() { async function handleRotateClick() {
editedImagesChange((old) => { editedImagesChange((old) => {
const newRotate = old.newRules.rotate + 90; const newRotate = old.newRules.rotate + 90;
return { return {
newRules: { newRules: {
...old.newRules, ...old.newRules,
@ -100,7 +101,7 @@ export const CropGeneral: FC<Props> = ({
imageHeight, imageHeight,
); );
//Хз зачем это было нужно, как будет работать - перетещу //Хз зачем это было нужно, как будет работать - перетещу
// if (!old.newRules.crop || old.newRules.crop.height === 0 || old.newRules.crop.width === 0) { // if (!old.newRules.crop || old.newRules.crop.height === 0 || old.newRules.crop.width === 0) {
// return centerCrop(crop, imageWidth, imageHeight); // return centerCrop(crop, imageWidth, imageHeight);
@ -114,7 +115,7 @@ export const CropGeneral: FC<Props> = ({
100 - crop.height, 100 - crop.height,
Math.max(0, old.newRules.crop.y + (old.newRules.crop.height - crop.height) / 2), Math.max(0, old.newRules.crop.y + (old.newRules.crop.height - crop.height) / 2),
); );
return { return {
newRules: { newRules: {
...old.newRules, ...old.newRules,
@ -134,7 +135,8 @@ export const CropGeneral: FC<Props> = ({
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
padding: "0 20px" padding: "0 20px",
marginTop: "20px",
}} }}
> >
<ReactCrop <ReactCrop
@ -168,7 +170,7 @@ export const CropGeneral: FC<Props> = ({
cropImageElementRef.current?.height, cropImageElementRef.current?.height,
cropAspectRatio cropAspectRatio
? cropAspectRatio.width / cropAspectRatio.height ? cropAspectRatio.width / cropAspectRatio.height
: 1, : 2,
) )
} }
})) }))
@ -180,6 +182,7 @@ export const CropGeneral: FC<Props> = ({
style={{ style={{
filter: `brightness(${100 - editedImage.newRules.darken}%)`, filter: `brightness(${100 - editedImage.newRules.darken}%)`,
maxWidth: "100%", maxWidth: "100%",
height: "320px",
maxHeight: "320px", maxHeight: "320px",
display: "block", display: "block",
objectFit: "contain", objectFit: "contain",
@ -189,58 +192,73 @@ export const CropGeneral: FC<Props> = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
mt: "40px", mt: "48px",
display: isMobile ? "block" : "flex", display: isMobile ? "block" : "flex",
alignItems: "end", alignItems: "end",
justifyContent: "space-between", justifyContent: "space-between",
padding: "0 20px" padding: "0 20px",
}} }}
> >
<IconButton onClick={handleRotateClick}> <IconButton onClick={handleRotateClick}
sx={{
mb:"11px",
p: "0",
}}
>
<ResetIcon /> <ResetIcon />
</IconButton> </IconButton>
<Box> <Box
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}> sx={{
Размер display: "flex",
</Typography> justifyContent: "space-between",
<Slider gap: "24px",
sx={[ }}
styleSlider, >
{ <Box>
width: isMobile ? undefined : "200px", <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
}, Размер
]} </Typography>
value={editedImage.newRules.crop.width ?? 1} <Slider
min={1} sx={[
max={100} styleSlider,
step={0.1} {
onChange={(_, newValue) => { width: isMobile ? undefined : "248px",
if (typeof newValue === "number") handleSizeChange(newValue); },
}} ]}
/> value={55}
</Box> min={1}
<Box> max={100}
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}> step={0.1}
Затемнение onChange={(_, newValue) => {
</Typography> if (typeof newValue === "number") handleSizeChange(newValue);
<Slider }}
sx={[ />
styleSlider, </Box>
{ <Box>
width: isMobile ? undefined : "200px", <Typography sx={{ color: "#9A9AAF", fontSize: "16px", ml:"-1px", }}>
}, Затемнение
]} </Typography>
value={editedImage.newRules.darken} <Slider
min={0} sx={[
max={100} styleSlider,
step={1} {
onChange={(_, newValue) => editedImagesChange((old) => ({ width: isMobile ? undefined : "248px",
newRules: { },
...old.newRules, ]}
darken: newValue as number value={52}
} min={0}
}))} max={100}
/> step={1}
onChange={(_, newValue) => editedImagesChange((old) => ({
newRules: {
...old.newRules,
darken: newValue as number
}
}))}
/>
</Box>
</Box> </Box>
</Box> </Box>
</> </>

9
src/ui_kit/Modal/CropModal/NavigationPanel.tsx
View File

@ -41,12 +41,13 @@ export const NavigationPanel: FC<Props> = ({
return ( return (
<Box <Box
sx={{ sx={{
marginTop: "40px", marginTop: "18px",
padding: "0 20px 20px", padding: "0 20px 20px",
width: "100%", width: "100%",
display: "flex", display: "flex",
gap: "5px", gap: "5px",
flexWrap: isMobile ? "wrap" : undefined, flexWrap: isMobile ? "wrap" : undefined,
justifyContent: "space-between"
}} }}
> >
<Button <Button
@ -66,8 +67,8 @@ export const NavigationPanel: FC<Props> = ({
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
gap: "5px", gap: "10px",
ml: "auto",
}} }}
> >
<Button <Button
@ -96,7 +97,7 @@ export const NavigationPanel: FC<Props> = ({
height: "48px", height: "48px",
borderRadius: "8px", borderRadius: "8px",
border: "1px solid #7E2AEA", border: "1px solid #7E2AEA",
p: "10px 15px", p: "10px 19px",
width: isMobile ? "100%" : undefined, width: isMobile ? "100%" : undefined,
}} }}
> >

69
src/ui_kit/Modal/CropModal/WorkSpace.tsx
View File

@ -14,6 +14,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
import type { CropAspectRatio, CropOnDeleteIamgeClick, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal" import type { CropAspectRatio, CropOnDeleteIamgeClick, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal"
import { EditedImagesChangeType } from "./CropModal"; import { EditedImagesChangeType } from "./CropModal";
import AmoTrash from "@/assets/icons/AmoTrash";
const modalModels = { const modalModels = {
@ -50,53 +51,69 @@ export default function WorkSpace({
<> <>
<Box <Box
sx={{ sx={{
mt: "5px", mt: "12px",
padding: "0 20px", padding: "0 20px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between" justifyContent: "space-between"
}} }}
> >
<Box> <Box
sx={{
width: "100%"
}}
>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", justifyContent: "space-between",
gap: "13px" width: "100%",
alignItems: "center"
}} }}
> >
<Typography <Box
sx={{ sx={{
color: "#4D4D4D", display: "flex",
fontSize: "24px", alignItems: "center",
fontWeight: 500, gap: "13px"
lineHeight: "28.44px",
}} }}
>{currentModel.name}</Typography> >
{currentModel.icon} <Typography
sx={{
color: "#4D4D4D",
fontSize: "24px",
fontWeight: 500,
lineHeight: "28.44px",
}}
>{currentModel.name}</Typography>
{currentModel.icon}
</Box>
<IconButton
// onClick={onDeleteClick}
sx={{
height: "24px",
width: "24px",
p: 0,
color: theme.palette.orange.main,
borderRadius: "50%",
mb:"5px",
}}
>
<AmoTrash></AmoTrash>
</IconButton>
</Box> </Box>
<Typography sx={{ <Typography sx={{
fontSize: "14px", fontSize: "13.8px",
color: "#9A9AAF", color: "#9A9AAF",
lineHeight: "16.59px", lineHeight: "16px",
}}> }}>
{currentStep + 1 + " шаг"} {currentStep + 1 + " шаг"}
</Typography> </Typography>
</Box> </Box>
<IconButton
// onClick={onDeleteClick}
sx={{
height: "48px",
width: "48px",
p: 0,
color: theme.palette.orange.main,
borderRadius: "50%",
}}
>
<DeleteIcon />
</IconButton>
</Box> </Box>
<CropGeneral <CropGeneral