@flozy/editor 10.4.0 → 10.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
- package/dist/Editor/common/LinkSettings/index.js +82 -81
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +30 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -0,0 +1,300 @@
|
|
1
|
+
import React, { useRef, useState } from "react";
|
2
|
+
import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled, useTheme } from "@mui/material";
|
3
|
+
|
4
|
+
// Style
|
5
|
+
import Style from "./style";
|
6
|
+
import { PenIcon } from "../icons";
|
7
|
+
import StyleBuilder from "../../common/StyleBuilder";
|
8
|
+
import { fontOptions } from "../../utils/font";
|
9
|
+
import { useEditorTheme } from "../../hooks/useEditorTheme";
|
10
|
+
import { getBreakPointsValue, getElementProperty, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
|
11
|
+
import { KeyboardArrowDownRounded } from "@mui/icons-material";
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
|
+
const buttonStyle = [{
|
15
|
+
tab: "General",
|
16
|
+
value: "size",
|
17
|
+
fields: [{
|
18
|
+
label: "Font Family",
|
19
|
+
key: "fontFamily",
|
20
|
+
type: "textOptions",
|
21
|
+
options: fontOptions,
|
22
|
+
webFont: true,
|
23
|
+
width: 7,
|
24
|
+
renderOption: option => {
|
25
|
+
return /*#__PURE__*/_jsx("span", {
|
26
|
+
style: {
|
27
|
+
fontFamily: option.value
|
28
|
+
},
|
29
|
+
children: option.text
|
30
|
+
});
|
31
|
+
}
|
32
|
+
}, {
|
33
|
+
label: "Font Size",
|
34
|
+
key: "textSize",
|
35
|
+
type: "fontSize",
|
36
|
+
width: 5,
|
37
|
+
placeholder: "16px or 1em"
|
38
|
+
}]
|
39
|
+
}, {
|
40
|
+
tab: "Colors",
|
41
|
+
value: "colors",
|
42
|
+
fields: [{
|
43
|
+
label: "Text Color",
|
44
|
+
key: "textColor",
|
45
|
+
type: "color",
|
46
|
+
needPreview: true
|
47
|
+
}, {
|
48
|
+
label: "Button Color",
|
49
|
+
key: "bgColor",
|
50
|
+
type: "color",
|
51
|
+
themeEnabled: true
|
52
|
+
}]
|
53
|
+
}, {
|
54
|
+
tab: "Banner Spacing",
|
55
|
+
value: "bannerSpacing",
|
56
|
+
fields: [{
|
57
|
+
label: "Banner Spacing",
|
58
|
+
key: "bannerSpacing",
|
59
|
+
type: "bannerSpacing"
|
60
|
+
}]
|
61
|
+
}, {
|
62
|
+
tab: "Border",
|
63
|
+
value: "border",
|
64
|
+
fields: [{
|
65
|
+
label: "Border Radius",
|
66
|
+
key: "borderRadius",
|
67
|
+
type: "borderRadius"
|
68
|
+
}]
|
69
|
+
}, {
|
70
|
+
tab: "Hover Colors",
|
71
|
+
value: "hoverColors",
|
72
|
+
fields: [{
|
73
|
+
label: "Hover Text Color",
|
74
|
+
key: "textColorHover",
|
75
|
+
type: "color",
|
76
|
+
needPreview: true
|
77
|
+
}, {
|
78
|
+
label: "Hover Button Color",
|
79
|
+
key: "bgColorHover",
|
80
|
+
type: "color"
|
81
|
+
}]
|
82
|
+
}];
|
83
|
+
function getBtnSxProps(buttonStyle = {}, theme) {
|
84
|
+
let newStyle = {
|
85
|
+
...buttonStyle
|
86
|
+
};
|
87
|
+
// if (newStyle?.bannerSpacing) {
|
88
|
+
// newStyle.padding = newStyle?.bannerSpacing;
|
89
|
+
// }
|
90
|
+
|
91
|
+
const btnSp = groupByBreakpoint({
|
92
|
+
borderRadius: {
|
93
|
+
...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
|
94
|
+
}
|
95
|
+
// padding: {
|
96
|
+
// ...getTRBLBreakPoints(newStyle?.bannerSpacing),
|
97
|
+
// },
|
98
|
+
}, theme);
|
99
|
+
newStyle = {
|
100
|
+
...newStyle,
|
101
|
+
...btnSp
|
102
|
+
};
|
103
|
+
delete newStyle?.bannerSpacing;
|
104
|
+
if (newStyle?.hover) {
|
105
|
+
newStyle["&:hover"] = newStyle.hover;
|
106
|
+
delete newStyle.hover;
|
107
|
+
}
|
108
|
+
return newStyle;
|
109
|
+
}
|
110
|
+
const MAP_HOVER_KEYS = {
|
111
|
+
color: "textColorHover",
|
112
|
+
background: "bgColorHover"
|
113
|
+
};
|
114
|
+
const MAP_THEME_TO_ELEMENT_KEYS = {
|
115
|
+
color: "textColor",
|
116
|
+
background: "bgColor",
|
117
|
+
fontFamily: (value, prev, buttonEl) => {
|
118
|
+
if (!buttonEl?.current) {
|
119
|
+
return prev;
|
120
|
+
}
|
121
|
+
const val = getElementProperty(buttonEl?.current, "font-family");
|
122
|
+
return {
|
123
|
+
...prev,
|
124
|
+
fontFamily: val
|
125
|
+
};
|
126
|
+
},
|
127
|
+
fontSize: "textSize",
|
128
|
+
borderRadius: "borderRadius",
|
129
|
+
bannerSpacing: "bannerSpacing",
|
130
|
+
lockRadius: "lockRadius",
|
131
|
+
lockbannerSpacing: "lockbannerSpacing",
|
132
|
+
// fontWeight
|
133
|
+
|
134
|
+
hover: (value = {}, prev = {}) => {
|
135
|
+
const props = getProps(value, MAP_HOVER_KEYS);
|
136
|
+
return {
|
137
|
+
...prev,
|
138
|
+
...props
|
139
|
+
};
|
140
|
+
}
|
141
|
+
};
|
142
|
+
const MAP_ELEMENT_TO_THEME_KEYS = {
|
143
|
+
textSize: "fontSize",
|
144
|
+
textColor: "color",
|
145
|
+
bgColor: "background",
|
146
|
+
bannerSpacing: "bannerSpacing",
|
147
|
+
borderRadius: "borderRadius",
|
148
|
+
lockRadius: "lockRadius",
|
149
|
+
lockbannerSpacing: "lockbannerSpacing",
|
150
|
+
textColorHover: (value, prev) => {
|
151
|
+
const hover = {
|
152
|
+
...(prev?.hover || {})
|
153
|
+
};
|
154
|
+
hover.color = value;
|
155
|
+
return {
|
156
|
+
...prev,
|
157
|
+
hover
|
158
|
+
};
|
159
|
+
},
|
160
|
+
bgColorHover: (value, prev) => {
|
161
|
+
const hover = {
|
162
|
+
...(prev?.hover || {})
|
163
|
+
};
|
164
|
+
hover.background = value;
|
165
|
+
return {
|
166
|
+
...prev,
|
167
|
+
hover
|
168
|
+
};
|
169
|
+
},
|
170
|
+
fontFamily: "fontFamily"
|
171
|
+
};
|
172
|
+
function getProps(buttonStyle, MAP_KEYS, buttonEl) {
|
173
|
+
let props = {};
|
174
|
+
Object.entries(buttonStyle).forEach(([key, value]) => {
|
175
|
+
const elementKey = MAP_KEYS[key];
|
176
|
+
if (elementKey) {
|
177
|
+
if (typeof elementKey === "string") {
|
178
|
+
props[elementKey] = value;
|
179
|
+
} else {
|
180
|
+
props = elementKey(value, props, buttonEl);
|
181
|
+
}
|
182
|
+
}
|
183
|
+
});
|
184
|
+
return props;
|
185
|
+
}
|
186
|
+
function convertThemeToElementProps(button = {}, buttonEl) {
|
187
|
+
const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
|
188
|
+
return props;
|
189
|
+
}
|
190
|
+
|
191
|
+
// icons
|
192
|
+
|
193
|
+
const Buttons = props => {
|
194
|
+
const {
|
195
|
+
className,
|
196
|
+
customProps,
|
197
|
+
openSettings,
|
198
|
+
onSettingsChange,
|
199
|
+
type
|
200
|
+
} = props;
|
201
|
+
const [anchorEl, setAnchorEl] = useState();
|
202
|
+
const theme = useTheme();
|
203
|
+
const {
|
204
|
+
selectedTheme,
|
205
|
+
updateTheme
|
206
|
+
} = useEditorTheme();
|
207
|
+
const {
|
208
|
+
button
|
209
|
+
} = selectedTheme?.elementProps || {};
|
210
|
+
console.log("getBtnSxProps(button, theme)", getBtnSxProps(button, theme));
|
211
|
+
const buttonEl = useRef();
|
212
|
+
const elementProps = convertThemeToElementProps(button, buttonEl);
|
213
|
+
|
214
|
+
// State
|
215
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
216
|
+
className: className,
|
217
|
+
children: [/*#__PURE__*/_jsxs(Accordion, {
|
218
|
+
className: "settingAccordion",
|
219
|
+
onChange: () => onSettingsChange(type),
|
220
|
+
expanded: openSettings === type,
|
221
|
+
children: [/*#__PURE__*/_jsx(AccordionSummary, {
|
222
|
+
expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
|
223
|
+
"aria-controls": "panel1-content",
|
224
|
+
id: "panel1-header",
|
225
|
+
children: "Buttons"
|
226
|
+
}), /*#__PURE__*/_jsx(AccordionDetails, {
|
227
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
228
|
+
container: true,
|
229
|
+
className: "buttonTypeItem",
|
230
|
+
justifyContent: "space-between",
|
231
|
+
alignItems: "center",
|
232
|
+
wrap: "nowrap",
|
233
|
+
onClick: e => setAnchorEl(e.currentTarget),
|
234
|
+
children: [/*#__PURE__*/_jsxs(Grid, {
|
235
|
+
item: true,
|
236
|
+
size: 8,
|
237
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
238
|
+
variant: "body1",
|
239
|
+
className: "fw-600 fs-14",
|
240
|
+
style: {
|
241
|
+
marginBottom: "10px"
|
242
|
+
},
|
243
|
+
children: "Theme Button"
|
244
|
+
}), /*#__PURE__*/_jsx(Button, {
|
245
|
+
sx: getBtnSxProps(button, theme),
|
246
|
+
ref: buttonEl,
|
247
|
+
children: "Button"
|
248
|
+
})]
|
249
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
250
|
+
item: true,
|
251
|
+
size: 4,
|
252
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
253
|
+
className: "editIcon",
|
254
|
+
children: /*#__PURE__*/_jsx(PenIcon, {})
|
255
|
+
})
|
256
|
+
})]
|
257
|
+
})
|
258
|
+
})]
|
259
|
+
}), /*#__PURE__*/_jsx(Popper, {
|
260
|
+
open: Boolean(anchorEl),
|
261
|
+
anchorEl: anchorEl,
|
262
|
+
transition: true,
|
263
|
+
sx: {
|
264
|
+
zIndex: "100000",
|
265
|
+
background: "white"
|
266
|
+
},
|
267
|
+
placement: "left-start",
|
268
|
+
children: ({
|
269
|
+
TransitionProps
|
270
|
+
}) => /*#__PURE__*/_jsx(Fade, {
|
271
|
+
...TransitionProps,
|
272
|
+
timeout: 350,
|
273
|
+
children: /*#__PURE__*/_jsx("div", {
|
274
|
+
children: /*#__PURE__*/_jsx(StyleBuilder, {
|
275
|
+
title: "Button",
|
276
|
+
type: "buttonStyle",
|
277
|
+
element: elementProps,
|
278
|
+
onSave: data => {
|
279
|
+
const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
|
280
|
+
updateTheme(props, {
|
281
|
+
action: "ELEMENT_PROPS_CHANGE",
|
282
|
+
fieldName: "button"
|
283
|
+
});
|
284
|
+
setAnchorEl(null);
|
285
|
+
},
|
286
|
+
onClose: () => {
|
287
|
+
setAnchorEl(null);
|
288
|
+
},
|
289
|
+
renderTabs: buttonStyle,
|
290
|
+
customProps: {
|
291
|
+
disableEditTheme: true,
|
292
|
+
translation: customProps?.translation || (() => {})
|
293
|
+
}
|
294
|
+
})
|
295
|
+
})
|
296
|
+
})
|
297
|
+
})]
|
298
|
+
});
|
299
|
+
};
|
300
|
+
export default styled(Buttons)(Style);
|
@@ -0,0 +1,23 @@
|
|
1
|
+
const Style = ({
|
2
|
+
appTheme
|
3
|
+
}) => ({
|
4
|
+
".buttonTypeItem": {
|
5
|
+
padding: "8px 10px",
|
6
|
+
width: "calc(100% + 20px)",
|
7
|
+
margin: "0 -10px",
|
8
|
+
"&:hover": {
|
9
|
+
background: appTheme?.palette?.editor?.tv_hover_bg,
|
10
|
+
".editIcon": {
|
11
|
+
opacity: "1",
|
12
|
+
visibility: "visible"
|
13
|
+
}
|
14
|
+
},
|
15
|
+
".editIcon": {
|
16
|
+
opacity: "0",
|
17
|
+
visibility: "hidden",
|
18
|
+
width: "30px",
|
19
|
+
height: "30px"
|
20
|
+
}
|
21
|
+
}
|
22
|
+
});
|
23
|
+
export default Style;
|
@@ -0,0 +1,310 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
|
3
|
+
|
4
|
+
// Style
|
5
|
+
import Style from "./style";
|
6
|
+
|
7
|
+
// icons
|
8
|
+
import { ChevronLeft, KeyboardArrowDownRounded } from "@mui/icons-material";
|
9
|
+
import { EditIcon } from "../icons";
|
10
|
+
import ColorPickerButton from "../../common/ColorPickerButton";
|
11
|
+
import { getContrastColor } from "../../utils/helper";
|
12
|
+
import useCommonStyle from "../../commonStyle";
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
14
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
|
+
const ColorTheme = props => {
|
16
|
+
const {
|
17
|
+
className,
|
18
|
+
colors,
|
19
|
+
onColorChange,
|
20
|
+
openDefault,
|
21
|
+
appTheme,
|
22
|
+
openSettings,
|
23
|
+
onSettingsChange,
|
24
|
+
type
|
25
|
+
} = props;
|
26
|
+
const classes = useCommonStyle(appTheme);
|
27
|
+
const {
|
28
|
+
primaryColors,
|
29
|
+
otherColors = []
|
30
|
+
} = colors || {};
|
31
|
+
|
32
|
+
// State
|
33
|
+
const [customizeTheme, setCustomizeTheme] = React.useState(false);
|
34
|
+
const [buttonType, setButtonType] = React.useState("regular");
|
35
|
+
const customTheme = [{
|
36
|
+
title: "Text & Line Colors",
|
37
|
+
data: [{
|
38
|
+
title: "Headings",
|
39
|
+
color: "#ccc"
|
40
|
+
}, {
|
41
|
+
title: "Subheading text",
|
42
|
+
color: "#ccc"
|
43
|
+
}, {
|
44
|
+
title: "Body text",
|
45
|
+
color: "#ccc"
|
46
|
+
}, {
|
47
|
+
title: "Subtext",
|
48
|
+
color: "#ccc"
|
49
|
+
}, {
|
50
|
+
title: "Lines & dividers",
|
51
|
+
color: "#ccc"
|
52
|
+
}]
|
53
|
+
}, {
|
54
|
+
title: "Background Colors",
|
55
|
+
data: [{
|
56
|
+
title: "Primary background color",
|
57
|
+
color: "#ccc"
|
58
|
+
}, {
|
59
|
+
title: "Secondary background color",
|
60
|
+
color: "#ccc"
|
61
|
+
}]
|
62
|
+
}];
|
63
|
+
const buttonData = [{
|
64
|
+
title: "Button background",
|
65
|
+
color: "#ccc"
|
66
|
+
}, {
|
67
|
+
title: "Button text",
|
68
|
+
color: "#ccc"
|
69
|
+
}, {
|
70
|
+
title: "Button border",
|
71
|
+
color: "#ccc"
|
72
|
+
}];
|
73
|
+
|
74
|
+
//button
|
75
|
+
const handleButtonType = (event, buttonType) => {
|
76
|
+
if (buttonType !== null) {
|
77
|
+
setButtonType(buttonType);
|
78
|
+
}
|
79
|
+
};
|
80
|
+
return /*#__PURE__*/_jsx(Grid, {
|
81
|
+
className: className,
|
82
|
+
children: !customizeTheme ? /*#__PURE__*/_jsxs(Accordion, {
|
83
|
+
className: "settingAccordion",
|
84
|
+
defaultExpanded: openDefault,
|
85
|
+
onChange: () => onSettingsChange(type),
|
86
|
+
expanded: openSettings === type,
|
87
|
+
children: [/*#__PURE__*/_jsx(AccordionSummary, {
|
88
|
+
expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
|
89
|
+
"aria-controls": "panel1-content",
|
90
|
+
id: "panel1-header",
|
91
|
+
children: "Color Theme"
|
92
|
+
}), /*#__PURE__*/_jsxs(AccordionDetails, {
|
93
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
94
|
+
variant: "body2",
|
95
|
+
sx: {
|
96
|
+
pb: 1
|
97
|
+
},
|
98
|
+
className: "fs-12 fw-600",
|
99
|
+
children: "Primary Color"
|
100
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
101
|
+
container: true,
|
102
|
+
spacing: 1,
|
103
|
+
sx: {
|
104
|
+
pb: 2
|
105
|
+
},
|
106
|
+
className: "primaryColorBoxes",
|
107
|
+
wrap: "nowrap",
|
108
|
+
children: primaryColors?.map((color, i) => {
|
109
|
+
const textColor = getContrastColor(color);
|
110
|
+
return /*#__PURE__*/_jsx(Grid, {
|
111
|
+
item: true,
|
112
|
+
xs: 6,
|
113
|
+
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
114
|
+
onSave: selectedColor => {
|
115
|
+
if (selectedColor) {
|
116
|
+
onColorChange(selectedColor, i);
|
117
|
+
}
|
118
|
+
},
|
119
|
+
hideThemeColors: true
|
120
|
+
// hideGradient={true}
|
121
|
+
,
|
122
|
+
classes: classes,
|
123
|
+
value: color,
|
124
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
125
|
+
className: "pmBox",
|
126
|
+
style: {
|
127
|
+
background: color
|
128
|
+
},
|
129
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
130
|
+
className: "editBtn",
|
131
|
+
children: /*#__PURE__*/_jsx(EditIcon, {})
|
132
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
133
|
+
variant: "body2",
|
134
|
+
className: "fs-12 valyeText",
|
135
|
+
style: {
|
136
|
+
color: textColor
|
137
|
+
},
|
138
|
+
title: color,
|
139
|
+
children: color
|
140
|
+
})]
|
141
|
+
})
|
142
|
+
})
|
143
|
+
}, i);
|
144
|
+
})
|
145
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
146
|
+
variant: "body2",
|
147
|
+
sx: {
|
148
|
+
pb: 1
|
149
|
+
},
|
150
|
+
className: "fs-12 fw-600",
|
151
|
+
children: "Secondary Colors"
|
152
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
153
|
+
container: true,
|
154
|
+
className: "secondaryColorBoxes",
|
155
|
+
wrap: "nowrap",
|
156
|
+
sx: {
|
157
|
+
mb: 1
|
158
|
+
},
|
159
|
+
children: otherColors?.slice(0, 4)?.map((color, i) => {
|
160
|
+
const noOfPrimaryColors = 2;
|
161
|
+
const colorIndex = noOfPrimaryColors + i;
|
162
|
+
const textColor = getContrastColor(color);
|
163
|
+
return /*#__PURE__*/_jsx(Grid, {
|
164
|
+
item: true,
|
165
|
+
xs: 6,
|
166
|
+
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
167
|
+
onSave: selectedColor => {
|
168
|
+
if (selectedColor) {
|
169
|
+
onColorChange(selectedColor, colorIndex);
|
170
|
+
}
|
171
|
+
},
|
172
|
+
hideThemeColors: true
|
173
|
+
// hideGradient={true}
|
174
|
+
,
|
175
|
+
classes: classes,
|
176
|
+
value: color,
|
177
|
+
children: /*#__PURE__*/_jsxs(Grid, {
|
178
|
+
className: "sdBox",
|
179
|
+
style: {
|
180
|
+
background: color
|
181
|
+
},
|
182
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
183
|
+
className: "editBtn",
|
184
|
+
children: /*#__PURE__*/_jsx(EditIcon, {})
|
185
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
186
|
+
variant: "body2",
|
187
|
+
className: "fs-10 valyeText",
|
188
|
+
style: {
|
189
|
+
color: textColor
|
190
|
+
},
|
191
|
+
children: color
|
192
|
+
})]
|
193
|
+
})
|
194
|
+
})
|
195
|
+
}, i);
|
196
|
+
})
|
197
|
+
})]
|
198
|
+
})]
|
199
|
+
}) : /*#__PURE__*/_jsxs(Grid, {
|
200
|
+
className: "sectionDetail",
|
201
|
+
children: [/*#__PURE__*/_jsxs(Typography, {
|
202
|
+
variant: "body1",
|
203
|
+
className: "sectionTitle flexAlign",
|
204
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
205
|
+
onClick: () => setCustomizeTheme(false),
|
206
|
+
children: /*#__PURE__*/_jsx(ChevronLeft, {})
|
207
|
+
}), "Customize Theme settings"]
|
208
|
+
}), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
|
209
|
+
className: "settingsSection",
|
210
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
211
|
+
variant: "body1",
|
212
|
+
className: "sectionTitle",
|
213
|
+
sx: {
|
214
|
+
pb: 1
|
215
|
+
},
|
216
|
+
children: item.title
|
217
|
+
}), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
|
218
|
+
container: true,
|
219
|
+
justifyContent: "space-between",
|
220
|
+
sx: {
|
221
|
+
pt: 2
|
222
|
+
},
|
223
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
224
|
+
variant: "body1",
|
225
|
+
className: "fs-14",
|
226
|
+
children: childitem.title
|
227
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
228
|
+
className: "xsColorBox",
|
229
|
+
sx: {
|
230
|
+
background: childitem.color
|
231
|
+
}
|
232
|
+
})]
|
233
|
+
}, childIndex))]
|
234
|
+
}, index)), /*#__PURE__*/_jsxs(Grid, {
|
235
|
+
className: "settingsSection",
|
236
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
237
|
+
variant: "body1",
|
238
|
+
className: "sectionTitle",
|
239
|
+
sx: {
|
240
|
+
pb: 1
|
241
|
+
},
|
242
|
+
children: "Button Colors"
|
243
|
+
}), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
|
244
|
+
sx: {
|
245
|
+
mt: 2
|
246
|
+
},
|
247
|
+
className: "toggleType",
|
248
|
+
value: buttonType,
|
249
|
+
exclusive: true,
|
250
|
+
onChange: handleButtonType,
|
251
|
+
children: [/*#__PURE__*/_jsx(ToggleButton, {
|
252
|
+
value: "regular",
|
253
|
+
"aria-label": "regulard",
|
254
|
+
children: "Regular"
|
255
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
256
|
+
value: "hover",
|
257
|
+
"aria-label": "hover",
|
258
|
+
children: "Hover"
|
259
|
+
})]
|
260
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
261
|
+
sx: {
|
262
|
+
mt: 2,
|
263
|
+
mb: 1
|
264
|
+
}
|
265
|
+
}), /*#__PURE__*/_jsxs(RadioGroup, {
|
266
|
+
sx: {
|
267
|
+
mt: 1
|
268
|
+
},
|
269
|
+
"aria-labelledby": "demo-radio-buttons-group-label",
|
270
|
+
defaultValue: "primary",
|
271
|
+
name: "radio-buttons-group",
|
272
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
273
|
+
value: "primary",
|
274
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
275
|
+
label: /*#__PURE__*/_jsx(Typography, {
|
276
|
+
variant: "body1",
|
277
|
+
className: "fs-14",
|
278
|
+
children: "Primary button"
|
279
|
+
})
|
280
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
281
|
+
value: "secondary",
|
282
|
+
control: /*#__PURE__*/_jsx(Radio, {}),
|
283
|
+
label: /*#__PURE__*/_jsx(Typography, {
|
284
|
+
variant: "body1",
|
285
|
+
className: "fs-14",
|
286
|
+
children: "Secondary button"
|
287
|
+
})
|
288
|
+
})]
|
289
|
+
}), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
|
290
|
+
container: true,
|
291
|
+
justifyContent: "space-between",
|
292
|
+
sx: {
|
293
|
+
pt: 2
|
294
|
+
},
|
295
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
296
|
+
variant: "body1",
|
297
|
+
className: "fs-14",
|
298
|
+
children: item.title
|
299
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
300
|
+
className: "xsColorBox",
|
301
|
+
sx: {
|
302
|
+
background: item.color
|
303
|
+
}
|
304
|
+
})]
|
305
|
+
}, Index))]
|
306
|
+
})]
|
307
|
+
})
|
308
|
+
});
|
309
|
+
};
|
310
|
+
export default styled(ColorTheme)(Style);
|
@@ -0,0 +1,81 @@
|
|
1
|
+
const Style = () => ({
|
2
|
+
".primaryColorBoxes": {
|
3
|
+
".pmBox": {
|
4
|
+
border: "1.5px solid #D1D1D1",
|
5
|
+
height: "65px",
|
6
|
+
borderRadius: "6px",
|
7
|
+
position: "relative",
|
8
|
+
flexShrink: 0,
|
9
|
+
"&:hover": {
|
10
|
+
".editBtn": {
|
11
|
+
opacity: "1",
|
12
|
+
visibility: "visible"
|
13
|
+
}
|
14
|
+
}
|
15
|
+
}
|
16
|
+
},
|
17
|
+
".secondaryColorBoxes": {
|
18
|
+
gap: "10px",
|
19
|
+
".sdBox": {
|
20
|
+
border: "1.5px solid #D1D1D1",
|
21
|
+
height: "60px",
|
22
|
+
borderRadius: "6px",
|
23
|
+
width: "100%",
|
24
|
+
flexShrink: 0,
|
25
|
+
position: "relative",
|
26
|
+
"&:hover": {
|
27
|
+
".editBtn": {
|
28
|
+
opacity: "1",
|
29
|
+
visibility: "visible"
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
},
|
34
|
+
".valyeText": {
|
35
|
+
position: "absolute",
|
36
|
+
right: "5px",
|
37
|
+
bottom: "5px",
|
38
|
+
whiteSpace: "nowrap",
|
39
|
+
overflow: "hidden",
|
40
|
+
textOverflow: "ellipsis",
|
41
|
+
maxWidth: "calc(100% - 10px)"
|
42
|
+
},
|
43
|
+
".editBtn": {
|
44
|
+
position: "absolute",
|
45
|
+
right: "2px",
|
46
|
+
top: "2px",
|
47
|
+
padding: "2px",
|
48
|
+
opacity: "0",
|
49
|
+
visibility: "hidden"
|
50
|
+
},
|
51
|
+
".settingsSection": {
|
52
|
+
background: "#FFFFFF",
|
53
|
+
border: "1px solid #E4E6E9",
|
54
|
+
padding: "12px",
|
55
|
+
marginTop: "10px",
|
56
|
+
borderRadius: "7px"
|
57
|
+
},
|
58
|
+
".toggleType": {
|
59
|
+
width: "100%",
|
60
|
+
border: "1px solid #2563EB",
|
61
|
+
background: "#F5F6F9",
|
62
|
+
borderRadius: "8px",
|
63
|
+
padding: "3px",
|
64
|
+
height: "40px",
|
65
|
+
".MuiToggleButton-root": {
|
66
|
+
padding: "10px",
|
67
|
+
width: "50%",
|
68
|
+
border: "none",
|
69
|
+
textTransform: "unset",
|
70
|
+
fontSize: "14px",
|
71
|
+
color: "#64748B",
|
72
|
+
"&.Mui-selected": {
|
73
|
+
borderRadius: "8px",
|
74
|
+
background: "#2563EB",
|
75
|
+
color: "#fff",
|
76
|
+
fontWeight: "700"
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
80
|
+
});
|
81
|
+
export default Style;
|