yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-25 14:14:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace dynamic size boxe

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-03-26 18:17:40 +01:00
parent 611353785f
commit e6a271adf2
2 changed files with 29 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js
View File

@ -6,7 +6,7 @@ const FileWrapper = styled(CardImgWrapper)`
width: 100%;
display: flex;
position: relative;
background-color: #333740;
background-color: ${({ theme }) => theme.main.colors.black};
.cropper-view-box {
outline-color: ${({ theme }) => theme.main.colors.white};

78
packages/strapi-plugin-upload/admin/src/components/EditForm/index.js
View File

@ -52,12 +52,10 @@ const EditForm = forwardRef(
) => {
const { formatMessage } = useGlobalContext();
const [isCropping, setIsCropping] = useState(false);
const [infosCoordinates, setInfosCoordinates] = useState({ top: null, left: 0 });
const [infos, setInfos] = useState({ width: 0, height: 0 });
const [infos, setInfos] = useState({ width: null, height: null });
const [src, setSrc] = useState(null);
const fileURL = get(fileToEdit, ['file', 'url'], null);
const prefixedFileURL = fileURL ? prefixFileUrlWithBackendUrl(fileURL) : null;
const downloadFileName = createFileToDownloadName(fileToEdit);
const mimeType =
@ -69,7 +67,7 @@ const EditForm = forwardRef(
const aRef = useRef();
const imgRef = useRef();
const inputRef = useRef();
let cropper = useRef();
const cropper = useRef();
useImperativeHandle(ref, () => ({
click: () => {
@ -103,12 +101,12 @@ const EditForm = forwardRef(
zoomable: false,
cropBoxResizable: true,
background: false,
ready: handleResize,
cropmove: handleResize,
crop: handleResize,
});
} else if (cropper.current) {
cropper.current.destroy();
setInfosCoordinates({ top: null, left: null });
setInfos({ width: null, height: null });
toggleDisableForm(false);
}
@ -120,31 +118,11 @@ const EditForm = forwardRef(
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cropper, isCropping]);
const handleResize = () => {
const cropBox = cropper.current.getCropBoxData();
const { width, height } = cropBox;
const roundedWidth = Math.round(width);
const roundedHeight = Math.round(height);
const xSignWidth = 3;
const margin = 15;
const pixelWidth = 13;
const handleResize = ({ detail: { height, width } }) => {
const roundedDataHeight = Math.round(height);
const roundedDataWidth = Math.round(width);
let left =
cropBox.left +
width -
margin -
((roundedHeight.toString().length + roundedWidth.toString().length + xSignWidth) *
pixelWidth) /
2;
let top = cropBox.top + height - pixelWidth - margin;
if (width < 130) {
top = cropBox.top + height + 10;
left = cropBox.left + width + 10;
}
setInfosCoordinates({ top, left });
setInfos({ width: roundedWidth, height: roundedHeight });
setInfos({ width: roundedDataWidth, height: roundedDataHeight });
};
const handleToggleCropMode = () => {
@ -301,29 +279,29 @@ const EditForm = forwardRef(
alt={get(fileToEdit, ['file', 'name'], '')}
ref={isCropping ? imgRef : null}
/>
{isCropping && infosCoordinates.top && (
<Text
fontSize="md"
color="white"
as="div"
style={{
position: 'absolute',
top: infosCoordinates.top,
left: infosCoordinates.left,
background: '#333740',
borderRadius: 2,
}}
>
&nbsp;
{infos.width} x {infos.height}
&nbsp;
</Text>
)}
</CropWrapper>
) : (
<>{isVideo ? <VideoPlayer src={src} /> : <CardPreview url={src} />}</>
)}
{isCropping && infos.width && (
<Text
fontSize="md"
color="white"
as="div"
style={{
position: 'absolute',
bottom: 0,
right: 0,
background: '#333740',
borderRadius: 2,
}}
>
&nbsp;
{infos.width} x {infos.height}
&nbsp;
</Text>
)}
</Fragment>
)}
</FileWrapper>