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

update Location of buttons in the image settings CropModal

Browse Source
This commit is contained in:
ArtChaos189 2023-12-16 02:02:51 +03:00
parent c51cdbea67
commit 0cc07e48f8
2 changed files with 312 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/icons/CropIcon.tsx
View File

@ -1,40 +1,10 @@
import { FC, SVGProps } from "react";
export const CropIcon: FC = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M6 6H2.25"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 2.25V18H21.75"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 15V6H9"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 21.75V18"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);

78
src/ui_kit/Modal/CropModal.tsx
View File

@ -17,7 +17,6 @@ import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
import { canvasPreview } from "./utils/canvasPreview";
const styleSlider: SxProps<Theme> = {
color: "#7E2AEA",
height: "12px",
@ -51,7 +50,14 @@ interface Props {
onSaveImageClick: (imageBlob: Blob) => void;
}
export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
export const CropModal: FC<Props> = ({
isOpen,
imageBlob,
originalImageUrl,
setCropModalImageBlob,
onSaveImageClick,
onClose,
}) => {
const theme = useTheme();
const [crop, setCrop] = useState<Crop>();
const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
@ -130,7 +136,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={{
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
@ -140,7 +147,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
padding: "20px",
borderRadius: "8px",
width: isMobile ? "343px" : "620px",
}}>
}}
>
<Box
sx={{
height: "320px",
@ -204,17 +212,18 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
justifyContent: "space-between",
}}
>
<IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
<IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
<ResetIcon />
</IconButton>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
Размер
</Typography>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
<Slider
sx={[styleSlider, {
sx={[
styleSlider,
{
width: isMobile ? "350px" : "250px",
}]}
},
]}
value={width}
min={50}
max={580}
@ -225,13 +234,14 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
/>
</Box>
<Box>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
Затемнение
</Typography>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
<Slider
sx={[styleSlider, {
sx={[
styleSlider,
{
width: isMobile ? "350px" : "250px",
}]}
},
]}
value={darken}
min={0}
max={100}
@ -245,21 +255,26 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
marginTop: "40px",
width: "100%",
display: "flex",
gap: "10px",
}}
>
<Button
onClick={handleSaveClick}
onClick={handleCropClick}
disableRipple
data-cy="crop-modal-save-button"
disabled={!completedCrop}
sx={{
height: "48px",
color: "#7E2AEA",
padding: "10px 20px",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
px: "20px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
color: "#7E2AEA",
border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
backgroundColor: "transparent",
}}
>Сохранить</Button>
>
<CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
Обрезать
</Button>
<Button
onClick={handleLoadOriginalImage}
disableRipple
@ -270,26 +285,25 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
color: "#7E2AEA",
borderRadius: "8px",
border: "1px solid #7E2AEA",
marginRight: "10px",
ml: "auto",
}}
>
Загрузить оригинал
</Button>
<Button
onClick={handleCropClick}
onClick={handleSaveClick}
disableRipple
variant="contained"
disabled={!completedCrop}
data-cy="crop-modal-save-button"
sx={{
padding: "10px 20px",
height: "48px",
borderRadius: "8px",
background: theme.palette.brightPurple.main,
fontSize: "18px",
border: "1px solid #7E2AEA",
marginRight: "10px",
px: "20px",
ml: "auto",
}}
>
<CropIcon />
Обрезать
Сохранить
</Button>
</Box>
</Box>