mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-11-04 10:49:51 +08:00
style(editor): 将code-block样式抽离成dep-list统一样式
This commit is contained in:
roymondchen
parent
fded83ee0d
commit
e5c13e9e76
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- app-manage cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/console_aside_v4/6638c8a5-2e7f-477a-83b1-a413a0e4ba39.svg -->
|
||||
<svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#7C878E" fill-rule="evenodd">
|
||||
<path d="M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z" fill-rule="nonzero" />
|
||||
<path d="M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" />
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
<template>
|
||||
<!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
|
||||
<svg
|
||||
width="32px"
|
||||
height="32px"
|
||||
viewBox="0 0 32 32"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
|
||||
<title>gsd-icon-line-Universal-code</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
|
||||
<g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="03图标" transform="translate(-561.000000, -2356.000000)">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TMagicScrollbar class="m-editor-code-block-list">
|
||||
<TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
|
||||
<slot name="code-block-panel-header">
|
||||
<div class="code-header-wrapper">
|
||||
<div class="search-wrapper">
|
||||
<SearchInput @search="filterTextChangeHandler"></SearchInput>
|
||||
<TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
|
||||
>新增</TMagicButton
|
||||
@ -27,8 +27,8 @@
|
||||
<div class="list-item">
|
||||
<CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
|
||||
<AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
|
||||
<span class="code-name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
|
||||
>{{ data.name }}（{{ data.id }}）</span
|
||||
<span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
|
||||
>{{ data.name }} ({{ data.id }})</span
|
||||
>
|
||||
<!-- 右侧工具栏 -->
|
||||
<div class="right-tool" v-if="data.type === 'code'">
|
||||
|
||||
@ -1,81 +1,19 @@
|
||||
.m-editor-code-block-list {
|
||||
height: 100%;
|
||||
|
||||
.magic-editor-layer-tree {
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
.code-header-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.create-code-button {
|
||||
margin-left: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
.right-tool {
|
||||
display: flex;
|
||||
width: fit-content !important;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
.edit-icon {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.codeIcon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.compIcon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.code-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 0 !important;
|
||||
flex: 1;
|
||||
line-height: 22px;
|
||||
|
||||
&.code {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.hook {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
59
packages/editor/src/theme/dep-list.scss
Normal file
59
packages/editor/src/theme/dep-list.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.m-editor-dep-list-panel {
|
||||
.magic-editor-layer-tree {
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tmagic-design-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.list-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
.right-tool {
|
||||
display: flex;
|
||||
width: fit-content !important;
|
||||
align-items: center;
|
||||
.edit-icon {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 0 !important;
|
||||
flex: 1;
|
||||
line-height: 22px;
|
||||
|
||||
&.code {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.hook {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,3 +16,4 @@
|
||||
@import "./event.scss";
|
||||
@import "./layout.scss";
|
||||
@import "./breadcrumb.scss";
|
||||
@import "./dep-list.scss";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user