1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 10:16:26 +00:00

Redesign SideNav & implement add repo func

This commit is contained in:
Rokt33r
2016-04-18 15:36:02 +09:00
parent 9c5cbd348b
commit ac7e08ae2c
11 changed files with 1062 additions and 211 deletions

View File

@@ -0,0 +1,75 @@
import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './Repository.styl'
class Repository extends React.Component {
render () {
let { repository } = this.props
let folderElements = repository.folders.map((folder) => {
return (
<div
key={folder.name}
styleName='folder'
>
<div styleName='folder-label'>
<i className='fa fa-cube'/> {folder.name}
</div>
<div styleName='folder-control'>
<button styleName='folder-control-button'>
<i className='fa fa-pencil'/>
</button>
<button styleName='folder-control-button'>
<i className='fa fa-trash'/>
</button>
</div>
</div>
)
})
return (
<div
className='Repository'
styleName='root'
>
<div styleName='header'>
<div styleName='header-name'>
<i className='fa fa-archive'/> {repository.name}
</div>
<div styleName='header-control'>
<button styleName='header-control-button'
>
<i className='fa fa-unlink'/>
</button>
<button styleName='header-control-button'
>
<i className='fa fa-pencil'/>
</button>
<button styleName='header-control-button'
>
<i className='fa fa-angle-down'/>
</button>
</div>
</div>
{folderElements}
<button styleName='newFolderButton'
>
<i className='fa fa-plus'/> New Folder
</button>
</div>
)
}
}
Repository.propTypes = {
repository: PropTypes.shape({
name: PropTypes.string,
folders: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string
}))
})
}
export default CSSModules(Repository, styles)