Merge branch 'polyfill/vision' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into polyfill/vision

This commit is contained in:
kangwei 2020-05-07 16:14:18 +08:00
commit 80d342fa55
9 changed files with 168 additions and 90 deletions

View File

@ -25,6 +25,9 @@
align-items: stretch;
justify-content: flex-end;
pointer-events: all;
> * {
flex-shrink: 0;
}
}
&-action {

View File

@ -49,13 +49,14 @@ class AliGlobalLocale {
}
} else if (g_config) {
if (g_config.locale) {
return languageMap[g_config.locale] || (g_config.locale || '').replace('_', '-');
return languageMap[g_config.locale] || g_config.locale.replace('_', '-');
}
}
let locale: string = '';
if (navigator.language) {
locale = (navigator.language as string).replace('_', '-');
const lang = (navigator.language as string);
return languageMap[lang] || lang.replace('_', '-');
}
// IE10 及更低版本使用 browserLanguage

View File

@ -13,7 +13,7 @@
align-items: center;
}
.lc-field-icon {
margin-right: @x-gap;
// margin-right: @x-gap;
transform-origin: center;
transition: transform 0.1s;
}
@ -21,7 +21,7 @@
&.lc-plain-field {
// for top-level style
padding: 8px 10px;
// padding: 8px 10px;
> .lc-field-body {
flex: 1;
min-width: 0;
@ -34,7 +34,16 @@
display: flex;
align-items: center;
// for top-level style
padding: 8px 10px;
padding: 16px;
&:first-child{
padding-top: 16px;
}
&:last-child{
padding-bottom: 16px;
}
&+.lc-inline-field{
padding-top: 0;
}
> .lc-field-head {
width: 70px;
@ -58,19 +67,29 @@
border-top: 1px solid var(--color-line-normal);
}
> .lc-field-head {
padding-left: @x-gap;
// padding-left: @x-gap;
height: 32px;
display: flex;
align-items: center;
font-weight: 500;
background: var(--color-block-background-shallow, rgba(31,56,88,.06));
border-bottom: 1px solid var(--color-line-normal);
color: var(--color-title);
// background: var(--color-block-background-shallow, rgba(31,56,88,.06));
// border-bottom: 1px solid var(--color-line-normal);
// color: var(--color-title);
padding: 0 16px;
background-color: #F7F9FC;
color: #8F9BB3;
user-select: none;
}
> .lc-field-body {
padding: @y-gap @x-gap/2;
// padding: @y-gap @x-gap/2;
padding: 16px;
.lc-inline-field{
margin-bottom: 16px;
&:last-child{
margin-bottom: 0;
}
}
}
+ .lc-inline-field {
@ -94,7 +113,11 @@
}
&.lc-accordion-field {
position: relative;
// collapsed
&:last-child.lc-field-is-collapsed{
border-bottom: 1px solid var(--color-line-normal);
}
&.lc-field-is-collapsed {
> .lc-field-head .lc-field-icon {
transform: rotate(180deg);
@ -106,14 +129,15 @@
// 邻近的保持上下距离
+ .lc-field {
margin-top: @y-gap;
// margin-top: @y-gap;
}
}
// 2rd level reset
.lc-field-body {
.lc-inline-field {
padding: @y-gap @x-gap/2 0 @x-gap/2;
// padding: @y-gap @x-gap/2 0 @x-gap/2;
padding: 0;
&:first-child {
padding-top: 0;
}
@ -132,7 +156,8 @@
background: var(--color-block-background-light);
border-bottom-color: var(--color-line-light, rgba(31, 56, 88, .1));
> .lc-field-icon {
margin-right: @x-gap/2;
// margin-right: @x-gap/2;
margin-right: 0;
}
}
}

View File

@ -42,9 +42,22 @@
margin-right: 0;
>.lc-setter-actions {
position: absolute;
right: 10px;
right: 16px;
top: 0;
height: 32px;
transform: none;
}
}
.lc-block-field > .lc-field-body > .lc-setter-mixed{
}
.lc-accordion-field > .lc-field-body > .lc-setter-mixed{
position: static;
margin-right: 0;
> .lc-setter-actions{
right: 32px;
top: 6px;
transform: none;
}
}

View File

@ -15,7 +15,7 @@
height: 30px;
display: flex;
align-items: center;
padding-left: 5px;
padding: 0 16px;
border-bottom: 1px solid var(--color-line-normal);
.lc-settings-navigator-icon {
width: 16px;

View File

@ -70,7 +70,7 @@ body {
height: 48px;
font-size: 16px;
padding: 0 15px;
border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
// border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
color: #0F1726;
font-weight: bold;
}
@ -116,6 +116,9 @@ body {
}
*/
}
.lc-outline-pane{
border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
}
}
.lc-panel {
height: 100%;
@ -160,70 +163,86 @@ body {
*/
/*覆盖旧面板*/
/*组件面板*/
.ve-component-list {
.ve-component-list-body{
.ve-component-list-sidebar{
.ve-component-list-navigator{
.navigator-group{
&:last-child{
&::after{
display: none;
}
}
&::after{
content: '';
display: block;
height: 1px;
background-color: #EDEFF3;
line-height: 0;
margin: 4px 12px 0;
}
.navigator-group-head{
.navigator-group-title{
border-bottom: none;
}
}
.navigator-group-item{
border-left: 2px solid transparent;
&.active{
border-left-color: #0079f2;
border-right: none;
}
}
}
}
}
}
}
// .ve-component-list {
// .ve-component-list-body{
// .ve-component-list-sidebar{
// .ve-component-list-navigator{
// .navigator-group{
// &:last-child{
// &::after{
// display: none;
// }
// }
// &::after{
// content: '';
// display: block;
// height: 1px;
// background-color: #EDEFF3;
// line-height: 0;
// margin: 4px 12px 0;
// }
// .navigator-group-head{
// .navigator-group-title{
// border-bottom: none;
// }
// }
// .navigator-group-item{
// border-left: 2px solid transparent;
// &.active{
// border-left-color: #0079f2;
// border-right: none;
// }
// }
// }
// }
// }
// }
// }
/*数据源*/
.engine-datapool{
.engine-datapool-view-group{
padding-top: 48px;
.engine-datapool-view-group-title{
height: 48px;
line-height: 48px;
font-size: 16px;
background-color: transparent;
padding: 0 16px;
border-bottom: 1px solid #EDEFF3;
}
}
}
// .engine-datapool{
// .engine-datapool-view-group{
// padding-top: 48px;
// .engine-datapool-view-group-title{
// height: 48px;
// line-height: 48px;
// font-size: 16px;
// background-color: transparent;
// padding: 0 16px;
// border-bottom: 1px solid #EDEFF3;
// }
// }
// }
/*动作面板*/
.ve-action-pane{
border-top: none;
.rc-tabs{
.rc-tabs-bar{
background-color: transparent;
.rc-tabs-tab{
line-height: 1;
&.rc-tabs-tab-active{
// .ve-action-pane{
// border-top: none;
// .rc-tabs{
// .rc-tabs-bar{
// background-color: transparent;
// .rc-tabs-tab{
// line-height: 1;
// &.rc-tabs-tab-active{
}
}
}
}
}
// }
// }
// }
// }
// }
/*设置面板*/
// .ve-field .ve-field-head,
// .ve-field.ve-accordion2-field > .ve-field-head .ve-field-title-content{
// padding: 0;
// }
// .ve-field.ve-accordion2-field > .ve-field-split-line{
// display: none;
// }
// .vs-style .vs-style-source{
// margin: 0 0 16px;
// }
// .vs-code-button,
// .vs-json-button{
// margin: 0;
// }
}
@ -238,7 +257,7 @@ body {
width: 100%;
display: flex;
margin-bottom: 2px;
padding: 8px;
padding: 8px 12px 8px 16px;
.lc-top-area-center{
flex: 1;
@ -294,7 +313,7 @@ body {
align-items: center;
// background: rgba(31,56,88,0.04);
border-bottom: 1px solid #EDEFF3;
.lc-tab-title {
.lc-tab-title{
flex: 1;
height: 32px;
display: flex;

View File

@ -1,3 +1,4 @@
import { EventEmitter } from 'events';
import { createElement, ReactNode } from 'react';
import { obx } from '@ali/lowcode-editor-core';
import { uniqueId, createContent } from '@ali/lowcode-utils';
@ -13,8 +14,9 @@ export default class Panel implements IWidget {
readonly isWidget = true;
readonly name: string;
readonly id: string;
@obx.ref inited: boolean = false;
@obx.ref private _actived: boolean = false;
@obx.ref inited = false;
@obx.ref private _actived = false;
private emitter = new EventEmitter();
get actived(): boolean {
return this._actived;
}
@ -46,7 +48,7 @@ export default class Panel implements IWidget {
readonly title: TitleContent;
readonly help?: HelpTipConfig;
private plain: boolean = false;
private plain = false;
private container?: WidgetContainer<Panel, PanelConfig>;
private parent?: WidgetContainer;
@ -146,9 +148,11 @@ export default class Panel implements IWidget {
}
this._actived = true;
this.parent?.active(this);
this.emitter.emit('activechange', true);
} else if (this.inited) {
this._actived = false;
this.parent?.unactive(this);
this.emitter.emit('activechange', false);
}
}
@ -182,6 +186,16 @@ export default class Panel implements IWidget {
* @deprecated
*/
setPosition(position: string) {
// noop
}
/**
* @deprecated
*/
onActiveChange(fn: (flag: boolean) => void): () => void {
this.emitter.on('activechange', fn);
return () => {
this.emitter.removeListener('activechange', fn);
};
}
}

View File

@ -1,12 +1,12 @@
import Pane from './views/pane';
import { IconOutline } from './icons/outline';
import { intl } from './locale';
import { intlNode } from './locale';
export default {
name: 'outline-pane',
props: {
icon: IconOutline,
description: intl('Outline Tree'),
description: intlNode('Outline Tree'),
},
content: Pane,
};

View File

@ -6,17 +6,20 @@ const { project } = designer;
export interface OldPageData {
id: string;
layout: RootSchema;
componentsTree: RootSchema[];
[dataAddon: string]: any;
}
const pages = Object.assign(project, {
setPages(pages: OldPageData[]) {
// FIXME: upgrade schema
pages[0].componentsTree.forEach((item: any) => {
item.lifeCycles = {};
item.methods = {};
});
if (!pages || !Array.isArray(pages) || pages.length === 0) {
throw new Error('pages schema 不合法');
}
if (pages[0].componentsTree[0]) {
pages[0].componentsTree[0].componentName = 'Page';
}
project.load({
version: '1.0.0',
componentsMap: [],