From 51a45cfa5f51d9c90ac704856bf5ffab8ac3f047 Mon Sep 17 00:00:00 2001 From: "mario.gk" Date: Mon, 4 May 2020 16:43:54 +0800 Subject: [PATCH] =?UTF-8?q?Pane=20=E7=9B=B8=E5=85=B3=20bug=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/widget-views.tsx | 24 +++++++++++++++++-- .../src/layouts/left-fixed-pane.tsx | 23 +++++++++++------- .../src/layouts/left-float-pane.tsx | 23 +++++++++++------- .../editor-skeleton/src/layouts/theme.less | 2 ++ .../src/layouts/workbench.less | 12 +++++++--- .../editor-skeleton/src/widget/panel-dock.ts | 2 +- packages/vision-preset/src/panes.ts | 7 +++++- 7 files changed, 68 insertions(+), 25 deletions(-) diff --git a/packages/editor-skeleton/src/components/widget-views.tsx b/packages/editor-skeleton/src/components/widget-views.tsx index cdd646be7..13dad59f8 100644 --- a/packages/editor-skeleton/src/components/widget-views.tsx +++ b/packages/editor-skeleton/src/components/widget-views.tsx @@ -1,6 +1,7 @@ import { Component, ReactElement } from 'react'; +import { Icon } from '@alifd/next'; import classNames from 'classnames'; -import { Title, observer } from '@ali/lowcode-editor-core'; +import { Title, observer, Tip } from '@ali/lowcode-editor-core'; import { DockProps } from '../types'; import PanelDock from '../widget/panel-dock'; import { composeTitle } from '../widget/utils'; @@ -21,6 +22,25 @@ export function DockView({ title, icon, description, size, className, onClick }: ); } +function HelpTip({ tip }: any) { + if (tip && tip.url) { + return ( +
+ + + + {tip.content} +
+ ); + } + return ( +
+ + {tip.content} +
+ ) +} + @observer export class PanelDockView extends Component { componentDidMount() { @@ -196,7 +216,7 @@ class PanelTitle extends Component<{ panel: Panel; className?: string }> { data-name={panel.name} > - {/*pane.help ? <HelpTip tip={panel.help} /> : null*/} + {panel.help ? <HelpTip tip={panel.help} /> : null} </div> ); } diff --git a/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx b/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx index c5ea01b53..527b48b98 100644 --- a/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx +++ b/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx @@ -13,21 +13,26 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P } render() { const { area } = this.props; + const hideTitleBar = area.current?.config.props?.hideTitleBar; return ( <div className={classNames('lc-left-fixed-pane', { 'lc-area-visible': area.visible, })} > - <Button - text - className="lc-pane-close" - onClick={() => { - area.setVisible(false); - }} - > - <Icon type="close" /> - </Button> + { + !hideTitleBar && ( + <Button + text + className="lc-pane-close" + onClick={() => { + area.setVisible(false); + }} + > + <Icon type="close" /> + </Button> + ) + } <Contents area={area} /> </div> ); diff --git a/packages/editor-skeleton/src/layouts/left-float-pane.tsx b/packages/editor-skeleton/src/layouts/left-float-pane.tsx index 84feacd6f..d9b32b22a 100644 --- a/packages/editor-skeleton/src/layouts/left-float-pane.tsx +++ b/packages/editor-skeleton/src/layouts/left-float-pane.tsx @@ -32,6 +32,7 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }> // focusout remove focus // onEsc const width = area.current?.config.props?.width; + const hideTitleBar = area.current?.config.props?.hideTitleBar; const style = width ? { width } : undefined; @@ -42,15 +43,19 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }> })} style={style} > - <Button - text - className="lc-pane-close" - onClick={() => { - area.setVisible(false); - }} - > - <Icon type="close" /> - </Button> + { + !hideTitleBar && ( + <Button + text + className="lc-pane-close" + onClick={() => { + area.setVisible(false); + }} + > + <Icon type="close" /> + </Button> + ) + } <Contents area={area} /> </div> ); diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less index 5171884c0..0d4651b17 100644 --- a/packages/editor-skeleton/src/layouts/theme.less +++ b/packages/editor-skeleton/src/layouts/theme.less @@ -57,4 +57,6 @@ --color-block-background-deep-dark: @normal-5; --color-layer-mask-background: @dark-alpha-7; --color-layer-tooltip-background: rgba(44,47,51,0.8); + + --pane-title-bg-color: rgba(31,56,88,.04); } diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index 94d335a90..4efca072d 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -54,19 +54,25 @@ body { display: none; } .lc-panel-title { - height: 32px; - background-color: var(--pane-title-bg-color); + height: 38px; + font-size: 14px; + background-color: var(--pane-title-bg-color,rgba(31,56,88,.04)); display: flex; align-items: center; + justify-content: center; padding: 0 15px; + border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1)); + .lc-help-tip { margin-left: 4px; + color: rgba(0,0,0,0.4); + cursor: pointer; } } .lc-panel-body { position: absolute; - top: 32px; + top: 38px; bottom: 0; left: 0; right: 0; diff --git a/packages/editor-skeleton/src/widget/panel-dock.ts b/packages/editor-skeleton/src/widget/panel-dock.ts index 105da7be4..e83bbddde 100644 --- a/packages/editor-skeleton/src/widget/panel-dock.ts +++ b/packages/editor-skeleton/src/widget/panel-dock.ts @@ -64,7 +64,7 @@ export default class PanelDock implements IWidget { name: this.panelName, props: { // FIXME! give default title for panel - // title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '', + title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '', ...panelProps, }, contentProps, diff --git a/packages/vision-preset/src/panes.ts b/packages/vision-preset/src/panes.ts index 750307496..792628d51 100644 --- a/packages/vision-preset/src/panes.ts +++ b/packages/vision-preset/src/panes.ts @@ -1,6 +1,6 @@ import { skeleton, editor } from './editor'; import { ReactElement } from 'react'; -import { IWidgetBaseConfig } from '@ali/lowcode-editor-skeleton'; +import { IWidgetBaseConfig, Skeleton } from '@ali/lowcode-editor-skeleton'; import { uniqueId } from '@ali/lowcode-utils'; export interface IContentItemConfig { @@ -85,6 +85,7 @@ function upgradeConfig(config: OldPaneConfig): IWidgetBaseConfig & { area: strin } if (!isAction) { newConfig.panelProps = { + title, hideTitleBar, help: tip, width, @@ -156,6 +157,10 @@ const dockPane = Object.assign(skeleton.leftArea, { * compatible *VE.dockPane.activeDock* */ activeDock(item: any) { + if (!item) { + skeleton.leftFloatArea?.current?.hide(); + return; + } const name = item.name || item; skeleton.getPanel(name)?.active(); },