@bigbinary/neeto-themes-frontend 3.0.0 → 3.0.2

package/dist/cjs/NeetoThemesBuilder.js

@@ -29,18 +29,18 @@ var Editor = require('@monaco-editor/react');
 var formik = require('formik');
 var Down = require('@bigbinary/neeto-icons/Down');
 var jsxRuntime = require('react/jsx-runtime');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
-var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
-var Toastr = require('@bigbinary/neetoui/Toastr');
 var ramda = require('ramda');
-var Select = require('@bigbinary/neetoui/Select');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
 var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
 var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
+var Select = require('@bigbinary/neetoui/Select');
 var antd = require('antd');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
+var Toastr = require('@bigbinary/neetoui/Toastr');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var Rating = require('@bigbinary/neeto-icons/Rating');
@@ -456,13 +456,15 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
         kind = _ref.kind,
         defaultValue = _ref.defaultValue,
         _ref$order = _ref.order,
-        order = _ref$order === void 0 ? null : _ref$order;
+        order = _ref$order === void 0 ? null : _ref$order,
+        dependsOn = _ref.dependsOn;
       switch (kind) {
         case "color":
           return _objectSpread$4({
             value: defaultValue,
             kind: "color",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -470,7 +472,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
             kind: "font_family",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -478,7 +481,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: 0,
             kind: "overlay_opacity",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -486,7 +490,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: 0,
             kind: "slider",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -494,7 +499,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "radius",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -502,7 +508,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: String(defaultValue),
             kind: "boolean",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -510,7 +517,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "order_selector",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -518,7 +526,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "alignment_block",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -526,7 +535,8 @@ var buildInitialValues = function buildInitialValues(theme, themePropertiesSchem
           return _objectSpread$4({
             value: defaultValue,
             kind: "custom_css",
-            key: key
+            key: key,
+            dependsOn: dependsOn
           }, order !== null && {
             order: order
           });
@@ -571,159 +581,27 @@ var isPropertyVisible = function isPropertyVisible(key, formikValues, themePrope
 var buildLabel = function buildLabel(key, kind) {
   return i18next.t("neetoThemes.properties.".concat(neetoCist.snakeToCamelCase(kind), ".").concat(neetoCist.snakeToCamelCase(key)));
 };
-
-var SelectBlock = function SelectBlock(_ref) {
-  var label = _ref.label,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-    value = _ref.value,
-    options = _ref.options,
-    onChange = _ref.onChange;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between",
-    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "logo-field-labels",
-      style: "body2",
-      children: label
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsxRuntime.jsx(Select, {
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        value: value
-      })
-    })]
+var buildProperties = function buildProperties(values, condition, themePropertiesSchema) {
+  values.forEach(function (value) {
+    themePropertiesSchema.forEach(function (theme) {
+      if (!(value.key === theme.key)) return;
+      value.dependsOn = theme.dependsOn;
+    });
   });
-};
-
-var ImageBlock = function ImageBlock(_ref) {
-  var _findBy;
-  var label = _ref.label,
-    name = _ref.name,
-    _ref$imageData = _ref.imageData,
-    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
-    _ref$uploadConfig = _ref.uploadConfig,
-    uploadConfig = _ref$uploadConfig === void 0 ? {
-      maxImageSize: ONE_MEGABYTE
-    } : _ref$uploadConfig,
-    attribute = _ref.attribute;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = formik.useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    values = _useFormikContext.values;
-  var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
-      return {
-        themePropertiesSchema: store["themePropertiesSchema"]
-      };
-    }, shallow.shallow),
-    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
-  var propertySchema = neetoCist.findBy({
-    key: attribute
-  }, themePropertiesSchema);
-  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
-  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
-  var positionKeyInSchema = neetoCist.findBy({
-    key: "".concat(name, "_position")
-  }, themePropertiesSchema);
-  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && neetoCist.isPresent(positionKeyInSchema);
-  var positionKeyIndex = neetoCist.findIndexBy({
-    key: "".concat(name, "_position")
-  }, values.properties);
-  var handleImageChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
-      var dominantColor;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            if (!(ramda.isEmpty(image.signedId) || ramda.isEmpty(image.url))) {
-              _context.next = 4;
-              break;
-            }
-            setFieldValue(name, {
-              signedId: null,
-              url: image.url
-            });
-            return _context.abrupt("return");
-          case 4:
-            _context.next = 6;
-            return utils.getDominantColorFromUrl(image.url);
-          case 6:
-            dominantColor = _context.sent;
-            setFieldValue(name, {
-              signedId: image.signedId,
-              url: image.url,
-              dominantColor: dominantColor
-            });
-            _context.next = 13;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](0);
-            Toastr.error(_context.t0);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 10]]);
-    }));
-    return function handleImageChange(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-3",
-    "data-cy": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
-    children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-between",
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "style-fields-labels",
-        style: "body2",
-        children: label
-      })
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "space-y-3",
-      children: [/*#__PURE__*/react.createElement(ImageUploader, {
-        uploadConfig: uploadConfig,
-        className: "h-40 w-full",
-        key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
-        src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
-        onUploadComplete: handleImageChange
-      }), isPositionChangerVisible && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
-        label: buildLabel("".concat(name, "Position"), "image"),
-        options: options || POSITION_OPTIONS,
-        placeholder: t("neetoThemes.common.left"),
-        value: neetoCist.toLabelAndValue(((_findBy = neetoCist.findBy({
-          key: "".concat(name, "_position")
-        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
-        onChange: function onChange(option) {
-          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
-        }
-      })]
-    })]
+  if (condition) {
+    return neetoCist.filterBy({
+      dependsOn: condition
+    }, values);
+  }
+  var imageKeys = new Set();
+  neetoCist.filterBy({
+    kind: "image"
+  }, themePropertiesSchema).forEach(function (ele) {
+    return imageKeys.add(ele.key);
   });
