@flozy/editor 1.9.5 → 1.9.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +15 -12
- package/dist/Editor/Editor.css +1 -7
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +3 -0
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +6 -1
- package/dist/Editor/Elements/Color Picker/Styles.js +9 -4
- package/dist/Editor/Elements/Embed/Image.js +18 -6
- package/dist/Editor/Elements/Embed/Video.js +25 -6
- package/dist/Editor/Elements/Form/Form.js +1 -0
- package/dist/Editor/Elements/Form/FormElements/index.js +2 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +2 -3
- package/dist/Editor/Elements/Form/Workflow/Styles.js +19 -1
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +6 -2
- package/dist/Editor/Elements/Form/Workflow/index.js +8 -2
- package/dist/Editor/Elements/SimpleText.js +5 -1
- package/dist/Editor/Styles/EditorStyles.js +11 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +6 -1
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +2 -0
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -4
- package/dist/Editor/Toolbar/Mini/Styles.js +15 -1
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +40 -6
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +54 -0
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +53 -0
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +162 -9
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +4 -1
- package/dist/Editor/common/ColorPickerButton.js +6 -8
- package/dist/Editor/common/ImageSelector/ImageSelector.js +6 -5
- package/dist/Editor/common/ImageSelector/Styles.js +59 -45
- package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -10
- package/dist/Editor/common/MentionsPopup/Styles.js +16 -7
- package/dist/Editor/common/MentionsPopup/index.js +5 -4
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +3 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +6 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +6 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +3 -1
- package/dist/Editor/common/StyleBuilder/index.js +16 -5
- package/dist/Editor/common/iconslist.js +0 -2
- package/dist/Editor/commonStyle.js +50 -6
- package/dist/Editor/helper/theme.js +6 -0
- package/dist/Editor/hooks/useMouseMove.js +3 -1
- package/dist/Editor/utils/customHooks/useResize.js +10 -3
- package/dist/Editor/utils/draftToSlate.js +0 -2
- package/package.json +1 -1
@@ -0,0 +1,54 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const Select = props => {
|
6
|
+
const {
|
7
|
+
classes,
|
8
|
+
data,
|
9
|
+
onSelectTemplate
|
10
|
+
} = props;
|
11
|
+
return /*#__PURE__*/_jsx(Box, {
|
12
|
+
className: "template-card-action",
|
13
|
+
component: "div",
|
14
|
+
sx: classes.templateCardBtnGrp,
|
15
|
+
style: {
|
16
|
+
padding: 0,
|
17
|
+
background: "transparent"
|
18
|
+
},
|
19
|
+
children: /*#__PURE__*/_jsx(Button, {
|
20
|
+
className: "blueBtn",
|
21
|
+
onClick: onSelectTemplate(data),
|
22
|
+
children: "Select"
|
23
|
+
})
|
24
|
+
});
|
25
|
+
};
|
26
|
+
const ButtonTemplateCard = props => {
|
27
|
+
const {
|
28
|
+
classes,
|
29
|
+
m,
|
30
|
+
onSelectTemplate
|
31
|
+
} = props;
|
32
|
+
return /*#__PURE__*/_jsx(Grid, {
|
33
|
+
item: true,
|
34
|
+
xs: 3,
|
35
|
+
children: /*#__PURE__*/_jsx(Card, {
|
36
|
+
sx: classes.paperOverrides,
|
37
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
38
|
+
sx: classes.buttonCardMediaWrpr,
|
39
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
40
|
+
className: `template-card-media`,
|
41
|
+
component: "div",
|
42
|
+
image: m?.thumbnail,
|
43
|
+
alt: m?.title,
|
44
|
+
sx: classes.buttonCardMedia
|
45
|
+
}), /*#__PURE__*/_jsx(Select, {
|
46
|
+
classes: classes,
|
47
|
+
onSelectTemplate: onSelectTemplate,
|
48
|
+
data: m
|
49
|
+
})]
|
50
|
+
})
|
51
|
+
})
|
52
|
+
}, `template_${m.id}`);
|
53
|
+
};
|
54
|
+
export default ButtonTemplateCard;
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
+
const Select = props => {
|
6
|
+
const {
|
7
|
+
classes,
|
8
|
+
data,
|
9
|
+
onSelectTemplate
|
10
|
+
} = props;
|
11
|
+
return /*#__PURE__*/_jsx(Box, {
|
12
|
+
className: "template-card-action",
|
13
|
+
component: "div",
|
14
|
+
sx: classes.templateCardBtnGrp,
|
15
|
+
style: {
|
16
|
+
background: "transparent"
|
17
|
+
},
|
18
|
+
children: /*#__PURE__*/_jsx(Button, {
|
19
|
+
className: "blueBtn",
|
20
|
+
onClick: onSelectTemplate(data),
|
21
|
+
children: "Select"
|
22
|
+
})
|
23
|
+
});
|
24
|
+
};
|
25
|
+
const FullViewCard = props => {
|
26
|
+
const {
|
27
|
+
classes,
|
28
|
+
m,
|
29
|
+
onSelectTemplate
|
30
|
+
} = props;
|
31
|
+
return /*#__PURE__*/_jsx(Grid, {
|
32
|
+
item: true,
|
33
|
+
xs: 12,
|
34
|
+
children: /*#__PURE__*/_jsx(Card, {
|
35
|
+
sx: classes.paperOverrides,
|
36
|
+
className: "paperOverrides",
|
37
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
38
|
+
sx: classes.buttonCardMediaWrpr,
|
39
|
+
children: [/*#__PURE__*/_jsx(CardMedia, {
|
40
|
+
component: "div",
|
41
|
+
image: m?.thumbnail,
|
42
|
+
alt: m?.title,
|
43
|
+
sx: classes.fullViewCardMedia
|
44
|
+
}), /*#__PURE__*/_jsx(Select, {
|
45
|
+
classes: classes,
|
46
|
+
onSelectTemplate: onSelectTemplate,
|
47
|
+
data: m
|
48
|
+
})]
|
49
|
+
})
|
50
|
+
})
|
51
|
+
}, `template_${m.id}`);
|
52
|
+
};
|
53
|
+
export default FullViewCard;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
const usePopupStyle =
|
1
|
+
const usePopupStyle = theme => ({
|
2
2
|
popupWrapper: {
|
3
3
|
boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
|
4
4
|
zIndex: 1300,
|
@@ -14,6 +14,37 @@ const usePopupStyle = () => ({
|
|
14
14
|
},
|
15
15
|
"&.xs": {
|
16
16
|
transform: "none !important"
|
17
|
+
},
|
18
|
+
"& .MuiPaper-root": {
|
19
|
+
backgroundColor: theme?.palette?.editor?.background
|
20
|
+
},
|
21
|
+
"& .MuiTypography-root": {
|
22
|
+
color: theme?.palette?.editor?.textColor
|
23
|
+
},
|
24
|
+
"& .MuiInputBase-root": {
|
25
|
+
color: theme?.palette?.editor?.textColor,
|
26
|
+
"& svg": {
|
27
|
+
color: theme?.palette?.editor?.textColor
|
28
|
+
},
|
29
|
+
"&.MuiOutlinedInput-root:hover": {
|
30
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
31
|
+
border: `1px solid ${theme?.palette?.editor?.textColor}`
|
32
|
+
}
|
33
|
+
}
|
34
|
+
},
|
35
|
+
"& .MuiCheckbox-root": {
|
36
|
+
color: theme?.palette?.editor?.textColor
|
37
|
+
},
|
38
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
39
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
40
|
+
},
|
41
|
+
"& button": {
|
42
|
+
color: theme?.palette?.editor?.textColor
|
43
|
+
},
|
44
|
+
"& .buttonsWrpr": {
|
45
|
+
"& button": {
|
46
|
+
color: theme?.palette?.editor?.textColor
|
47
|
+
}
|
17
48
|
}
|
18
49
|
},
|
19
50
|
textFormatWrapper: {
|
@@ -37,7 +68,7 @@ const usePopupStyle = () => ({
|
|
37
68
|
marginBottom: "20px"
|
38
69
|
},
|
39
70
|
"& .MuiOutlinedInput-notchedOutline": {
|
40
|
-
border:
|
71
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
41
72
|
},
|
42
73
|
"& .MuiOutlinedInput-root": {
|
43
74
|
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
@@ -70,6 +101,16 @@ const usePopupStyle = () => ({
|
|
70
101
|
fontSize: "14px",
|
71
102
|
color: "#64748B"
|
72
103
|
}
|
104
|
+
},
|
105
|
+
"& .MuiTab-root": {
|
106
|
+
color: theme?.palette?.editor?.textColor
|
107
|
+
},
|
108
|
+
"& button": {
|
109
|
+
"&:hover": {
|
110
|
+
"& span": {
|
111
|
+
color: theme?.palette?.editor?.activeColor
|
112
|
+
}
|
113
|
+
}
|
73
114
|
}
|
74
115
|
},
|
75
116
|
textFormatLabel: {
|
@@ -187,25 +228,40 @@ const usePopupStyle = () => ({
|
|
187
228
|
marginTop: "8px",
|
188
229
|
textTransform: "capitalize",
|
189
230
|
"&.active": {
|
190
|
-
|
231
|
+
backgroundColor: theme?.palette?.editor?.background,
|
232
|
+
border: `1px solid transparent`,
|
233
|
+
color: theme?.palette?.editor?.activeColor
|
191
234
|
}
|
192
235
|
},
|
193
236
|
btnGroup: {
|
194
|
-
backgroundColor:
|
237
|
+
backgroundColor: theme?.palette?.editor?.background,
|
195
238
|
"& button": {
|
239
|
+
backgroundColor: theme?.palette?.editor?.background,
|
196
240
|
marginRight: "0px",
|
197
|
-
color:
|
198
|
-
|
241
|
+
color: theme?.palette?.editor?.textColor,
|
242
|
+
borderColor: theme?.palette?.editor?.borderColor,
|
199
243
|
textTransform: "capitalize",
|
244
|
+
marginBottom: "0px",
|
245
|
+
"&:hover": {
|
246
|
+
color: theme?.palette?.editor?.borderColor,
|
247
|
+
background: theme?.palette?.editor?.background
|
248
|
+
},
|
200
249
|
"&.active": {
|
201
|
-
|
250
|
+
background: theme?.palette?.editor?.background,
|
251
|
+
color: theme?.palette?.editor?.activeColor
|
202
252
|
},
|
203
253
|
"&.no-hover": {
|
204
|
-
border:
|
254
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
255
|
+
}
|
256
|
+
}
|
257
|
+
},
|
258
|
+
allColor: {
|
259
|
+
"& .buttonsWrpr": {
|
260
|
+
"& button": {
|
261
|
+
color: theme?.palette?.editor?.textColor
|
205
262
|
}
|
206
263
|
}
|
207
264
|
},
|
208
|
-
allColor: {},
|
209
265
|
allColorInner: {
|
210
266
|
"& .buttonsWrpr": {
|
211
267
|
"& button": {
|
@@ -269,6 +325,103 @@ const usePopupStyle = () => ({
|
|
269
325
|
"& svg": {
|
270
326
|
color: "#CCC"
|
271
327
|
}
|
328
|
+
},
|
329
|
+
textOptions: {
|
330
|
+
backgroundColor: theme?.palette?.editor?.background,
|
331
|
+
color: theme?.palette?.editor?.textColor
|
332
|
+
},
|
333
|
+
textSize: {
|
334
|
+
"& .textFontArrows": {
|
335
|
+
"& svg": {
|
336
|
+
stroke: theme?.palette?.editor?.textColor
|
337
|
+
}
|
338
|
+
}
|
339
|
+
},
|
340
|
+
closeBtn: {
|
341
|
+
backgroundColor: theme?.palette?.editor?.background,
|
342
|
+
color: theme?.palette?.editor?.textColor
|
343
|
+
},
|
344
|
+
colorPickerPopup: {
|
345
|
+
"& .MuiPaper-root": {
|
346
|
+
overflow: "auto",
|
347
|
+
backgroundColor: theme?.palette?.editor?.background
|
348
|
+
},
|
349
|
+
"& .popup_tabs": {
|
350
|
+
backgroundColor: theme?.palette?.editor?.background
|
351
|
+
},
|
352
|
+
"& .popup_tabs-header": {
|
353
|
+
backgroundColor: theme?.palette?.editor?.background,
|
354
|
+
"& .popup_tabs-header-label-active": {
|
355
|
+
color: theme?.palette?.editor?.activeColor,
|
356
|
+
backgroundColor: theme?.palette?.editor?.background
|
357
|
+
}
|
358
|
+
},
|
359
|
+
"& .colorpicker": {
|
360
|
+
backgroundColor: theme?.palette?.editor?.background
|
361
|
+
},
|
362
|
+
"& .color-picker-panel": {
|
363
|
+
backgroundColor: theme?.palette?.editor?.background
|
364
|
+
},
|
365
|
+
"& .input_rgba": {
|
366
|
+
"& input": {
|
367
|
+
backgroundColor: theme?.palette?.editor?.background,
|
368
|
+
color: theme?.palette?.editor?.textColor
|
369
|
+
}
|
370
|
+
}
|
371
|
+
},
|
372
|
+
colorPopper: {
|
373
|
+
"& .MuiPaper-root": {
|
374
|
+
backgroundColor: theme?.palette?.editor?.background
|
375
|
+
}
|
376
|
+
},
|
377
|
+
fullViewCardMedia: {
|
378
|
+
width: "100%",
|
379
|
+
height: "130px",
|
380
|
+
backgroundPosition: "left top",
|
381
|
+
backgroundSize: "100% auto",
|
382
|
+
zIndex: 1,
|
383
|
+
position: "relative",
|
384
|
+
"&.fullscreen": {
|
385
|
+
height: "130px"
|
386
|
+
}
|
387
|
+
},
|
388
|
+
buttonCardMedia: {
|
389
|
+
width: "100%",
|
390
|
+
height: "48px",
|
391
|
+
backgroundPosition: "left top",
|
392
|
+
backgroundSize: "contain",
|
393
|
+
zIndex: 1,
|
394
|
+
position: "relative",
|
395
|
+
"&.fullscreen": {
|
396
|
+
height: "48px"
|
397
|
+
}
|
398
|
+
},
|
399
|
+
buttonCardMediaWrpr: {
|
400
|
+
position: "relative",
|
401
|
+
margin: "8px",
|
402
|
+
marginBottom: "0px",
|
403
|
+
"&:hover": {
|
404
|
+
"& .template-card-action": {
|
405
|
+
display: "flex"
|
406
|
+
}
|
407
|
+
},
|
408
|
+
"& .img-loader-wrapper": {
|
409
|
+
position: "absolute",
|
410
|
+
width: "12px",
|
411
|
+
height: "12px",
|
412
|
+
left: 0,
|
413
|
+
right: 0,
|
414
|
+
top: 0,
|
415
|
+
bottom: 0,
|
416
|
+
margin: "auto",
|
417
|
+
zIndex: 0
|
418
|
+
}
|
419
|
+
},
|
420
|
+
paperOverrides: {
|
421
|
+
"&.MuiPaper-root": {
|
422
|
+
background: "transparent",
|
423
|
+
boxShadow: "none"
|
424
|
+
}
|
272
425
|
}
|
273
426
|
});
|
274
427
|
export default usePopupStyle;
|
@@ -131,6 +131,7 @@ const TextFormat = props => {
|
|
131
131
|
xs: 12,
|
132
132
|
sx: classes.textFormatField,
|
133
133
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
134
|
+
classes: classes,
|
134
135
|
...fontFamily,
|
135
136
|
editor: editor
|
136
137
|
})
|
@@ -151,6 +152,7 @@ const TextFormat = props => {
|
|
151
152
|
xs: 12,
|
152
153
|
sx: classes.textFormatField,
|
153
154
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
155
|
+
classes: classes,
|
154
156
|
...fontWeight,
|
155
157
|
editor: editor,
|
156
158
|
width: "100%"
|
@@ -169,6 +171,7 @@ const TextFormat = props => {
|
|
169
171
|
xs: 12,
|
170
172
|
sx: classes.textFormatCG,
|
171
173
|
children: /*#__PURE__*/_jsx(TextSize, {
|
174
|
+
classes: classes,
|
172
175
|
format: "fontSize",
|
173
176
|
activeMark: activeMark,
|
174
177
|
editor: editor,
|
@@ -11,7 +11,10 @@ import useWindowResize from "../../hooks/useWindowResize";
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
const PopupTool = props => {
|
14
|
-
const
|
14
|
+
const {
|
15
|
+
theme
|
16
|
+
} = props;
|
17
|
+
const classes = usePopupStyle(theme);
|
15
18
|
const [anchorEl, setAnchorEl] = useState(null);
|
16
19
|
const [open, setOpen] = useState(false);
|
17
20
|
const editor = useSlate();
|
@@ -9,7 +9,8 @@ const ColorPickerButton = props => {
|
|
9
9
|
const {
|
10
10
|
value,
|
11
11
|
onSave,
|
12
|
-
defaultColors = []
|
12
|
+
defaultColors = [],
|
13
|
+
classes
|
13
14
|
} = props;
|
14
15
|
const [anchorEl, setAnchorEl] = useState(null);
|
15
16
|
const [color, setColor] = useState(value);
|
@@ -46,14 +47,11 @@ const ColorPickerButton = props => {
|
|
46
47
|
horizontal: "center"
|
47
48
|
},
|
48
49
|
onClose: handleClose,
|
49
|
-
sx:
|
50
|
-
"& .MuiPaper-root": {
|
51
|
-
overflow: "auto"
|
52
|
-
}
|
53
|
-
},
|
50
|
+
sx: classes.colorPickerPopup,
|
54
51
|
children: /*#__PURE__*/_jsx(Grid, {
|
55
52
|
container: true,
|
56
|
-
padding:
|
53
|
+
padding: 0,
|
54
|
+
className: "ed-cp-wrpr",
|
57
55
|
children: /*#__PURE__*/_jsxs(Grid, {
|
58
56
|
item: true,
|
59
57
|
xs: 12,
|
@@ -68,7 +66,7 @@ const ColorPickerButton = props => {
|
|
68
66
|
style: {
|
69
67
|
display: "flex",
|
70
68
|
justifyContent: "end",
|
71
|
-
|
69
|
+
margin: "8px"
|
72
70
|
},
|
73
71
|
children: [/*#__PURE__*/_jsx(Button, {
|
74
72
|
onClick: handleClose,
|
@@ -5,6 +5,7 @@ import ChooseAssets from "./Options/ChooseAssets";
|
|
5
5
|
import AddLink from "./Options/AddLink";
|
6
6
|
import Icon from "../Icon";
|
7
7
|
import ImageSelectorStyles from "./Styles";
|
8
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
8
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -20,7 +21,10 @@ const TAB_SHOW = {
|
|
20
21
|
Document: ["addLink", "upload"]
|
21
22
|
};
|
22
23
|
const ImageSelector = props => {
|
23
|
-
const
|
24
|
+
const {
|
25
|
+
theme
|
26
|
+
} = useEditorContext();
|
27
|
+
const classes = ImageSelectorStyles(theme);
|
24
28
|
const {
|
25
29
|
value,
|
26
30
|
onClose,
|
@@ -49,10 +53,7 @@ const ImageSelector = props => {
|
|
49
53
|
sx: classes.dialogWrapper,
|
50
54
|
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
51
55
|
children: /*#__PURE__*/_jsxs(Typography, {
|
52
|
-
sx:
|
53
|
-
fontSize: "16px",
|
54
|
-
fontWeight: 500
|
55
|
-
},
|
56
|
+
sx: classes.titleTypo,
|
56
57
|
children: ["Add ", title]
|
57
58
|
})
|
58
59
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
|
@@ -1,28 +1,32 @@
|
|
1
|
-
const ImageSelectorStyles =
|
1
|
+
const ImageSelectorStyles = theme => ({
|
2
2
|
root: {},
|
3
3
|
tabs: {
|
4
4
|
"& button": {
|
5
5
|
fontSize: "12px",
|
6
6
|
fontWeight: "500",
|
7
7
|
textTransform: "capitalize",
|
8
|
-
minHeight:
|
9
|
-
padding:
|
10
|
-
marginRight:
|
8
|
+
minHeight: "40px",
|
9
|
+
padding: "10px",
|
10
|
+
marginRight: "24px",
|
11
|
+
borderRadius: "7px",
|
12
|
+
marginBottom: "12px",
|
13
|
+
color: theme?.palette?.editor?.textColor,
|
11
14
|
"&.hidden": {
|
12
15
|
display: "none"
|
13
16
|
},
|
14
17
|
"&.active": {
|
15
|
-
backgroundColor:
|
16
|
-
border:
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
stroke: '#2563EB'
|
18
|
+
backgroundColor: theme?.palette?.editor?.background,
|
19
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`,
|
20
|
+
"& svg": {
|
21
|
+
"& path": {
|
22
|
+
stroke: theme?.palette?.editor?.activeColor
|
21
23
|
}
|
22
24
|
}
|
23
25
|
},
|
24
26
|
"&:hover": {
|
25
|
-
backgroundColor:
|
27
|
+
backgroundColor: theme?.palette?.editor?.background,
|
28
|
+
color: theme?.palette?.editor?.activeColor,
|
29
|
+
border: `1px solid ${theme?.palette?.editor?.activeColor}`
|
26
30
|
},
|
27
31
|
"& svg": {
|
28
32
|
marginRight: "8px",
|
@@ -31,22 +35,23 @@ const ImageSelectorStyles = () => ({
|
|
31
35
|
}
|
32
36
|
},
|
33
37
|
"& .MuiTabs-indicator": {
|
34
|
-
display:
|
38
|
+
display: "none"
|
35
39
|
}
|
36
40
|
},
|
37
41
|
tab: {},
|
38
42
|
imsRightWrpr: {
|
39
43
|
height: "300px",
|
40
44
|
overflow: "auto",
|
41
|
-
backgroundColor:
|
45
|
+
backgroundColor: theme?.palette?.editor?.background,
|
42
46
|
padding: "0 8px",
|
43
47
|
"& .MuiFormHelperText-root": {
|
44
48
|
marginLeft: "0px"
|
45
49
|
}
|
46
50
|
},
|
47
51
|
dialogWrapper: {
|
48
|
-
|
49
|
-
borderRadius:
|
52
|
+
"& .MuiDialog-paper": {
|
53
|
+
borderRadius: "12px",
|
54
|
+
backgroundColor: theme?.palette?.editor?.background
|
50
55
|
},
|
51
56
|
"& .primaryBtn": {
|
52
57
|
background: "#2563eb !important",
|
@@ -73,54 +78,63 @@ const ImageSelectorStyles = () => ({
|
|
73
78
|
marginRight: "8px !important"
|
74
79
|
}
|
75
80
|
},
|
81
|
+
titleTypo: {
|
82
|
+
fontSize: "16px",
|
83
|
+
fontWeight: 500,
|
84
|
+
color: theme?.palette?.editor?.textColor
|
85
|
+
},
|
76
86
|
addLinkField: {
|
77
87
|
"& .MuiOutlinedInput-input": {
|
78
|
-
fontSize:
|
79
|
-
fontWeight: 500
|
88
|
+
fontSize: "12px",
|
89
|
+
fontWeight: 500,
|
90
|
+
color: theme?.palette?.editor?.textColor
|
91
|
+
},
|
92
|
+
"& .MuiFormHelperText-root": {
|
93
|
+
color: theme?.palette?.editor?.textColor
|
80
94
|
},
|
81
|
-
|
82
|
-
boxShadow:
|
83
|
-
borderRadius:
|
84
|
-
|
85
|
-
borderColor:
|
95
|
+
"& .MuiOutlinedInput-root": {
|
96
|
+
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
|
97
|
+
borderRadius: "7px",
|
98
|
+
"& fieldset": {
|
99
|
+
borderColor: "#D8DDE1"
|
86
100
|
},
|
87
|
-
|
88
|
-
borderColor:
|
101
|
+
"&:hover fieldset": {
|
102
|
+
borderColor: "#64748B"
|
89
103
|
},
|
90
|
-
|
91
|
-
borderColor:
|
104
|
+
"&.Mui-focused fieldset": {
|
105
|
+
borderColor: "#2563EB"
|
92
106
|
},
|
93
|
-
|
107
|
+
"& .MuiFormLabel-root": {}
|
94
108
|
}
|
95
109
|
},
|
96
110
|
addLinkBtn: {
|
97
|
-
borderRadius:
|
111
|
+
borderRadius: "5px",
|
98
112
|
background: "#E7EDF7",
|
99
|
-
width:
|
100
|
-
height:
|
101
|
-
|
102
|
-
width:
|
103
|
-
height:
|
113
|
+
width: "20px",
|
114
|
+
height: "20px",
|
115
|
+
"& svg": {
|
116
|
+
width: "16px",
|
117
|
+
height: "16px"
|
104
118
|
}
|
105
119
|
},
|
106
120
|
closeBtn: {
|
107
|
-
|
108
|
-
color:
|
109
|
-
fontSize:
|
121
|
+
backgroundColor: "#F4F6F9",
|
122
|
+
color: "#64748B",
|
123
|
+
fontSize: "14px",
|
110
124
|
fontWeight: 500,
|
111
|
-
padding:
|
112
|
-
textTransform:
|
113
|
-
border:
|
114
|
-
|
115
|
-
border:
|
125
|
+
padding: "4px 22px",
|
126
|
+
textTransform: "none",
|
127
|
+
border: "1px solid #D8DDE1",
|
128
|
+
"&:hover": {
|
129
|
+
border: "1px solid #64748B"
|
116
130
|
}
|
117
131
|
},
|
118
132
|
saveBtn: {
|
119
|
-
background:
|
120
|
-
fontSize:
|
133
|
+
background: "#2563EB",
|
134
|
+
fontSize: "14px",
|
121
135
|
fontWeight: 500,
|
122
|
-
padding:
|
123
|
-
textTransform:
|
136
|
+
padding: "4px 24px",
|
137
|
+
textTransform: "none"
|
124
138
|
}
|
125
139
|
});
|
126
140
|
export default ImageSelectorStyles;
|
@@ -1,25 +1,25 @@
|
|
1
|
-
const UploadStyles =
|
1
|
+
const UploadStyles = theme => ({
|
2
2
|
uploadContainer: {
|
3
|
-
border:
|
4
|
-
padding:
|
3
|
+
border: "1px solid #2563EB",
|
4
|
+
padding: "10px",
|
5
5
|
borderRadius: "7px",
|
6
|
-
boxShadow:
|
6
|
+
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
|
7
7
|
},
|
8
8
|
uploadField: {
|
9
9
|
width: "100%",
|
10
|
-
backgroundSize: "
|
10
|
+
backgroundSize: "100% auto",
|
11
11
|
backgroundRepeat: "no-repeat",
|
12
12
|
backgroundPosition: "center",
|
13
13
|
height: "250px",
|
14
14
|
position: "relative",
|
15
|
-
backgroundColor:
|
15
|
+
backgroundColor: theme?.palette?.editor?.background,
|
16
16
|
borderRadius: "9px",
|
17
|
-
border:
|
17
|
+
border: "1px dashed #2563EB"
|
18
18
|
},
|
19
19
|
uploadIcon: {
|
20
|
-
|
21
|
-
|
22
|
-
stroke:
|
20
|
+
"& svg": {
|
21
|
+
"& path": {
|
22
|
+
stroke: "#2563EB"
|
23
23
|
}
|
24
24
|
}
|
25
25
|
}
|