cropmodal десктоп версия
This commit is contained in:
Надежда
parent
6a0f561c91
commit
5652ed2070
26
src/assets/icons/AmoTrash.tsx
Normal file
26
src/assets/icons/AmoTrash.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -29,7 +29,8 @@ import { CropAspectRatio, DEFAULTCROPRULES, EditedImage } from "@/model/CropModa
|
||||
|
||||
const styleSlider: SxProps<Theme> = {
|
||||
color: "#7E2AEA",
|
||||
height: "12px",
|
||||
height: "10px",
|
||||
p: "18px 0",
|
||||
"& .MuiSlider-track": {
|
||||
border: "none",
|
||||
},
|
||||
@ -38,8 +39,8 @@ const styleSlider: SxProps<Theme> = {
|
||||
border: `1px solid #9A9AAF`,
|
||||
},
|
||||
"& .MuiSlider-thumb": {
|
||||
height: 26,
|
||||
width: 26,
|
||||
height: 24,
|
||||
width: 24,
|
||||
border: `6px solid #7E2AEA`,
|
||||
backgroundColor: "white",
|
||||
boxShadow: `0px 0px 0px 3px white,
|
||||
@ -74,7 +75,7 @@ export const CropGeneral: FC<Props> = ({
|
||||
async function handleRotateClick() {
|
||||
editedImagesChange((old) => {
|
||||
const newRotate = old.newRules.rotate + 90;
|
||||
|
||||
|
||||
return {
|
||||
newRules: {
|
||||
...old.newRules,
|
||||
@ -100,7 +101,7 @@ export const CropGeneral: FC<Props> = ({
|
||||
imageHeight,
|
||||
);
|
||||
|
||||
//Хз зачем это было нужно, как будет работать - перетещу
|
||||
//Хз зачем это было нужно, как будет работать - перетещу
|
||||
|
||||
// if (!old.newRules.crop || old.newRules.crop.height === 0 || old.newRules.crop.width === 0) {
|
||||
// return centerCrop(crop, imageWidth, imageHeight);
|
||||
@ -114,7 +115,7 @@ export const CropGeneral: FC<Props> = ({
|
||||
100 - crop.height,
|
||||
Math.max(0, old.newRules.crop.y + (old.newRules.crop.height - crop.height) / 2),
|
||||
);
|
||||
|
||||
|
||||
return {
|
||||
newRules: {
|
||||
...old.newRules,
|
||||
@ -134,7 +135,8 @@ export const CropGeneral: FC<Props> = ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0 20px"
|
||||
padding: "0 20px",
|
||||
marginTop: "20px",
|
||||
}}
|
||||
>
|
||||
<ReactCrop
|
||||
@ -168,7 +170,7 @@ export const CropGeneral: FC<Props> = ({
|
||||
cropImageElementRef.current?.height,
|
||||
cropAspectRatio
|
||||
? cropAspectRatio.width / cropAspectRatio.height
|
||||
: 1,
|
||||
: 2,
|
||||
)
|
||||
}
|
||||
}))
|
||||
@ -180,6 +182,7 @@ export const CropGeneral: FC<Props> = ({
|
||||
style={{
|
||||
filter: `brightness(${100 - editedImage.newRules.darken}%)`,
|
||||
maxWidth: "100%",
|
||||
height: "320px",
|
||||
maxHeight: "320px",
|
||||
display: "block",
|
||||
objectFit: "contain",
|
||||
@ -189,58 +192,73 @@ export const CropGeneral: FC<Props> = ({
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "40px",
|
||||
mt: "48px",
|
||||
display: isMobile ? "block" : "flex",
|
||||
alignItems: "end",
|
||||
justifyContent: "space-between",
|
||||
padding: "0 20px"
|
||||
padding: "0 20px",
|
||||
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={handleRotateClick}>
|
||||
<IconButton onClick={handleRotateClick}
|
||||
sx={{
|
||||
mb:"11px",
|
||||
p: "0",
|
||||
|
||||
}}
|
||||
>
|
||||
<ResetIcon />
|
||||
</IconButton>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Размер
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={[
|
||||
styleSlider,
|
||||
{
|
||||
width: isMobile ? undefined : "200px",
|
||||
},
|
||||
]}
|
||||
value={editedImage.newRules.crop.width ?? 1}
|
||||
min={1}
|
||||
max={100}
|
||||
step={0.1}
|
||||
onChange={(_, newValue) => {
|
||||
if (typeof newValue === "number") handleSizeChange(newValue);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Затемнение
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={[
|
||||
styleSlider,
|
||||
{
|
||||
width: isMobile ? undefined : "200px",
|
||||
},
|
||||
]}
|
||||
value={editedImage.newRules.darken}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
onChange={(_, newValue) => editedImagesChange((old) => ({
|
||||
newRules: {
|
||||
...old.newRules,
|
||||
darken: newValue as number
|
||||
}
|
||||
}))}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
gap: "24px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||||
Размер
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={[
|
||||
styleSlider,
|
||||
{
|
||||
width: isMobile ? undefined : "248px",
|
||||
},
|
||||
]}
|
||||
value={55}
|
||||
min={1}
|
||||
max={100}
|
||||
step={0.1}
|
||||
onChange={(_, newValue) => {
|
||||
if (typeof newValue === "number") handleSizeChange(newValue);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px", ml:"-1px", }}>
|
||||
Затемнение
|
||||
</Typography>
|
||||
<Slider
|
||||
sx={[
|
||||
styleSlider,
|
||||
{
|
||||
width: isMobile ? undefined : "248px",
|
||||
},
|
||||
]}
|
||||
value={52}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
onChange={(_, newValue) => editedImagesChange((old) => ({
|
||||
newRules: {
|
||||
...old.newRules,
|
||||
darken: newValue as number
|
||||
}
|
||||
}))}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
|
||||
@ -41,12 +41,13 @@ export const NavigationPanel: FC<Props> = ({
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: "40px",
|
||||
marginTop: "18px",
|
||||
padding: "0 20px 20px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
gap: "5px",
|
||||
flexWrap: isMobile ? "wrap" : undefined,
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
@ -66,8 +67,8 @@ export const NavigationPanel: FC<Props> = ({
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "5px",
|
||||
ml: "auto",
|
||||
gap: "10px",
|
||||
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
@ -96,7 +97,7 @@ export const NavigationPanel: FC<Props> = ({
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
p: "10px 15px",
|
||||
p: "10px 19px",
|
||||
width: isMobile ? "100%" : undefined,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -14,6 +14,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
|
||||
|
||||
import type { CropAspectRatio, CropOnDeleteIamgeClick, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal"
|
||||
import { EditedImagesChangeType } from "./CropModal";
|
||||
import AmoTrash from "@/assets/icons/AmoTrash";
|
||||
|
||||
|
||||
const modalModels = {
|
||||
@ -50,53 +51,69 @@ export default function WorkSpace({
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "5px",
|
||||
mt: "12px",
|
||||
padding: "0 20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "13px"
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
<Box
|
||||
sx={{
|
||||
color: "#4D4D4D",
|
||||
fontSize: "24px",
|
||||
fontWeight: 500,
|
||||
lineHeight: "28.44px",
|
||||
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "13px"
|
||||
}}
|
||||
>{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>
|
||||
|
||||
<Typography sx={{
|
||||
fontSize: "14px",
|
||||
fontSize: "13.8px",
|
||||
color: "#9A9AAF",
|
||||
lineHeight: "16.59px",
|
||||
lineHeight: "16px",
|
||||
}}>
|
||||
{currentStep + 1 + " шаг"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton
|
||||
// onClick={onDeleteClick}
|
||||
sx={{
|
||||
height: "48px",
|
||||
width: "48px",
|
||||
p: 0,
|
||||
color: theme.palette.orange.main,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
|
||||
|
||||
</Box>
|
||||
<CropGeneral
|
||||
|
||||
Loading…
Reference in New Issue
Block a user