From b08a4906a9743effb4c6e5e6d4912dd1f9568ed6 Mon Sep 17 00:00:00 2001 From: Prachi Date: Tue, 25 Jan 2022 12:07:30 +0530 Subject: [PATCH 1/2] changing media click to ctrl+click --- .../userComponents/Button/Button.js | 12 ++- .../components/userComponents/Image/Image.js | 13 ++- .../userComponents/Image/ImageSettings.js | 5 +- .../UtilComponents/SettingsUtils.js | 96 ++++++++++++++++--- .../UtilComponents/VideoProperties.js | 88 ++++++++++++----- .../components/userComponents/Video/Video.js | 16 +++- app/src/core/design/utils/RenderNode.js | 40 +++++++- 7 files changed, 226 insertions(+), 44 deletions(-) diff --git a/app/src/core/design/components/userComponents/Button/Button.js b/app/src/core/design/components/userComponents/Button/Button.js index 6c1e23f..0061add 100644 --- a/app/src/core/design/components/userComponents/Button/Button.js +++ b/app/src/core/design/components/userComponents/Button/Button.js @@ -28,6 +28,14 @@ export const Button = ({ props, parentStyle, style, ...rest }) => { parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; } + function isCtrlPressed(e) { + if (e.ctrlKey) { + if (props.path != "#") { + window.open(props.path, "_blank"); + } + } + } + return ( { {props.text} */} { ...getBorderStyles(style), display: "inline-block" }} + onClick={e => { + isCtrlPressed(e); + }} > {props.text} diff --git a/app/src/core/design/components/userComponents/Image/Image.js b/app/src/core/design/components/userComponents/Image/Image.js index adccc67..fba9d97 100644 --- a/app/src/core/design/components/userComponents/Image/Image.js +++ b/app/src/core/design/components/userComponents/Image/Image.js @@ -13,8 +13,15 @@ export const Image = ({ props, style, parentStyle, ...rest }) => { var parentStyleCopy = { ...parentStyle }; - parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; + + function isCtrlPressed(e) { + if (e.ctrlKey) { + if (props.path != "#") { + window.open(props.path, "_blank"); + } + } + } return ( { )} > { + isCtrlPressed(e); + }} > {props.altText} diff --git a/app/src/core/design/components/userComponents/Image/ImageSettings.js b/app/src/core/design/components/userComponents/Image/ImageSettings.js index e3a88b3..bda1c8e 100644 --- a/app/src/core/design/components/userComponents/Image/ImageSettings.js +++ b/app/src/core/design/components/userComponents/Image/ImageSettings.js @@ -14,6 +14,9 @@ import { } from "../UtilComponents/SettingsUtils"; import { BORDER, MARGIN, PADDING } from "../Defaults"; +const DEFAULT_URL = + "https://res.cloudinary.com/ravenapp/image/upload/c_scale,l_photo-album-icon-png-14_qetrv8,w_150/o_50/v1642597408/cvshvvdzkhrlob4rkfdo_jc3xpx.png"; + const useStyles = makeStyles(theme => ({ root: { width: "100%" @@ -65,7 +68,7 @@ export const ImageDefaultProps = { props: { path: "#", linkTarget: "_self", - src: "https://raven-images.s3.ap-south-1.amazonaws.com/images/placeholder_image.jpg", + src: DEFAULT_URL, altText: "Not found" }, style: { diff --git a/app/src/core/design/components/userComponents/UtilComponents/SettingsUtils.js b/app/src/core/design/components/userComponents/UtilComponents/SettingsUtils.js index 49daa2e..012e99a 100644 --- a/app/src/core/design/components/userComponents/UtilComponents/SettingsUtils.js +++ b/app/src/core/design/components/userComponents/UtilComponents/SettingsUtils.js @@ -20,6 +20,8 @@ import { IconButton } from "@material-ui/core"; import { Tooltip } from "@material-ui/core"; import YouTubeIcon from "@material-ui/icons/YouTube"; import LaunchIcon from "@material-ui/icons/Launch"; +import CheckCircleOutlineOutlinedIcon from "@material-ui/icons/CheckCircleOutlineOutlined"; +import ReplayOutlinedIcon from "@material-ui/icons/ReplayOutlined"; const useStyles = makeStyles(theme => ({ root: { @@ -191,6 +193,16 @@ export function SizeAccordion({ props, setProp, type }) { } export function ActionAccordion({ props, setProp }) { + const [tempPath, setTempPath] = React.useState(props.props.path); + const handleResetActionUrl = value => { + setTempPath(value); + }; + + const handleDoneActionUrl = value => { + setProp(props => { + props.props.path = value; + }); + }; return ( { e.persist(); - setProp(prop => { - if (e.target.value !== "") prop.props.path = e.target.value; - else prop.props.path = "#"; - }); + if (e.target.value !== "") setTempPath(e.target.value); + else setTempPath("#"); }} fullWidth margin="dense" /> + + handleDoneActionUrl(tempPath)} + style={{ + cursor: "pointer", + float: "right", + color: props.props.path == tempPath ? "#b4bec3" : "green" + }} + > + + + + + + handleResetActionUrl(props.props.path)} + style={{ + cursor: "pointer", + float: "right", + color: props.props.path == tempPath ? "#b4bec3" : "black" + }} + > + + + - + Open URL in @@ -489,6 +526,16 @@ export function ColorAccordion({ props, setProp, types }) { } export function MediaAccordion({ props, setProp, src, type }) { + const [tempSrc, setTempSrc] = React.useState(props.props.src); + const handleResetMediaUrl = value => { + setTempSrc(value); + }; + + const handleDoneMediaUrl = value => { + setProp(props => { + props.props.src = value; + }); + }; return ( { e.persist(); - setProp(props => { - if (e.target.value !== "") props.props.src = e.target.value; - else props.props.src = src; - }); + if (e.target.value !== "") setTempSrc(e.target.value); + else setTempSrc(src); }} fullWidth margin="dense" /> + + handleDoneMediaUrl(tempSrc)} + style={{ + cursor: "pointer", + float: "right", + color: props.props.src == tempSrc ? "#b4bec3" : "green" + }} + > + + + + + + handleResetMediaUrl(props.props.src)} + style={{ + cursor: "pointer", + float: "right", + color: props.props.src == tempSrc ? "#b4bec3" : "black" + }} + > + + + - + Placeholder text diff --git a/app/src/core/design/components/userComponents/UtilComponents/VideoProperties.js b/app/src/core/design/components/userComponents/UtilComponents/VideoProperties.js index 9e037e4..2f01b89 100644 --- a/app/src/core/design/components/userComponents/UtilComponents/VideoProperties.js +++ b/app/src/core/design/components/userComponents/UtilComponents/VideoProperties.js @@ -138,18 +138,34 @@ export function MediaAccordion({ props, setProp, src, thumbnailSrc, defaultValue fullWidth margin="dense" /> - handleResetMediaURL(props.props.src)} - style={{ cursor: "pointer", float: "right" }} - color="disabled" - /> - handleDoneMedialURL(tempSrc)} - style={{ cursor: "pointer", float: "right", marginRight: 5 }} - color="disabled" - /> + + handleDoneMedialURL(tempSrc)} + style={{ + cursor: "pointer", + float: "right", + color: props.props.src == tempSrc ? "#b4bec3" : "green" + }} + > + + + + + handleResetMediaURL(props.props.src)} + style={{ + cursor: "pointer", + float: "right", + color: props.props.src == tempSrc ? "#b4bec3" : "black" + }} + > + + + - + Placeholder text @@ -166,7 +182,7 @@ export function MediaAccordion({ props, setProp, src, thumbnailSrc, defaultValue margin="dense" /> - + Thumbnail URL @@ -181,20 +197,40 @@ export function MediaAccordion({ props, setProp, src, thumbnailSrc, defaultValue fullWidth margin="dense" /> - handleResetThumbnailURL(props.props.thumbnailSrc)} - style={{ cursor: "pointer", float: "right" }} - color="disabled" - /> - handleDoneThumbnailURL(tempThumbnailSrc)} - style={{ - cursor: "pointer", - float: "right", - marginRight: 5 - }} - color="disabled" - /> + + handleDoneThumbnailURL(tempThumbnailSrc)} + style={{ + cursor: "pointer", + float: "right", + marginRight: 5, + color: + props.props.thumbnailSrc == tempThumbnailSrc + ? "#b4bec3" + : "green" + }} + > + + + + + + handleResetThumbnailURL(props.props.thumbnailSrc)} + style={{ + cursor: "pointer", + float: "right", + color: + props.props.thumbnailSrc == tempThumbnailSrc + ? "#b4bec3" + : "black" + }} + > + + + } diff --git a/app/src/core/design/components/userComponents/Video/Video.js b/app/src/core/design/components/userComponents/Video/Video.js index 6e94073..6273cef 100644 --- a/app/src/core/design/components/userComponents/Video/Video.js +++ b/app/src/core/design/components/userComponents/Video/Video.js @@ -19,6 +19,14 @@ export const Video = ({ props, style, defaultValues, parentStyle, ...rest }) => parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; } + function isCtrlPressed(e) { + if (e.ctrlKey) { + if (props.path != "#") { + window.open(props.src, "_blank"); + } + } + } + return ( )} ref={connect} > - + { + isCtrlPressed(e); + }} + target="_blank" + style={Object.assign(style)} + >
{props.thumbnailPublicId != "" && ( diff --git a/app/src/core/design/utils/RenderNode.js b/app/src/core/design/utils/RenderNode.js index e773dbb..ecb8c60 100644 --- a/app/src/core/design/utils/RenderNode.js +++ b/app/src/core/design/utils/RenderNode.js @@ -11,6 +11,7 @@ import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward"; import AddIcon from "@material-ui/icons/Add"; import { Toolbox } from "./Toolbox"; import ZoomOutMapIcon from "@material-ui/icons/ZoomOutMap"; +import LaunchIcon from "@material-ui/icons/Launch"; import { renderNodeUtils } from "./renderNodeUtils"; import FilterNoneIcon from "@material-ui/icons/FilterNone"; @@ -179,6 +180,11 @@ export const RenderNode = ({ render }) => { window.onkeyup = function(e) { keysDown[e.key] = false; }; + + function onClickOpenUrl(path) { + if (path != "#") window.open(path, "_blank"); + } + const border = ({ top, bottom, right, left, height, width, name }) => { const borderLabel = `border${titleCase(name)}`; return ( @@ -221,7 +227,12 @@ export const RenderNode = ({ render }) => { { }} > <> + {(src.data.name === "Image" || + src.data.name === "Button") && ( + + + onClickOpenUrl(src.data.props.props.path) + } + > + + + + )} + {src.data.name === "Video" && ( + + + onClickOpenUrl(src.data.props.props.src) + } + > + + + + )} {moveable && ( <> From bacff1205c2ec90a2e3e11f78f6c0f6efd064354 Mon Sep 17 00:00:00 2001 From: Prachi Date: Thu, 27 Jan 2022 13:55:48 +0530 Subject: [PATCH 2/2] using cmd+click for mac --- .../components/userComponents/Button/Button.js | 12 ++---------- .../components/userComponents/Image/Image.js | 11 ++--------- .../components/userComponents/Video/Video.js | 11 ++--------- app/src/core/design/utils/RenderNode.js | 4 ++-- app/src/core/design/utils/detectCtrlCmd.js | 15 +++++++++++++++ 5 files changed, 23 insertions(+), 30 deletions(-) create mode 100644 app/src/core/design/utils/detectCtrlCmd.js diff --git a/app/src/core/design/components/userComponents/Button/Button.js b/app/src/core/design/components/userComponents/Button/Button.js index 0061add..c21ea8a 100644 --- a/app/src/core/design/components/userComponents/Button/Button.js +++ b/app/src/core/design/components/userComponents/Button/Button.js @@ -2,7 +2,7 @@ import { useNode } from "@craftjs/core"; import React from "react"; import { ButtonDefaultProps, ButtonSettings } from "./ButtonSettings"; import { Button as MaterialButton, Grid, Link, Typography } from "@material-ui/core"; - +import ifCtrlCmdPressed from "../../../utils/detectCtrlCmd"; //setting border to null if border-width is 0 function getBorderStyles(style) { var borderStyles = { @@ -28,14 +28,6 @@ export const Button = ({ props, parentStyle, style, ...rest }) => { parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; } - function isCtrlPressed(e) { - if (e.ctrlKey) { - if (props.path != "#") { - window.open(props.path, "_blank"); - } - } - } - return ( { display: "inline-block" }} onClick={e => { - isCtrlPressed(e); + ifCtrlCmdPressed(e, props.path); }} > {props.text} diff --git a/app/src/core/design/components/userComponents/Image/Image.js b/app/src/core/design/components/userComponents/Image/Image.js index fba9d97..8f520f2 100644 --- a/app/src/core/design/components/userComponents/Image/Image.js +++ b/app/src/core/design/components/userComponents/Image/Image.js @@ -2,7 +2,7 @@ import { useNode } from "@craftjs/core"; import { Grid } from "@material-ui/core"; import React from "react"; import { ImageDefaultProps, ImageSettings } from "./ImageSettings"; - +import ifCtrlCmdPressed from "../../../utils/detectCtrlCmd"; export const Image = ({ props, style, parentStyle, ...rest }) => { const { connectors: { connect, drag }, @@ -15,13 +15,6 @@ export const Image = ({ props, style, parentStyle, ...rest }) => { }; parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; - function isCtrlPressed(e) { - if (e.ctrlKey) { - if (props.path != "#") { - window.open(props.path, "_blank"); - } - } - } return ( { pointerEvents: props.path === "#" ? "none" : "auto" }} onClick={e => { - isCtrlPressed(e); + ifCtrlCmdPressed(e, props.path); }} > {props.altText} diff --git a/app/src/core/design/components/userComponents/Video/Video.js b/app/src/core/design/components/userComponents/Video/Video.js index 6273cef..ee3b44a 100644 --- a/app/src/core/design/components/userComponents/Video/Video.js +++ b/app/src/core/design/components/userComponents/Video/Video.js @@ -5,6 +5,7 @@ import { VideoDefaultProps, VideoSettings } from "./VideoSettings"; import { CloudinaryContext, Transformation } from "cloudinary-react"; import { Image } from "cloudinary-react"; import format from "../../../utils/stringFormat"; +import ifCtrlCmdPressed from "../../../utils/detectCtrlCmd"; export const Video = ({ props, style, defaultValues, parentStyle, ...rest }) => { const { connectors: { connect, drag }, @@ -19,14 +20,6 @@ export const Video = ({ props, style, defaultValues, parentStyle, ...rest }) => parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; } - function isCtrlPressed(e) { - if (e.ctrlKey) { - if (props.path != "#") { - window.open(props.src, "_blank"); - } - } - } - return ( > { - isCtrlPressed(e); + ifCtrlCmdPressed(e, props.src); }} target="_blank" style={Object.assign(style)} diff --git a/app/src/core/design/utils/RenderNode.js b/app/src/core/design/utils/RenderNode.js index ecb8c60..85794c4 100644 --- a/app/src/core/design/utils/RenderNode.js +++ b/app/src/core/design/utils/RenderNode.js @@ -249,7 +249,7 @@ export const RenderNode = ({ render }) => { <> {(src.data.name === "Image" || src.data.name === "Button") && ( - + { )} {src.data.name === "Video" && ( - +