From 5658849df8febb84f2bf08948a68f9e8db9a7fb3 Mon Sep 17 00:00:00 2001 From: amitk Date: Sun, 28 Feb 2021 09:07:48 +0530 Subject: [PATCH 1/3] App icon changes and new package for app icon crop --- frontend/package.json | 1 + frontend/src/views/AppCreator.jsx | 130 +++++++++++++++++++++++++++++- 2 files changed, 129 insertions(+), 2 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index bb24de65..e3b88353 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,6 +35,7 @@ "react": "^16.14.0", "react-alert": "^5.5.0", "react-alert-template-basic": "^1.0.0", + "react-avatar-editor": "^11.1.0", "react-beforeunload": "^2.2.1", "react-chartjs-2": "^2.8.0", "react-cookie": "^4.0.1", diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index 5b4cb70f..27d57a24 100644 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -32,6 +32,13 @@ import ErrorOutline from '@material-ui/icons/ErrorOutline'; import { useAlert } from "react-alert"; import words from "shellwords" +import AvatarEditor from 'react-avatar-editor'; +import AddAPhotoIcon from '@material-ui/icons/AddAPhoto'; +import AddAPhotoOutlinedIcon from '@material-ui/icons/AddAPhotoOutlined'; +import ZoomInOutlinedIcon from '@material-ui/icons/ZoomInOutlined'; +import ZoomOutOutlinedIcon from '@material-ui/icons/ZoomOutOutlined'; +import LoopIcon from '@material-ui/icons/Loop'; + const surfaceColor = "#27292D" const inputColor = "#383B40" @@ -65,6 +72,18 @@ const boxStyle = { backgroundColor: surfaceColor, } +const dividerStyle = { + marginBottom: "10px", + marginTop: "10px", + height: "1px", + width: "100%", + backgroundColor: "grey", +} + +const appIconStyle = { + marginLeft: "5px", +} + const useStyles = makeStyles({ notchedOutline: { borderColor: "#f85a3e !important" @@ -2122,8 +2141,114 @@ const AppCreator = (props) => { // : // - const imageData = file.length > 0 ? file : fileBase64 + const [imageUploadError, setImageUploadError] = useState(""); + const [openImageModal, setOpenImageModal] = useState(""); + const [scale, setScale] = useState(1); + const [rotate, setRotatation] = useState(0); + const [disableImageUpload, setDisableImageUpload] = useState(true); + + let imageData = fileBase64; + let croppedData = file.length > 0 ? file : fileBase64 + const imageInfo = + + const zoomIn = () => { + setScale(scale+0.1); + } + const zoomOut = () => { + setScale(scale-0.1); + } + const rotatation = () => { + setRotatation(rotate+10); + } + + const onPositionChange = () => { + setDisableImageUpload(false); + } + + const onCancelSaveAppIcon = () => { + setFile(""); + setOpenImageModal(false) + setImageUploadError("") + } + + let editor; + const setEditorRef = (imgEditor) => { editor = imgEditor; } + + const onSaveAppIcon = () => { + if(editor){ + setFile(""); + const canvas = editor.getImageScaledToCanvas(); + setFileBase64(canvas.toDataURL()); + setOpenImageModal(false) + setDisableImageUpload(true); + } + } + + const errorText = imageUploadError.length > 0 ?
Error: {imageUploadError}
: null + const imageUploadModalView = openImageModal ? + + +
Upload App Icon
 + {errorText} + + setRotatation(0)} + /> + + + + + + + + + + + + + + + + + + + + + + : null; // Random names for type & autoComplete. Didn't research :^) const landingpageDataBrowser = @@ -2139,12 +2264,13 @@ const AppCreator = (props) => { {name} + {imageUploadModalView}

General information

Click here to learn more about app creation
-
{upload.click()}}> +
{setOpenImageModal(true)}}> upload = ref} onChange={editHeaderImage} /> {imageInfo}
From 14a1d53bbb7a380b144ba468b0a5809596824428 Mon Sep 17 00:00:00 2001 From: amitk Date: Wed, 3 Mar 2021 09:59:06 +0530 Subject: [PATCH 2/3] Added placeholder image --- frontend/src/views/AppCreator.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index 27d57a24..9d5fb272 100644 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -38,6 +38,7 @@ import AddAPhotoOutlinedIcon from '@material-ui/icons/AddAPhotoOutlined'; import ZoomInOutlinedIcon from '@material-ui/icons/ZoomInOutlined'; import ZoomOutOutlinedIcon from '@material-ui/icons/ZoomOutOutlined'; import LoopIcon from '@material-ui/icons/Loop'; +import AddPhotoAlternateIcon from '@material-ui/icons/AddPhotoAlternate'; const surfaceColor = "#27292D" const inputColor = "#383B40" @@ -2150,7 +2151,7 @@ const AppCreator = (props) => { let imageData = fileBase64; let croppedData = file.length > 0 ? file : fileBase64 - const imageInfo = + const imageInfo = const zoomIn = () => { setScale(scale+0.1); @@ -2272,6 +2273,7 @@ const AppCreator = (props) => {
{setOpenImageModal(true)}}> upload = ref} onChange={editHeaderImage} /> + {imageInfo}
From de92b0f9780622bbedbfd08205e0e8ad67ef1cb0 Mon Sep 17 00:00:00 2001 From: amitk Date: Wed, 3 Mar 2021 15:06:43 +0530 Subject: [PATCH 3/3] Alternate image to be displayed if no image. --- frontend/src/views/AppCreator.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index 9d5fb272..68898952 100644 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -2152,6 +2152,8 @@ const AppCreator = (props) => { let croppedData = file.length > 0 ? file : fileBase64 const imageInfo = + + const alternateImg = const zoomIn = () => { setScale(scale+0.1); @@ -2273,7 +2275,7 @@ const AppCreator = (props) => {
{setOpenImageModal(true)}}> upload = ref} onChange={editHeaderImage} /> - + {!imageData && (alternateImg)} {imageInfo}