Skip to content

Commit

Permalink
[feat]: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@pizn
pizn committed Jan 19, 2016
1 parent c0a590a commit 290fd3d
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 86 deletions.
73 changes: 34 additions & 39 deletions src/components/Desktop/Aside.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ class Aside extends Component {
}
render() {
const { user, repoInfo, tree } = this.props;

console.log(repoInfo);

const logoCls = classNames({
'head-logo': true,
'head-logo-loading': user.loading | repoInfo.loading | tree.loading,
Expand All @@ -22,48 +25,40 @@ class Aside extends Component {
<div className={logoCls}></div>
</div>
<div className="body">
<div className="body-project">
{ repoInfo.loading &&
<div className="body-project-title">
<Icon type="loading" />
</div>
}
{ !repoInfo.loading &&
<a href={repoInfo.data.html_url} target="_blank" className="body-project-title">{repoInfo.data.name}</a>
}
{ !tree.loaded &&
<div className="body-project-title">
<Icon type="loading" />
</div>
}
{ tree.loaded &&
<ul className="body-menu">
{ tree.loaded &&
<li className="body-menu-item">
<Link to={`_posts`} className="link" activeClassName="link-active">
<Row>
<Col span="4">
<Icon type="folder"/>
<Icon type="folder-open" />
</Col>
<Col span="20">
文章 <span className="count">{tree.data.length}</span>
</Col>
</Row>
</Link>
</li>
}
{/*
<li className="body-menu-item">
<Link to={`_drafts`} className="link" activeClassName="link-active">
<Row>
<Col span="4">
<Icon type="folder" />
<Icon type="folder-open" />
</Col>
<Col span="20">
草稿
</Col>
</Row>
</Link>
</li>
*/}
<li className="body-menu-item">
<Link to={`_posts`} className="link" activeClassName="link-active">
<span className="icon"><Icon type="inbox" /></span>
<span className="count">{tree.data.length}</span>
</Link>
<p className="text">文章</p>
</li>
<li className="body-menu-item">
<div className="link">
<span className="icon"><Icon type="file-text" /></span>
</div>
<p className="text">草稿</p>
</li>
<li className="body-menu-item">
<div className="link">
<span className="icon"><Icon type="picture" /></span>
</div>
<p className="text">主题</p>
</li>
<li className="body-menu-item">
<div className="link">
<span className="icon"><Icon type="setting" /></span>
</div>
<p className="text">配置</p>
</li>
</ul>
}
</div>

<div className="foot">
Expand Down
6 changes: 3 additions & 3 deletions src/components/Desktop/Head.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ class Head extends Component {
}

render() {
const { tree, addFile } = this.props;
const { addFile, repoInfo } = this.props;
return (
<div className="leaf-desktop-head">
{ tree.loaded &&
{ repoInfo.loaded &&
<Row className="leaf-head-wrap">
<Col span="20">
<h2 className="title">文章</h2>
<h2 className="title">{repoInfo.data.name} <Icon type="right" /> _posts</h2>
</Col>
<Col span="4" className="action">
<Button type="ghost" onClick={addFile}><Icon type="plus" /> 添加</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/containers/Desktop.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ class Desktop extends Component {
<div className="leaf-desktop-main">
<div className="leaf-desktop-main-wrap">
<Head
tree={tree}
repoInfo={repoInfo}
addFile={this.handleShowAddModal.bind(this)}
/>
<List
Expand Down
1 change: 0 additions & 1 deletion src/services/repo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ const Repo = {
committer: {name: data.username, email: data.email},
}


return new Promise((resolve, reject) => {
repo.write('master', data.path, data.content, '[Leafeon]: Add post', options, (err, file) => {
if (err) {
Expand Down
129 changes: 87 additions & 42 deletions src/styles/leaf.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

.head-logo {
margin: 0 auto;
background: url(https://t.alipayobjects.com/images/rmsweb/T1.l8kXeViXXXXXXXX.png) no-repeat 0 0;
background: url(https://t.alipayobjects.com/images/rmsweb/T1EmVkXahfXXXXXXXX.png) no-repeat 0 0;
width: 48px;
height: 48px;
background-size: 48px 48px;
Expand Down Expand Up @@ -122,7 +122,7 @@

&-logo {
margin: 0 auto;
background: url(https://t.alipayobjects.com/images/rmsweb/T1.l8kXeViXXXXXXXX.png) no-repeat 0 0;
background: url(https://t.alipayobjects.com/images/rmsweb/T1EmVkXahfXXXXXXXX.png) no-repeat 0 0;
width: 48px;
height: 48px;
background-size: 48px 48px;
Expand All @@ -140,81 +140,119 @@
text-align: center;
font-family: "Courier New", Courier, monospace;
}

}

.body {

&-project {
border-top: 1px solid @border-color;
border-bottom: 1px solid @border-color;

&-title {
padding: 0px 32px 8px 32px;
display: block;
padding: 12px 32px;
line-height: 24px;
min-height: 48px;
text-align: center;
color: #666;
font-size: 16px;
font-weight: normal;
text-align: center;

&:hover {
background: lighten(@primary-color, 34%);
a {
color: #666;
}
}

&-description {
padding: 0 32px;
font-size: 12px;
color: #999;
display: none;
}

&-card {
padding: 16px 32px;
display: none;

&-item {
padding: 4px 8px;
border-radius: 24px 24px;
margin-right: 12px;
color: #fff;
background: @primary-color;
}
}

}

&-menu {
padding: 24px 0;

&-item {
margin-bottom: 24px;

.link {
padding: 0 24px;
display: block;
font-size: 14px;
line-height: 48px;
color: #666;

.anticon {
width: 32px;
display: none;
text-align: center;
color: #a8a8a8;
}

.anticon-folder {
display: inline-block;
}
.link {
position: relative;
width: 48px;
height: 48px;
margin: 0 auto;
line-height: 48px;
display: block;
border-radius: 24px 24px;
background: #fff;
border: 1px solid @border-color;
text-align: center;
color: #999;
cursor: pointer;

.anticon-folder-open {
display: none;
.icon {
position: relative;
font-size: 16px;
}

.count {
margin: 15px 0;
height: 18px;
line-height: 18px;
position: absolute;
top: -8px;
right: -8px;
height: 24px;
line-height: 24px;
width: 24px;
font-size: 12px;
float: right;
padding: 0px 10px;
background: @primary-color;
color: #fff;
border-radius: 12px 12px;
display: block;
border: 1px solid @border-color;
color: #666;
background: #fff;
}

&:hover {
border: 1px solid darken(@border-color, 15%);
}

&-active {
color: #444;
border: 1px solid darken(@border-color, 15%);
background: lighten(@primary-color, 34%);
}
}

.anticon-folder {
display: none;
}
.text {
opacity: 0;
visibility: hidden;
transition: all .3s ease-in-out;
transform: translateY(6px);
text-align: center;
line-height: 32px;
height: 32px;
color: #999;
font-size: 12px;
}

.anticon-folder-open {
display: inline-block;
}
&:hover {
.text {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
}

}
}
}
Expand Down Expand Up @@ -345,6 +383,13 @@

.title {
line-height: 48px;
color: #444;
font-weight: normal;

.anticon {
font-size: 12px;
color: darken(@border-color, 15%);
}
}

.action {
Expand Down

0 comments on commit 290fd3d

Please sign in to comment.