From 60b12a4e8bd903b0a5ba1d16ac56b82340838251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= Date: Fri, 8 Jan 2021 12:37:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20PanelDock=20?= =?UTF-8?q?=E7=9A=84=20disable=20/=20enable=20=E6=96=B9=E6=B3=95,=20?= =?UTF-8?q?=E5=8F=AF=E7=94=A8=E4=BA=8E=E5=88=9D=E5=A7=8B=E5=8C=96=E5=89=8D?= =?UTF-8?q?=E5=90=8E=E7=9A=84=E5=BC=80=E9=97=AD=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(designer settings style): 修复settings样式 --- .../src/components/settings/style.less | 6 +- .../src/components/widget-views/index.tsx | 1 + .../src/layouts/workbench.less | 74 ++++++++++--------- packages/editor-skeleton/src/skeleton.ts | 4 + .../editor-skeleton/src/widget/panel-dock.ts | 22 +++++- 5 files changed, 69 insertions(+), 38 deletions(-) diff --git a/packages/editor-skeleton/src/components/settings/style.less b/packages/editor-skeleton/src/components/settings/style.less index 826e6393d..dde8ff03a 100644 --- a/packages/editor-skeleton/src/components/settings/style.less +++ b/packages/editor-skeleton/src/components/settings/style.less @@ -3,6 +3,10 @@ height: 100%; overflow: hidden; + ul { + margin: 0; + } + .lc-settings-content { position: absolute; top: 0; @@ -34,7 +38,7 @@ position: absolute; left: 8px; top: 8px; - color: #8F9BB3; + color: #8f9bb3; cursor: pointer; } } diff --git a/packages/editor-skeleton/src/components/widget-views/index.tsx b/packages/editor-skeleton/src/components/widget-views/index.tsx index 1d6914978..5fc11c324 100644 --- a/packages/editor-skeleton/src/components/widget-views/index.tsx +++ b/packages/editor-skeleton/src/components/widget-views/index.tsx @@ -73,6 +73,7 @@ export class PanelDockView extends Component { ...props, className: classNames(className, { actived: dock.actived, + disabled: dock.disabled, }), onClick: () => { onClick && onClick(); diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index a20d84714..9d8102e3e 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -1,4 +1,4 @@ -@import "./theme.less"; +@import './theme.less'; :root { --font-family: @font-family; @@ -38,14 +38,13 @@ body { font-family: var(--font-family); font-size: var(--font-size-text); color: var(--color-text); - background-color:#EDEFF3; + background-color: #edeff3; } * { box-sizing: border-box; } - .lc-titled-panel { width: 100%; height: 100%; @@ -62,7 +61,7 @@ body { .lc-help-tip { margin-left: 4px; - color: rgba(0,0,0,0.4); + color: rgba(0, 0, 0, 0.4); cursor: pointer; } } @@ -71,7 +70,7 @@ body { font-size: 16px; padding: 0 15px; // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1)); - color: #0F1726; + color: #0f1726; font-weight: bold; } @@ -116,8 +115,8 @@ body { } */ } - .lc-outline-pane{ - border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1)); + .lc-outline-pane { + border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1)); } } .lc-panel { @@ -129,12 +128,11 @@ body { } } - .lc-workbench { height: 100%; display: flex; flex-direction: column; - background-color: #EDEFF3; + background-color: #edeff3; .lc-top-area { height: var(--top-area-height); background-color: var(--color-pane-background); @@ -152,20 +150,20 @@ body { align-items: center; } - .lc-top-area-center{ + .lc-top-area-center { flex: 1; display: flex; justify-content: center; margin: 0 8px; } - .lc-top-area-right{ + .lc-top-area-right { display: flex; align-items: center; - >* { + > * { margin-left: 4px; margin-right: 4px; } - .ve-quick-search-trigger{ + .ve-quick-search-trigger { display: flex; } } @@ -185,8 +183,8 @@ body { justify-content: center; align-items: center; // background: rgba(31,56,88,0.04); - border-bottom: 1px solid #EDEFF3; - .lc-tab-title{ + border-bottom: 1px solid #edeff3; + .lc-tab-title { flex: 1; height: 32px; display: flex; @@ -196,8 +194,8 @@ body { cursor: pointer; font-size: 12px; &.actived { - color: #0079F2; - border-bottom-color: #0079F2; + color: #0079f2; + border-bottom-color: #0079f2; } } } @@ -216,13 +214,14 @@ body { top: 14px; height: auto; z-index: 2; - .next-icon{ + .next-icon { line-height: 1; - color: rgba(0,0,0,0.6); + color: rgba(0, 0, 0, 0.6); } } - .lc-pane-icon-fix, .lc-pane-icon-float{ + .lc-pane-icon-fix, + .lc-pane-icon-float { position: absolute; right: 38px; top: 14px; @@ -230,7 +229,7 @@ body { z-index: 2; svg { vertical-align: middle; - color: rgba(0,0,0,0.6); + color: rgba(0, 0, 0, 0.6); } } @@ -242,7 +241,7 @@ body { // min-width: var(--dock-fixed-pane-width); left: calc(var(--left-area-width) + 1px); background-color: var(--color-pane-background); - box-shadow: 4px 6px 6px 0 rgba(31,50,88,0.08); + box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08); z-index: 820; display: none; // padding-top: 36px; @@ -263,7 +262,7 @@ body { display: flex; } .lc-left-area-top, - .lc-left-area-bottom{ + .lc-left-area-bottom { width: 100%; display: flex; flex-direction: column; @@ -280,8 +279,11 @@ body { &.has-tip { cursor: pointer; } - &.actived{ - color: #0079F2; + &.actived { + color: #0079f2; + } + &.disabled { + opacity: 0.4; } .lc-title-icon { height: 20px; @@ -293,10 +295,10 @@ body { } } } - .lc-left-area-top{ + .lc-left-area-top { padding-top: 12px; } - .lc-left-area-bottom{ + .lc-left-area-bottom { padding-bottom: 12px; } } @@ -317,8 +319,8 @@ body { .lc-left-area.lc-area-visible ~ .lc-workbench-center { margin-left: 2px; } - .lc-outline-pane{ - .lc-outline-tree .tree-node .tree-node-title{ + .lc-outline-pane { + .lc-outline-tree .tree-node .tree-node-title { border-bottom: none; } } @@ -352,7 +354,7 @@ body { flex-shrink: 0; margin-left: 2px; position: relative; - >.lc-panel { + > .lc-panel { position: absolute; left: 0; top: 0; @@ -360,22 +362,22 @@ body { &.lc-area-visible { display: block; } - .lc-settings-tabs{ - > .next-tabs-nav-extra{ + .lc-settings-tabs { + > .next-tabs-nav-extra { top: 36px !important; } - .lc-settings-tab-item{ - .next-tabs-tab-inner{ + .lc-settings-tab-item { + .next-tabs-tab-inner { font-size: 12px; line-height: 12px; } } - .lc-title{ + .lc-title { color: inherit; line-height: inherit !important; } } - .lc-settings-tabs-content{ + .lc-settings-tabs-content { top: 66px; } } diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts index 51ddb3f63..d259701cf 100644 --- a/packages/editor-skeleton/src/skeleton.ts +++ b/packages/editor-skeleton/src/skeleton.ts @@ -247,6 +247,10 @@ export class Skeleton { return widget; } + getWidget(name: string): IWidget | undefined { + return this.widgets.find(widget => widget.name === name); + } + createPanel(config: PanelConfig) { config = this.parseConfig(config); const panel = new Panel(this, config); diff --git a/packages/editor-skeleton/src/widget/panel-dock.ts b/packages/editor-skeleton/src/widget/panel-dock.ts index 150d1a71b..44634f661 100644 --- a/packages/editor-skeleton/src/widget/panel-dock.ts +++ b/packages/editor-skeleton/src/widget/panel-dock.ts @@ -70,6 +70,8 @@ export default class PanelDock implements IWidget { private _panel?: Panel; + @obx.ref private _disabled = false; + @computed get panel() { return this._panel || this.skeleton.getPanel(this.panelName); } @@ -122,8 +124,26 @@ export default class PanelDock implements IWidget { this.setVisible(!this._visible); } + private setDisabled(flag: boolean) { + this._disabled = flag; + } + + disable() { + this.setDisabled(true); + } + + enable() { + this.setDisabled(false); + } + + get disabled(): boolean { + return this._disabled; + } + togglePanel() { - this.panel?.toggle(); + if (!this._disabled) { + this.panel?.toggle(); + } } getName() {