@flozy/editor 1.7.0 → 1.7.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +5 -0
- package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +4 -7
- package/dist/Editor/Elements/Form/Workflow/Styles.js +96 -89
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +10 -15
- package/dist/Editor/Elements/Form/Workflow/index.js +2 -1
- package/dist/Editor/Elements/Grid/Grid.js +9 -1
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +8 -0
- package/package.json +1 -1
@@ -3,8 +3,8 @@ import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
|
|
3
3
|
import { MoreHorizontal } from "../../../common/iconslist";
|
4
4
|
import Icon from "../../../common/Icon";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
8
|
function MoreOptions(props) {
|
9
9
|
const {
|
10
10
|
classes,
|
@@ -27,15 +27,12 @@ function MoreOptions(props) {
|
|
27
27
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
28
28
|
arrow: true,
|
29
29
|
title: "More Options",
|
30
|
-
children: /*#__PURE__*/
|
30
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
31
31
|
sx: classes.moreOption,
|
32
32
|
onClick: handleClick,
|
33
|
-
children:
|
33
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
34
34
|
icon: "moreHorizantal"
|
35
|
-
})
|
36
|
-
width: "24px",
|
37
|
-
height: "24px"
|
38
|
-
})]
|
35
|
+
})
|
39
36
|
})
|
40
37
|
}), /*#__PURE__*/_jsx(Menu, {
|
41
38
|
id: "basic-menu",
|
@@ -1,147 +1,154 @@
|
|
1
1
|
const FormStyles = () => ({
|
2
2
|
addButton: {
|
3
|
-
display:
|
4
|
-
justifyContent:
|
3
|
+
display: "flex",
|
4
|
+
justifyContent: "flex-end"
|
5
5
|
},
|
6
6
|
infoText: {
|
7
|
-
fontSize:
|
8
|
-
fontWeight:
|
9
|
-
color:
|
7
|
+
fontSize: "12px",
|
8
|
+
fontWeight: "400",
|
9
|
+
color: "#94A3B8"
|
10
10
|
},
|
11
11
|
bodyTextArea: {
|
12
|
-
|
13
|
-
border:
|
14
|
-
width:
|
15
|
-
maxWidth:
|
16
|
-
outline:
|
12
|
+
"& textarea": {
|
13
|
+
border: "none",
|
14
|
+
width: "100%",
|
15
|
+
maxWidth: "100%",
|
16
|
+
outline: "none"
|
17
17
|
},
|
18
|
-
|
19
|
-
outline:
|
20
|
-
border:
|
18
|
+
"& textarea:focus-visible": {
|
19
|
+
outline: "none",
|
20
|
+
border: "none"
|
21
21
|
}
|
22
22
|
},
|
23
23
|
formHeadings: {
|
24
|
-
fontSize:
|
24
|
+
fontSize: "14px",
|
25
25
|
fontWeight: 500,
|
26
|
-
paddingBottom:
|
27
|
-
paddingTop:
|
26
|
+
paddingBottom: "10px",
|
27
|
+
paddingTop: "10px"
|
28
28
|
},
|
29
29
|
flowListCard: {
|
30
|
-
border:
|
31
|
-
borderRadius:
|
32
|
-
padding:
|
30
|
+
border: "1px solid #6F6F6F33",
|
31
|
+
borderRadius: "8px",
|
32
|
+
padding: "10px"
|
33
33
|
},
|
34
34
|
listHeading: {
|
35
|
-
fontSize:
|
35
|
+
fontSize: "14px",
|
36
36
|
fontWeight: 700
|
37
37
|
},
|
38
38
|
listSubHeading: {
|
39
|
-
fontSize:
|
39
|
+
fontSize: "12px",
|
40
40
|
fontWeight: 500,
|
41
|
-
color:
|
42
|
-
maxWidth:
|
43
|
-
textTransform:
|
41
|
+
color: "#64748B",
|
42
|
+
maxWidth: "380px",
|
43
|
+
textTransform: "capitalize",
|
44
44
|
whiteSpace: "nowrap",
|
45
|
-
overflow:
|
46
|
-
textOverflow:
|
45
|
+
overflow: "hidden",
|
46
|
+
textOverflow: "ellipsis"
|
47
47
|
},
|
48
48
|
addBtnTypo: {
|
49
|
-
color:
|
49
|
+
color: "#94A3B8",
|
50
50
|
fontWeight: 500,
|
51
|
-
fontSize:
|
51
|
+
fontSize: "12px"
|
52
52
|
},
|
53
53
|
emptyList: {
|
54
|
-
justifyContent:
|
55
|
-
display:
|
56
|
-
border:
|
57
|
-
borderRadius:
|
58
|
-
padding:
|
59
|
-
color:
|
54
|
+
justifyContent: "center",
|
55
|
+
display: "flex",
|
56
|
+
border: "1px solid #6F6F6F33",
|
57
|
+
borderRadius: "8px",
|
58
|
+
padding: "10px",
|
59
|
+
color: "#94A3B8"
|
60
60
|
},
|
61
61
|
popupTitle: {
|
62
62
|
fontWeight: 600,
|
63
|
-
fontSize:
|
64
|
-
display:
|
65
|
-
alignItems:
|
63
|
+
fontSize: "16px",
|
64
|
+
display: "flex",
|
65
|
+
alignItems: "center"
|
66
66
|
},
|
67
67
|
subHeadings: {
|
68
68
|
fontWeight: 500,
|
69
|
-
fontSize:
|
69
|
+
fontSize: "14px"
|
70
70
|
},
|
71
71
|
radioBtn: {
|
72
|
-
|
73
|
-
fontSize:
|
74
|
-
color:
|
72
|
+
"& .MuiFormControlLabel-label": {
|
73
|
+
fontSize: "14px",
|
74
|
+
color: "#64748B"
|
75
75
|
}
|
76
76
|
},
|
77
77
|
dialogTitle: {
|
78
|
-
|
79
|
-
padding:
|
78
|
+
"& MuiDialogTitle-root": {
|
79
|
+
padding: "16px 12px"
|
80
80
|
}
|
81
81
|
},
|
82
82
|
closeBtn: {
|
83
|
-
background:
|
84
|
-
color:
|
85
|
-
fontSize:
|
83
|
+
background: "#F4F6F9",
|
84
|
+
color: "#64748B",
|
85
|
+
fontSize: "14px",
|
86
86
|
fontWeight: 500,
|
87
|
-
padding:
|
88
|
-
textTransform:
|
89
|
-
border:
|
90
|
-
|
91
|
-
border:
|
87
|
+
padding: "4px 22px",
|
88
|
+
textTransform: "none",
|
89
|
+
border: "1px solid #D8DDE1",
|
90
|
+
"&:hover": {
|
91
|
+
border: "1px solid #64748B"
|
92
92
|
}
|
93
93
|
},
|
94
94
|
variableBtn: {
|
95
|
-
background:
|
96
|
-
color:
|
97
|
-
fontSize:
|
95
|
+
background: "#F4F6F9",
|
96
|
+
color: "#64748B",
|
97
|
+
fontSize: "14px",
|
98
98
|
fontWeight: 500,
|
99
|
-
padding:
|
100
|
-
textTransform:
|
101
|
-
border:
|
102
|
-
|
103
|
-
|
104
|
-
stroke:
|
99
|
+
padding: "4px 22px",
|
100
|
+
textTransform: "none",
|
101
|
+
border: "1px solid #D8DDE1",
|
102
|
+
"& svg": {
|
103
|
+
"& path": {
|
104
|
+
stroke: "#64748B"
|
105
105
|
}
|
106
106
|
},
|
107
|
-
|
108
|
-
border:
|
107
|
+
"&:hover": {
|
108
|
+
border: "1px solid #64748B"
|
109
109
|
}
|
110
110
|
},
|
111
111
|
saveBtn: {
|
112
|
-
background:
|
113
|
-
fontSize:
|
112
|
+
background: "#2563EB",
|
113
|
+
fontSize: "14px",
|
114
114
|
fontWeight: 500,
|
115
|
-
padding:
|
116
|
-
textTransform:
|
115
|
+
padding: "4px 24px",
|
116
|
+
textTransform: "none",
|
117
|
+
"& .MuiButton-containedSizeSmall": {
|
118
|
+
borderRadius: "5px"
|
119
|
+
},
|
120
|
+
"& .MuiButton-containedPrimary": {
|
121
|
+
background: "#2563EB",
|
122
|
+
borderRadius: "5px"
|
123
|
+
}
|
117
124
|
},
|
118
125
|
select: {
|
119
|
-
minWidth:
|
120
|
-
|
121
|
-
borderRadius:
|
122
|
-
border:
|
123
|
-
boxShadow:
|
126
|
+
minWidth: "110px",
|
127
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
128
|
+
borderRadius: "8px",
|
129
|
+
border: "1px solid #6F6F6F33",
|
130
|
+
boxShadow: "0px 4px 16px 0px #0000000D"
|
124
131
|
},
|
125
|
-
|
126
|
-
borderRadius:
|
127
|
-
border:
|
128
|
-
boxShadow:
|
132
|
+
"&:hover .MuiOutlinedInput-notchedOutline": {
|
133
|
+
borderRadius: "8px",
|
134
|
+
border: "1px solid #6F6F6F33",
|
135
|
+
boxShadow: "0px 4px 16px 0px #0000000D"
|
129
136
|
},
|
130
|
-
|
131
|
-
color:
|
132
|
-
fontSize:
|
137
|
+
"& .MuiSelect-select": {
|
138
|
+
color: "#94A3B8",
|
139
|
+
fontSize: "14px"
|
133
140
|
}
|
134
141
|
},
|
135
142
|
selectList: {
|
136
|
-
color:
|
137
|
-
fontSize:
|
143
|
+
color: "#94A3B8",
|
144
|
+
fontSize: "14px"
|
138
145
|
},
|
139
146
|
toolbarContainer: {
|
140
|
-
border:
|
141
|
-
borderRadius:
|
147
|
+
border: "1px solid #6F6F6F33",
|
148
|
+
borderRadius: "10px"
|
142
149
|
},
|
143
150
|
toolBar: {
|
144
|
-
padding:
|
151
|
+
padding: "5px"
|
145
152
|
},
|
146
153
|
colorButtons: {
|
147
154
|
"& .buttonsWrpr": {
|
@@ -191,17 +198,17 @@ const FormStyles = () => ({
|
|
191
198
|
}
|
192
199
|
},
|
193
200
|
moreOption: {
|
194
|
-
background:
|
195
|
-
borderRadius:
|
201
|
+
background: "#F4F4F4",
|
202
|
+
borderRadius: "8px"
|
196
203
|
},
|
197
204
|
dialogFooter: {
|
198
|
-
|
199
|
-
padding:
|
205
|
+
"&.MuiDialogActions-root": {
|
206
|
+
padding: "8px 24px"
|
200
207
|
}
|
201
208
|
},
|
202
209
|
toolButtons: {
|
203
|
-
width:
|
204
|
-
height:
|
210
|
+
width: "36px",
|
211
|
+
height: "36px"
|
205
212
|
}
|
206
213
|
});
|
207
214
|
export default FormStyles;
|
@@ -3,7 +3,7 @@ import React, { useState } from "react";
|
|
3
3
|
import FormStyles from "./Styles";
|
4
4
|
import Icon from "../../../common/Icon";
|
5
5
|
import { PlusIcon, RestRight } from "../../../common/iconslist";
|
6
|
-
import KeyboardArrowDownIcon from
|
6
|
+
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
7
7
|
import { AllColors } from "../../Color Picker/ColorButtons";
|
8
8
|
import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -20,7 +20,7 @@ const UserInputs = props => {
|
|
20
20
|
const variables = element?.children;
|
21
21
|
const classes = FormStyles();
|
22
22
|
const popupClasses = PopupToolStyle();
|
23
|
-
const [activeColor, setActiveColor] = useState([
|
23
|
+
const [activeColor, setActiveColor] = useState(["#000000"]);
|
24
24
|
//state
|
25
25
|
const [anchorEl, setAnchorEl] = useState(null);
|
26
26
|
const [colorAnchorEl, setColorAnchorEl] = useState(null);
|
@@ -115,7 +115,7 @@ const UserInputs = props => {
|
|
115
115
|
title: "Current Color",
|
116
116
|
children: /*#__PURE__*/_jsx(IconButton, {
|
117
117
|
style: {
|
118
|
-
borderRadius:
|
118
|
+
borderRadius: "50px",
|
119
119
|
background: activeColor
|
120
120
|
}
|
121
121
|
})
|
@@ -140,6 +140,7 @@ const UserInputs = props => {
|
|
140
140
|
item: true,
|
141
141
|
children: /*#__PURE__*/_jsxs(Grid, {
|
142
142
|
container: true,
|
143
|
+
alignItems: "center",
|
143
144
|
children: [/*#__PURE__*/_jsx(Grid, {
|
144
145
|
item: true,
|
145
146
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
@@ -166,12 +167,12 @@ const UserInputs = props => {
|
|
166
167
|
anchorEl: anchorEl,
|
167
168
|
onClose: handleClose,
|
168
169
|
anchorOrigin: {
|
169
|
-
vertical:
|
170
|
-
horizontal:
|
170
|
+
vertical: "bottom",
|
171
|
+
horizontal: "right"
|
171
172
|
},
|
172
173
|
transformOrigin: {
|
173
|
-
vertical:
|
174
|
-
horizontal:
|
174
|
+
vertical: "top",
|
175
|
+
horizontal: "right"
|
175
176
|
},
|
176
177
|
children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
|
177
178
|
sx: {
|
@@ -188,18 +189,12 @@ const UserInputs = props => {
|
|
188
189
|
}), /*#__PURE__*/_jsx(Grid, {
|
189
190
|
item: true,
|
190
191
|
xs: 12,
|
192
|
+
sx: classes.bodyTextArea,
|
191
193
|
children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
|
192
194
|
margin: "none",
|
193
195
|
minRows: 6,
|
194
196
|
value: subject,
|
195
|
-
onChange: handleField
|
196
|
-
className: classes.bodyTextArea,
|
197
|
-
style: {
|
198
|
-
border: 'none',
|
199
|
-
width: "96%",
|
200
|
-
padding: '10px',
|
201
|
-
outline: "none"
|
202
|
-
}
|
197
|
+
onChange: handleField
|
203
198
|
})
|
204
199
|
})]
|
205
200
|
});
|
@@ -46,6 +46,7 @@ const Grid = props => {
|
|
46
46
|
sectionBgColor,
|
47
47
|
sectionBackgroundImage,
|
48
48
|
sectionBannerSpacing,
|
49
|
+
sectionBorderRadius,
|
49
50
|
gridSize
|
50
51
|
} = element;
|
51
52
|
const {
|
@@ -71,6 +72,12 @@ const Grid = props => {
|
|
71
72
|
bottomLeft,
|
72
73
|
bottomRight
|
73
74
|
} = borderRadius || {};
|
75
|
+
const {
|
76
|
+
topLeft: ssTopLeft,
|
77
|
+
topRight: ssTopRight,
|
78
|
+
bottomLeft: ssBottomLeft,
|
79
|
+
bottomRight: ssBottomRight
|
80
|
+
} = sectionBorderRadius || {};
|
74
81
|
const editor = useSlateStatic();
|
75
82
|
const path = ReactEditor.findPath(editor, element);
|
76
83
|
const {
|
@@ -289,7 +296,8 @@ const Grid = props => {
|
|
289
296
|
paddingLeft: `${ssleft}px`,
|
290
297
|
paddingRight: `${ssright}px`,
|
291
298
|
paddingTop: `${sstop}px`,
|
292
|
-
paddingBottom: `${ssbottom}px
|
299
|
+
paddingBottom: `${ssbottom}px`,
|
300
|
+
borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`
|
293
301
|
},
|
294
302
|
"data-path": path.join(","),
|
295
303
|
children: /*#__PURE__*/_jsxs(GridContainer, {
|
@@ -26,5 +26,13 @@ const gridStyle = [{
|
|
26
26
|
key: "sectionBannerSpacing",
|
27
27
|
type: "bannerSpacing"
|
28
28
|
}]
|
29
|
+
}, {
|
30
|
+
tab: "Border",
|
31
|
+
value: "sectionBorderRadius",
|
32
|
+
fields: [{
|
33
|
+
label: "Border",
|
34
|
+
key: "sectionBorderRadius",
|
35
|
+
type: "borderRadius"
|
36
|
+
}]
|
29
37
|
}];
|
30
38
|
export default gridStyle;
|