@fonixtree/magic-design 2.0.8 → 2.0.10

package/es/composite-comp/bol/second-config-panels/VideoSecondConfig/index.js

@@ -75,8 +75,59 @@ function (_super) {
       _this.setState({});
     };
 
+    _this.getImageRecommendSize = function (customize) {
+      var _a;
+
+      var obj = null;
+      console.log(customize);
+
+      if ((0, _coreUtil.isPc)()) {
+        switch ((_a = customize === null || customize === void 0 ? void 0 : customize.layout) === null || _a === void 0 ? void 0 : _a.pcLayout) {
+          case 'layout1':
+            obj = {
+              width: 1280,
+              height: 600
+            };
+            break;
+
+          case 'layout2':
+            obj = {
+              width: 640,
+              height: 600
+            };
+            break;
+
+          case 'layout3':
+            obj = {
+              width: 410,
+              height: 300
+            };
+            break;
+
+          default:
+            obj = {
+              width: 440,
+              height: 272
+            };
+            break;
+        }
+      } else {
+        obj = {
+          width: 343,
+          height: 212
+        };
+      }
+
+      return obj;
+    };
+
     _this.getContentPanel = function () {
-      var panelProps = _this.props.panelProps;
+      var _a = _this.props,
+          panelProps = _a.panelProps,
+          parentNode = _a.parentNode;
+
+      var size = _this.getImageRecommendSize(parentNode.customize);
+
       var source = [{
         key: '1',
         name: 'Overlay',
@@ -84,7 +135,8 @@ function (_super) {
           data: panelProps.overilay,
           needClickArea: false,
           needHover: false,
-          needURL: false
+          needURL: false,
+          recommendImgSize: size
         }),
         metaOption: panelProps.overilay
       }, {

package/es/composite-comp/dito/second-config-panels/MobileNavigationSecondConfig/index.js

@@ -55,13 +55,80 @@ function (_super) {
 
     _this.state = {};
 
+    _this.getImageRecommendSize = function (customize) {
+      var obj = null;
+
+      switch (customize === null || customize === void 0 ? void 0 : customize.layout) {
+        case 'newline':
+          switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+            case 5:
+              obj = {
+                width: 48,
+                height: 48
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 52,
+                height: 52
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 82,
+                height: 82
+              };
+              break;
+          }
+
+          break;
+
+        case 'tile':
+          {
+            switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+              case 5:
+                obj = {
+                  width: 44,
+                  height: 44
+                };
+                break;
+
+              case 4:
+                obj = {
+                  width: 52,
+                  height: 52
+                };
+                break;
+
+              case 3:
+                obj = {
+                  width: 78,
+                  height: 78
+                };
+                break;
+            }
+
+            break;
+          }
+      }
+
+      return obj;
+    };
+
     _this.getContentPanel = function (data, needHover) {
+      var parentNode = _this.props.parentNode;
+
+      var size = _this.getImageRecommendSize(parentNode.customize);
+
       var source = [{
         key: 'mobileNavSecondContent1',
         name: (0, _locale.i18n)('IMAGE'),
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: data.image,
-          needHover: needHover
+          needHover: needHover,
+          recommendImgSize: size
         }),
         metaOption: data.image
       }, {

package/es/constants/layout.js

@@ -37,6 +37,10 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
 
 var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
 
+var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
+
+var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
+
 var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
 
 var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
@@ -128,6 +132,14 @@ var imageTextLayoutPc = [{
   id: 'layout3',
   name: 'center',
   image: _layoutImagetextP3["default"]
+}, {
+  id: 'layout4',
+  name: 'leftImage',
+  image: _imageTextLeft["default"]
+}, {
+  id: 'layout5',
+  name: 'rightImage',
+  image: _imageTextRight["default"]
 }];
 exports.imageTextLayoutPc = imageTextLayoutPc;
 var imageTextLayoutMobile = [{

package/es/core/Designer/AiImageGenerator/History/index.less

@@ -6,10 +6,7 @@
   min-height: 100%;
   background-color: #FFF;
   border-radius: 4px;
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
+  
   .history_header {
     font-size: 14px;
     display: flex;

package/es/core/Designer/AiImageGenerator/index.less

@@ -1,4 +1,8 @@
 .generate_drawer {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
   .dialog_head {
     display: flex;
     align-items: center;

package/es/core/Designer/ConfigPanel/index.js

@@ -285,7 +285,8 @@ function (_super) {
       if (panelProps) {
         var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
           panelProps: panelProps,
-          outputType: outputType
+          outputType: outputType,
+          parentNode: selectedNode
         }) : null;
         return instance;
       }

package/es/locale/en/en.json

@@ -1,4 +1,5 @@
 {
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",

package/es/locale/es/es.json

@@ -1,4 +1,5 @@
 {
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",

package/es/locale/id/id.json

@@ -1,4 +1,5 @@
 {
+  "RECOMMENDED_SIZE": "Recommended Size",
   "BOLD": "Bold",
   "SEMIBOLD": "Semibold",
   "DARK": "Dark",

package/es/meta-comp/config-panels/ImageConfig/index.js

@@ -319,7 +319,8 @@ function (_super) {
         data = _a.data,
         needHover = _a.needHover,
         needClickArea = _a.needClickArea,
-        needURL = _a.needURL;
+        needURL = _a.needURL,
+        recommendImgSize = _a.recommendImgSize;
     var selectImg = this.getSelectedImg(data);
 
     var ContentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
@@ -330,6 +331,7 @@ function (_super) {
       onChange: function onChange(v, way) {
         _this.getImg(v, way);
       },
+      recommendImgSize: recommendImgSize,
       value: selectImg
     }), needClickArea && selectImg && /*#__PURE__*/_react["default"].createElement(_HotAreaConfig["default"], {
       imgUrl: selectImg,

package/lib/assets/images/layout-icon/imageTextLeft.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
+<path d="M53.0322 29H84.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<path d="M53.0322 39H79.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<rect x="11.0322" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
+</svg>

package/lib/assets/images/layout-icon/imageTextRight.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
+<path d="M11 29H42" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<path d="M11 39H37" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<rect x="48" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
+</svg>

package/lib/common/ImagePicker/index.js

@@ -104,7 +104,9 @@ function (_super) {
 
     _this.getImagePick = function () {
       var visible = _this.state.visible;
-      var value = _this.props.value;
+      var _a = _this.props,
+          value = _a.value,
+          recommendImgSize = _a.recommendImgSize;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "m-image-picker"
       }, value ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -149,7 +151,7 @@ function (_super) {
         className: "no-img"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "hint-txt"
-      }, (0, _locale.i18n)('LOOKS_LIKE_YOU_DO_NOT_HAVE_ANY_IMAGES_IN_YOUR_GALLERY__CHOOSE_IMAGES_TO_FEATURE_ON_THIS_PAGE_')), /*#__PURE__*/_react["default"].createElement("div", {
+      }, (0, _locale.i18n)('LOOKS_LIKE_YOU_DO_NOT_HAVE_ANY_IMAGES_IN_YOUR_GALLERY__CHOOSE_IMAGES_TO_FEATURE_ON_THIS_PAGE_'), recommendImgSize && recommendImgSize.width && /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('RECOMMENDED_SIZE'), ": ", recommendImgSize.width, "*", recommendImgSize.height)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "pick-btn",
         onClick: function onClick() {
           _this.setState({

package/lib/composite-comp/bol/components/ImageText/pc/index.js

@@ -111,12 +111,24 @@ function (_super) {
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {
-        width: _this.calcWidth(data.customize.pcRowNum),
-        marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
         alignItems: _AlignSelector.alignItemMap[data.customize.align],
         textAlign: data.customize.align
       };
+
+      if (data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage') {
+        if ((data === null || data === void 0 ? void 0 : data.groupSource.length) > 1 && i != (data === null || data === void 0 ? void 0 : data.groupSource.length) - 1) {
+          cardStyle.marginBottom = 48;
+        }
+
+        cardStyle.alignItems = 'center';
+      } else {
+        cardStyle.marginRight = (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0;
+        cardStyle.width = _this.calcWidth(data.customize.pcRowNum);
+        cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
+      }
+
       var wrapStyle = (0, _businessUtil.computeStyle)(source, window.magicDesign.device);
+      console.log('cc wrapStyle', source, wrapStyle);
       var hoverIndex = _this.state.hoverIndex;
       var hoverStyle = {};
 
@@ -127,6 +139,86 @@ function (_super) {
       return __assign(__assign(__assign({}, cardStyle), wrapStyle), hoverStyle);
     };
 
+    _this.getContentStyle = function () {
+      var data = _this.props.data;
+      return {
+        alignItems: _AlignSelector.alignItemMap[data.customize.align]
+      };
+    };
+
+    _this.getAnotherLayout = function () {
+      var data = _this.props.data;
+      var hoverIndex = _this.state.hoverIndex;
+      var GAData = (0, _commonUtil.getGAData)(data);
+      console.log('ff--image text', data);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "group-wrap"
+      }, data.groupSource.map(function (source, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: source.id,
+          className: "one-card",
+          onMouseEnter: function onMouseEnter() {
+            if (source.hover.open) {
+              _this.setState({
+                hoverIndex: i
+              });
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            _this.setState({
+              hoverIndex: -1
+            });
+          },
+          style: _this.getCardStyle(source, i)
+        }, (source.image.open && hoverIndex != i || hoverIndex == i && source.hover.image.open) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-image-wrap"
+        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+          className: "card-image",
+          data: hoverIndex == i ? source.hover.image : source.image,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          }),
+          maxWidth: 654,
+          minWidth: 300,
+          scale: 0.5
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "content-wrap",
+          style: _this.getContentStyle()
+        }, (source.title.open && hoverIndex != i || hoverIndex == i && source.hover.title.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-title",
+          data: hoverIndex == i ? source.hover.title : source.title,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.text.open && hoverIndex != i || hoverIndex == i && source.hover.text.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-text",
+          data: hoverIndex == i ? source.hover.text : source.text,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-btn-wrap"
+        }, (source.button.open && hoverIndex != i || source.hover.button.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-first-btn",
+          data: hoverIndex == i ? source.hover.button : source.button,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.secondButton.open && hoverIndex != i || source.hover.secondButton.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-second-btn",
+          data: hoverIndex == i ? source.hover.secondButton : source.secondButton,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }))));
+      })));
+    };
+
     return _this;
   }
 
@@ -163,7 +255,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),
       style: wrapStyle
-    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage' ? this.getAnotherLayout() : (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "group-wrap"
     }, data.groupSource.map(function (source, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/bol/components/ImageText/pc/index.less

@@ -116,3 +116,35 @@
     }
   }
 }
+
+
+.leftImage .group-wrap .one-card {
+  flex-direction: row;
+  .card-image-wrap  .card-image {
+    margin: 0 32px 0 0;
+  }
+}
+.rightImage .group-wrap .one-card {
+  flex-direction: row-reverse;
+  .card-image-wrap  .card-image {
+    margin: 0 0 0 32px;
+  }
+}
+
+.leftImage, .rightImage {
+  padding: 48px 108px;
+  .group-wrap {
+    flex-direction: column;
+    .one-card {
+      // flex-direction: row;
+      .card-image-wrap {
+        width: fit-content;
+      }
+      .content-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}

package/lib/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js

@@ -74,11 +74,188 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
+
+    _this.getImageRecommendSize = function (customize) {
+      var obj = null;
+
+      if ((0, _coreUtil.isPc)()) {
+        if ((customize === null || customize === void 0 ? void 0 : customize.layout) == 'layout3') {
+          switch (customize === null || customize === void 0 ? void 0 : customize.pcRowNum) {
+            case 6:
+              obj = {
+                width: 149,
+                height: 120
+              };
+              break;
+
+            case 5:
+              obj = {
+                width: 183,
+                height: 147
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 233,
+                height: 188
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 315,
+                height: 256
+              };
+              break;
+
+            case 2:
+              obj = {
+                width: 478,
+                height: 393
+              };
+              break;
+
+            case 1:
+              obj = {
+                width: 960,
+                height: 680
+              };
+              break;
+          }
+        } else {
+          switch (customize === null || customize === void 0 ? void 0 : customize.pcRowNum) {
+            case 6:
+              obj = {
+                width: 159,
+                height: 120
+              };
+              break;
+
+            case 5:
+              obj = {
+                width: 195,
+                height: 147
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 251,
+                height: 188
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 341,
+                height: 256
+              };
+              break;
+
+            case 2:
+              obj = {
+                width: 524,
+                height: 393
+              };
+              break;
+
+            case 1:
+              obj = {
+                width: 1072,
+                height: 680
+              };
+              break;
+          }
+        }
+      } else {
+        if ((customize === null || customize === void 0 ? void 0 : customize.layout) == 'layout3') {
+          switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+            case 5:
+              obj = {
+                width: 64,
+                height: 50
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 77,
+                height: 66
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 105,
+                height: 87
+              };
+              break;
+
+            case 2:
+              obj = {
+                width: 160,
+                height: 137
+              };
+              break;
+
+            case 1:
+              obj = {
+                width: 327,
+                height: 282
+              };
+              break;
+          }
+        } else {
+          switch (customize === null || customize === void 0 ? void 0 : customize.rowNum) {
+            case 5:
+              obj = {
+                width: 66,
+                height: 50
+              };
+              break;
+
+            case 4:
+              obj = {
+                width: 85,
+                height: 66
+              };
+              break;
+
+            case 3:
+              obj = {
+                width: 117,
+                height: 87
+              };
+              break;
+
+            case 2:
+              obj = {
+                width: 182,
+                height: 137
+              };
+              break;
+
+            case 1:
+              obj = {
+                width: 375,
+                height: 282
+              };
+              break;
+          }
+        }
+      }
+
+      return obj;
+    };
+
     return _this;
   }
 
   CarouselSecondConfig.prototype.render = function () {
-    var panelProps = this.props.panelProps;
+    var _a = this.props,
+        panelProps = _a.panelProps,
+        parentNode = _a.parentNode;
     var textSource = [{
       key: '2',
       name: (0, _locale.i18n)('TITLE'),
@@ -118,6 +295,8 @@ function (_super) {
 
     var _textSource = _mobx.store.CarouselStore[panelProps.compId] === 'layout2' ? textSource : [];
 
+    var size = this.getImageRecommendSize(parentNode.customize);
+
     var getConfig = function getConfig() {
       return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
         headerSize: "middle",
@@ -128,7 +307,8 @@ function (_super) {
           key: '1',
           name: (0, _locale.i18n)('IMAGE'),
           value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-            data: panelProps.image
+            data: panelProps.image,
+            recommendImgSize: size
           }),
           metaOption: panelProps.image,
           toggleType: 'switch'