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