Merge branch 'master' of https://github.com/amitkinfopercept/Shuffle into launch

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.11.1",
     "react-cookie": "^4.0.1",

frontend/src/views/AppCreator.jsx

@@ -12,6 +12,14 @@ import ChipInput from 'material-ui-chip-input'
 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';
+import AddPhotoAlternateIcon from '@material-ui/icons/AddPhotoAlternate';
+
 const surfaceColor = "#27292D"
 const inputColor = "#383B40"
 
@@ -45,6 +53,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"
@@ -2168,8 +2188,116 @@ const AppCreator = (props) => {
 	//	</div> :
 	//	<img src={file} id="logo" style={{width: "100%", height: "100%"}} />
 
-	const imageData = file.length > 0 ? file : fileBase64 
+	const [imageUploadError, setImageUploadError] = useState("");
-	const imageInfo = <img src={imageData} alt="Click to upload an image (174x174)" id="logo" style={{maxWidth: 174, maxHeight: 174, minWidth: 174, minHeight: 174, objectFit: "contain",}} />
+	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 = <img src={imageData} id="logo" style={{maxWidth: 174, maxHeight: 174, minWidth: 174, minHeight: 174, objectFit: "contain",}} />
+
+	const alternateImg = <AddPhotoAlternateIcon style={{ width: 100, height: 100, flex: "1", display: "flex", flexDirection: "row", margin: "auto" }}/>
+	
+	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 ? <div style={{marginTop: 10}}>Error: {imageUploadError}</div> : null
+	const imageUploadModalView = openImageModal ? 
+		<Dialog open={openImageModal} onClose={onCancelSaveAppIcon}
+			PaperProps={{
+				style: {
+					backgroundColor: surfaceColor,
+					color: "white",
+					minWidth: "300px",
+					minHeight: "300px",
+				},
+			}}
+		>
+			<FormControl>
+				<DialogTitle><div style={{color: "rgba(255,255,255,0.9)"}}>Upload App Icon</div></DialogTitle>
+				{errorText}
+				<DialogContent style={{color: "rgba(255,255,255,0.65)"}}>
+					<AvatarEditor
+						ref={setEditorRef}
+						image={croppedData}
+						width={174}
+						height={174}
+						border={50}
+						color={[0, 0, 0, 0.6]} // RGBA
+						scale={scale}
+						rotate={rotate}
+						onImageChange={onPositionChange}
+						onLoadSuccess={()=>setRotatation(0)}
+					/>
+					<Divider style={dividerStyle}/>
+						<Tooltip title={"New Icon"}>
+							<Button variant="outlined" component="label" color="primary" style={appIconStyle}>
+							<AddAPhotoOutlinedIcon onClick={() => {upload.click()}} color="primary" />	
+							</Button> 
+						</Tooltip>
+						<Tooltip title={"Zoom In"}>
+							<Button variant="outlined" component="label" color="primary" style={appIconStyle}>
+							<ZoomInOutlinedIcon onClick={zoomIn} color="primary" />	
+							</Button> 
+						</Tooltip>
+						<Tooltip title={"Zoom out"}>
+							<Button variant="outlined" component="label" color="primary" style={appIconStyle}>
+							<ZoomOutOutlinedIcon onClick={zoomOut} color="primary" />	
+							</Button> 
+						</Tooltip>
+						<Tooltip title={"Rotate"}>
+							<Button variant="outlined" component="label" color="primary" style={appIconStyle}>
+							<LoopIcon onClick={rotatation} color="primary" />	
+							</Button> 
+						</Tooltip>
+					<Divider style={dividerStyle} />
+				</DialogContent>
+				<DialogActions>
+					<Button style={{borderRadius: "0px"}} onClick={onCancelSaveAppIcon} color="primary">
+						Cancel
+					</Button>
+					<Button variant="contained" style={{borderRadius: "0px"}} disabled={disableImageUpload} onClick={() => {
+								onSaveAppIcon()
+							}} color="primary">
+						Continue	
+					</Button>
+				</DialogActions>
+			</FormControl>
+		</Dialog>
+		: null;
 
 	// Random names for type & autoComplete. Didn't research :^)
 	const landingpageDataBrowser = 
@@ -2185,13 +2313,15 @@ const AppCreator = (props) => {
 						{name} {actions === null || actions === undefined || actions.length === 0 ? null : <span>({actions.length})</span>}
 					</h2>
 				</Breadcrumbs>
+				{imageUploadModalView}
 				<Paper style={boxStyle}>
 					<h2 style={{marginBottom: "10px", color: "white"}}>General information</h2>
 					<a target="_blank" href="https://shuffler.io/docs/apps#create_openapi_app" style={{textDecoration: "none", color: "#f85a3e"}}>Click here to learn more about app creation</a>
 					<div style={{color: "white", flex: "1", display: "flex", flexDirection: "row"}}>
 					 	<Tooltip title="Click to edit the app's image" placement="bottom">
-							<div style={{flex: "1", margin: 10, border: "1px solid #f85a3e", cursor: "pointer", backgroundColor: inputColor, maxWidth: 174, maxHeight: 174}} onClick={() => {upload.click()}}>
+							<div style={{flex: "1", margin: 10, border: "1px solid #f85a3e", cursor: "pointer", backgroundColor: inputColor, maxWidth: 174, maxHeight: 174}} onClick={() => {setOpenImageModal(true)}}>
 								<input hidden type="file" ref={(ref) => upload = ref} onChange={editHeaderImage} />
+								{!imageData && (alternateImg)}
 								{imageInfo}
 							</div>
 						</Tooltip>