From 00c28dde6f93da24b066ff1292906251325aa6a0 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Wed, 8 Jul 2020 16:41:59 +0800 Subject: [PATCH 1/2] =?UTF-8?q?style:=20=E5=8F=B3=E4=BE=A7=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E9=9D=A2=E6=9D=BF=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/field/index.less | 59 ++++++++++--------- .../src/components/mixed-setter/style.less | 16 +++-- 2 files changed, 42 insertions(+), 33 deletions(-) diff --git a/packages/editor-skeleton/src/components/field/index.less b/packages/editor-skeleton/src/components/field/index.less index 180832167..6e4cc3560 100644 --- a/packages/editor-skeleton/src/components/field/index.less +++ b/packages/editor-skeleton/src/components/field/index.less @@ -1,8 +1,7 @@ -@x-gap: 10px; +@x-gap: 12px; @y-gap: 8px; .lc-field { - // head .lc-field-head { display: flex; align-items: center; @@ -61,23 +60,11 @@ } } .lc-field-icon { - // margin-right: @x-gap; transform-origin: center; transition: transform 0.1s; } } - // &.lc-plain-field { - // // for top-level style - // // padding: 8px 10px; - // > .lc-field-body { - // flex: 1; - // min-width: 0; - // display: flex; - // align-items: center; - // } - // } - &.lc-inline-field { display: flex; align-items: center; @@ -111,29 +98,33 @@ &.lc-block-field, &.lc-accordion-field { display: block; - &:not(:first-child) { - border-top: 1px solid var(--color-line-normal); + &:first-child { + > .lc-field-head { + border-top: none; + } } > .lc-field-head { - // 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-top: 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: var(--color-title); padding: 0 16px; - background-color: #F7F9FC; - color: #8F9BB3; user-select: none; + + > .lc-field-icon { + color: #8F9BB3; + } } > .lc-field-body { // padding: @y-gap @x-gap/2; - padding: 16px; + padding: 12px; .lc-inline-field{ - margin-bottom: 16px; + margin-bottom: 12px; &:last-child{ margin-bottom: 0; } @@ -162,10 +153,15 @@ &.lc-accordion-field { position: relative; - // collapsed - &:last-child.lc-field-is-collapsed{ - border-bottom: 1px solid var(--color-line-normal); + + &.lc-field-is-collapsed { + margin-bottom: 6px; } + + // 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); @@ -200,14 +196,19 @@ .lc-accordion-field, .lc-block-field { > .lc-field-head { - padding-left: @x-gap/2; + padding-left: @x-gap; background: var(--color-block-background-light); - border-bottom-color: var(--color-line-light, rgba(31, 56, 88, .1)); + border-bottom: none; + border-top: none; > .lc-field-icon { // margin-right: @x-gap/2; margin-right: 0; } } + + > .lc-field-body { + padding: 8px; + } } // 3rd level field title width should short diff --git a/packages/editor-skeleton/src/components/mixed-setter/style.less b/packages/editor-skeleton/src/components/mixed-setter/style.less index 759fab709..7c81faab6 100644 --- a/packages/editor-skeleton/src/components/mixed-setter/style.less +++ b/packages/editor-skeleton/src/components/mixed-setter/style.less @@ -6,7 +6,7 @@ position: relative; >.lc-setter-actions { position: absolute; - right: -2px; + right: -4px; top: 50%; transform: translate(100%, -50%); .lc-switch-trigger { @@ -18,11 +18,19 @@ } .lc-title { cursor: pointer; + + .lc-title-icon svg { + fill: #8F9BB3; + } } .variable-binded { background: var(--color-brand, #006cff); color: #fff!important; border-radius: 3px; + + .lc-title-icon svg { + fill: #fff; + } } } .next-input,.next-date-picker,.next-month-picker { @@ -42,7 +50,7 @@ margin-right: 0; >.lc-setter-actions { position: absolute; - right: 16px; + right: 12px; top: 0; height: 32px; transform: none; @@ -56,8 +64,8 @@ position: static; margin-right: 0; > .lc-setter-actions{ - right: 32px; - top: 6px; + right: 36px; + top: 4px; transform: none; } } From 353fb10e212100fa67d5ea1038da586f43d3fb52 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Mon, 13 Jul 2020 21:20:43 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=8F=B3=E4=BE=A7=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E9=9D=A2=E5=8C=85=E5=B1=91=E7=82=B9=E5=87=BB?= =?UTF-8?q?=E6=97=A0=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/settings/settings-primary-pane.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx index 7ce04e9ca..02a49f112 100644 --- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx @@ -42,22 +42,26 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> { const items = []; let l = 3; while (l-- > 0 && node) { + const _node = node; const props = l === 2 ? {} : { - onMouseOver: hoverNode.bind(null, node, true), - onMouseOut: hoverNode.bind(null, node, false), + onMouseOver: hoverNode.bind(null, _node, true), + onMouseOut: hoverNode.bind(null, _node, false), onClick: () => { - selectNode.call(null, node); - const getName = (node) => { + if (!_node) { + return; + } + selectNode.call(null, _node); + const getName = (node: any) => { const npm = node?.componentMeta?.npm; return [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || ''; }; const selected = getName(current); - const target = getName(node); + const target = getName(_node); editor?.emit('skeleton.settingsPane.Breadcrumb', { selected, target,