haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 00:20:07 +00:00
Code Issues Releases Wiki Activity

Merge pull request #3606 from haiwen/modify_choose_style

Browse Source 
modify choose style
This commit is contained in:
Daniel Pan
2019-06-03 18:16:35 +08:00
committed by GitHub
parent f3bd832062 1267e530de
commit f27a25e9f1
3 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/file-chooser/repo-list-item.js
View File

@@ -120,7 +120,8 @@ class RepoListItem extends React.Component {
}); });
} }
onToggleClick = () => { onToggleClick = (e) => {
e.stopPropagation();
this.setState({isShowChildren: !this.state.isShowChildren}); this.setState({isShowChildren: !this.state.isShowChildren});
} }
@@ -150,12 +151,18 @@ class RepoListItem extends React.Component {
} }
return ( return (
<li className="file-chooser-item"> <li>
<span className={`item-toggle fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span> <div className={`${repoActive ? 'item-active' : ''} item-info`} onClick={this.onRepoItemClick}>
<span className={`item-info ${repoActive ? 'item-active' : ''}`} onClick={this.onRepoItemClick}> <div className="item-text">
<span className="icon far fa-folder"></span>
<span className="name user-select-none ellipsis">{this.props.repo.repo_name}</span> <span className="name user-select-none ellipsis">{this.props.repo.repo_name}</span>
</span> </div>
<div className="item-left-icon">
<span className={`item-toggle icon fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
<i className="tree-node-icon">
<span className="icon far fa-folder tree-node-icon"></span>
</i>
</div>
</div>
{this.state.isShowChildren && ( {this.state.isShowChildren && (
<TreeListView <TreeListView
repo={this.props.repo} repo={this.props.repo}

14
frontend/src/components/file-chooser/tree-list-item.js
View File

@@ -89,14 +89,20 @@ class TreeViewItem extends React.Component {
return( return(
<div className="file-chooser-item"> <div className="file-chooser-item">
<div className={`${node.path === '/'? 'hide': ''}`}> <div className={`${node.path === '/'? 'hide': ''}`}>
<div className={`${(isCurrentRepo && isCurrentPath) ? 'item-active' : ''} item-info`} onClick={this.onItemClick}>
<div className="item-text">
<span className="name user-select-none ellipsis">{node.object && node.object.name}</span>
</div>
<div className="item-left-icon">
{ {
node.object.type !== 'file' && node.object.type !== 'file' &&
<span className={`item-toggle fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span> <span className={`icon item-toggle fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
} }
<span className={`item-info ${(isCurrentRepo && isCurrentPath) ? 'item-active' : ''}`} onClick={this.onItemClick}> <i className="tree-node-icon">
<span className={`icon far ${node.object.type === 'dir' ? 'fa-folder' : 'fa-file'}`}></span> <span className={`icon far ${node.object.type === 'dir' ? 'fa-folder' : 'fa-file'}`}></span>
<span className="name user-select-none ellipsis">{node.object && node.object.name}</span> </i>
</span> </div>
</div>
</div> </div>
{node.isExpanded && this.renderChildren()} {node.isExpanded && this.renderChildren()}
</div> </div>

43
frontend/src/css/file-chooser.css
View File

@@ -42,36 +42,27 @@
.file-chooser-item { .file-chooser-item {
position: relative; position: relative;
padding-left: 1.5rem; padding-left: 22px;
} }
.file-chooser-item .item-info { .file-chooser-item .item-info {
display: flex;
height: 1.5rem; height: 1.5rem;
cursor: pointer; cursor: pointer;
padding: 0; position: relative;
} line-height: 1.625;
.file-chooser-item .item-info:hover {
background: #FDEFB9;
border-radius: 2px;
box-shadow: inset 0 0 1px #999;
} }
.file-chooser-item .item-active { .file-chooser-item .item-active {
background: #F3AF7D !important; background: #F3AF7D !important;
border-radius: 2px; border-radius: 2px;
box-shadow: inset 0 0 1px #999; box-shadow: inset 0 0 1px #999;
color: #fff color: #fff;
} }
.file-chooser-item .item-info .icon { .file-chooser-item .item-info:hover {
display: flex; background: #FDEFB9;
justify-content: center; border-radius: 2px;
align-items: center; box-shadow: inset 0 0 1px #999;
color: #b0b0b0;
width: 1.5rem;
height: 1.5rem;
} }
.file-chooser-item .item-info .name { .file-chooser-item .item-info .name {
@@ -132,6 +123,24 @@
border-bottom: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid rgba(0, 0, 0, 0);
} }
.item-text {
padding-left: 2.8rem;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
}
.item-left-icon {
position: absolute;
display: flex;
align-items: center;
top: 0;
left: 0;
padding-left: 1.5rem;
}