JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-14 17:06:03 +08:00
Code Issues Projects Releases Wiki Activity

style(editor): 优化数据源新增列表样式

Browse Source
This commit is contained in:
roymondchen 2024-08-15 16:59:18 +08:00 committed by roymondchen
parent 4f7b6cede4
commit c5ce6d3c10
3 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor/src/layouts/sidebar/Sidebar.vue
View File

@ -148,7 +148,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, inject, ref, watch } from 'vue'; import { computed, inject, nextTick, ref, watch } from 'vue';
import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue'; import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
import FloatingBox from '@editor/components/FloatingBox.vue'; import FloatingBox from '@editor/components/FloatingBox.vue';
@ -196,7 +196,23 @@ const props = withDefaults(
const services = inject<Services>('services'); const services = inject<Services>('services');
const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0); const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
const { height: columnLeftHeight } = useEditorContentHeight(); const { height: editorContentHeight } = useEditorContentHeight();
const columnLeftHeight = ref(0);
const unWatchEditorContentHeight = watch(
editorContentHeight,
(height) => {
if (height) {
columnLeftHeight.value = height * 0.5;
nextTick().then(() => {
unWatchEditorContentHeight();
});
}
},
{
immediate: true,
},
);
const activeTabName = ref(props.data?.status); const activeTabName = ref(props.data?.status);

26
packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
View File

@ -2,23 +2,21 @@
<TMagicScrollbar class="data-source-list-panel m-editor-layer-panel"> <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
<div class="search-wrapper"> <div class="search-wrapper">
<SearchInput @search="filterTextChangeHandler"></SearchInput> <SearchInput @search="filterTextChangeHandler"></SearchInput>
<TMagicPopover v-if="editable" placement="right"> <TMagicPopover v-if="editable" placement="right" trigger="hover" popper-class="data-source-list-panel-add-menu">
<template #reference> <template #reference>
<TMagicButton type="primary" size="small">新增</TMagicButton> <TMagicButton type="primary" size="small">新增</TMagicButton>
</template> </template>
<div class="data-source-list-panel-add-menu"> <ToolButton
<ToolButton v-for="(item, index) in datasourceTypeList"
v-for="(item, index) in datasourceTypeList" :data="{
:data="{ type: 'button',
type: 'button', text: item.text,
text: item.text, handler: () => {
handler: () => { addHandler(item.type);
addHandler(item.type); },
}, }"
}" :key="index"
:key="index" ></ToolButton>
></ToolButton>
</div>
</TMagicPopover> </TMagicPopover>
<slot name="data-source-panel-search"></slot> <slot name="data-source-panel-search"></slot>

13
packages/editor/src/theme/data-source.scss
View File

@ -17,12 +17,15 @@
} }
.data-source-list-panel-add-menu { .data-source-list-panel-add-menu {
.tmagic-design-button { padding: 4px 0;
width: 100%;
text-align: left;
span { .menu-item {
width: 100%; cursor: pointer;
transition: all 0.2s ease 0s;
padding: 5px 14px;
&:hover {
background-color: $--hover-color;
} }
} }
} }