mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-17 19:23:41 +00:00
feat: 支持 PanelDock 的 disable / enable 方法, 可用于初始化前后的开闭操作
fix(designer settings style): 修复settings样式
This commit is contained in:
力皓
parent
83f61ee46e
commit
60b12a4e8b
@ -3,6 +3,10 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.lc-settings-content {
|
.lc-settings-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -34,7 +38,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 8px;
|
left: 8px;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
color: #8F9BB3;
|
color: #8f9bb3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -73,6 +73,7 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
|
|||||||
...props,
|
...props,
|
||||||
className: classNames(className, {
|
className: classNames(className, {
|
||||||
actived: dock.actived,
|
actived: dock.actived,
|
||||||
|
disabled: dock.disabled,
|
||||||
}),
|
}),
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
onClick && onClick();
|
onClick && onClick();
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
@import "./theme.less";
|
@import './theme.less';
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--font-family: @font-family;
|
--font-family: @font-family;
|
||||||
@ -38,14 +38,13 @@ body {
|
|||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
font-size: var(--font-size-text);
|
font-size: var(--font-size-text);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background-color:#EDEFF3;
|
background-color: #edeff3;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.lc-titled-panel {
|
.lc-titled-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -62,7 +61,7 @@ body {
|
|||||||
|
|
||||||
.lc-help-tip {
|
.lc-help-tip {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
color: rgba(0,0,0,0.4);
|
color: rgba(0, 0, 0, 0.4);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -71,7 +70,7 @@ body {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
// border-bottom: 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: #0F1726;
|
color: #0f1726;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -116,8 +115,8 @@ body {
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
.lc-outline-pane{
|
.lc-outline-pane {
|
||||||
border-top: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
|
border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lc-panel {
|
.lc-panel {
|
||||||
@ -129,12 +128,11 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.lc-workbench {
|
.lc-workbench {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: #EDEFF3;
|
background-color: #edeff3;
|
||||||
.lc-top-area {
|
.lc-top-area {
|
||||||
height: var(--top-area-height);
|
height: var(--top-area-height);
|
||||||
background-color: var(--color-pane-background);
|
background-color: var(--color-pane-background);
|
||||||
@ -152,20 +150,20 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lc-top-area-center{
|
.lc-top-area-center {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
.lc-top-area-right{
|
.lc-top-area-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
>* {
|
> * {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
.ve-quick-search-trigger{
|
.ve-quick-search-trigger {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -185,8 +183,8 @@ body {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// background: rgba(31,56,88,0.04);
|
// background: rgba(31,56,88,0.04);
|
||||||
border-bottom: 1px solid #EDEFF3;
|
border-bottom: 1px solid #edeff3;
|
||||||
.lc-tab-title{
|
.lc-tab-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -196,8 +194,8 @@ body {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
&.actived {
|
&.actived {
|
||||||
color: #0079F2;
|
color: #0079f2;
|
||||||
border-bottom-color: #0079F2;
|
border-bottom-color: #0079f2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -216,13 +214,14 @@ body {
|
|||||||
top: 14px;
|
top: 14px;
|
||||||
height: auto;
|
height: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
.next-icon{
|
.next-icon {
|
||||||
line-height: 1;
|
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;
|
position: absolute;
|
||||||
right: 38px;
|
right: 38px;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
@ -230,7 +229,7 @@ body {
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
svg {
|
svg {
|
||||||
vertical-align: middle;
|
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);
|
// min-width: var(--dock-fixed-pane-width);
|
||||||
left: calc(var(--left-area-width) + 1px);
|
left: calc(var(--left-area-width) + 1px);
|
||||||
background-color: var(--color-pane-background);
|
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;
|
z-index: 820;
|
||||||
display: none;
|
display: none;
|
||||||
// padding-top: 36px;
|
// padding-top: 36px;
|
||||||
@ -263,7 +262,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.lc-left-area-top,
|
.lc-left-area-top,
|
||||||
.lc-left-area-bottom{
|
.lc-left-area-bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -280,8 +279,11 @@ body {
|
|||||||
&.has-tip {
|
&.has-tip {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
&.actived{
|
&.actived {
|
||||||
color: #0079F2;
|
color: #0079f2;
|
||||||
|
}
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
.lc-title-icon {
|
.lc-title-icon {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@ -293,10 +295,10 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lc-left-area-top{
|
.lc-left-area-top {
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
}
|
}
|
||||||
.lc-left-area-bottom{
|
.lc-left-area-bottom {
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -317,8 +319,8 @@ body {
|
|||||||
.lc-left-area.lc-area-visible ~ .lc-workbench-center {
|
.lc-left-area.lc-area-visible ~ .lc-workbench-center {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
.lc-outline-pane{
|
.lc-outline-pane {
|
||||||
.lc-outline-tree .tree-node .tree-node-title{
|
.lc-outline-tree .tree-node .tree-node-title {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -352,7 +354,7 @@ body {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
position: relative;
|
position: relative;
|
||||||
>.lc-panel {
|
> .lc-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -360,22 +362,22 @@ body {
|
|||||||
&.lc-area-visible {
|
&.lc-area-visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.lc-settings-tabs{
|
.lc-settings-tabs {
|
||||||
> .next-tabs-nav-extra{
|
> .next-tabs-nav-extra {
|
||||||
top: 36px !important;
|
top: 36px !important;
|
||||||
}
|
}
|
||||||
.lc-settings-tab-item{
|
.lc-settings-tab-item {
|
||||||
.next-tabs-tab-inner{
|
.next-tabs-tab-inner {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lc-title{
|
.lc-title {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
line-height: inherit !important;
|
line-height: inherit !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lc-settings-tabs-content{
|
.lc-settings-tabs-content {
|
||||||
top: 66px;
|
top: 66px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -247,6 +247,10 @@ export class Skeleton {
|
|||||||
return widget;
|
return widget;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getWidget(name: string): IWidget | undefined {
|
||||||
|
return this.widgets.find(widget => widget.name === name);
|
||||||
|
}
|
||||||
|
|
||||||
createPanel(config: PanelConfig) {
|
createPanel(config: PanelConfig) {
|
||||||
config = this.parseConfig(config);
|
config = this.parseConfig(config);
|
||||||
const panel = new Panel(this, config);
|
const panel = new Panel(this, config);
|
||||||
|
|||||||
@ -70,6 +70,8 @@ export default class PanelDock implements IWidget {
|
|||||||
|
|
||||||
private _panel?: Panel;
|
private _panel?: Panel;
|
||||||
|
|
||||||
|
@obx.ref private _disabled = false;
|
||||||
|
|
||||||
@computed get panel() {
|
@computed get panel() {
|
||||||
return this._panel || this.skeleton.getPanel(this.panelName);
|
return this._panel || this.skeleton.getPanel(this.panelName);
|
||||||
}
|
}
|
||||||
@ -122,8 +124,26 @@ export default class PanelDock implements IWidget {
|
|||||||
this.setVisible(!this._visible);
|
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() {
|
togglePanel() {
|
||||||
this.panel?.toggle();
|
if (!this._disabled) {
|
||||||
|
this.panel?.toggle();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getName() {
|
getName() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user