mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-10 18:03:01 +00:00
style: udpate some style for multi theme
This commit is contained in:
liujuping
林熠
parent
a3b9d6ff48
commit
1d572ccc0b
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.lc-simulator {
|
||||
background: rgb(237, 239, 243);
|
||||
background-color: var(--color-background, rgb(237, 239, 243));
|
||||
}
|
||||
|
||||
.lc-simulator-shell {
|
||||
|
||||
@ -147,7 +147,7 @@
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--color-layer-tooltip-background);
|
||||
max-height: 400px;
|
||||
color: var(--color-text-reverse, rgba(255, 255, 255, 0.8));
|
||||
left: 0;
|
||||
|
||||
@ -143,7 +143,6 @@
|
||||
.lc-outline-pane {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: white;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
|
||||
@ -8,3 +8,4 @@ export * from './components/popup';
|
||||
export * from './context';
|
||||
export * from './register-defaults';
|
||||
export * from './widget';
|
||||
export * from './layouts';
|
||||
|
||||
7
packages/editor-skeleton/src/layouts/index.ts
Normal file
7
packages/editor-skeleton/src/layouts/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export { default as LeftArea } from './left-area';
|
||||
export { default as LeftFloatPane } from './left-float-pane';
|
||||
export { default as LeftFixedPane } from './left-fixed-pane';
|
||||
export { default as MainArea } from './main-area';
|
||||
export { default as BottomArea } from './bottom-area';
|
||||
export { default as TopArea } from './top-area';
|
||||
export { default as SubTopArea } from './sub-top-area';
|
||||
@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { Area } from '../area';
|
||||
|
||||
@observer
|
||||
export default class LeftArea extends Component<{ area: Area }> {
|
||||
export default class LeftArea extends Component<{ area: Area; className?: string }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
const { area, className = 'lc-left-area' } = this.props;
|
||||
if (area.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={classNames('lc-left-area', {
|
||||
<div className={classNames(className, {
|
||||
'lc-area-visible': area.visible,
|
||||
})}
|
||||
>
|
||||
@ -21,7 +21,6 @@ export default class LeftArea extends Component<{ area: Area }> {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@observer
|
||||
class Contents extends Component<{ area: Area }> {
|
||||
render() {
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
--color-icon-hover: @normal-alpha-3;
|
||||
--color-icon-active: @brand-color-1;
|
||||
--color-icon-reverse: @white-alpha-1;
|
||||
--color-icon-pane: @dark-alpha-3;
|
||||
|
||||
--color-line-normal: @normal-alpha-7;
|
||||
--color-line-darken: darken(@normal-alpha-7, 10%);
|
||||
@ -57,6 +58,7 @@
|
||||
--color-block-background-deep-dark: @normal-5;
|
||||
--color-layer-mask-background: @dark-alpha-7;
|
||||
--color-layer-tooltip-background: rgba(44,47,51,0.8);
|
||||
--color-background: #edeff3;
|
||||
|
||||
--pane-title-bg-color: rgba(31,56,88,.04);
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ body {
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-text);
|
||||
color: var(--color-text);
|
||||
background-color: #edeff3;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
* {
|
||||
@ -49,13 +49,10 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-pane-background);
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
.lc-panel-title {
|
||||
// background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
@ -71,7 +68,6 @@ body {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0 15px;
|
||||
// border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
|
||||
color: #0f1726;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -125,9 +121,6 @@ body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-pane-background);
|
||||
// overflow: auto;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -137,7 +130,7 @@ body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #edeff3;
|
||||
background-color: var(--color-background);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -164,47 +157,58 @@ body {
|
||||
|
||||
&.active {
|
||||
z-index: 999;
|
||||
background: #edeff3;
|
||||
background: var(--color-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workbench {
|
||||
.lc-workbench, .lc-workspace-workbench {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #edeff3;
|
||||
background-color: var(--color-background);
|
||||
|
||||
&.engine-main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #edeff3;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.lc-top-area {
|
||||
height: var(--top-area-height);
|
||||
background-color: var(--color-pane-background);
|
||||
.lc-top-area, .lc-sub-top-area {
|
||||
width: 100%;
|
||||
display: none;
|
||||
margin-bottom: 2px;
|
||||
padding: 8px 12px 8px 16px;
|
||||
|
||||
&.lc-top-area {
|
||||
background-color: var(--color-top-area-background, var(--color-pane-background));
|
||||
height: var(--top-area-height);
|
||||
}
|
||||
|
||||
&.lc-sub-top-area {
|
||||
background-color: var(--color-sub-top-area-background, var(--color-pane-background));
|
||||
height: var(--sub-top-area-height, var(--top-area-height));
|
||||
margin: var(--sub-top-area-margin, 0px 0px 2px 0px);
|
||||
padding: var(--sub-top-area-padding, 8px 12px 8px 16px);
|
||||
}
|
||||
|
||||
&.lc-area-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lc-top-area-left {
|
||||
.lc-top-area-left, .lc-sub-top-area-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lc-top-area-center {
|
||||
.lc-top-area-center, .lc-sub-top-area-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.lc-top-area-right {
|
||||
.lc-top-area-right, .lc-sub-top-area-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
@ -216,7 +220,7 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
.lc-workbench-body {
|
||||
.lc-workbench-body, .lc-workspace-workbench-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
@ -264,7 +268,7 @@ body {
|
||||
z-index: 2;
|
||||
.next-icon {
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
color: var(--color-icon-pane);
|
||||
}
|
||||
}
|
||||
|
||||
@ -277,7 +281,7 @@ body {
|
||||
z-index: 2;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
color: var(--color-icon-pane);
|
||||
}
|
||||
}
|
||||
|
||||
@ -288,7 +292,7 @@ body {
|
||||
width: var(--dock-pane-width);
|
||||
// min-width: var(--dock-fixed-pane-width);
|
||||
left: calc(var(--left-area-width) + 1px);
|
||||
background-color: var(--color-pane-background);
|
||||
background-color: var(--color-left-float-pane-background, var(--color-pane-background));
|
||||
box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
|
||||
z-index: 820;
|
||||
display: none;
|
||||
@ -297,15 +301,20 @@ body {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.lc-left-area {
|
||||
.lc-left-area, .lc-workspace-left-area {
|
||||
height: 100%;
|
||||
width: var(--left-area-width);
|
||||
background-color: var(--color-pane-background);
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
&.lc-left-area {
|
||||
background-color: var(--color-left-area-background, var(--color-pane-background));
|
||||
}
|
||||
&.lc-workspace-left-area {
|
||||
background-color: var(--color-workspace-left-area-background, var(--color-pane-background));
|
||||
}
|
||||
&.lc-area-visible {
|
||||
display: flex;
|
||||
}
|
||||
@ -316,6 +325,8 @@ body {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: var(--color-text);
|
||||
|
||||
.lc-title {
|
||||
flex-direction: column;
|
||||
width: calc(var(--left-area-width) - 2px);
|
||||
@ -325,6 +336,9 @@ body {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.has-tip {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.actived {
|
||||
color: #0079f2;
|
||||
}
|
||||
@ -366,6 +380,9 @@ body {
|
||||
.lc-left-area.lc-area-visible ~ .lc-workbench-center {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.lc-workspace-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.lc-outline-pane {
|
||||
.lc-outline-tree .tree-node .tree-node-title {
|
||||
border-bottom: none;
|
||||
@ -390,7 +407,7 @@ body {
|
||||
}
|
||||
.lc-main-area {
|
||||
flex: 1;
|
||||
background-color: #edeff3;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
.lc-bottom-area {
|
||||
height: var(--bottom-area-height);
|
||||
@ -404,13 +421,14 @@ body {
|
||||
.lc-right-area {
|
||||
height: 100%;
|
||||
width: var(--right-area-width);
|
||||
background-color: var(--color-pane-background);
|
||||
background-color: var(--color-right-area-background, var(--color-pane-background));
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
> .lc-panel {
|
||||
position: absolute;
|
||||
background-color: var(--color-right-area-background, var(--color-pane-background, #fff));
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
@ -437,4 +455,68 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
.engine-actionitem {
|
||||
max-width: 100%;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workspace-workbench {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-background);
|
||||
.lc-workspace-workbench-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
|
||||
.lc-workspace-workbench-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.lc-toolbar {
|
||||
display: flex;
|
||||
height: var(--toolbar-height);
|
||||
background-color: var(--color-pane-background);
|
||||
padding: 8px 16px;
|
||||
.lc-toolbar-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.lc-main-area {
|
||||
flex: 1;
|
||||
}
|
||||
.lc-bottom-area {
|
||||
height: var(--bottom-area-height);
|
||||
background-color: var(--color-pane-background);
|
||||
display: none;
|
||||
&.lc-area-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workspace-workbench-center-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.lc-workspace-workbench-window {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
background-color: white;
|
||||
|
||||
> .lc-outline-tree-container {
|
||||
top: 52px;
|
||||
@ -29,8 +28,8 @@
|
||||
}
|
||||
|
||||
.lc-outline-filter-icon {
|
||||
background: #ebecf0;
|
||||
border: 1px solid #c4c6cf;
|
||||
background: var(--color-block-background-shallow, #ebecf0);
|
||||
border: 1px solid var(--color-field-border, #c4c6cf);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0 2px 2px 0;
|
||||
@ -245,7 +244,6 @@
|
||||
.tree-node-title {
|
||||
font-size: var(--font-size-text);
|
||||
cursor: pointer;
|
||||
background: var(--color-pane-background);
|
||||
border-bottom: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export default class BottomArea extends Component<{ area: Area<any, Panel> }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
if (area.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={classNames('lc-bottom-area', {
|
||||
'lc-area-visible': area.visible,
|
||||
})}
|
||||
>
|
||||
<Contents area={area} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@observer
|
||||
class Contents extends Component<{ area: Area<any, Panel> }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
return (
|
||||
<Fragment>
|
||||
{area.container.items.map((item) => item.content)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { Area } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export default class LeftArea extends Component<{ area: Area }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
if (area.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={classNames('lc-left-area', {
|
||||
'lc-area-visible': area.visible,
|
||||
})}
|
||||
>
|
||||
<Contents area={area} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@observer
|
||||
class Contents extends Component<{ area: Area }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
const top: any[] = [];
|
||||
const bottom: any[] = [];
|
||||
area.container.items.slice().sort((a, b) => {
|
||||
const index1 = a.config?.index || 0;
|
||||
const index2 = b.config?.index || 0;
|
||||
return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
|
||||
}).forEach((item) => {
|
||||
const content = <div key={`left-area-${item.name}`}>{item.content}</div>;
|
||||
if (item.align === 'bottom') {
|
||||
bottom.push(content);
|
||||
} else {
|
||||
top.push(content);
|
||||
}
|
||||
});
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="lc-left-area-top">{top}</div>
|
||||
<div className="lc-left-area-bottom">{bottom}</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { Area, Panel, PanelConfig } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, Panel> }> {
|
||||
componentDidUpdate() {
|
||||
// FIXME: dirty fix, need deep think
|
||||
this.props.area.skeleton.editor.get('designer')?.touchOffsetObserver();
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
const width = area.current?.config.props?.width;
|
||||
const style = width
|
||||
? {
|
||||
width,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('lc-left-fixed-pane', {
|
||||
'lc-area-visible': area.visible,
|
||||
})}
|
||||
style={style}
|
||||
>
|
||||
<Contents area={area} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@observer
|
||||
class Contents extends Component<{ area: Area<PanelConfig, Panel> }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
return <Fragment>{area.container.items.map((panel) => panel.content)}</Fragment>;
|
||||
}
|
||||
}
|
||||
@ -1,136 +0,0 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer, Focusable } from '@alilc/lowcode-editor-core';
|
||||
import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
|
||||
import { IPublicApiProject } from '@alilc/lowcode-types';
|
||||
|
||||
@observer
|
||||
export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }> {
|
||||
private dispose?: () => void;
|
||||
|
||||
private focusing?: Focusable;
|
||||
|
||||
private shell: HTMLElement | null = null;
|
||||
|
||||
componentDidMount() {
|
||||
const { area } = this.props;
|
||||
const triggerClose = (e: any) => {
|
||||
if (!area.visible) return;
|
||||
// 当 MouseEvent 的 target 为「插入占位符」时，不关闭当前 panel
|
||||
if (e.originalEvent?.target?.classList.contains('insertion')) return;
|
||||
// 假如当前操作 target 祖先节点中有属性 data-keep-visible-while-dragging="true" 代表该 target 所属 panel
|
||||
// 不希望 target 在 panel 范围内拖拽时关闭 panel
|
||||
const panelElem = e.originalEvent?.target.closest('div[data-keep-visible-while-dragging="true"]');
|
||||
if (panelElem) return;
|
||||
area.setVisible(false);
|
||||
};
|
||||
area.skeleton.editor.eventBus.on('designer.drag', triggerClose);
|
||||
|
||||
this.dispose = () => {
|
||||
area.skeleton.editor.removeListener('designer.drag', triggerClose);
|
||||
};
|
||||
|
||||
const project: IPublicApiProject | undefined = area.skeleton.editor.get('project');
|
||||
|
||||
this.focusing = area.skeleton.focusTracker.create({
|
||||
range: (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target) {
|
||||
return false;
|
||||
}
|
||||
if (this.shell?.contains(target)) {
|
||||
return true;
|
||||
}
|
||||
// 点击了 iframe 内容，算失焦
|
||||
if ((document.querySelector('.lc-simulator-content-frame') as HTMLIFrameElement)?.contentWindow?.document.documentElement.contains(target)) {
|
||||
return false;
|
||||
}
|
||||
if (project?.simulatorHost?.contentWindow?.document.documentElement.contains(target)) {
|
||||
return false;
|
||||
}
|
||||
// 点击设置区
|
||||
if (document.querySelector('.lc-right-area')?.contains(target)) {
|
||||
return false;
|
||||
}
|
||||
// 点击非编辑区域的popup/dialog,插件栏左侧等不触发失焦
|
||||
if (!document.querySelector('.lc-workbench')?.contains(target)) {
|
||||
return true;
|
||||
}
|
||||
// 排除设置区，iframe 之后，都不算失焦
|
||||
if (document.querySelector('.lc-workbench-body')?.contains(target)) {
|
||||
return true;
|
||||
}
|
||||
const docks = area.current?.getAssocDocks();
|
||||
if (docks && docks?.length) {
|
||||
return docks.some(dock => dock.getDOMNode()?.contains(target));
|
||||
}
|
||||
return false;
|
||||
},
|
||||
onEsc: () => {
|
||||
this.props.area.setVisible(false);
|
||||
},
|
||||
onBlur: () => {
|
||||
this.props.area.setVisible(false);
|
||||
},
|
||||
});
|
||||
|
||||
this.onEffect();
|
||||
}
|
||||
|
||||
onEffect() {
|
||||
const { area } = this.props;
|
||||
if (area.visible) {
|
||||
this.focusing?.active();
|
||||
// 关闭当前fixed区域的面板
|
||||
// TODO: 看看有没有更合适的地方
|
||||
const fixedContainer = area?.skeleton?.leftFixedArea?.container;
|
||||
const currentFixed = fixedContainer?.current;
|
||||
if (currentFixed) {
|
||||
fixedContainer.unactive(currentFixed);
|
||||
}
|
||||
} else {
|
||||
this.focusing?.suspense();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.onEffect();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.focusing?.purge();
|
||||
this.dispose?.();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
const width = area.current?.config.props?.width;
|
||||
|
||||
const style = width ? {
|
||||
width,
|
||||
} : undefined;
|
||||
return (
|
||||
<div
|
||||
ref={(ref) => { this.shell = ref; }}
|
||||
className={classNames('lc-left-float-pane', {
|
||||
'lc-area-visible': area.visible,
|
||||
})}
|
||||
style={style}
|
||||
>
|
||||
<Contents area={area} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@observer
|
||||
class Contents extends Component<{ area: Area<any, Panel> }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
return (
|
||||
<Fragment>
|
||||
{area.container.items.map((panel) => panel.content)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { Area, Panel, Widget } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export default class MainArea extends Component<{ area: Area<any, Panel | Widget> }> {
|
||||
render() {
|
||||
const { area } = this.props;
|
||||
return (
|
||||
<div className={classNames('lc-main-area engine-workspacepane')}>
|
||||
{area.container.items.map((item) => item.content)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
@import '../less-variables.less';
|
||||
|
||||
/*
|
||||
* Theme Colors
|
||||
*
|
||||
* 乐高设计器的主要主题色变量
|
||||
*/
|
||||
:root {
|
||||
--color-brand: @brand-color-1;
|
||||
--color-brand-light: @brand-color-2;
|
||||
--color-brand-dark: @brand-color-3;
|
||||
|
||||
--color-canvas-background: @normal-alpha-8;
|
||||
|
||||
--color-icon-normal: @normal-alpha-4;
|
||||
--color-icon-hover: @normal-alpha-3;
|
||||
--color-icon-active: @brand-color-1;
|
||||
--color-icon-reverse: @white-alpha-1;
|
||||
|
||||
--color-line-normal: @normal-alpha-7;
|
||||
--color-line-darken: darken(@normal-alpha-7, 10%);
|
||||
|
||||
--color-title: @dark-alpha-2;
|
||||
--color-text: @dark-alpha-3;
|
||||
--color-text-dark: darken(@dark-alpha-3, 10%);
|
||||
--color-text-light: lighten(@dark-alpha-3, 10%);
|
||||
--color-text-reverse: @white-alpha-2;
|
||||
--color-text-regular: @normal-alpha-2;
|
||||
|
||||
--color-field-label: @dark-alpha-4;
|
||||
--color-field-text: @dark-alpha-3;
|
||||
--color-field-placeholder: @normal-alpha-5;
|
||||
--color-field-border: @normal-alpha-5;
|
||||
--color-field-border-hover: @normal-alpha-4;
|
||||
--color-field-border-active: @normal-alpha-3;
|
||||
--color-field-background: @white-alpha-1;
|
||||
|
||||
--color-function-success: @brand-success;
|
||||
--color-function-success-dark: darken(@brand-success, 10%);
|
||||
--color-function-success-light: lighten(@brand-success, 10%);
|
||||
--color-function-warning: @brand-warning;
|
||||
--color-function-warning-dark: darken(@brand-warning, 10%);
|
||||
--color-function-warning-light: lighten(@brand-warning, 10%);
|
||||
--color-function-information: @brand-link-hover;
|
||||
--color-function-information-dark: darken(@brand-link-hover, 10%);
|
||||
--color-function-information-light: lighten(@brand-link-hover, 10%);
|
||||
--color-function-error: @brand-danger;
|
||||
--color-function-error-dark: darken(@brand-danger, 10%);
|
||||
--color-function-error-light: lighten(@brand-danger, 10%);
|
||||
|
||||
--color-pane-background: @white-alpha-1;
|
||||
--color-block-background-normal: @white-alpha-1;
|
||||
--color-block-background-light: @normal-alpha-9;
|
||||
--color-block-background-shallow: @normal-alpha-8;
|
||||
--color-block-background-dark: @normal-alpha-7;
|
||||
--color-block-background-disabled: @normal-alpha-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);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import { Component, Fragment } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { Area } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export default class TopArea extends Component<{ area: Area; itemClassName?: string }> {
|
||||
render() {
|
||||
const { area, itemClassName } = this.props;
|
||||
|
||||
if (area.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames('lc-top-area engine-actionpane', {
|
||||
'lc-area-visible': area.visible,
|
||||
})}
|
||||
>
|
||||
<Contents area={area} itemClassName={itemClassName} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@observer
|
||||
class Contents extends Component<{ area: Area; itemClassName?: string }> {
|
||||
render() {
|
||||
const { area, itemClassName } = this.props;
|
||||
const left: any[] = [];
|
||||
const center: any[] = [];
|
||||
const right: any[] = [];
|
||||
area.container.items.slice().sort((a, b) => {
|
||||
const index1 = a.config?.index || 0;
|
||||
const index2 = b.config?.index || 0;
|
||||
return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
|
||||
}).forEach(item => {
|
||||
const content = (
|
||||
<div className={itemClassName || ''} key={`top-area-${item.name}`}>
|
||||
{item.content}
|
||||
</div>
|
||||
);
|
||||
if (item.align === 'center') {
|
||||
center.push(content);
|
||||
} else if (item.align === 'left') {
|
||||
left.push(content);
|
||||
} else {
|
||||
right.push(content);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="lc-top-area-left">{left}</div>
|
||||
<div className="lc-top-area-center">{center}</div>
|
||||
<div className="lc-top-area-right">{right}</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,421 +0,0 @@
|
||||
@import './theme.less';
|
||||
|
||||
:root {
|
||||
--font-family: @font-family;
|
||||
--font-size-label: @fontSize-4;
|
||||
--font-size-text: @fontSize-5;
|
||||
--font-size-btn-large: @fontSize-3;
|
||||
--font-size-btn-medium: @fontSize-4;
|
||||
--font-size-btn-small: @fontSize-5;
|
||||
|
||||
--global-border-radius: @global-border-radius;
|
||||
--input-border-radius: @input-border-radius;
|
||||
--popup-border-radius: @popup-border-radius;
|
||||
|
||||
--left-area-width: 48px;
|
||||
--right-area-width: 300px;
|
||||
--top-area-height: 48px;
|
||||
--toolbar-height: 36px;
|
||||
--dock-pane-width: 300px;
|
||||
--dock-fixed-pane-width: 300px;
|
||||
}
|
||||
|
||||
@media (min-width: 1860px) {
|
||||
:root {
|
||||
--right-area-width: 400px;
|
||||
--dock-pane-width: 452px;
|
||||
--dock-fixed-pane-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-text);
|
||||
color: var(--color-text);
|
||||
background-color: #edeff3;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lc-titled-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-pane-background);
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
.lc-panel-title {
|
||||
// background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 15px;
|
||||
|
||||
.lc-help-tip {
|
||||
margin-left: 4px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .lc-panel-title {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0 15px;
|
||||
// border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
|
||||
color: #0f1726;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lc-panel-body {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: visible;
|
||||
/*
|
||||
.my-tabs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.tabs-title {
|
||||
display: flex;
|
||||
height: var(--pane-title-height);
|
||||
> .tab-title {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
&.actived {
|
||||
cursor: default;
|
||||
color: var(--color-text-avtived);
|
||||
border-bottom-color: #3896ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-content {
|
||||
position: absolute;
|
||||
top: var(--pane-title-height);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: calc(100% - var(--pane-title-height));
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
.lc-outline-tree-container {
|
||||
border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||
}
|
||||
}
|
||||
.lc-panel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-pane-background);
|
||||
// overflow: auto;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workspace-workbench {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #edeff3;
|
||||
.lc-top-area, .lc-sub-top-area {
|
||||
height: var(--top-area-height);
|
||||
background-color: var(--color-pane-background);
|
||||
width: 100%;
|
||||
display: none;
|
||||
margin-bottom: 2px;
|
||||
padding: 8px 12px 8px 16px;
|
||||
|
||||
&.lc-area-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lc-top-area-left, .lc-sub-top-area-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lc-top-area-center, .lc-sub-top-area-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.lc-top-area-right, .lc-sub-top-area-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ve-quick-search-trigger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lc-workspace-workbench-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
|
||||
.lc-tabs-title {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
display: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// background: rgba(31,56,88,0.04);
|
||||
border-bottom: 1px solid #edeff3;
|
||||
.lc-tab-title {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
&.actived {
|
||||
color: #0079f2;
|
||||
border-bottom-color: #0079f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lc-tabs-content {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.lc-pane-icon-close {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
.next-icon {
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.lc-pane-icon-fix,
|
||||
.lc-pane-icon-float {
|
||||
position: absolute;
|
||||
right: 38px;
|
||||
top: 14px;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.lc-left-float-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--dock-pane-width);
|
||||
// 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);
|
||||
z-index: 820;
|
||||
display: none;
|
||||
// padding-top: 36px;
|
||||
&.lc-area-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.lc-left-area {
|
||||
height: 100%;
|
||||
width: var(--left-area-width);
|
||||
background-color: var(--color-pane-background);
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
&.lc-area-visible {
|
||||
display: flex;
|
||||
}
|
||||
.lc-left-area-top,
|
||||
.lc-left-area-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.lc-title {
|
||||
flex-direction: column;
|
||||
width: calc(var(--left-area-width) - 2px);
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.has-tip {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.actived {
|
||||
color: #0079f2;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.lc-title-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
.next-icon:before {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.lc-left-area-top {
|
||||
padding-top: 12px;
|
||||
}
|
||||
.lc-left-area-bottom {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
.lc-left-fixed-pane {
|
||||
width: var(--dock-fixed-pane-width);
|
||||
background-color: var(--color-pane-background);
|
||||
height: 100%;
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 820;
|
||||
&.lc-area-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.lc-left-area.lc-area-visible ~ .lc-left-fixed-pane {
|
||||
margin-left: 1px;
|
||||
}
|
||||
.lc-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.lc-outline-pane {
|
||||
.lc-outline-tree .tree-node .tree-node-title {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.lc-workspace-workbench-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
.lc-toolbar {
|
||||
display: flex;
|
||||
height: var(--toolbar-height);
|
||||
background-color: var(--color-pane-background);
|
||||
padding: 8px 16px;
|
||||
.lc-toolbar-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.lc-main-area {
|
||||
flex: 1;
|
||||
}
|
||||
.lc-bottom-area {
|
||||
height: var(--bottom-area-height);
|
||||
background-color: var(--color-pane-background);
|
||||
display: none;
|
||||
&.lc-area-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workspace-workbench-center-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
}
|
||||
|
||||
.engine-actionitem {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lc-workspace-workbench-window {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.lc-right-area {
|
||||
height: 100%;
|
||||
width: var(--right-area-width);
|
||||
background-color: var(--color-pane-background);
|
||||
display: none;
|
||||
flex-shrink: 0;
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
> .lc-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
&.lc-area-visible {
|
||||
display: block;
|
||||
}
|
||||
.lc-settings-tabs {
|
||||
> .next-tabs-nav-extra {
|
||||
top: 36px !important;
|
||||
}
|
||||
.lc-settings-tab-item {
|
||||
.next-tabs-tab-inner {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
.lc-title {
|
||||
color: inherit;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
}
|
||||
.lc-settings-tabs-content {
|
||||
top: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,17 +2,10 @@ import { Component } from 'react';
|
||||
import { TipContainer, engineConfig, observer } from '@alilc/lowcode-editor-core';
|
||||
import { WindowView } from '../view/window-view';
|
||||
import classNames from 'classnames';
|
||||
import TopArea from './top-area';
|
||||
import LeftArea from './left-area';
|
||||
import LeftFixedPane from './left-fixed-pane';
|
||||
import LeftFloatPane from './left-float-pane';
|
||||
import MainArea from './main-area';
|
||||
import BottomArea from './bottom-area';
|
||||
import './workbench.less';
|
||||
import { SkeletonContext } from '../skeleton-context';
|
||||
import { EditorConfig, PluginClassSet } from '@alilc/lowcode-types';
|
||||
import { Workspace } from '../workspace';
|
||||
import SubTopArea from './sub-top-area';
|
||||
import { BottomArea, LeftArea, LeftFixedPane, LeftFloatPane, MainArea, SubTopArea, TopArea } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export class Workbench extends Component<{
|
||||
@ -23,12 +16,18 @@ export class Workbench extends Component<{
|
||||
topAreaItemClassName?: string;
|
||||
}, {
|
||||
workspaceEmptyComponent: any;
|
||||
theme?: string;
|
||||
}> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
const { config, components, workspace } = this.props;
|
||||
const { skeleton } = workspace;
|
||||
skeleton.buildFromConfig(config, components);
|
||||
engineConfig.onGot('theme', (theme) => {
|
||||
this.setState({
|
||||
theme,
|
||||
});
|
||||
});
|
||||
engineConfig.onGot('workspaceEmptyComponent', (workspaceEmptyComponent) => {
|
||||
this.setState({
|
||||
workspaceEmptyComponent,
|
||||
@ -36,20 +35,21 @@ export class Workbench extends Component<{
|
||||
});
|
||||
this.state = {
|
||||
workspaceEmptyComponent: engineConfig.get('workspaceEmptyComponent'),
|
||||
theme: engineConfig.get('theme'),
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { workspace, className, topAreaItemClassName } = this.props;
|
||||
const { skeleton } = workspace;
|
||||
const WorkspaceEmptyComponent = this.state.workspaceEmptyComponent;
|
||||
const { workspaceEmptyComponent: WorkspaceEmptyComponent, theme } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classNames('lc-workspace-workbench', className)}>
|
||||
<div className={classNames('lc-workspace-workbench', className, theme)}>
|
||||
<SkeletonContext.Provider value={skeleton}>
|
||||
<TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
|
||||
<div className="lc-workspace-workbench-body">
|
||||
<LeftArea area={skeleton.leftArea} />
|
||||
<LeftArea className="lc-workspace-left-area" area={skeleton.leftArea} />
|
||||
<LeftFloatPane area={skeleton.leftFloatArea} />
|
||||
<LeftFixedPane area={skeleton.leftFixedArea} />
|
||||
<div className="lc-workspace-workbench-center">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { PureComponent } from 'react';
|
||||
import { EditorView } from './editor-view';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import TopArea from '../layouts/top-area';
|
||||
import { IResource } from '../resource';
|
||||
import { IEditorWindow } from '../window';
|
||||
import './resource-view.less';
|
||||
import { TopArea } from '@alilc/lowcode-editor-skeleton';
|
||||
|
||||
@observer
|
||||
export class ResourceView extends PureComponent<{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user