diff --git a/app/src/core/design/components/userComponents/Button/Button.js b/app/src/core/design/components/userComponents/Button/Button.js index 6c1e23f..6d3a0c3 100644 --- a/app/src/core/design/components/userComponents/Button/Button.js +++ b/app/src/core/design/components/userComponents/Button/Button.js @@ -3,20 +3,36 @@ import React from "react"; import { ButtonDefaultProps, ButtonSettings } from "./ButtonSettings"; import { Button as MaterialButton, Grid, Link, Typography } from "@material-ui/core"; -//setting border to null if border-width is 0 -function getBorderStyles(style) { - var borderStyles = { - borderTop: style.borderTop != null && style.borderTop[0] === "0" ? null : style.borderTop, - borderBottom: - style.borderBottom != null && style.borderBottom[0] === "0" ? null : style.borderBottom, - borderLeft: - style.borderLeft != null && style.borderLeft[0] === "0" ? null : style.borderLeft, - borderRight: - style.borderRight != null && style.borderRight[0] === "0" ? null : style.borderRight +function getStyles(style) { + var styles = { + padding: "", + fontSize: "", + backgroundColor: "" }; - return borderStyles; -} + if (style.size === "large") { + styles.padding = "8px 22px"; + styles.fontSize = "0.9375rem"; + } else if (style.size === "medium") { + styles.padding = "7px 16px"; + styles.fontSize = "0.875rem"; + } else { + styles.padding = "4px 10px"; + styles.fontSize = "0.8125rem"; + } + + if (style.backgroundColor == undefined) { + if (style.variant === "contained") { + styles.backgroundColor = "#e0e0e0"; + } else { + styles.backgroundColor = "#FFFFFF"; + } + } else { + styles.backgroundColor = style.backgroundColor; + } + + return styles; +} export const Button = ({ props, parentStyle, style, ...rest }) => { const { connectors: { connect, drag }, @@ -59,19 +75,17 @@ export const Button = ({ props, parentStyle, style, ...rest }) => { > {props.text} */} - {props.text} - + ); }; diff --git a/app/src/core/design/components/userComponents/Button/ButtonSettings.js b/app/src/core/design/components/userComponents/Button/ButtonSettings.js index 9b1acb6..f8633a5 100644 --- a/app/src/core/design/components/userComponents/Button/ButtonSettings.js +++ b/app/src/core/design/components/userComponents/Button/ButtonSettings.js @@ -6,7 +6,6 @@ import Typography from "@material-ui/core/Typography"; import { PaddingAccordion, MarginAccordion, - BorderAccordion, ColorAccordion, AlignmentAccordion, ActionAccordion, @@ -16,7 +15,11 @@ import { import { CustomAccordion } from "../UtilComponents/Accordion"; import { GroupedButtons } from "../UtilComponents/GroupedButtons"; import { PADDING, MARGIN, BORDER } from "../Defaults"; -import { ButtonSizeAccordion, ButtonVariantAccordion } from "../UtilComponents/ButtonProperties"; +import { + ButtonSizeAccordion, + ButtonVariantAccordion, + BorderAccordion +} from "../UtilComponents/ButtonProperties"; const useStyles = makeStyles(theme => ({ root: { width: "100%" @@ -82,7 +85,7 @@ export const ButtonSettings = () => { isSelfBg={false} defaultImage={ButtonDefaultProps.parentStyle.backgroundImage} /> - + ); @@ -106,7 +109,15 @@ export const ButtonDefaultProps = { "-apple-system,BlinkMacSystemFont,‘Segoe UI’,Roboto,Helvetica,Arial,sans-serif,‘Apple Color Emoji’,‘Segoe UI Emoji’,‘Segoe UI Symbol’", ...BORDER, - borderRadius: 4 + borderRadius: 4, + minWidth: "64px", + boxSizing: "border-box", + fontWeight: "500", + lineHeight: "1.75", + letterSpacing: "0.02857em", + textTransform: "uppercase", + textDecoration: "none", + cursor: "pointer" }, parentStyle: { align: "center", diff --git a/app/src/core/design/components/userComponents/Container/ContainerSettings.js b/app/src/core/design/components/userComponents/Container/ContainerSettings.js index ffec6c8..c128681 100644 --- a/app/src/core/design/components/userComponents/Container/ContainerSettings.js +++ b/app/src/core/design/components/userComponents/Container/ContainerSettings.js @@ -243,7 +243,7 @@ export const ContainerSettings = () => { } /> )} - + ); }; diff --git a/app/src/core/design/components/userComponents/Container/ResizerSettings.js b/app/src/core/design/components/userComponents/Container/ResizerSettings.js index 9ce4ce8..3e644dd 100644 --- a/app/src/core/design/components/userComponents/Container/ResizerSettings.js +++ b/app/src/core/design/components/userComponents/Container/ResizerSettings.js @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({ } })); -export const ResizerSettings = ({ id, isParent }) => { +export const ResizerSettings = ({ id, isParent, type }) => { // console.log(id); const { actions: { setProp }, @@ -49,11 +49,10 @@ export const ResizerSettings = ({ id, isParent }) => { val(props); }); }; - return ( <> {isParent && } - + {type > 1 && } {isParent && } ); } + +export function BorderAccordion({ props, setProp, styleProp, type }) { + var borderString = + props[styleProp].borderRight + + props[styleProp].borderLeft + + props[styleProp].borderBottom + + props[styleProp].borderTop; + + if (type === "outlined" && borderString == "0") { + borderString = "1px solid //#region BFBBBB"; + setProp(props => { + props[styleProp].borderRight = "1px solid #BFBBBB"; + props[styleProp].borderLeft = "1px solid #BFBBBB"; + props[styleProp].borderTop = "1px solid #BFBBBB"; + props[styleProp].borderBottom = "1px solid #BFBBBB"; + }); + } + var isBorderExists = borderString && borderString.split("0px").length < 5; + return ( + + ) : ( + + + none + + + ) + } + children={} + /> + ); +} +BorderAccordion.defaultProps = { + styleProp: "style" +}; diff --git a/server/main/exportComponents/Button/ButtonExport.js b/server/main/exportComponents/Button/ButtonExport.js index 0a843f6..416b59b 100644 --- a/server/main/exportComponents/Button/ButtonExport.js +++ b/server/main/exportComponents/Button/ButtonExport.js @@ -2,27 +2,35 @@ import React from "react"; import { Box, Button as MaterialButton, Link } from "@material-ui/core"; import { Grid } from "../Grid"; -//setting border to null if border-width is 0 -function getBorderStyles(style) { - var borderStyles = { - borderTop: - style.borderTop != null && style.borderTop[0] === "0" - ? null - : style.borderTop, - borderBottom: - style.borderBottom != null && style.borderBottom[0] === "0" - ? null - : style.borderBottom, - borderLeft: - style.borderLeft != null && style.borderLeft[0] === "0" - ? null - : style.borderLeft, - borderRight: - style.borderRight != null && style.borderRight[0] === "0" - ? null - : style.borderRight, +function getStyles(style) { + var styles = { + padding: "", + fontSize: "", + backgroundColor: "", }; - return borderStyles; + + if (style.size === "large") { + styles.padding = "8px 22px"; + styles.fontSize = "0.9375rem"; + } else if (style.size === "medium") { + styles.padding = "7px 16px"; + styles.fontSize = "0.875rem"; + } else { + styles.padding = "4px 10px"; + styles.fontSize = "0.8125rem"; + } + + if (style.backgroundColor == undefined) { + if (style.variant === "contained") { + styles.backgroundColor = "#e0e0e0"; + } else { + styles.backgroundColor = "#FFFFFF"; + } + } else { + styles.backgroundColor = style.backgroundColor; + } + + return styles; } export const ButtonExport = ({ props, id, parentStyle, style, ...rest }) => { //bgimage/bgcolor @@ -42,19 +50,17 @@ export const ButtonExport = ({ props, id, parentStyle, style, ...rest }) => { parentStyleCopy )} > - {props.text} - + ); }; diff --git a/server/main/exportComponents/Grid.js b/server/main/exportComponents/Grid.js index cf5baf2..f77d800 100644 --- a/server/main/exportComponents/Grid.js +++ b/server/main/exportComponents/Grid.js @@ -35,7 +35,11 @@ export const Grid = forwardRef( ///border: "2px solid black", // overflowWrap: "break-word" } - : {}), + : { + width: "100%", + maxWidth: 738, + minWidth: 320 - style.paddingLeft - style.paddingRight, + }), }} className={id === "Main" ? "mainClass" : null} > diff --git a/server/main/exportComponents/HtmlBox/HtmlBoxExport.js b/server/main/exportComponents/HtmlBox/HtmlBoxExport.js index b515cd1..282beff 100644 --- a/server/main/exportComponents/HtmlBox/HtmlBoxExport.js +++ b/server/main/exportComponents/HtmlBox/HtmlBoxExport.js @@ -3,9 +3,12 @@ import parse from "html-react-parser"; import React, { useEffect } from "react"; export const HtmlBoxExport = ({ props, parentStyle, style, ...rest }) => { - return ( - -
-
- ); + return ( + +
+
+ ); }; diff --git a/server/main/exportComponents/Text/TextExport.js b/server/main/exportComponents/Text/TextExport.js index 7d6bb97..3fb4ce8 100644 --- a/server/main/exportComponents/Text/TextExport.js +++ b/server/main/exportComponents/Text/TextExport.js @@ -3,53 +3,78 @@ import React from "react"; import { makeStyles, Typography, Box } from "@material-ui/core"; import parse, { attributesToProps, domToReact } from "html-react-parser"; import { Grid } from "../Grid"; -const useStyles = makeStyles(theme => ({})); +const useStyles = makeStyles((theme) => ({})); export function TextExport({ props, style, parentStyle }) { - const classes = useStyles(); - //bgimage/bgcolor - var pstyleCopy = { ...parentStyle }; + const classes = useStyles(); + //bgimage/bgcolor + var pstyleCopy = { ...parentStyle }; - pstyleCopy.backgroundImage = "url(" + pstyleCopy.backgroundImage + ")"; + pstyleCopy.backgroundImage = "url(" + pstyleCopy.backgroundImage + ")"; - const typographyElements = ["p", "h1", "h2", "h3", "h4", "h5", "h6"]; - const spacing = { - "

": "


", - "

": "


" - }; - let html = props.html; - // html = html.replace( - // new RegExp(Object.keys(spacing).join("|"), "gi"), - // matched => spacing[matched] - // ); - const options = { - replace: ({ attribs, children, name }) => { - if (attribs) { - let props = attributesToProps(attribs); - if (typographyElements.includes(name)) { - let styleObj = { - ...props.style, - whiteSpace: "pre-wrap", - wordBreak: "normal", - wordWrap: "normal" - }; - return ( - - {domToReact(children, options)} - - ); - } else if (name === "hr" || name === "br") { - return React.createElement(name, props); - } else { - return React.createElement(name, props, domToReact(children, options)); - } - } + const typographyElements = ["p", "h1", "h2", "h3", "h4", "h5", "h6"]; + const spacing = { + "

": "


", + "

": "


", + }; + let html = props.html; + // html = html.replace( + // new RegExp(Object.keys(spacing).join("|"), "gi"), + // matched => spacing[matched] + // ); + const options = { + replace: ({ attribs, children, name }) => { + if (attribs) { + let props = attributesToProps(attribs); + if (typographyElements.includes(name)) { + let styleObj = { + ...props.style, + whiteSpace: "pre-wrap", + wordBreak: "normal", + wordWrap: "normal", + color: "black", + }; + return ( + <> + {name === "p" && ( +

{domToReact(children, options)}

+ )} + {name === "h1" && ( +

{domToReact(children, options)}

+ )} + {name === "h2" && ( +

{domToReact(children, options)}

+ )} + {name === "h3" && ( +

{domToReact(children, options)}

+ )} + {name === "h4" && ( +

{domToReact(children, options)}

+ )} + {name === "h5" && ( +
{domToReact(children, options)}
+ )} + {name === "h6" && ( +
{domToReact(children, options)}
+ )} + + ); + } else if (name === "hr" || name === "br") { + return React.createElement(name, props); + } else { + return React.createElement( + name, + props, + domToReact(children, options) + ); } - }; - return ( - - - {parse(html, options)} - - - ); + } + }, + }; + return ( + + + {parse(html, options)} + + + ); } diff --git a/server/main/requestProcessor.js b/server/main/requestProcessor.js index 87dbcfe..8526ec0 100644 --- a/server/main/requestProcessor.js +++ b/server/main/requestProcessor.js @@ -47,7 +47,7 @@ function renderFullPage(html1, css1, bodyBgColor, bodyBgImage) { \n ")})),i),'\n\n \n \n \n \n \n \n ').concat(e,'\n \n \n