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:
75
browser/main/HomePage/SideNav/Repository.js
Normal file
75
browser/main/HomePage/SideNav/Repository.js
Normal 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)
|
||||
Reference in New Issue
Block a user