opti: 修改 tree 样式

This commit is contained in:
zwjamnsss 2017-09-19 17:59:36 +08:00
parent 49e1ad236c
commit a3ba73f5b9
4 changed files with 20 additions and 8 deletions

View File

@ -235,8 +235,8 @@ export default class InterfaceColMenu extends Component {
title={
<div className="menu-title">
<span><Icon type="folder-open" style={{marginRight: 5}} /><span>{col.name}</span></span>
<Dropdown overlay={menu(col)}>
<Icon type='bars'/>
<Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
<Icon className="opts-icon" type='ellipsis'/>
</Dropdown>
</div>
}

View File

@ -1,7 +1,17 @@
.col-list-tree {
line-height: 25px;
.ant-tree-node-content-wrapper {
width: calc(100% - 24px);
}
.opts-icon, .case-delete-icon {
line-height: 25px;
width: 30px;
}
.opts-icon:hover, .case-delete-icon:hover {
color: #2395f1;
border-radius: 4px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.menu-title {
display: flex;
justify-content: space-between;
@ -13,9 +23,6 @@
margin-left: 5px;
display: none;
}
i:before{
line-height: 17px;
}
}
.menu-title:hover {
.case-delete-icon {

View File

@ -12,7 +12,6 @@ import { Link, withRouter } from 'react-router-dom';
const confirm = Modal.confirm;
const TreeNode = Tree.TreeNode;
@connect(
state => {
@ -384,8 +383,8 @@ class InterfaceMenu extends Component {
{menuList.map((item) => {
return <TreeNode title={<div>
<Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/cat_" + item._id} ><Icon type="folder-open" style={{ marginRight: 5 }} />{item.name}</Link>
<Dropdown overlay={menu(item)}>
<Icon type='setting' className="interface-delete-icon" />
<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
<Icon type='ellipsis' className="interface-delete-icon" />
</Dropdown>
</div>}
key={'cat_' + item._id}

View File

@ -94,6 +94,7 @@
overflow: hidden;
top: 0px;
line-height: 100%;
text-decoration: none;
}
.interface-item-nav{
line-height:25px;
@ -111,6 +112,11 @@
line-height: 25px;
width: 30px;
}
.interface-delete-icon:hover {
color: #2395f1;
border-radius: 4px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
}
}