optimize style

packages/designer/src/designer/designer-view.tsx

@@ -57,7 +57,6 @@ export class DesignerView extends Component<DesignerProps & {
       <div className={classNames('lc-designer', className)} style={style}>
         <DragGhost designer={this.designer} />
         <ProjectView designer={this.designer} />
-        <TipContainer />
       </div>
     );
   }

packages/designer/src/designer/designer.less

@@ -1,48 +1,7 @@
-@import 'variables.less';
-
 .lc-designer {
-  --font-family: @font-family;
-  --font-size-label: @fontSize-4;
-  --font-size-text: @fontSize-5;
-  --font-size-btn-large: @fontSize-3;
-  --font-size-btn-medium: @fontSize-4;
-  --font-size-btn-small: @fontSize-5;
-
-  --color-brand: #006cff;
-  --color-brand-light: #197aff;
-  --color-brand-dark: #0060e5;
-  --color-icon: rgba(255, 255, 255, 0.8);
-  --color-visited: rgba(179, 182, 201, 0.4);
-  --color-actived: #498ee6;
-
-  --color-border: @white-alpha-7;
-  --color-btn: #0079F2;
-  --color-btn-border: rgba(0, 121, 242, 0.3);
-  --color-btn-bg: #212938;
-
-  --color-form-bg: #272A35;
-  --color-form-border: rgba(63,70,93,1);
-
-  --color-text: @white-alpha-3;
-  --color-text-light: @white-alpha-1;
-  --color-field-placeholder: @white-alpha-5;
-  --color-pane-label: rgba(255, 255, 255, 0.9);
-  --color-border: rgba(63, 70, 93, 1);
-  --color-field-border: rgba(118, 137, 199, 0.6);
-  --color-function-warning: rgb(204, 131, 98);
-  --color-field-border-hover: rgb(118, 137, 199, 0.8);
-  --color-field-border-active: rgb(118, 137, 199);
-  --color-block-background-disabled: rgba(118, 137, 199, 0.35);
-
-  --global-border-radius: @global-border-radius;
-  --input-border-radius: @input-border-radius;
-  --popup-border-radius: @popup-border-radius;
-
   position: relative;
   font-family: var(--font-family);
   font-size: var(--font-size-text);
-  min-width: 500px;
-  min-height: 500px;
   box-sizing: border-box;
 
   * {

packages/designer/src/designer/variables.less

@@ -1,170 +0,0 @@
-/*
- * 基础的 DPL 定义使用了 kuma base 的定义，参考：
- * https://github.com/uxcore/kuma-base/tree/master/variables
- */
-
-/**
- * ===========================================================
- * ==================== Font Family ==========================
- * ===========================================================
- */
-
-/*
- * @font-family: "STHeiti", "Microsoft Yahei", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
- */
-
- @font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
- @font-family-code: Monaco, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
-
- /**
-   * ===========================================================
-   * ===================== Color DPL ===========================
-   * ===========================================================
-   */
-
- @brand-color-1: rgba(0, 108, 255, 1);
- @brand-color-2: rgba(25, 122, 255, 1);
- @brand-color-3: rgba(0, 96, 229, 1);
-
- @brand-color-1-3: rgba(0, 108, 255, 0.6);
- @brand-color-1-4: rgba(0, 108, 255, 0.4);
- @brand-color-1-5: rgba(0, 108, 255, 0.3);
- @brand-color-1-6: rgba(0, 108, 255, 0.2);
- @brand-color-1-7: rgba(0, 108, 255, 0.1);
-
- @brand-color: @brand-color-1;
-
- @white-alpha-1: rgb(255, 255, 255); // W-1
- @white-alpha-2: rgba(255, 255, 255, 0.8); // W-2 A80
- @white-alpha-3: rgba(255, 255, 255, 0.6); // W-3 A60
- @white-alpha-4: rgba(255, 255, 255, 0.4); // W-4 A40
- @white-alpha-5: rgba(255, 255, 255, 0.3); // W-5 A30
- @white-alpha-6: rgba(255, 255, 255, 0.2); // W-6 A20
- @white-alpha-7: rgba(255, 255, 255, 0.1); // W-7 A10
- @white-alpha-8: rgba(255, 255, 255, 0.06); // W-8 A6
-
- @dark-alpha-1: rgba(0, 0, 0, 1); // D-1 A100
- @dark-alpha-2: rgba(0, 0, 0, 0.8); // D-2 A80
- @dark-alpha-3: rgba(0, 0, 0, 0.6); // D-3 A60
- @dark-alpha-4: rgba(0, 0, 0, 0.4); // D-4 A40
- @dark-alpha-5: rgba(0, 0, 0, 0.3); // D-5 A30
- @dark-alpha-6: rgba(0, 0, 0, 0.2); // D-6 A20
- @dark-alpha-7: rgba(0, 0, 0, 0.1); // D-7 A10
- @dark-alpha-8: rgba(0, 0, 0, 0.06); // D-8 A6
- @dark-alpha-9: rgba(0, 0, 0, 0.04); // D-9 A4
-
- @normal-alpha-1: rgba(31, 56, 88, 1); // N-1 A100
- @normal-alpha-2: rgba(31, 56, 88, 0.8); // N-2 A80
- @normal-alpha-3: rgba(31, 56, 88, 0.6); // N-3 A60
- @normal-alpha-4: rgba(31, 56, 88, 0.4); // N-4 A40
- @normal-alpha-5: rgba(31, 56, 88, 0.3); // N-5 A30
- @normal-alpha-6: rgba(31, 56, 88, 0.2); // N-6 A20
- @normal-alpha-7: rgba(31, 56, 88, 0.1); // N-7 A10
- @normal-alpha-8: rgba(31, 56, 88, 0.06); // N-8 A6
- @normal-alpha-9: rgba(31, 56, 88, 0.04); // N-9 A4
-
- @normal-3: #77879c;
- @normal-4: #a3aebd;
- @normal-5: #bac3cc;
- @normal-6: #d1d7de;
-
- @gray-dark: #333; // N2_4
- @gray: #666; // N2_3
- @gray-light: #999; // N2_2
- @gray-lighter: #ccc; // N2_1
-
- @brand-secondary: #2c2f33; // B2_3
- // 补色
- @brand-complement: #00b3e8; // B3_1
- // 复合
- @brand-comosite: #00c587; // B3_2
- // 浓度
- @brand-deep: #73461d; // B3_3
-
- // F1-1
- @brand-danger: rgb(240, 70, 49);
- // F1-2 (10% white)
- @brand-danger-hover: rgba(240, 70, 49, 0.9);
- // F1-3 (5% black)
- @brand-danger-focus: rgba(240, 70, 49, 0.95);
-
- // F2-1
- @brand-warning: rgb(250, 189, 14);
- // F3-1
- @brand-success: rgb(102, 188, 92);
- // F4-1
- @brand-link: rgb(102, 188, 92);
- // F4-2
- @brand-link-hover: #2e76a6;
-
- // F1-1-7 A10
- @brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
- // F1-1-8 A6
- @brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
- // F2-1-2 A80
- @brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
- // F2-1-7 A10
- @brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
- // F3-1-2 A80
- @brand-success-alpha-2: rgba(102, 188, 92, 0.8);
- // F3-1-7 A10
- @brand-success-alpha-7: rgba(102, 188, 92, 0.9);
- // F4-1-7 A10
- @brand-link-alpha-7: rgba(102, 188, 92, 0.9);
-
- // 文本色
- @text-primary-color: @dark-alpha-3;
- @text-secondary-color: @normal-alpha-3;
- @text-thirdary-color: @dark-alpha-4;
- @text-disabled-color: @normal-alpha-5;
- @text-helper-color: @dark-alpha-4;
- @text-danger-color: @brand-danger;
- @text-ali-color: #ec6c00;
-
- /**
-   * ===========================================================
-   * =================== Shadow Box ============================
-   * ===========================================================
-   */
-
- @box-shadow-1: 0 1px 4px 0 rgba(31, 56, 88, 0.15); // 1 级阴影，物体由原来存在于底面的物体展开，物体和底面关联紧密
- @box-shadow-2: 0 2px 10px 0 rgba(31, 56, 88, 0.15); // 2 级阴影，hover状态，物体层级较高
- @box-shadow-3: 0 4px 15px 0 rgba(31, 56, 88, 0.15); // 3 级阴影，当物体层级高于所有界面元素，弹窗用
-
- /**
-   * ===========================================================
-   * ================= FontSize of Level =======================
-   * ===========================================================
-   */
-
- @fontSize-1: 26px;
- @fontSize-2: 20px;
- @fontSize-3: 16px;
- @fontSize-4: 14px;
- @fontSize-5: 12px;
-
- @fontLineHeight-1: 38px;
- @fontLineHeight-2: 30px;
- @fontLineHeight-3: 26px;
- @fontLineHeight-4: 24px;
- @fontLineHeight-5: 20px;
-
- /**
-   * ===========================================================
-   * ================= FontSize of Level =======================
-   * ===========================================================
-   */
-
- @global-border-radius: 3px;
- @input-border-radius: 3px;
- @popup-border-radius: 6px;
-
- /**
-   * ===========================================================
-   * ===================== Transistion =========================
-   * ===========================================================
-   */
-
- @transition-duration: 0.3s;
- @transition-ease: cubic-bezier(0.23, 1, 0.32, 1);
- @transition-delay: 0s;

packages/designer/src/document/node/node.ts

@@ -367,6 +367,10 @@ export class Node {
    * 获取符合搭建协议-节点 schema 结构
    */
   get schema(): NodeSchema {
+    // FIXME! serilize?
+    // for design - pass to Renderer
+    // for save production data
+    // for serilize mutation record
     return this.export(true);
   }
 

packages/globals/src/components/title/index.tsx

@@ -35,6 +35,7 @@ export class Title extends Component<{ title: TitleContent; className?: string;
       <span
         className={classNames('lc-title', className, title.className, {
           'has-tip': !!tip,
+          'only-icon': !title.label
         })}
         onClick={onClick}
       >

packages/globals/src/components/title/title.less

@@ -7,6 +7,11 @@
     align-items: center;
     margin-right: 4px;
   }
+  &.only-icon {
+    .lc-title-icon {
+      margin-right: 0;
+    }
+  }
   &.has-tip {
     cursor: help;
     text-decoration-line: underline;

packages/plugin-sample-preview/src/index.tsx

@@ -10,7 +10,7 @@ const SamplePreview = ({ editor }: PluginProps) => {
     if (designer) {
       console.info('save schema:', designer.schema);
       localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
-      window.open('./preview.html', 'preview');
+      window.open('http://30.5.157.206:3333/', 'preview');
     }
   };
 

packages/plugin-settings-pane/src/setters/mixed-setter/index.tsx

@@ -216,6 +216,7 @@ export default class MixedSetter extends Component<{
     let moreBtnNode = (
       <Title
         title={triggerTitle}
+        className="lc-switch-trigger"
         onClick={
           isTwoType
             ? () => {

packages/plugin-settings-pane/src/setters/mixed-setter/style.less

@@ -1,14 +1,30 @@
 .lc-setter-mixed {
-  width: 100%;
+  flex: 1;
+  min-width: 0;
+  margin-right: 26px;
+  display: block;
   position: relative;
-  .lc-setter-actions {
+  >.lc-setter-actions {
     position: absolute;
-    right: 0px;
+    right: -2px;
+    top: 50%;
+    transform: translate(100%, -50%);
+    .lc-switch-trigger {
+      cursor: pointer;
+      opacity: 0.6;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  >.next-input {
+    width: 100%;
   }
-  padding-right: 30px;
   &.lc-block-setter {
     position: static;
-    display: block;
+    margin-right: 0;
-    padding-right: 0;
+    >.lc-setter-actions {
+      transform: none;
+    }
   }
 }

packages/setters/src/index.tsx

@@ -10,6 +10,13 @@ import EventsSetter from './events-setter';
 export const StringSetter = {
   component: Input,
   defaultProps: { placeholder: '请输入' },
+  title: 'StringSetter', // TODO
+  condition: (field: any) => {
+    const v = field.getValue();
+    return v == null || typeof v === 'string';
+  },
+  initialValue: '',
+  recommend: true,
 };
 export const NumberSetter = NumberPicker;
 export const BoolSetter = Switch;

packages/vision-polyfill/src/editor.ts

@@ -68,10 +68,7 @@ skeleton.topArea.add({
   props: {
     align: "right",
   },
-  content: createElement(Button, {
+  content: Preview,
-    size: 'small',
-    children: '预览'
-  }),
 });
 skeleton.topArea.add({
   type: "Dock",