-};
-
-var Images = function Images(_ref) {
-  var attribute = _ref.attribute,
-    className = _ref.className;
-  var _useFormikContext = formik.useFormikContext(),
-    values = _useFormikContext.values;
-  var key = neetoCist.snakeToCamelCase(attribute);
-  var title = buildLabel(key, "image");
-  var imageData = values[key];
-  return /*#__PURE__*/jsxRuntime.jsx(Card$2, {
-    className: className,
-    title: title,
-    name: "images",
-    children: /*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
-      attribute: attribute,
-      imageData: imageData,
-      name: key
-    })
+  return values === null || values === void 0 ? void 0 : values.filter(function (_ref2) {
+    var dependsOn = _ref2.dependsOn;
+    return !imageKeys.has(dependsOn);
   });
 };
 
@@ -857,6 +735,32 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   });
 };
 
+var SelectBlock = function SelectBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-center justify-between",
+    "data-cy": "theme-style-".concat(utils$1.joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      "data-cy": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsxRuntime.jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value
+      })
+    })]
+  });
+};
+
 var SliderBlock = function SliderBlock(_ref) {
   var label = _ref.label,
     onChange = _ref.onChange,
@@ -899,6 +803,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
   var doesHelpTextExist = i18n.exists(translationKey);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
+    "data-cy": "theme-style-content-background",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "inline-flex items-center gap-4",
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -923,9 +828,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
 
 var Properties = function Properties(_ref) {
   var onPropertiesChange = _ref.onPropertiesChange,
-    className = _ref.className;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+    condition = _ref.condition;
   var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
       return {
         themePropertiesSchema: store["themePropertiesSchema"]
@@ -980,11 +883,8 @@ var Properties = function Properties(_ref) {
       previewingTheme: values
     });
   }, [values]);
-  return /*#__PURE__*/jsxRuntime.jsx(Card$2, {
-    className: className,
-    name: "style",
-    title: t("neetoThemes.common.style"),
-    children: values.properties.sort(function (a, b) {
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: buildProperties(values === null || values === void 0 ? void 0 : values.properties, condition, themePropertiesSchema).sort(function (a, b) {
       var order = function order(key) {
         var _findBy;
         return ((_findBy = neetoCist.findBy({
@@ -1092,6 +992,139 @@ var Properties = function Properties(_ref) {
   });
 };
 
+var ImageBlock = function ImageBlock(_ref) {
+  var _findBy;
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$imageData = _ref.imageData,
+    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
+    _ref$uploadConfig = _ref.uploadConfig,
+    uploadConfig = _ref$uploadConfig === void 0 ? {
+      maxImageSize: ONE_MEGABYTE
+    } : _ref$uploadConfig,
+    attribute = _ref.attribute;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values;
+  var _useConfigStore = useThemeUtils.useConfigStore(function (store) {
+      return {
+        themePropertiesSchema: store["themePropertiesSchema"]
+      };
+    }, shallow.shallow),
+    themePropertiesSchema = _useConfigStore.themePropertiesSchema;
+  var propertySchema = neetoCist.findBy({
+    key: attribute
+  }, themePropertiesSchema);
+  var enablePositionChanger = (propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.enablePositionChanger) || false;
+  var options = propertySchema === null || propertySchema === void 0 ? void 0 : propertySchema.options;
+  var positionKeyInSchema = neetoCist.findBy({
+    key: "".concat(name, "_position")
+  }, themePropertiesSchema);
+  var isPositionChangerVisible = enablePositionChanger && (imageData === null || imageData === void 0 ? void 0 : imageData.url) && neetoCist.isPresent(positionKeyInSchema);
+  var positionKeyIndex = neetoCist.findIndexBy({
+    key: "".concat(name, "_position")
+  }, values.properties);
+  var handleImageChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+      var dominantColor;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            if (!(ramda.isEmpty(image.signedId) || ramda.isEmpty(image.url))) {
+              _context.next = 4;
+              break;
+            }
+            setFieldValue(name, {
+              signedId: null,
+              url: image.url
+            });
+            return _context.abrupt("return");
+          case 4:
+            _context.next = 6;
+            return utils.getDominantColorFromUrl(image.url);
+          case 6:
+            dominantColor = _context.sent;
+            setFieldValue(name, {
+              signedId: image.signedId,
+              url: image.url,
+              dominantColor: dominantColor
+            });
+            _context.next = 13;
+            break;
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            Toastr.error(_context.t0);
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 10]]);
+    }));
+    return function handleImageChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-3",
+    "data-cy": "theme-style-".concat(label ? utils$1.joinHyphenCase(label) : "image-block"),
+    children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-between",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        "data-cy": "style-fields-labels",
+        style: "body2",
+        children: label
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-3",
+      children: [/*#__PURE__*/react.createElement(ImageUploader, {
+        uploadConfig: uploadConfig,
+        className: "h-40 w-full",
+        key: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        src: imageData === null || imageData === void 0 ? void 0 : imageData.url,
+        onUploadComplete: handleImageChange
+      }), isPositionChangerVisible && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
+        label: buildLabel("".concat(name, "Position"), "image"),
+        options: options || POSITION_OPTIONS,
+        placeholder: t("neetoThemes.common.left"),
+        value: neetoCist.toLabelAndValue(((_findBy = neetoCist.findBy({
+          key: "".concat(name, "_position")
+        }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
+        onChange: function onChange(option) {
+          return setFieldValue("properties[".concat(positionKeyIndex, "].value"), option.value);
+        }
+      })]
+    })]
+  });
+};
+
+var Images = function Images(_ref) {
+  var attribute = _ref.attribute,
+    className = _ref.className,
+    onPropertiesChange = _ref.onPropertiesChange;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values;
+  var key = neetoCist.snakeToCamelCase(attribute);
+  var title = buildLabel(key, "image");
+  var imageData = values[key];
+  return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
+    className: className,
+    title: title,
+    name: "images",
+    children: [/*#__PURE__*/jsxRuntime.jsx(ImageBlock, {
+      attribute: attribute,
+      imageData: imageData,
+      name: key
+    }), /*#__PURE__*/jsxRuntime.jsx(Properties, {
+      onPropertiesChange: onPropertiesChange,
+      condition: attribute
+    })]
+  });
+};
+
 var ThemeMeta = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     className = _ref.className;
@@ -1134,7 +1167,8 @@ var Customize = function Customize(_ref) {
     themePropertiesSchema = _useConfigStore.themePropertiesSchema,
     entityType = _useConfigStore.entityType;
   var _useThemeUtils = useThemeUtils.useThemeUtils(),
-    currentTheme = _useThemeUtils.currentTheme;
+    currentTheme = _useThemeUtils.currentTheme,
+    setThemeState = _useThemeUtils.setThemeState;
   var _useShowGlobalTheme = useShowGlobalTheme(entityType),
     _useShowGlobalTheme$d = _useShowGlobalTheme.data,
     _useShowGlobalTheme$d2 = _useShowGlobalTheme$d === void 0 ? {} : _useShowGlobalTheme$d,
@@ -1175,11 +1209,15 @@ var Customize = function Customize(_ref) {
       });
     }
     return updateTheme(themeToSave, {
-      onSuccess: function onSuccess() {
+      onSuccess: function onSuccess(_ref4) {
+        var theme = _ref4.theme;
+        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 ? void 0 : onUpdateThemeSuccess(theme);
+        setThemeState({
+          previewingTheme: theme
+        });
         resetForm({
-          values: values
+          values: theme
         });
-        onUpdateThemeSuccess === null || onUpdateThemeSuccess === void 0 ? void 0 : onUpdateThemeSuccess(values);
       }
     });
   };
