@flozy/editor 5.4.7 → 5.4.8

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -123,7 +123,7 @@ export default function Select(props) {
             label: option?.label || option?.value,
             ...tagProps,
             sx: {
-              background: option?.color || "#F6F6F6",
+              background: option?.color || appTheme?.palette?.editor?.tv_border1,
               border: "none",
               '& .MuiChip-label': {
                 paddingLeft: '12px !important'

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js

@@ -25,16 +25,23 @@ const SimpleSelect = props => {
     size: "small",
     sx: {
       color: appTheme?.palette?.editor?.tv_text,
-      fontSize: '14px',
-      marginTop: '4px',
-      padding: '3px 0px',
+      fontSize: '14px !important',
+      marginTop: '4px !important',
+      padding: '3px 0px !important',
+      background: 'transparent !important',
+      '& .MuiOutlinedInput-root': {
+        height: '34px !important',
+        background: 'transparent !important'
+      },
       '& .MuiOutlinedInput-notchedOutline': {
-        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder}`,
-        boxShadow: '0px 4px 18px 0px #0000000D'
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
       },
       "&:hover .MuiOutlinedInput-notchedOutline": {
-        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder}`,
-        boxShadow: '0px 4px 18px 0px #0000000D'
+        border: `1px solid ${appTheme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: '0px 4px 18px 0px #0000000D !important',
+        background: 'transparent !important'
       }
     },
     MenuProps: {

package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js

@@ -55,6 +55,13 @@ const FilterSort = props => {
           className: "tv-act-ico bg br1",
           size: "small",
           onClick: onClose,
+          sx: {
+            '& svg': {
+              '& path': {
+                strokeWidth: 0
+              }
+            }
+          },
           children: /*#__PURE__*/_jsx(CloseIcon, {})
         })]
       }), renderMode()]

package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js

@@ -87,6 +87,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
           color: appTheme?.palette?.editor?.tv_text_primary,
           // background: appTheme?.palette?.editor?.tv_input_bg,
           borderRadius: "8px",
+          maxHeight: '34px !important',
           "& svg": {
             color: appTheme?.palette?.editor?.tv_text_primary
           }
@@ -98,11 +99,15 @@ const useFilterSortStyles = (theme, appTheme) => ({
     padding: '13px 16px 16px 20px',
     "& .tv-opt-list": {
       minWidth: "230px",
+      '& .bgic': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        padding: '2px',
+        borderRadius: '4px'
+      },
       '& .MuiListItemIcon-root': {
         '& svg': {
-          background: appTheme?.palette?.editor?.tv_ico_bg,
-          padding: '6px',
-          borderRadius: '4px',
+          width: '14px',
+          height: '14px',
           '& path': {
             stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
           }

package/dist/Editor/Elements/DataView/Layouts/FilterView.js

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
 import { useDataView } from "../Providers/DataViewProvider";
 import FilterSort from "./FilterSort";
-import DeleteIcon from "@mui/icons-material/Delete";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";

package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js

@@ -4,7 +4,7 @@ import { colors } from "../../../Color Picker/defaultColors";
 import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_COLORS = colors?.filter(f => !f.includes("linear"));
+const DEFAULT_COLORS = colors?.filter(f => !(f.includes("linear") || f === "#000000"));
 const AddOptions = props => {
   const {
     edit,
@@ -59,7 +59,7 @@ const AddOptions = props => {
     setError("");
   };
   return edit?.type === "select" || edit?.type === "multi-select" ? /*#__PURE__*/_jsxs(Box, {
-    className: "fe-tv-addopt st sb mb-0",
+    className: "fe-tv-addopt sb mb-0",
     children: [/*#__PURE__*/_jsx(List, {
       className: "fe-dv-opt-list pl-0",
       children: /*#__PURE__*/_jsxs(ListItemButton, {

package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js

@@ -21,6 +21,13 @@ const AddProperty = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {

package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js

@@ -1,9 +1,7 @@
 import React from "react";
-import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import { Box, IconButton, List, ListItemButton, ListItemText, ListItemIcon, Divider } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import AddIcon from "@mui/icons-material/Add";
-import { TYPE_LABELS, PROPERTY_TYPES } from "./Constants";
+import { PROPERTY_TYPES, TYPE_ICONS } from "./Constants";
 import { useDataView } from "../../Providers/DataViewProvider";
 import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -46,6 +44,13 @@ const AllProperties = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {
@@ -78,7 +83,9 @@ const AllProperties = props => {
               sx: {
                 justifyContent: "end"
               },
-              children: /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: 'rightArrow'
+              })
             })]
           }, i);
         })
@@ -91,23 +98,42 @@ const AllProperties = props => {
           children: hiddenProperties?.map((m, i) => {
             return /*#__PURE__*/_jsxs(ListItemButton, {
               onClick: onEditProperty(m),
-              children: [/*#__PURE__*/_jsx(ListItemText, {
+              children: [/*#__PURE__*/_jsx(ListItemIcon, {
+                className: "needBg",
+                sx: {
+                  alignItems: "center",
+                  '& svg': {
+                    width: '14px !important',
+                    height: '14px !important'
+                  }
+                },
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: TYPE_ICONS[m?.type]
+                })
+              }), /*#__PURE__*/_jsx(ListItemText, {
                 children: m?.label
-              }), /*#__PURE__*/_jsxs(ListItemIcon, {
+              }), /*#__PURE__*/_jsx(ListItemIcon, {
                 sx: {
-                  alignItems: "center"
+                  alignItems: "center",
+                  justifyContent: 'flex-end'
                 },
-                children: [TYPE_LABELS[m?.type], /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: 'rightArrow'
+                })
               })]
             }, i);
           })
         })]
-      }) : null, /*#__PURE__*/_jsx(List, {
+      }) : null, /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
+      }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAdd,
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(AddIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'plusIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Add New Property"
           })]

package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js

@@ -34,6 +34,16 @@ const ChangeProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
           children: /*#__PURE__*/_jsx(Icon, {
             icon: 'leftArrow'
           })
@@ -42,6 +52,13 @@ const ChangeProperty = props => {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsx(Box, {

package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js

@@ -24,8 +24,26 @@ const ColumnsList = props => {
           className: selected?.type === m?.type ? "active" : "",
           onClick: onSelect(m),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: iconType
+            sx: {
+              background: 'none'
+            },
+            children: /*#__PURE__*/_jsx(Box, {
+              className: "bgic",
+              sx: {
+                marginRight: '5px',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px',
+                '& svg': {
+                  width: '16px',
+                  height: '16px',
+                  padding: '0px !important'
+                }
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: iconType
+              })
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: m?.label

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -108,8 +108,15 @@ const EditOption = props => {
           })
         }), "Edit Option"]
       }), /*#__PURE__*/_jsx(IconButton, {
-        className: "tv-act-ico bg",
+        className: "tv-act-ico bg br1",
         size: "small",
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         onClick: onClose,
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]

package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel, Divider } from "@mui/material";
 import { TYPE_ICONS, TYPE_LABELS } from "./Constants";
 import AddOptions from "./AddOptions";
 import FilterProperty from "./FilterProperty";
 import Icon from "../../../../common/Icon";
+import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditProperty = props => {
@@ -108,12 +107,31 @@ const EditProperty = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
-          children: /*#__PURE__*/_jsx(ArrowBackIosIcon, {})
+          sx: {
+            paddingLeft: '0px',
+            '&:hover': {
+              background: 'transparent !important'
+            },
+            '& svg': {
+              width: '14px !important',
+              height: '14px !important'
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
         }), "Edit Property"]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg br1",
         size: "small",
         onClick: onClose,
+        sx: {
+          '& svg': {
+            '& path': {
+              strokeWidth: 0
+            }
+          }
+        },
         children: /*#__PURE__*/_jsx(CloseIcon, {})
       })]
     }), /*#__PURE__*/_jsxs(Box, {
@@ -136,6 +154,9 @@ const EditProperty = props => {
       }), /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
+          sx: {
+            paddingBottom: '12px'
+          },
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: "Type"
@@ -168,6 +189,8 @@ const EditProperty = props => {
             })]
           })]
         })
+      }), /*#__PURE__*/_jsx(Divider, {
+        className: "divider_sty"
       }), /*#__PURE__*/_jsx(AddOptions, {
         edit: edit,
         onUpdate: onUpdate,

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -68,7 +68,7 @@ const useOptionsStyles = (theme, appTheme) => ({
             },
             color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
-              width: "16px",
+              // width: "16px",
               '& path': {
                 stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
               }
@@ -154,6 +154,9 @@ const useOptionsStyles = (theme, appTheme) => ({
   addProperty: {
     padding: "12px",
     width: "253px",
+    "& .divider_sty": {
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+    },
     "& .fe-dv-ap-title": {
       display: "flex",
       fontWeight: "600",

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -57,11 +57,11 @@ const useTableStyles = (theme, appTheme) => ({
         }
       },
       "&:hover": {
-        color: "rgba(37, 99, 235, 1)",
+        color: appTheme?.palette?.editor?.tv_hover_text,
         "& svg": {
-          color: "rgba(37, 99, 235, 1)",
+          color: appTheme?.palette?.editor?.tv_hover_text,
           '& path': {
-            stroke: "rgba(37, 99, 235, 1)"
+            stroke: appTheme?.palette?.editor?.tv_hover_text
           }
         }
       }

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -939,7 +939,7 @@ const usePopupStyle = theme => ({
   },
   colorPopper: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
       borderRadius: "7px !important",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"

package/dist/Editor/assets/svg/PlusIcon.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PlusIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "18",
-    height: "18",
+    width: "22",
+    height: "22",
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.4.7",
+  "version": "5.4.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"