@flozy/editor 10.4.9 → 10.5.1

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.
Files changed (192) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +18 -134
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +10 -26
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +11 -26
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +9 -28
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +6 -17
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +16 -43
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  22. package/dist/Editor/Elements/Embed/Image.js +2 -3
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  26. package/dist/Editor/Elements/Form/Form.js +171 -184
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  29. package/dist/Editor/Elements/Form/FormField.js +6 -13
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -41
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  33. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  34. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  35. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  36. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  37. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  38. package/dist/Editor/Elements/List/CheckList.js +2 -3
  39. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  40. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  41. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  42. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  43. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  44. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  45. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  46. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  47. package/dist/Editor/Elements/Table/AddRowCol.js +2 -8
  48. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  49. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  50. package/dist/Editor/Elements/Table/Styles.js +0 -7
  51. package/dist/Editor/Elements/Table/Table.js +3 -3
  52. package/dist/Editor/Elements/Table/TableCell.js +8 -31
  53. package/dist/Editor/Elements/Title/title.js +6 -6
  54. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  55. package/dist/Editor/MiniEditor.js +1 -2
  56. package/dist/Editor/Styles/EditorStyles.js +5 -5
  57. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  58. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  59. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  60. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  61. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  66. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  67. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  68. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  69. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  70. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  71. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  72. package/dist/Editor/common/ColorPickerButton.js +16 -41
  73. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  74. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  75. package/dist/Editor/common/Icon.js +1 -31
  76. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  77. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  78. package/dist/Editor/common/LinkSettings/NavComponents.js +55 -61
  79. package/dist/Editor/common/LinkSettings/index.js +80 -82
  80. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  81. package/dist/Editor/common/LinkSettings/style.js +74 -209
  82. package/dist/Editor/common/MentionsPopup/index.js +1 -4
  83. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -13
  84. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  85. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  86. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  87. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  88. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  98. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -146
  99. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  100. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -120
  101. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  102. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  103. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  104. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  105. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  106. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  107. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  108. package/dist/Editor/common/RnD/index.js +38 -67
  109. package/dist/Editor/common/Select/index.js +5 -44
  110. package/dist/Editor/common/Select/styles.js +2 -30
  111. package/dist/Editor/common/Shorthands/elements.js +11 -65
  112. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  113. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  114. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  115. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  125. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  126. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  127. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  128. package/dist/Editor/common/Uploader.js +0 -16
  129. package/dist/Editor/common/iconListV2.js +6 -177
  130. package/dist/Editor/common/iconslist.js +0 -24
  131. package/dist/Editor/commonStyle.js +62 -186
  132. package/dist/Editor/helper/index.js +1 -5
  133. package/dist/Editor/helper/theme.js +2 -203
  134. package/dist/Editor/hooks/useMouseMove.js +5 -8
  135. package/dist/Editor/hooks/useTable.js +4 -5
  136. package/dist/Editor/plugins/withEmbeds.js +1 -1
  137. package/dist/Editor/plugins/withHTML.js +1 -3
  138. package/dist/Editor/plugins/withTable.js +1 -1
  139. package/dist/Editor/theme/ThemeList.js +173 -50
  140. package/dist/Editor/utils/SlateUtilityFunctions.js +46 -172
  141. package/dist/Editor/utils/accordion.js +4 -14
  142. package/dist/Editor/utils/button.js +17 -1
  143. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  144. package/dist/Editor/utils/draftToSlate.js +2 -3
  145. package/dist/Editor/utils/events.js +6 -50
  146. package/dist/Editor/utils/font.js +37 -40
  147. package/dist/Editor/utils/form.js +4 -4
  148. package/dist/Editor/utils/formfield.js +2 -9
  149. package/dist/Editor/utils/helper.js +26 -215
  150. package/dist/Editor/utils/insertAppHeader.js +1 -1
  151. package/dist/Editor/utils/signature.js +9 -2
  152. package/package.json +4 -4
  153. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +0 -510
  154. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  155. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  156. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  157. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  158. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  159. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  160. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  161. package/dist/Editor/common/Checkbox/index.js +0 -46
  162. package/dist/Editor/common/Checkbox/styles.js +0 -45
  163. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  164. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  165. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  166. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  167. package/dist/Editor/common/CustomSelect.js +0 -43
  168. package/dist/Editor/common/RadioGroup/index.js +0 -48
  169. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  170. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  171. package/dist/Editor/common/SnackBar/index.js +0 -43
  172. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  173. package/dist/Editor/helper/textIndeces.js +0 -58
  174. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  175. package/dist/Editor/hooks/useThemeValues.js +0 -63
  176. package/dist/Editor/theme/index.js +0 -149
  177. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  178. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  179. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  180. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  181. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  182. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  183. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  184. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  185. package/dist/Editor/themeSettings/icons.js +0 -60
  186. package/dist/Editor/themeSettings/index.js +0 -380
  187. package/dist/Editor/themeSettings/style.js +0 -299
  188. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  189. package/dist/Editor/themeSettingsAI/index.js +0 -355
  190. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  191. package/dist/Editor/themeSettingsAI/style.js +0 -332
  192. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -1,380 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { Box, CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
3
-
4
- // Style
5
- import Style from "./style";
6
-
7
- // icons
8
- import { CloseIcon2 as CloseIcon } from "../common/iconslist";
9
- import { TickIcon } from "./icons";
10
- import ColorTheme from "./colorTheme";
11
- import Buttons from "./buttons";
12
- import Fonts from "./fonts";
13
- import { useEditorTheme } from "../hooks/useEditorTheme";
14
- import ActiveTheme from "./ActiveTheme";
15
- import SaveTheme from "../themeSettingsAI/saveTheme";
16
- import BackIcon from "../assets/svg/BackIcon";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- import { Fragment as _Fragment } from "react/jsx-runtime";
20
- function getColors(themeColors) {
21
- const colors = Object.values(themeColors || {});
22
- const primaryColors = colors.slice(0, 2);
23
- const otherColors = colors.slice(2);
24
- return {
25
- primaryColors,
26
- otherColors
27
- };
28
- }
29
- const ThemeSettings = props => {
30
- const {
31
- className,
32
- open,
33
- setOpen,
34
- services,
35
- appTheme,
36
- customProps
37
- } = props;
38
-
39
- // State
40
- // const [themeDrawer, setThemeDrawer] = useState(true);
41
- const [themeTabType, setThemeTabType] = React.useState(0);
42
- const [themeMoodboard, setThemeMoodboard] = React.useState(false);
43
- const [openSettings, setOpenSettings] = useState("");
44
- const onSettingsChange = type => {
45
- setOpenSettings(prev => prev === type ? "" : type);
46
- };
47
- const [themes, setThemes] = useState([]);
48
- const [loading, setLoading] = useState(false);
49
- const [savingTheme, setSavingTheme] = useState(false);
50
- const {
51
- theme: userSelectedTheme,
52
- updateTheme
53
- } = useEditorTheme();
54
- const {
55
- colors = {}
56
- } = userSelectedTheme?.theme?.cssVars || {};
57
- const {
58
- id,
59
- name,
60
- mood_name,
61
- template_tag
62
- } = userSelectedTheme || {};
63
- const onClose = () => setOpen(false);
64
- const getThemesList = async themeTabType => {
65
- setLoading(true);
66
- setThemes([]);
67
- try {
68
- const themeType = themeTabType === 0 ? "default" : "";
69
- const result = await services("getThemes", {
70
- type: themeType,
71
- template_tag
72
- });
73
- const currentSelectedTheme = result?.data?.find(d => d.id === id);
74
- let themesList = result?.data || [];
75
- if (currentSelectedTheme) {
76
- const currThemeName = currentSelectedTheme?.name;
77
- const currThemeTag = currentSelectedTheme?.template_tag;
78
- const isHavingName = currThemeName && currThemeName !== name;
79
- const isHavingTag = !template_tag && currThemeTag;
80
- let update = {};
81
- if (isHavingTag) {
82
- update.template_tag = currThemeTag;
83
- themesList = themesList.filter(t => t.template_tag === currThemeTag);
84
- }
85
- if (isHavingName) {
86
- update.name = currThemeName;
87
- }
88
-
89
- // for theme templates created by design team
90
- updateTheme(update);
91
- }
92
- setThemes(themesList);
93
- } catch (err) {
94
- console.log(err);
95
- }
96
- setLoading(false);
97
- };
98
- useEffect(() => {
99
- getThemesList(themeTabType);
100
- }, []);
101
- const handleThemeChange = theme => {
102
- updateTheme(theme, {
103
- action: "THEME_CHANGE"
104
- });
105
- };
106
- const onColorChange = (color, colorIndex) => {
107
- updateTheme({
108
- [`color${colorIndex}`]: color
109
- }, {
110
- action: "CSS_VAR_CHANGE",
111
- fieldName: "colors"
112
- });
113
- };
114
- const handleTabChange = (event, newValue) => {
115
- setThemeTabType(newValue);
116
- getThemesList(newValue);
117
- };
118
- const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
119
- const onSaveTheme = async (formData = {}, addNewTheme) => {
120
- setSavingTheme(true);
121
- try {
122
- let type = isUpdateTheme && !addNewTheme ? "update" : "create";
123
- const result = await services("saveTheme", {
124
- type,
125
- id,
126
- template_tag,
127
- ...formData,
128
- theme: userSelectedTheme?.theme
129
- });
130
- const update = {
131
- ...userSelectedTheme,
132
- ...formData,
133
- type: "2"
134
- };
135
- const createdId = result?.data?.id;
136
- if (createdId) {
137
- update.id = createdId;
138
- }
139
- updateTheme(update);
140
- getThemesList(themeTabType);
141
- } catch (err) {
142
- console.log(err);
143
- }
144
- setSavingTheme(false);
145
- };
146
-
147
- // themeCard
148
- const ThemeCard = ({
149
- theme
150
- }) => {
151
- const {
152
- name,
153
- mood_name = ""
154
- } = theme;
155
- const {
156
- colors = {}
157
- } = theme?.theme?.cssVars || {};
158
- const {
159
- primaryColors,
160
- otherColors
161
- } = getColors(colors);
162
- const isSelected = theme.id === userSelectedTheme?.id;
163
- return /*#__PURE__*/_jsxs(Grid, {
164
- className: `themeCardWrapper ${isSelected ? "activeWrapper" : ""}`,
165
- onClick: () => handleThemeChange(theme),
166
- children: [isSelected ? /*#__PURE__*/_jsx(TickIcon, {}) : null, /*#__PURE__*/_jsxs(Grid, {
167
- container: true,
168
- justifyContent: "space-between",
169
- className: "themeCard",
170
- gap: 2,
171
- children: [/*#__PURE__*/_jsxs(Grid, {
172
- style: {
173
- width: "90px"
174
- },
175
- children: [/*#__PURE__*/_jsx(Typography, {
176
- variant: "body1",
177
- className: "title",
178
- style: {
179
- whiteSpace: "nowrap",
180
- textOverflow: "ellipsis",
181
- overflow: "hidden",
182
- fontWeight: "500"
183
- },
184
- children: name
185
- }), /*#__PURE__*/_jsx(Typography, {
186
- variant: "body2",
187
- className: "fs-12 textSecondary moodName",
188
- children: mood_name
189
- })]
190
- }), /*#__PURE__*/_jsxs(Grid, {
191
- className: "flexAlign",
192
- sx: {
193
- gap: "5px"
194
- },
195
- children: [primaryColors?.map((color, i) => {
196
- return /*#__PURE__*/_jsx(Grid, {
197
- className: "primaryCard",
198
- style: {
199
- backgroundColor: color
200
- }
201
- }, i);
202
- }), /*#__PURE__*/_jsx(Grid, {
203
- className: "otherColors",
204
- sx: {
205
- gap: "5px"
206
- },
207
- children: otherColors.map((color, i) => {
208
- return /*#__PURE__*/_jsx(Grid, {
209
- className: "smallCard",
210
- style: {
211
- backgroundColor: color
212
- }
213
- }, i);
214
- })
215
- })]
216
- })]
217
- })]
218
- });
219
- };
220
- const showThemeSettings = id && !themeMoodboard;
221
- return /*#__PURE__*/_jsx(Grid, {
222
- className: className,
223
- children: /*#__PURE__*/_jsxs(Drawer, {
224
- className: className,
225
- open: open,
226
- onClose: onClose,
227
- anchor: "right",
228
- children: [/*#__PURE__*/_jsxs(Grid, {
229
- className: "settingsContainer",
230
- children: [/*#__PURE__*/_jsxs(Grid, {
231
- container: true,
232
- justifyContent: "space-between",
233
- wrap: "nowrap",
234
- className: "header"
235
- // sx={{ px: 2 }}
236
- ,
237
- children: [/*#__PURE__*/_jsxs(Grid, {
238
- children: [/*#__PURE__*/_jsx(Typography, {
239
- variant: "body1",
240
- className: "title",
241
- children: "Theme/Brand Setting"
242
- }), /*#__PURE__*/_jsxs(Typography, {
243
- variant: "body1",
244
- className: "fs-12 textSecondary",
245
- sx: {
246
- mt: 0.5
247
- },
248
- children: ["Change the entire style of your website with a single click.", " "]
249
- })]
250
- }), /*#__PURE__*/_jsx(IconButton, {
251
- className: "closeBtn",
252
- onClick: onClose,
253
- children: /*#__PURE__*/_jsx(CloseIcon, {})
254
- })]
255
- }), /*#__PURE__*/_jsx(Grid, {
256
- className: "activeTheme",
257
- children: !themeMoodboard ? /*#__PURE__*/_jsx(ActiveTheme, {
258
- onExplore: () => setThemeMoodboard(true)
259
- }) : /*#__PURE__*/_jsxs(Grid, {
260
- className: "sectionDetail",
261
- children: [/*#__PURE__*/_jsxs(Typography, {
262
- variant: "body1",
263
- className: "sectionTitle flexAlign",
264
- children: [/*#__PURE__*/_jsx(IconButton, {
265
- onClick: () => setThemeMoodboard(false),
266
- className: "backBtn",
267
- children: /*#__PURE__*/_jsx(BackIcon, {})
268
- }), "Theme Moodboard"]
269
- }), /*#__PURE__*/_jsx(Box, {
270
- sx: {
271
- borderBottom: 1,
272
- borderColor: "divider"
273
- },
274
- className: "tabWrapper",
275
- children: /*#__PURE__*/_jsxs(Tabs, {
276
- value: themeTabType,
277
- onChange: handleTabChange,
278
- variant: "fullWidth",
279
- scrollButtons: false,
280
- "aria-label": "scrollable prevent tabs example",
281
- children: [/*#__PURE__*/_jsx(Tab, {
282
- label: /*#__PURE__*/_jsx(Typography, {
283
- variant: "body1",
284
- className: "fs-14 fw-500 transformNone",
285
- children: "Key themes"
286
- })
287
- }), /*#__PURE__*/_jsx(Tab, {
288
- label: /*#__PURE__*/_jsx(Typography, {
289
- variant: "body1",
290
- className: "fs-14 fw-500 transformNone",
291
- children: "Saved themes"
292
- })
293
- })]
294
- })
295
- }), loading ? /*#__PURE__*/_jsx("div", {
296
- style: {
297
- display: "flex",
298
- justifyContent: "center",
299
- alignItems: "center",
300
- margin: 0,
301
- padding: 0,
302
- height: "50px",
303
- overflow: "hidden"
304
- },
305
- children: /*#__PURE__*/_jsx(CircularProgress, {})
306
- }) : null, themes.map((theme, i) => {
307
- return /*#__PURE__*/_jsx(ThemeCard, {
308
- theme: theme
309
- }, i);
310
- })]
311
- })
312
- }), showThemeSettings ? /*#__PURE__*/_jsxs(_Fragment, {
313
- children: [/*#__PURE__*/_jsx(Grid, {
314
- sx: {
315
- px: 1,
316
- mt: 1
317
- },
318
- children: /*#__PURE__*/_jsx(ColorTheme, {
319
- colors: getColors(colors),
320
- onColorChange: onColorChange,
321
- openDefault: open === "editThemeColor",
322
- appTheme: appTheme,
323
- openSettings: openSettings,
324
- onSettingsChange: onSettingsChange,
325
- type: "colors"
326
- })
327
- }), /*#__PURE__*/_jsx(Grid, {
328
- sx: {
329
- px: 1,
330
- mt: 1
331
- },
332
- children: /*#__PURE__*/_jsx(Fonts, {
333
- appTheme: appTheme,
334
- customProps: customProps,
335
- openSettings: openSettings,
336
- onSettingsChange: onSettingsChange,
337
- type: "fonts"
338
- })
339
- }), /*#__PURE__*/_jsx(Grid, {
340
- sx: {
341
- px: 1,
342
- mt: 1
343
- },
344
- children: /*#__PURE__*/_jsx(Buttons, {
345
- appTheme: appTheme,
346
- customProps: customProps,
347
- openSettings: openSettings,
348
- onSettingsChange: onSettingsChange,
349
- type: "buttons"
350
- })
351
- })]
352
- }) : null]
353
- }), showThemeSettings ? /*#__PURE__*/_jsxs(Box, {
354
- className: "saveThemeBtnsWrapper",
355
- component: "div",
356
- children: [isUpdateTheme ? /*#__PURE__*/_jsx(SaveTheme, {
357
- saveBtnLabel: "Add new theme",
358
- loading: savingTheme,
359
- onSave: onSaveTheme,
360
- defaultFormData: {
361
- name,
362
- mood_name
363
- },
364
- addNewTheme: true,
365
- appTheme: appTheme
366
- }) : null, /*#__PURE__*/_jsx(SaveTheme, {
367
- saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
368
- loading: savingTheme,
369
- onSave: onSaveTheme,
370
- defaultFormData: {
371
- name,
372
- mood_name
373
- },
374
- appTheme: appTheme
375
- })]
376
- }) : null]
377
- })
378
- });
379
- };
380
- export default styled(ThemeSettings)(Style);
@@ -1,299 +0,0 @@
1
- const Style = ({
2
- appTheme
3
- }) => {
4
- const {
5
- textColor,
6
- tv_text,
7
- uploadFileBg,
8
- closeButtonBgColor,
9
- closeButtonSvgStroke,
10
- deviderBgColor,
11
- activeColor,
12
- cardOutsetBg,
13
- cardBorder,
14
- cardBg,
15
- selectedCardOutsetBg,
16
- cardBorder2,
17
- cardShadow,
18
- sidebarBorder,
19
- cardBg2,
20
- miniToolBarBackground,
21
- closeButtonBackground,
22
- customDialogueCloseBtnColor,
23
- customDialogueCloseBtnBorder
24
- } = appTheme?.palette?.editor || {};
25
- return {
26
- ".fs-12": {
27
- fontSize: "12px"
28
- },
29
- ".fs-14": {
30
- fontSize: "14px"
31
- },
32
- ".fs-10": {
33
- fontSize: "10px"
34
- },
35
- ".fw-500": {
36
- fontWeight: "500"
37
- },
38
- ".fw-600": {
39
- fontWeight: "600"
40
- },
41
- ".pointer": {
42
- cursor: "pointer"
43
- },
44
- ".transformNone": {
45
- textTransform: "none"
46
- },
47
- "& .MuiDrawer-paper": {
48
- background: cardBg,
49
- color: textColor,
50
- border: `1px solid ${sidebarBorder}`,
51
- display: "flex",
52
- flexDirection: "column",
53
- fontFamily: '"Inter", sans-serif'
54
- },
55
- "& .MuiTypography-root": {
56
- fontFamily: '"Inter", sans-serif'
57
- },
58
- "& .textSecondary": {
59
- color: tv_text
60
- },
61
- ".settingsContainer": {
62
- width: "340px",
63
- padding: "16px 5px",
64
- position: "relative",
65
- overflowY: "auto",
66
- flexGrow: 1,
67
- ".header": {
68
- borderBottom: `1px solid ${deviderBgColor}`,
69
- width: "calc(100% - 32px)",
70
- margin: "auto",
71
- marginBottom: "16px",
72
- paddingBottom: "16px"
73
- }
74
- },
75
- ".title": {
76
- fontWeight: "600",
77
- fontSize: "14px"
78
- },
79
- ".moodName": {
80
- whiteSpace: "nowrap",
81
- overflow: "hidden",
82
- textOverflow: "ellipsis"
83
- },
84
- ".closeBtn, .backBtn": {
85
- width: "20px",
86
- height: "20px",
87
- BorderRadius: "4px",
88
- flexShrik: "0",
89
- padding: "1px",
90
- borderRadius: "4px",
91
- background: closeButtonBgColor,
92
- color: `${closeButtonSvgStroke} !important`,
93
- "& svg": {
94
- color: `${closeButtonSvgStroke} !important`
95
- }
96
- },
97
- ".activeTheme": {
98
- background: cardOutsetBg,
99
- padding: "14px 10px",
100
- borderRadius: "4px"
101
- },
102
- ".activeThemeInnner": {
103
- borderRadius: "7px",
104
- padding: "16px",
105
- boxShadow: "1px 2px 5px 0px #00000014",
106
- background: cardBg,
107
- border: `1px solid ${cardBorder}`
108
- },
109
- "& .activeThemeTitle": {
110
- paddingBottom: "6px"
111
- },
112
- "& .exploreBtn": {
113
- color: "#2563EB",
114
- textDecorationColor: "#2563EB"
115
- },
116
- ".flexAlign": {
117
- display: "flex",
118
- alignItems: "center"
119
- },
120
- ".flexItem": {
121
- maxWidth: "50%",
122
- whiteSpace: "nowrap",
123
- overflow: "hidden",
124
- textOverflow: "ellipsis"
125
- },
126
- ".activeColorBox, .xsColorBox": {
127
- width: "24px",
128
- height: "24px",
129
- borderRadius: "5px",
130
- border: `1px solid #929292`
131
- },
132
- ".themeCard": {
133
- borderRadius: "7px",
134
- padding: "16px",
135
- border: `1px solid ${uploadFileBg}`,
136
- boxShadow: "1px 2px 5px 0px #00000014",
137
- background: cardBg2,
138
- flexWrap: "nowrap",
139
- display: "flex",
140
- justifyContent: "space-between",
141
- alignItems: "center"
142
- },
143
- ".themeCardWrapper": {
144
- padding: "6px 14px",
145
- cursor: "pointer",
146
- "&.active": {
147
- background: "#ECF2FF"
148
- }
149
- },
150
- ".primaryCard, .secondaryCard": {
151
- width: "44px",
152
- height: "44px",
153
- borderRadius: "5px",
154
- border: `1px solid #929292`
155
- },
156
- ".otherColors": {
157
- display: "flex",
158
- flexWrap: "wrap",
159
- width: "48px",
160
- ".smallCard": {
161
- width: "20px",
162
- height: "20px",
163
- borderRadius: "5px",
164
- border: `1px solid #929292`
165
- }
166
- },
167
- ".sectionDetail": {
168
- borderRadius: "4px",
169
- background: cardBg
170
- },
171
- ".sectionTitle": {
172
- borderBottom: `1px solid ${deviderBgColor}`,
173
- fontWeight: "600",
174
- fontSize: "14px",
175
- padding: "14px 0px",
176
- width: "calc(100% - 30px)",
177
- margin: "auto",
178
- gap: "8px"
179
- },
180
- // ".activeThemeInnner": {
181
- // borderRadius: "7px",
182
- // padding: "16px",
183
- // boxShadow: "1px 2px 5px 0px #00000014",
184
- // background: "#fff",
185
- // },
186
- ".activeWrapper": {
187
- background: selectedCardOutsetBg,
188
- padding: "14px 10px",
189
- position: "relative",
190
- ".tickIcon": {
191
- position: "absolute",
192
- right: "5px",
193
- top: "8px",
194
- rect: {
195
- stroke: cardBorder2
196
- }
197
- }
198
- },
199
- ".MuiDivider-root": {
200
- border: `0.5px solid ${deviderBgColor}`
201
- },
202
- ".settingAccordion": {
203
- background: cardBg2,
204
- color: textColor,
205
- boxShadow: `1px 2px 8px 0px ${cardShadow}`,
206
- border: `1px solid ${uploadFileBg}`,
207
- borderRadius: "8px !important",
208
- marginTop: "10px",
209
- marginBottom: "10px",
210
- padding: "0px 12px",
211
- "&&.Mui-expanded": {
212
- border: `1.5px solid #2563EB`,
213
- boxShadow: "1px 2px 14px 0px #2563EB47",
214
- "& .MuiAccordionSummary-expandIconWrapper": {
215
- color: "#2563EB !important"
216
- }
217
- },
218
- "&:before": {
219
- background: "transparent"
220
- },
221
- ".MuiAccordionSummary-expandIconWrapper": {
222
- color: textColor
223
- },
224
- ".MuiAccordionSummary-root ": {
225
- // minHeight: "20px",
226
- padding: "0px",
227
- minHeight: "42px !important",
228
- "&.Mui-expanded": {
229
- // minHeight: "48px !important",
230
- borderBottom: `1px solid ${deviderBgColor}`
231
- }
232
- },
233
- ".MuiAccordionSummary-content ": {
234
- // padding: "12px 0px !important",
235
- margin: "0px !important",
236
- // minHeight: "45px",
237
- fontSize: "14px",
238
- fontWeight: "600"
239
- },
240
- ".MuiAccordionDetails-root ": {
241
- padding: "12px 0px !important"
242
- }
243
- },
244
- ".MuiTab-root": {
245
- color: textColor
246
- },
247
- ".saveThemeBtnsWrapper": {
248
- position: "sticky",
249
- bottom: "0px",
250
- right: "0px",
251
- boxShadow: `0px -3px 12px 0px ${cardShadow}`,
252
- padding: "10px",
253
- borderRadius: "8px",
254
- display: "flex",
255
- justifyContent: "end",
256
- alignItems: "center",
257
- gap: "6px",
258
- background: cardBg,
259
- "& .outlineBtn": {
260
- background: miniToolBarBackground
261
- },
262
- "& button": {
263
- fontWeight: 600,
264
- fontSize: "14px",
265
- opacity: 1,
266
- borderRadius: "8px",
267
- textTransform: "math-auto",
268
- padding: "4px 20px",
269
- height: "fit-content",
270
- minWidth: "90px",
271
- lineHeight: "1.75 !important",
272
- "@media only screen and (max-width: 899px)": {
273
- width: "50%"
274
- },
275
- "&.confirmBtn": {
276
- backgroundColor: "#2563EB",
277
- color: "#ffffff",
278
- border: `1px solid #2563EB`
279
- },
280
- "&.cancelBtn": {
281
- backgroundColor: closeButtonBackground,
282
- color: customDialogueCloseBtnColor,
283
- border: `1px solid ${customDialogueCloseBtnBorder}`
284
- }
285
- }
286
- },
287
- ".tabWrapper": {
288
- borderBottom: `1px solid ${deviderBgColor}`,
289
- marginBottom: "6px",
290
- "& .Mui-selected": {
291
- color: activeColor
292
- },
293
- "& .MuiTabs-indicator": {
294
- backgroundColor: activeColor
295
- }
296
- }
297
- };
298
- };
299
- export default Style;