Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changing media click to ctrl+click #13

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

changing media click to ctrl+click #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b08a490
changing media click to ctrl+click
sherlocked01 Jan 25, 2022
bacff12
using cmd+click for mac
sherlocked01 Jan 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/src/core/design/components/userComponents/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -60,7 +60,6 @@ export const Button = ({ props, parentStyle, style, ...rest }) => {
{props.text}
</a> */}
<MaterialButton
href={props.path}
target="_blank"
size={style.size}
variant={style.variant}
Expand All @@ -69,6 +68,9 @@ export const Button = ({ props, parentStyle, style, ...rest }) => {
...getBorderStyles(style),
display: "inline-block"
}}
onClick={e => {
ifCtrlCmdPressed(e, props.path);
}}
>
{props.text}
</MaterialButton>
Expand Down
8 changes: 5 additions & 3 deletions app/src/core/design/components/userComponents/Image/Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -13,8 +13,8 @@ export const Image = ({ props, style, parentStyle, ...rest }) => {
var parentStyleCopy = {
...parentStyle
};

parentStyleCopy.backgroundImage = "url(" + parentStyleCopy.backgroundImage + ")";

return (
<Grid
item
Expand All @@ -29,11 +29,13 @@ export const Image = ({ props, style, parentStyle, ...rest }) => {
)}
>
<a
href={props.path}
target={props.linkTarget}
style={{
pointerEvents: props.path === "#" ? "none" : "auto"
}}
onClick={e => {
ifCtrlCmdPressed(e, props.path);
}}
>
<img src={props.src} width={style.width} alt={props.altText} style={style} />
</a>
Expand Down
5 changes: 4 additions & 1 deletion app/src/core/design/components/userComponents/Image/ImageSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%"
Expand Down Expand Up @@ -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: {
Expand Down
96 changes: 84 additions & 12 deletions app/src/core/design/components/userComponents/UtilComponents/SettingsUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 (
<CustomAccordion
title="Action"
Expand All @@ -209,19 +221,44 @@ export function ActionAccordion({ props, setProp }) {
</Typography>
<TextField
variant="outlined"
value={props.props.path === "#" ? "" : props.props.path}
value={tempPath === "#" ? "" : tempPath}
onChange={e => {
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"
/>
<Tooltip arrow title={"Done"}>
<IconButton
size="small"
onClick={() => handleDoneActionUrl(tempPath)}
style={{
cursor: "pointer",
float: "right",
color: props.props.path == tempPath ? "#b4bec3" : "green"
}}
>
<CheckCircleOutlineOutlinedIcon />
</IconButton>
</Tooltip>

<Tooltip arrow title={"Reset"}>
<IconButton
size="small"
onClick={() => handleResetActionUrl(props.props.path)}
style={{
cursor: "pointer",
float: "right",
color: props.props.path == tempPath ? "#b4bec3" : "black"
}}
>
<ReplayOutlinedIcon />
</IconButton>
</Tooltip>
</Box>
<Box m={1} mt={2}>
<Box m={1} mt={3}>
<Typography variant="subtitle2" color="textSecondary">
Open URL in
</Typography>
Expand Down Expand Up @@ -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 (
<CustomAccordion
title="Media"
Expand All @@ -511,19 +558,44 @@ export function MediaAccordion({ props, setProp, src, type }) {
</Typography>
<TextField
variant="outlined"
value={props.props.src === src ? "" : props.props.src}
value={tempSrc === src ? "" : tempSrc}
onChange={e => {
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"
/>
<Tooltip arrow title={"Done"}>
<IconButton
size="small"
onClick={() => handleDoneMediaUrl(tempSrc)}
style={{
cursor: "pointer",
float: "right",
color: props.props.src == tempSrc ? "#b4bec3" : "green"
}}
>
<CheckCircleOutlineOutlinedIcon />
</IconButton>
</Tooltip>

<Tooltip arrow title={"Reset"}>
<IconButton
size="small"
onClick={() => handleResetMediaUrl(props.props.src)}
style={{
cursor: "pointer",
float: "right",
color: props.props.src == tempSrc ? "#b4bec3" : "black"
}}
>
<ReplayOutlinedIcon />
</IconButton>
</Tooltip>
</Box>
<Box m={1} mt={2}>
<Box m={1} mt={3}>
<Typography variant="subtitle2" color="textSecondary">
Placeholder text
</Typography>
Expand Down
88 changes: 62 additions & 26 deletions app/src/core/design/components/userComponents/UtilComponents/VideoProperties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,18 +138,34 @@ export function MediaAccordion({ props, setProp, src, thumbnailSrc, defaultValue
fullWidth
margin="dense"
/>
<ReplayOutlinedIcon
onClick={() => handleResetMediaURL(props.props.src)}
style={{ cursor: "pointer", float: "right" }}
color="disabled"
/>
<CheckCircleOutlineOutlinedIcon
onClick={() => handleDoneMedialURL(tempSrc)}
style={{ cursor: "pointer", float: "right", marginRight: 5 }}
color="disabled"
/>
<Tooltip arrow title={"Done"}>
<IconButton
size="small"
onClick={() => handleDoneMedialURL(tempSrc)}
style={{
cursor: "pointer",
float: "right",
color: props.props.src == tempSrc ? "#b4bec3" : "green"
}}
>
<CheckCircleOutlineOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip arrow title={"Reset"}>
<IconButton
size="small"
onClick={() => handleResetMediaURL(props.props.src)}
style={{
cursor: "pointer",
float: "right",
color: props.props.src == tempSrc ? "#b4bec3" : "black"
}}
>
<ReplayOutlinedIcon />
</IconButton>
</Tooltip>
</Box>
<Box m={1} mt={2}>
<Box m={1} mt={3}>
<Typography variant="subtitle2" color="textSecondary">
Placeholder text
</Typography>
Expand All @@ -166,7 +182,7 @@ export function MediaAccordion({ props, setProp, src, thumbnailSrc, defaultValue
margin="dense"
/>
</Box>
<Box m={1} mt={2}>
<Box m={1} mt={3}>
<Typography variant="subtitle2" color="textSecondary">
Thumbnail URL
</Typography>
Expand All @@ -181,20 +197,40 @@ export function MediaAccordion({ props, setProp, src, thumbnailSrc, defaultValue
fullWidth
margin="dense"
/>
<ReplayOutlinedIcon
onClick={() => handleResetThumbnailURL(props.props.thumbnailSrc)}
style={{ cursor: "pointer", float: "right" }}
color="disabled"
/>
<CheckCircleOutlineOutlinedIcon
onClick={() => handleDoneThumbnailURL(tempThumbnailSrc)}
style={{
cursor: "pointer",
float: "right",
marginRight: 5
}}
color="disabled"
/>
<Tooltip arrow title={"Done"}>
<IconButton
size="small"
onClick={() => handleDoneThumbnailURL(tempThumbnailSrc)}
style={{
cursor: "pointer",
float: "right",
marginRight: 5,
color:
props.props.thumbnailSrc == tempThumbnailSrc
? "#b4bec3"
: "green"
}}
>
<CheckCircleOutlineOutlinedIcon />
</IconButton>
</Tooltip>

<Tooltip arrow title={"Reset"}>
<IconButton
size="small"
onClick={() => handleResetThumbnailURL(props.props.thumbnailSrc)}
style={{
cursor: "pointer",
float: "right",
color:
props.props.thumbnailSrc == tempThumbnailSrc
? "#b4bec3"
: "black"
}}
>
<ReplayOutlinedIcon />
</IconButton>
</Tooltip>
</Box>
</>
}
Expand Down
9 changes: 8 additions & 1 deletion app/src/core/design/components/userComponents/Video/Video.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -32,7 +33,13 @@ export const Video = ({ props, style, defaultValues, parentStyle, ...rest }) =>
)}
ref={connect}
>
<a href={props.src} target="_blank" style={Object.assign(style)}>
<a
onClick={e => {
ifCtrlCmdPressed(e, props.src);
}}
target="_blank"
style={Object.assign(style)}
>
<div>
{props.thumbnailPublicId != "" && (
<CloudinaryContext cloudName="ravenapp">
Expand Down
Loading