From 66e8c25a4bf8b6ece74dfa98ecc73b1c42a0e7b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=B1=E5=86=A0?= Date: Thu, 7 May 2020 14:15:43 +0800 Subject: [PATCH 1/4] feat: left pane title style; setting pane style --- .../src/components/field/index.less | 47 ++++-- .../src/components/mixed-setter/style.less | 15 +- .../src/components/settings/style.less | 2 +- .../src/layouts/workbench.less | 147 ++++++++++-------- 4 files changed, 134 insertions(+), 77 deletions(-) diff --git a/packages/editor-skeleton/src/components/field/index.less b/packages/editor-skeleton/src/components/field/index.less index 4c767cf9b..00e073111 100644 --- a/packages/editor-skeleton/src/components/field/index.less +++ b/packages/editor-skeleton/src/components/field/index.less @@ -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; } } } diff --git a/packages/editor-skeleton/src/components/mixed-setter/style.less b/packages/editor-skeleton/src/components/mixed-setter/style.less index 5d6f31674..759fab709 100644 --- a/packages/editor-skeleton/src/components/mixed-setter/style.less +++ b/packages/editor-skeleton/src/components/mixed-setter/style.less @@ -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; + } +} diff --git a/packages/editor-skeleton/src/components/settings/style.less b/packages/editor-skeleton/src/components/settings/style.less index 9b2c2b403..a76bfbc78 100644 --- a/packages/editor-skeleton/src/components/settings/style.less +++ b/packages/editor-skeleton/src/components/settings/style.less @@ -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; diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index d5b2230f9..70a07c0ca 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -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; From 6b91535740858539f0b42059b889b94f1e731405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=B1=E5=86=A0?= Date: Thu, 7 May 2020 14:29:14 +0800 Subject: [PATCH 2/4] fix: border action style --- packages/designer/src/builtin-simulator/bem-tools/borders.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less index 511bae9c2..b602193b5 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/borders.less +++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less @@ -25,6 +25,9 @@ align-items: stretch; justify-content: flex-end; pointer-events: all; + > * { + flex-shrink: 0; + } } &-action { From 8a061ab847b4bc935f4808bc8dac0271a7fdc7cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=B1=E5=86=A0?= Date: Thu, 7 May 2020 14:56:06 +0800 Subject: [PATCH 3/4] fix: intl --- packages/editor-core/src/intl/ali-global-locale.ts | 5 +++-- packages/plugin-outline-pane/src/index.ts | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/editor-core/src/intl/ali-global-locale.ts b/packages/editor-core/src/intl/ali-global-locale.ts index 0eef45403..1d4127649 100644 --- a/packages/editor-core/src/intl/ali-global-locale.ts +++ b/packages/editor-core/src/intl/ali-global-locale.ts @@ -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 diff --git a/packages/plugin-outline-pane/src/index.ts b/packages/plugin-outline-pane/src/index.ts index 25382de93..1c96608bc 100644 --- a/packages/plugin-outline-pane/src/index.ts +++ b/packages/plugin-outline-pane/src/index.ts @@ -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, }; From a0bad7742d01fb21fd2cde7d0491b2bba601c0c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A4=E7=9F=97?= Date: Thu, 7 May 2020 15:12:57 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor-skeleton/src/widget/panel.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts index f03e6a130..5f43b8c89 100644 --- a/packages/editor-skeleton/src/widget/panel.ts +++ b/packages/editor-skeleton/src/widget/panel.ts @@ -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; private parent?: WidgetContainer; @@ -143,9 +145,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); } } @@ -179,6 +183,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); + }; } }