diff --git a/app/src/core/design/components/userComponents/Button/Button.js b/app/src/core/design/components/userComponents/Button/Button.js index 6c1e23f..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 = { @@ -60,7 +60,6 @@ export const Button = ({ props, parentStyle, style, ...rest }) => { {props.text} */} { ...getBorderStyles(style), display: "inline-block" }} + onClick={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 adccc67..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 }, @@ -13,8 +13,8 @@ export const Image = ({ props, style, parentStyle, ...rest }) => { var parentStyleCopy = { ...parentStyle }; - parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")"; + return ( { )} > { + ifCtrlCmdPressed(e, props.path); + }} > {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..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 }, @@ -32,7 +33,13 @@ export const Video = ({ props, style, defaultValues, parentStyle, ...rest }) => )} ref={connect} > - + { + ifCtrlCmdPressed(e, props.src); + }} + 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..85794c4 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 && ( <> diff --git a/app/src/core/design/utils/detectCtrlCmd.js b/app/src/core/design/utils/detectCtrlCmd.js new file mode 100644 index 0000000..9b73c82 --- /dev/null +++ b/app/src/core/design/utils/detectCtrlCmd.js @@ -0,0 +1,15 @@ +function ifCtrlCmdPressed(e, path) { + var mac = navigator.userAgent.indexOf("Mac OS X"); + + if (mac == -1) { + if (e.ctrlKey && path != "#") { + window.open(path, "_blank"); + } + } else { + if (e.metaKey && path != "#") { + window.open(path, "_blank"); + } + } +} + +export default ifCtrlCmdPressed;