github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tree: add chalk theme (#6901) 

* Playground: bump to new theme

* Tree: update chalk theme

* update doc

* Update var.scss
pull/7011/head
Dreamacro 2017-09-14 11:34:26 +08:00 committed by 杨奕
parent e62f8c1414
commit 5e8dfd0738
6 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/docs/en-US/tree.md
View File

@ -248,13 +248,13 @@
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<span style="white-space: normal"> <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span> <span>
<span>{node.label}</span> <span>{node.label}</span>
</span> </span>
<span style="float: right; margin-right: 20px"> <span>
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span> </span>
</span>); </span>);
}, },
@ -764,13 +764,13 @@ The content of tree nodes can be customized, so you can add icons or buttons as
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<span style="white-space: normal"> <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span> <span>
<span>{node.label}</span> <span>{node.label}</span>
</span> </span>
<span style="float: right; margin-right: 20px"> <span>
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span> </span>
</span>); </span>);
} }

16
examples/docs/zh-CN/tree.md
View File

@ -248,13 +248,13 @@
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<span style="white-space: normal"> <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span> <span>
<span>{node.label}</span> <span>{node.label}</span>
</span> </span>
<span style="float: right; margin-right: 20px"> <span>
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span> </span>
</span>); </span>);
}, },
@ -763,13 +763,13 @@
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<span style="white-space: normal"> <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span> <span>
<span>{node.label}</span> <span>{node.label}</span>
</span> </span>
<span style="float: right; margin-right: 20px"> <span>
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button> <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span> </span>
</span>); </span>);
} }

2
examples/play.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import Element from 'main/index.js'; import Element from 'main/index.js';
import App from './play/index.vue'; import App from './play/index.vue';
import 'packages/theme-default/src/index.css'; import 'packages/theme-chalk/src/index.scss';
Vue.use(Element); Vue.use(Element);

6
packages/theme-chalk/src/common/var.scss
View File

@ -533,6 +533,12 @@ $--tag-danger-fill: rgba(255,73,73,0.10);
$--tag-danger-border: rgba(255,73,73,0.20); $--tag-danger-border: rgba(255,73,73,0.20);
$--tag-danger-color: $--color-danger; $--tag-danger-color: $--color-danger;
/* Tree
-------------------------- */
$--tree-node-hover-color: $--background-color-base;
$--tree-text-color: $--color-text-regular;
$--tree-expand-icon-color: $--color-text-placeholder;
/* Dropdown /* Dropdown
-------------------------- */ -------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-light; $--dropdown-menu-box-shadow: $--box-shadow-light;

34
packages/theme-chalk/src/tree.scss
View File

@ -4,7 +4,7 @@
@include b(tree) { @include b(tree) {
cursor: default; cursor: default;
background: $--color-white; background: $--color-white;
border: 1px solid $--color-black; color: $--tree-text-color;
@include e(empty-block) { @include e(empty-block) {
position: relative; position: relative;
@ -27,41 +27,35 @@
white-space: nowrap; white-space: nowrap;
@include e(content) { @include e(content) {
line-height: 36px; display: flex;
height: 36px; align-items: center;
height: 26px;
cursor: pointer; cursor: pointer;
& > .el-checkbox,
& > .el-tree-node__expand-icon { & > .el-tree-node__expand-icon {
margin-right: 8px; margin: 0 8px;
} }
& > .el-checkbox { & > .el-checkbox {
vertical-align: middle; margin-right: 8px;
} }
&:hover { &:hover {
background: $--color-black; background-color: $--tree-node-hover-color;
} }
} }
@include e(expand-icon) { @include e(expand-icon) {
display: inline-block;
cursor: pointer; cursor: pointer;
width: 0; width: 0;
height: 0; height: 0;
vertical-align: middle;
margin-left: 10px; margin-left: 10px;
border: 6px solid transparent; border: 3.5px solid transparent;
border-right-width: 0; border-right-width: 0;
border-left-color: $--color-black; border-left-color: $--tree-expand-icon-color;
border-left-width: 7px; border-left-width: 6px;
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
&:hover {
border-left-color: #999;
}
&.expanded { &.expanded {
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -74,16 +68,12 @@
@include e(label) { @include e(label) {
font-size: $--font-size-base; font-size: $--font-size-base;
vertical-align: middle;
display: inline-block;
} }
@include e(loading-icon) { @include e(loading-icon) {
display: inline-block; margin-right: 8px;
vertical-align: middle;
margin-right: 4px;
font-size: $--font-size-base; font-size: $--font-size-base;
color: $--color-black; color: $--tree-expand-icon-color;
} }
& > .el-tree-node__children { & > .el-tree-node__children {

2
packages/tree/src/tree.vue
View File

@ -88,7 +88,7 @@
accordion: Boolean, accordion: Boolean,
indent: { indent: {
type: Number, type: Number,
default: 16 default: 18
} }
}, },