mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-10 01:48:18 +00:00
fix outline
This commit is contained in:
parent
567281fa9b
commit
007e4ce47e
@ -4,8 +4,10 @@ import { intl } from './locale';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'outline-pane',
|
name: 'outline-pane',
|
||||||
icon: IconOutline,
|
props: {
|
||||||
description: intl('Outline Tree'),
|
icon: IconOutline,
|
||||||
|
description: intl('Outline Tree'),
|
||||||
|
},
|
||||||
content: Pane,
|
content: Pane,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { Component, PureComponent } from 'react';
|
|||||||
import { Tab, Breadcrumb } from '@alifd/next';
|
import { Tab, Breadcrumb } from '@alifd/next';
|
||||||
import { Title, createIcon, observer } from '@ali/lowcode-globals';
|
import { Title, createIcon, observer } from '@ali/lowcode-globals';
|
||||||
import { Node } from '@ali/lowcode-designer';
|
import { Node } from '@ali/lowcode-designer';
|
||||||
import OutlinePane from '@ali/lowcode-plugin-outline-pane';
|
import { Pane as OutlinePane } from '@ali/lowcode-plugin-outline-pane';
|
||||||
import Editor from '@ali/lowcode-editor-core';
|
import Editor from '@ali/lowcode-editor-core';
|
||||||
import { SettingsMain } from './main';
|
import { SettingsMain } from './main';
|
||||||
import SettingsPane from './settings-pane';
|
import SettingsPane from './settings-pane';
|
||||||
|
|||||||
@ -36,20 +36,13 @@ skeleton.rightArea.add({
|
|||||||
skeleton.leftArea.add({
|
skeleton.leftArea.add({
|
||||||
name: 'outlinePane',
|
name: 'outlinePane',
|
||||||
type: 'PanelDock',
|
type: 'PanelDock',
|
||||||
props: {
|
...Outline,
|
||||||
align: 'top',
|
|
||||||
icon: 'toggle-right',
|
|
||||||
description: '大纲树',
|
|
||||||
},
|
|
||||||
content: Pane,
|
|
||||||
panelProps: {
|
panelProps: {
|
||||||
area: 'leftFixedArea',
|
area: 'leftFixedArea',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// demo
|
// demo
|
||||||
|
|
||||||
skeleton.leftArea.add({
|
skeleton.leftArea.add({
|
||||||
name: 'icon1',
|
name: 'icon1',
|
||||||
type: 'Dock',
|
type: 'Dock',
|
||||||
@ -131,15 +124,3 @@ skeleton.topArea.add({
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
// skeleton.topArea.add({
|
|
||||||
// type: "Dock",
|
|
||||||
// name: 'preview2',
|
|
||||||
// props: {
|
|
||||||
// align: "center",
|
|
||||||
// title: {
|
|
||||||
// label: "345",
|
|
||||||
// icon: "smile",
|
|
||||||
// tip: "123123123"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// })
|
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import { PanelDockConfig } from './types';
|
|||||||
import Panel from './panel';
|
import Panel from './panel';
|
||||||
import { PanelDockView, WidgetView } from './widget-views';
|
import { PanelDockView, WidgetView } from './widget-views';
|
||||||
import { IWidget } from './widget';
|
import { IWidget } from './widget';
|
||||||
|
import { composeTitle } from './utils';
|
||||||
|
|
||||||
export default class PanelDock implements IWidget {
|
export default class PanelDock implements IWidget {
|
||||||
readonly isWidget = true;
|
readonly isWidget = true;
|
||||||
@ -52,7 +53,7 @@ export default class PanelDock implements IWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
constructor(readonly skeleton: Skeleton, private config: PanelDockConfig) {
|
constructor(readonly skeleton: Skeleton, private config: PanelDockConfig) {
|
||||||
const { content, contentProps, panelProps, name } = config;
|
const { content, contentProps, panelProps, name, props } = config;
|
||||||
this.name = name;
|
this.name = name;
|
||||||
this.id = uniqueId(`dock:${name}$`);
|
this.id = uniqueId(`dock:${name}$`);
|
||||||
this.panelName = config.panelName || name;
|
this.panelName = config.panelName || name;
|
||||||
@ -60,7 +61,10 @@ export default class PanelDock implements IWidget {
|
|||||||
this._panel = this.skeleton.add({
|
this._panel = this.skeleton.add({
|
||||||
type: "Panel",
|
type: "Panel",
|
||||||
name: this.panelName,
|
name: this.panelName,
|
||||||
props: panelProps || {},
|
props: {
|
||||||
|
// title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
|
||||||
|
...panelProps,
|
||||||
|
},
|
||||||
contentProps,
|
contentProps,
|
||||||
content,
|
content,
|
||||||
// FIXME! dirty fixed
|
// FIXME! dirty fixed
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
import { IconType, TitleContent, I18nData, isI18nData } from '@ali/lowcode-globals';
|
import { IconType, TitleContent, I18nData, isI18nData } from '@ali/lowcode-globals';
|
||||||
import { isValidElement } from 'react';
|
import { isValidElement } from 'react';
|
||||||
|
|
||||||
export function composeTitle(title?: TitleContent, icon?: IconType, tip?: string | I18nData) {
|
export function composeTitle(title?: TitleContent, icon?: IconType, tip?: string | I18nData, tipAsTitle?: boolean) {
|
||||||
if (!title) {
|
if (!title) {
|
||||||
title = {};
|
title = {};
|
||||||
if (!icon) {
|
if (!icon || tipAsTitle) {
|
||||||
title.label = tip;
|
title.label = tip;
|
||||||
tip = undefined;
|
tip = undefined;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -278,16 +278,16 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: none;
|
display: none;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding-top: 36px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
&.lc-area-visible {
|
&.lc-area-visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.lc-pane-close{
|
.lc-pane-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
.next-icon{
|
z-index: 2;
|
||||||
|
.next-icon {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user