Leon19656
/
tiny-engine
forked from opentiny/tiny-engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): change canvas menu item hiding to disabed (#75)

This commit is contained in:
chilingling 2023-11-09 01:01:37 -08:00 committed by GitHub
parent 4876571ed0
commit d1f0a35950
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/canvas/src/components/container/CanvasMenu.vue
View File

@ -14,7 +14,10 @@
</div>
<ul v-if="item.items && current === item" class="sub-menu menu-item">
<template v-for="(subItem, subIndex) in item.items" :key="subIndex">
<li v-if="subItem?.check?.() !== false" @click.stop="doOperation(subItem)">
<li
:class="[{ 'menu-item-disabled': subItem.check && !subItem.check?.() }]"
@click.stop="doOperation(subItem)"
>
{{ subItem.name }}
</li>
</template>
@ -153,6 +156,10 @@ export default {
boxVisibility.value = false
}
const doOperation = (item) => {
if (item.check && !item.check?.()) {
return
}
if (item?.code) {
operations[item.code](item)
closeMenu()
@ -196,13 +203,17 @@ export default {
justify-content: space-between;
}
font-size: 12px;
color: var(--ti-lowcode-toolbar-breadcrumb-color);
color: var(--ti-lowcode-canvas-menu-item-color);
padding: 6px 15px;
&:hover {
color: var(--ti-lowcode-toolbar-icon-color);
background: var(--ti-lowcode-canvas-menu-hover-color);
&:not(.menu-item-disabled):hover {
background: var(--ti-lowcode-canvas-menu-item-hover-bg-color);
}
position: relative;
&.menu-item-disabled {
cursor: not-allowed;
color: var(--ti-lowcode-canvas-menu-item-disabled-color);
}
}
&.sub-menu {
width: 100px;

5
packages/theme/dark/canvas.less
View File

@ -20,7 +20,8 @@
--ti-lowcode-common-secondary-text-color
); // canvas 宽度拖动手柄 两条竖线颜色
--ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
--ti-lowcode-canvas-menu-color: #adb0b8; // 右键菜单文字颜色
--ti-lowcode-canvas-menu-hover-color: #5e5e5e;
--ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
--ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
--ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
--ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3);
}

9
packages/theme/dark/variable.less
View File

@ -113,18 +113,9 @@
--ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
// 画布 canvas
--ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色
--ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色
// iframe 内部滚动条 滑块 颜色
--ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg);
--ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色
--ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
--ti-lowcode-canvas-tab-handle-color: var(
--ti-lowcode-common-secondary-text-color
); // canvas 宽度拖动手柄 两条竖线颜色
--ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
--ti-lowcode-canvas-menu-hover-color: #5e5e5e;
--ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
// 数据源
--ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color);

5
packages/theme/light/canvas.less
View File

@ -18,7 +18,8 @@
--ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
--ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-2); // canvas 宽度拖动手柄 两条竖线颜色
--ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg); // canvas 右键菜单背景
--ti-lowcode-canvas-menu-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色
--ti-lowcode-canvas-menu-hover-color: #f5f5f5;
--ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色
--ti-lowcode-canvas-menu-item-hover-bg-color: #f5f5f5;
--ti-lowcode-canvas-menu-border-color: #ddd;
--ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4);
}