@fonixtree/magic-design 0.0.16 → 0.0.17

package/lib/core/Designer/CompListPanel/CompCard/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CompCard;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Iconfont = _interopRequireDefault(require("../../../../common/Iconfont"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function CompCard(_a) {
+  var label = _a.label,
+      onAdd = _a.onAdd,
+      type = _a.type,
+      icon = _a.icon;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "compCard"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comp-info"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "comp-icon",
+    type: icon
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comp-name"
+  }, label)), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "hover-icon",
+    color: "#2F54EB",
+    onClick: function onClick() {
+      return onAdd({
+        type: type,
+        label: label,
+        icon: icon
+      });
+    },
+    type: "icon-add"
+  })));
+}

package/lib/core/Designer/CompListPanel/CompCard/index.less

@@ -0,0 +1,69 @@
+.compCard {
+  position: relative;
+  padding: 24px;
+  background: #F5F6F7;
+  border-radius: 8px;
+  margin-bottom: 10px;
+
+  &:hover {
+    background: #E9F0FF;
+    .comp-info {
+      .hover-icon {
+        display: block;
+      }
+    }
+  }
+  &.cardActive {
+    background: #E9F0FF;
+  }
+
+  .comp-info {
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .comp-name {
+      margin-left: 16px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      color: #232F46;
+    }
+    .hover-icon {
+      display: none;
+      cursor: pointer;
+    }
+  }
+  .comp-layout-panel {
+    max-height: 0;
+    transition: all .4s ease;
+    opacity: 0;
+    .layout_wrap {
+      display: flex;
+      .icon_wrap {
+        background: #FFFFFF;
+        border: 2px solid #FFFFFF;
+        box-sizing: border-box;
+        border-radius: 6px;
+        height: 57px;
+        width: 78px;
+        &:nth-child(3n +2) {
+          margin-left: 12px;
+          margin-right: 12px;
+        }
+      }
+      .layout_actice {
+        border-color: #597EF7;
+      }
+    }
+    .btn_wrap {
+      display: flex;
+    }
+  }
+  .panel-visible {
+    max-height: 200px;
+    opacity: 1;
+  }
+}

package/lib/meta-comp/components/Button/index.less

@@ -0,0 +1,19 @@
+.m-meta-button {
+  transition: all 0.25s;
+
+  .btnContent {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    &.horizontal {
+      flex-direction: row;
+    }
+
+    img {
+      height: 20px;
+    }
+  }
+}

package/lib/meta-comp/components/Image/index.less

@@ -0,0 +1,18 @@
+.m-meta-image {
+  width: 100%;
+  height: 100%;
+
+  &>img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: all .2s linear;
+    vertical-align:initial;
+  }
+
+  &.backgroundImg {
+    &>img {
+      object-fit: cover;
+    }
+  }
+}

package/lib/meta-comp/components/Text/index.less

@@ -0,0 +1,38 @@
+.m-meta-text {
+  display: block;
+
+  .select-container {
+    position: relative;
+
+    .close-wrap {
+      user-select: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: 1px dashed rgb(204, 204, 204);
+
+      .magic-box-iconfont {
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 21px;
+        transform: translate(50%, -50%);
+        color: rgb(255, 255, 255);
+        text-shadow: 1px 1px 4px #000;
+
+        &:hover {
+          color: rgb(244, 104, 104);
+          cursor: pointer;
+        }
+      }
+    }
+
+    // &.selected {
+    //   .close-wrap {
+    //     display: inline;
+    //   }
+    // }
+  }
+}

package/lib/meta-comp/config-panels/ButtonConfig/index.less

@@ -0,0 +1,4 @@
+.m-button-config {
+  padding: 0 12px;
+  background-color: #F5F6F7;
+}

package/lib/meta-comp/config-panels/ImageConfig/index.less

@@ -0,0 +1,16 @@
+.m-image-config {
+  padding: 0 12px 1px;
+  background-color: #F5F6F7;
+
+  // .hoverSelect {
+  //   .ant-select-selector {
+  //     border: 1px solid #D2D9E5;
+  //     border-radius: 8px;
+  //     padding: 0 16px;
+  //     height: auto;
+  //     font-family: 'Open Sans';
+  //     line-height: 48px;
+  //     color: #232F46;
+  //   }
+  // }
+}

package/lib/meta-comp/config-panels/TextConfig/index.less

@@ -0,0 +1,24 @@
+.m-text-config {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+  background-color: #F5F6F7;
+  .line-config {
+    text-decoration-line: line-through;
+    text-decoration-color: #000;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .line-solid {
+    text-decoration-style: solid;
+  }
+  .dashed-line {
+    text-decoration-style: dashed;
+  }
+  .double-line {
+    text-decoration-style: double;
+  }
+  .wavy-line {
+    text-decoration-style: wavy;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",