@@ -1193,10 +1231,10 @@ var Customize = function Customize(_ref) {
       enableReinitialize: true,
       onSubmit: onSubmit
     },
-    children: function children(_ref4) {
-      var dirty = _ref4.dirty,
-        values = _ref4.values,
-        setFieldValue = _ref4.setFieldValue;
+    children: function children(_ref5) {
+      var dirty = _ref5.dirty,
+        values = _ref5.values,
+        setFieldValue = _ref5.setFieldValue;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "neeto-themes-sidebar__scroll",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -1205,21 +1243,27 @@ var Customize = function Customize(_ref) {
             className: classnames({
               hidden: isCustomCssScreen
             })
-          }), /*#__PURE__*/jsxRuntime.jsx(Properties, {
-            onPropertiesChange: onPropertiesChange,
+          }), /*#__PURE__*/jsxRuntime.jsx(Card$2, {
             className: classnames({
               hidden: isCustomCssScreen
+            }),
+            name: "style",
+            title: t("neetoThemes.common.style"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Properties, {
+              onPropertiesChange: onPropertiesChange
             })
           }), neetoCist.filterBy({
             kind: "image"
-          }, themePropertiesSchema).map(function (_ref5) {
-            var key = _ref5.key;
-            return /*#__PURE__*/jsxRuntime.jsx(Images, {
+          }, themePropertiesSchema).map(function (_ref6) {
+            var key = _ref6.key;
+            return /*#__PURE__*/react.createElement(Images, {
+              onPropertiesChange: onPropertiesChange,
               attribute: key,
               className: classnames({
                 hidden: isCustomCssScreen
-              })
-            }, key);
+              }),
+              key: key
+            });
           }), /*#__PURE__*/jsxRuntime.jsx(CustomCSS, {
             currentScreen: currentScreen,
             onEditCSSClick: onEditCSSClick