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

Jump to bottom

adding min-width and max-width #14

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

adding min-width and max-width #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f7a4d5
adding min-width and max-width
sherlocked01 Jan 31, 2022
8dfddd0
resolving merge conflicts
sherlocked01 Jan 31, 2022
89f4394
resolving forward email style issue
sherlocked01 Feb 5, 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
50 changes: 32 additions & 18 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 @@ -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 },
Expand Down Expand Up @@ -59,19 +75,17 @@ export const Button = ({ props, parentStyle, style, ...rest }) => {
>
{props.text}
</a> */}
<MaterialButton
<a
href={props.path}
target="_blank"
size={style.size}
variant={style.variant}
target={"_blank"}
style={{
...style,
...getBorderStyles(style),
...getStyles(style),
display: "inline-block"
}}
>
{props.text}
</MaterialButton>
</a>
</Grid>
);
};
Expand Down
19 changes: 15 additions & 4 deletions app/src/core/design/components/userComponents/Button/ButtonSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import Typography from "@material-ui/core/Typography";
import {
PaddingAccordion,
MarginAccordion,
BorderAccordion,
ColorAccordion,
AlignmentAccordion,
ActionAccordion,
Expand All @@ -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%"
Expand Down Expand Up @@ -82,7 +85,7 @@ export const ButtonSettings = () => {
isSelfBg={false}
defaultImage={ButtonDefaultProps.parentStyle.backgroundImage}
/>
<BorderAccordion props={props} setProp={setProp} />
<BorderAccordion props={props} setProp={setProp} type={props.style.variant} />
<ColorAccordion props={props} setProp={setProp} types={["Text", "Button"]} />
</div>
);
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion app/src/core/design/components/userComponents/Container/ContainerSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ export const ContainerSettings = () => {
}
/>
)}
<ResizerSettings id={id} isParent={true} />
<ResizerSettings id={id} isParent={true} type={props.props.containerType} />
</>
);
};
Expand Down
5 changes: 2 additions & 3 deletions app/src/core/design/components/userComponents/Container/ResizerSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -49,11 +49,10 @@ export const ResizerSettings = ({ id, isParent }) => {
val(props);
});
};

return (
<>
{isParent && <AccordionHeader title={"Spacing"} />}
<MarginAccordion props={props} setProp={handleSetProp} />
{type > 1 && <MarginAccordion props={props} setProp={handleSetProp} />}
<PaddingAccordion props={props} setProp={handleSetProp} />
{isParent && <AccordionHeader title={"Decoration"} />}
<BackgroundAccordion
Expand Down
51 changes: 50 additions & 1 deletion app/src/core/design/components/userComponents/UtilComponents/ButtonProperties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Typography from "@material-ui/core/Typography";
import { CustomAccordion } from "./Accordion";
import Select from "@material-ui/core/Select";
import OutlinedInput from "@material-ui/core/OutlinedInput";

import { BorderComponent } from "./Border";
const myStyle = {
box: {
display: "flex",
Expand Down Expand Up @@ -127,3 +127,52 @@ export function ButtonVariantAccordion({ props, setProp }) {
/>
);
}

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 (
<CustomAccordion
title="Border"
preview={
isBorderExists ? (
<Box
style={{
width: 40,
height: 25,
borderRadius: props[styleProp].borderRadius,
borderRight: props[styleProp].borderRight,
borderLeft: props[styleProp].borderLeft,
borderBottom: props[styleProp].borderBottom,
borderTop: props[styleProp].borderTop
}}
/>
) : (
<Box px={1} bgcolor="#f1f1f1" borderRadius={5}>
<Typography variant="caption" color="textSecondary">
none
</Typography>
</Box>
)
}
children={<BorderComponent props={props} setProp={setProp} styleProp={styleProp} />}
/>
);
}
BorderAccordion.defaultProps = {
styleProp: "style"
};
58 changes: 32 additions & 26 deletions server/main/exportComponents/Button/ButtonExport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -42,19 +50,17 @@ export const ButtonExport = ({ props, id, parentStyle, style, ...rest }) => {
parentStyleCopy
)}
>
<MaterialButton
<a
href={props.path}
target="_blank"
size={style.size}
variant={style.variant}
target={"_blank"}
style={{
...style,
...getBorderStyles(style),
...getStyles(style),
display: "inline-block",
}}
>
{props.text}
</MaterialButton>
</a>
</Grid>
);
};
6 changes: 5 additions & 1 deletion server/main/exportComponents/Grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
13 changes: 8 additions & 5 deletions server/main/exportComponents/HtmlBox/HtmlBoxExport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import parse from "html-react-parser";
import React, { useEffect } from "react";

export const HtmlBoxExport = ({ props, parentStyle, style, ...rest }) => {
return (
<Grid item xs={12} style={parentStyle}>
<div dangerouslySetInnerHTML={{ __html: props.html }}></div>
</Grid>
);
return (
<Grid item xs={12} style={parentStyle}>
<div
dangerouslySetInnerHTML={{ __html: props.html }}
style={{ color: "black" }}
></div>
</Grid>
);
};
Loading