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

style(editor): 组件列表与组件树搜索框样式调整

Browse Source
This commit is contained in:
roymondchen 2022-10-13 18:47:07 +08:00 committed by jia000
parent 8c5518170d
commit 6caa8cdb79
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/layouts/sidebar/ComponentListPanel.vue
View File

@ -4,11 +4,11 @@
<TMagicCollapse class="ui-component-panel" :model-value="collapseValue"> <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
<TMagicInput <TMagicInput
prefix-icon="el-icon-search"
placeholder="输入关键字进行过滤" placeholder="输入关键字进行过滤"
class="search-input" class="search-input"
size="small" size="small"
clearable clearable
:prefix-icon="Search"
v-model="searchText" v-model="searchText"
/> />
<template v-for="(group, index) in list"> <template v-for="(group, index) in list">
@ -40,7 +40,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref } from 'vue'; import { computed, inject, ref } from 'vue';
import { Grid } from '@element-plus/icons-vue'; import { Grid, Search } from '@element-plus/icons-vue';
import serialize from 'serialize-javascript'; import serialize from 'serialize-javascript';
import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design'; import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';

7
packages/editor/src/layouts/sidebar/LayerPanel.vue
View File

@ -7,16 +7,18 @@
<slot name="layer-panel-header"></slot> <slot name="layer-panel-header"></slot>
<TMagicInput <TMagicInput
class="filterInput" v-model="filterText"
class="search-input"
size="small" size="small"
placeholder="输入关键字进行过滤" placeholder="输入关键字进行过滤"
clearable clearable
v-model="filterText" :prefix-icon="Search"
@change="filterTextChangeHandler" @change="filterTextChangeHandler"
></TMagicInput> ></TMagicInput>
<TMagicTree <TMagicTree
v-if="values.length" v-if="values.length"
class="magic-editor-layer-tree"
ref="tree" ref="tree"
node-key="id" node-key="id"
empty-text="页面空荡荡的" empty-text="页面空荡荡的"
@ -65,6 +67,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref, watch } from 'vue'; import { computed, inject, ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import KeyController from 'keycon'; import KeyController from 'keycon';
import { throttle } from 'lodash-es'; import { throttle } from 'lodash-es';

10
packages/editor/src/theme/component-list-panel.scss
View File

@ -1,11 +1,11 @@
.ui-component-panel { .ui-component-panel {
height: 100%; height: 100%;
border-top: 0 !important; border-top: 0 !important;
margin-top: 50px; margin-top: 48px;
background-color: $--sidebar-content-background-color; background-color: $--sidebar-content-background-color;
.search-input { .search-input {
background: #f8fbff; background: #fff;
color: #bbbbbb; color: #bbbbbb;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
@ -15,11 +15,7 @@
z-index: 1; z-index: 1;
.el-input__prefix { .el-input__prefix {
padding: 10px; padding: 7px;
}
.el-input__suffix {
padding: 10px 5px;
} }
} }

9
packages/editor/src/theme/layer-panel.scss
View File

@ -10,10 +10,15 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
.el-input__suffix { .el-input__prefix {
padding: 10px 5px; padding: 7px;
} }
} }
.magic-editor-layer-tree {
padding-top: 48px;
}
.node-content { .node-content {
flex: 1; flex: 1;
display: flex; display: flex;