mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
refactor file structure
This commit is contained in:
Rokt33r
244
browser/main/SideNav/FolderItem.js
Normal file
244
browser/main/SideNav/FolderItem.js
Normal file
@@ -0,0 +1,244 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './FolderItem.styl'
|
||||
import store from 'browser/main/store'
|
||||
import Repository from 'browser/lib/Repository'
|
||||
import consts from 'browser/lib/consts'
|
||||
|
||||
const electron = require('electron')
|
||||
const { remote } = electron
|
||||
const { Menu, MenuItem } = remote
|
||||
|
||||
class FolderItem extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
isEditing: false,
|
||||
isUpdating: false,
|
||||
name: props.folder.name
|
||||
}
|
||||
}
|
||||
|
||||
handleColorButtonClick (color) {
|
||||
return (e) => {
|
||||
let { repository, folder } = this.props
|
||||
this.setState({
|
||||
isUpdating: true
|
||||
}, () => {
|
||||
Repository.find(repository.key)
|
||||
.then((repository) => {
|
||||
console.log(repository)
|
||||
return repository.updateFolder(folder.key, {color: color})
|
||||
})
|
||||
.then((folder) => {
|
||||
store.dispatch({
|
||||
type: 'EDIT_FOLDER',
|
||||
key: repository.key,
|
||||
folder: folder
|
||||
})
|
||||
this.setState({
|
||||
isEditing: false,
|
||||
isUpdating: false
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
this.setState({
|
||||
isEditing: false,
|
||||
isUpdating: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleContextButtonClick (e) {
|
||||
e.stopPropagation()
|
||||
if (this.state.isUpdating) {
|
||||
return
|
||||
}
|
||||
|
||||
var menu = new Menu()
|
||||
menu.append(new MenuItem({
|
||||
label: 'New Note'
|
||||
}))
|
||||
menu.append(new MenuItem({ type: 'separator' }))
|
||||
menu.append(new MenuItem({
|
||||
label: 'Rename',
|
||||
click: () => this.handleRenameButtonClick(e)
|
||||
}))
|
||||
var colorMenu = new Menu()
|
||||
consts.FOLDER_COLORS.forEach((color, index) => {
|
||||
colorMenu.append(new MenuItem({
|
||||
label: consts.FOLDER_COLOR_NAMES[index],
|
||||
click: (e) => this.handleColorButtonClick(color)(e)
|
||||
}))
|
||||
})
|
||||
menu.append(new MenuItem({
|
||||
label: 'Recolor',
|
||||
submenu: colorMenu
|
||||
}))
|
||||
menu.append(new MenuItem({ type: 'separator' }))
|
||||
menu.append(new MenuItem({
|
||||
label: 'Delete',
|
||||
click: () => this.handleDeleteButtonClick(e)
|
||||
}))
|
||||
|
||||
menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
|
||||
}
|
||||
|
||||
handleRenameButtonClick (e) {
|
||||
this.setState({
|
||||
isEditing: true,
|
||||
name: this.props.folder.name
|
||||
}, () => {
|
||||
this.refs.nameInput.focus()
|
||||
this.refs.nameInput.select()
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteButtonClick (e) {
|
||||
let { repository, folder } = this.props
|
||||
|
||||
this.setState({
|
||||
isUpdating: true
|
||||
}, () => {
|
||||
Repository.find(repository.key)
|
||||
.then((repository) => {
|
||||
console.log(repository)
|
||||
return repository.removeFolder(folder.key)
|
||||
})
|
||||
.then(() => {
|
||||
store.dispatch({
|
||||
type: 'REMOVE_FOLDER',
|
||||
repository: repository.key,
|
||||
folder: folder.key
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
this.setState({
|
||||
isUpdating: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleClick (e) {
|
||||
let { folder, repository } = this.props
|
||||
let { router } = this.context
|
||||
|
||||
router.push('/repositories/' + repository.key + '/folders/' + folder.key)
|
||||
}
|
||||
|
||||
renderIdle () {
|
||||
let { folder, repository, isFolded } = this.props
|
||||
let { router } = this.context
|
||||
|
||||
let isActive = router.isActive('/repositories/' + repository.key + '/folders/' + folder.key)
|
||||
|
||||
return (
|
||||
<div styleName={isFolded
|
||||
? isActive ? 'root--folded--active' : 'root--folded'
|
||||
: isActive ? 'root--active' : 'root'
|
||||
}
|
||||
onClick={(e) => this.handleClick(e)}
|
||||
onContextMenu={(e) => this.handleContextButtonClick(e)}
|
||||
>
|
||||
<div styleName='label'>
|
||||
<i styleName='label-icon'
|
||||
className='fa fa-cube'
|
||||
style={{color: folder.color}}
|
||||
/>
|
||||
<span styleName='label-name'>{folder.name}</span>
|
||||
</div>
|
||||
<div styleName='control'>
|
||||
<button styleName='control-button'
|
||||
onClick={(e) => this.handleContextButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-ellipsis-v'/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleNameInputChange (e) {
|
||||
this.setState({
|
||||
name: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
handleNameInputBlur (e) {
|
||||
let { folder, repository } = this.props
|
||||
|
||||
this.setState({
|
||||
isUpdating: true
|
||||
}, () => {
|
||||
Repository.find(repository.key)
|
||||
.then((repository) => {
|
||||
console.log(repository)
|
||||
return repository.updateFolder(folder.key, {name: this.state.name})
|
||||
})
|
||||
.then((folder) => {
|
||||
store.dispatch({
|
||||
type: 'EDIT_FOLDER',
|
||||
key: repository.key,
|
||||
folder: folder
|
||||
})
|
||||
this.setState({
|
||||
isEditing: false,
|
||||
isUpdating: false
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
this.setState({
|
||||
isEditing: false,
|
||||
isUpdating: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
renderEdit () {
|
||||
let { isFolded } = this.props
|
||||
return (
|
||||
<div styleName={isFolded
|
||||
? 'root--edit--folded'
|
||||
: 'root--edit'
|
||||
}
|
||||
>
|
||||
<input styleName='nameInput'
|
||||
ref='nameInput'
|
||||
value={this.state.name}
|
||||
onChange={(e) => this.handleNameInputChange(e)}
|
||||
onBlur={(e) => this.handleNameInputBlur(e)}
|
||||
disabled={this.state.isUpdating}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return this.state.isEditing ? this.renderEdit() : this.renderIdle()
|
||||
}
|
||||
}
|
||||
|
||||
FolderItem.contextTypes = {
|
||||
router: PropTypes.object
|
||||
}
|
||||
|
||||
FolderItem.propTypes = {
|
||||
folder: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
color: PropTypes.string
|
||||
}),
|
||||
repository: PropTypes.shape({
|
||||
key: PropTypes.string
|
||||
}),
|
||||
isFolded: PropTypes.bool
|
||||
}
|
||||
|
||||
export default CSSModules(FolderItem, styles)
|
||||
122
browser/main/SideNav/FolderItem.styl
Normal file
122
browser/main/SideNav/FolderItem.styl
Normal file
@@ -0,0 +1,122 @@
|
||||
.root
|
||||
height 33px
|
||||
width 100%
|
||||
position relative
|
||||
cursor pointer
|
||||
transition 0.15s
|
||||
color $nav-inactive-text-color
|
||||
&:hover
|
||||
background-color $nav-hover-background
|
||||
.control
|
||||
opacity 1
|
||||
&:active, &:hover:active
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.root--active
|
||||
@extend .root
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
&:hover
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
.control
|
||||
opacity 1
|
||||
|
||||
.label
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
bottom 0
|
||||
right 48px
|
||||
padding-left 20px
|
||||
line-height 33px
|
||||
overflow-x hidden
|
||||
|
||||
.label-name
|
||||
margin-left 5px
|
||||
|
||||
.control
|
||||
opacity 0
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
right 5px
|
||||
width 24px
|
||||
transition opacity 0.15s
|
||||
|
||||
.control-button
|
||||
width 24px
|
||||
height 24px
|
||||
margin-top 4.5px
|
||||
border none
|
||||
border-radius 5px
|
||||
background-color transparent
|
||||
color $nav-inactive-text-color
|
||||
transition color background-color 0.15s
|
||||
&:hover
|
||||
background-color $nav-hover-background
|
||||
&:active
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
.root--edit
|
||||
@extend .root
|
||||
|
||||
.nameInput
|
||||
absolute top bottom
|
||||
left 10px
|
||||
right 10px
|
||||
height 33px
|
||||
padding 0 10px
|
||||
border-radius 5px
|
||||
border solid 1px $nav-border-color
|
||||
outline none
|
||||
&:focus
|
||||
border-color $focus-border-color
|
||||
&:disabled
|
||||
background-color $disabled-input-background
|
||||
|
||||
.root--folded
|
||||
@extend .root
|
||||
width 44px
|
||||
&:hover .label-name
|
||||
width 100px
|
||||
.label
|
||||
padding-left 0
|
||||
text-align center
|
||||
right 0
|
||||
.label-icon
|
||||
width 44px
|
||||
.label-name
|
||||
position fixed
|
||||
height 34px
|
||||
left 44px
|
||||
width 0
|
||||
box-sizing border-box
|
||||
margin-left 0
|
||||
overflow ellipsis
|
||||
background-color $nav-tooltip-background-color
|
||||
color white
|
||||
line-height 34px
|
||||
border-top-right-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
transition width 0.15s
|
||||
pointer-events none
|
||||
.control
|
||||
display none
|
||||
|
||||
.root--folded--active
|
||||
@extend .root--folded
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
&:hover
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.root--edit--folded
|
||||
@extend .root--edit
|
||||
.nameInput
|
||||
position fixed
|
||||
top inherit
|
||||
bottom inherit
|
||||
width 100px
|
||||
219
browser/main/SideNav/RepositorySection.js
Normal file
219
browser/main/SideNav/RepositorySection.js
Normal file
@@ -0,0 +1,219 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './RepositorySection.styl'
|
||||
import Repository from 'browser/lib/Repository'
|
||||
import FolderItem from './FolderItem'
|
||||
|
||||
const electron = require('electron')
|
||||
const { remote } = electron
|
||||
const { Menu, MenuItem } = remote
|
||||
|
||||
class RepositorySection extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
isOpen: true,
|
||||
isCreatingFolder: false,
|
||||
isSaving: false,
|
||||
newFolder: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getRepository () {
|
||||
let { repository } = this.props
|
||||
return Repository.find(repository.key)
|
||||
}
|
||||
|
||||
handleUnlinkButtonClick () {
|
||||
let { dispatch, repository } = this.props
|
||||
|
||||
this.getRepository()
|
||||
.then((repositoryInstance) => {
|
||||
return repositoryInstance.unmount()
|
||||
})
|
||||
.then(() => {
|
||||
dispatch({
|
||||
type: 'REMOVE_REPOSITORY',
|
||||
key: repository.key
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleToggleButtonClick (e) {
|
||||
e.stopPropagation()
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen
|
||||
})
|
||||
}
|
||||
|
||||
handleHeaderClick (e) {
|
||||
let { repository } = this.props
|
||||
let { router } = this.context
|
||||
router.push('/repositories/' + repository.key)
|
||||
}
|
||||
|
||||
handleContextButtonClick (e) {
|
||||
e.stopPropagation()
|
||||
var menu = new Menu()
|
||||
menu.append(new MenuItem({
|
||||
label: 'New Folder',
|
||||
click: () => this.handleNewFolderButtonClick()
|
||||
}))
|
||||
menu.append(new MenuItem({ type: 'separator' }))
|
||||
menu.append(new MenuItem({
|
||||
label: 'Unmount',
|
||||
click: () => this.handleUnlinkButtonClick()
|
||||
}))
|
||||
|
||||
menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
|
||||
}
|
||||
|
||||
handleNewFolderButtonClick (e) {
|
||||
this.setState({
|
||||
isCreatingFolder: true,
|
||||
newFolder: {
|
||||
name: 'New Folder'
|
||||
}
|
||||
}, () => {
|
||||
this.refs.nameInput.select()
|
||||
this.refs.nameInput.focus()
|
||||
})
|
||||
}
|
||||
|
||||
handleNewFolderFormChange (e) {
|
||||
let newFolder = this.state.newFolder
|
||||
newFolder.name = this.refs.nameInput.value
|
||||
|
||||
this.setState({
|
||||
newFolder
|
||||
})
|
||||
}
|
||||
|
||||
handleNameInputBlur (e) {
|
||||
let { dispatch, repository } = this.props
|
||||
|
||||
this.setState({
|
||||
isSaving: true
|
||||
}, () => {
|
||||
this.getRepository()
|
||||
.then((repositoryInstance) => {
|
||||
return repositoryInstance.addFolder({
|
||||
name: this.state.newFolder.name
|
||||
})
|
||||
})
|
||||
.then((folder) => {
|
||||
dispatch({
|
||||
type: 'ADD_FOLDER',
|
||||
key: repository.key,
|
||||
folder: folder
|
||||
})
|
||||
|
||||
this.setState({
|
||||
isCreatingFolder: false,
|
||||
isSaving: false
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
this.setState({
|
||||
isCreatingFolder: false,
|
||||
isSaving: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let { repository, isFolded } = this.props
|
||||
let { router } = this.context
|
||||
|
||||
let isActive = router.isActive('/repositories/' + repository.key, true)
|
||||
|
||||
let folderElements = repository.folders.map((folder) => {
|
||||
return (
|
||||
<FolderItem
|
||||
key={folder.key}
|
||||
folder={folder}
|
||||
repository={repository}
|
||||
isFolded={isFolded}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
let toggleButtonIconClassName = this.state.isOpen
|
||||
? 'fa fa-minus'
|
||||
: 'fa fa-plus'
|
||||
|
||||
return (
|
||||
<div
|
||||
className='RepositorySection'
|
||||
styleName={isFolded ? 'root-folded' : 'root'}
|
||||
>
|
||||
<div styleName={isActive ? 'header--active' : 'header'}
|
||||
onClick={(e) => this.handleHeaderClick(e)}
|
||||
onContextMenu={(e) => this.handleContextButtonClick(e)}
|
||||
>
|
||||
<div styleName='header-name'>
|
||||
<i styleName='header-name-icon' className='fa fa-archive fa-fw'/>
|
||||
<span styleName='header-name-label'>{repository.name}</span>
|
||||
</div>
|
||||
|
||||
<div styleName='header-control'>
|
||||
<button styleName='header-control-button'
|
||||
onClick={(e) => this.handleContextButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-ellipsis-v fa-fw'/>
|
||||
</button>
|
||||
<button styleName='header-control-button--show'
|
||||
onClick={(e) => this.handleToggleButtonClick(e)}
|
||||
>
|
||||
<i className={toggleButtonIconClassName}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.isOpen && <div>
|
||||
{folderElements}
|
||||
|
||||
{this.state.isCreatingFolder
|
||||
? <div styleName='newFolderForm'>
|
||||
<input styleName='newFolderForm-nameInput'
|
||||
ref='nameInput'
|
||||
disabled={this.state.isSaving}
|
||||
value={this.state.newFolder.name}
|
||||
onChange={(e) => this.handleNewFolderFormChange(e)}
|
||||
onBlur={(e) => this.handleNameInputBlur(e)}
|
||||
/>
|
||||
</div>
|
||||
: <button styleName='newFolderButton'
|
||||
onClick={(e) => this.handleNewFolderButtonClick(e)}
|
||||
>
|
||||
<i styleName='newFolderButton-icon' className='fa fa-plus fa-fw'/>
|
||||
<span styleName='newFolderButton-label'>New Folder</span>
|
||||
</button>
|
||||
}
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
RepositorySection.contextTypes = {
|
||||
router: PropTypes.object
|
||||
}
|
||||
|
||||
RepositorySection.propTypes = {
|
||||
repository: PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
folders: PropTypes.arrayOf(PropTypes.shape({
|
||||
name: PropTypes.string
|
||||
}))
|
||||
}),
|
||||
dispatch: PropTypes.func,
|
||||
isFolded: PropTypes.bool
|
||||
}
|
||||
|
||||
export default CSSModules(RepositorySection, styles)
|
||||
189
browser/main/SideNav/RepositorySection.styl
Normal file
189
browser/main/SideNav/RepositorySection.styl
Normal file
@@ -0,0 +1,189 @@
|
||||
.root
|
||||
user-select none
|
||||
color $nav-text-color
|
||||
|
||||
.header
|
||||
position relative
|
||||
height 33px
|
||||
cursor pointer
|
||||
color $nav-inactive-text-color
|
||||
transition 0.15s
|
||||
border none
|
||||
width 100%
|
||||
text-align left
|
||||
background-color transparent
|
||||
font-size 14px
|
||||
&:hover
|
||||
background-color $nav-hover-background
|
||||
.header-control-button
|
||||
opacity 1
|
||||
&:active, &:active:hover
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.header--active
|
||||
@extend .header
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
.header-control-button
|
||||
opacity 1
|
||||
&:hover
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.header-name
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
bottom 0
|
||||
right 72px
|
||||
padding-left 10px
|
||||
line-height 33px
|
||||
|
||||
.header-name-label
|
||||
margin-left 5px
|
||||
|
||||
.header-control
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
right 5px
|
||||
width 48px
|
||||
|
||||
.header-control-button
|
||||
width 24px
|
||||
padding 0
|
||||
margin-top 4.5px
|
||||
height 24px
|
||||
border none
|
||||
border-radius 5px
|
||||
background-color transparent
|
||||
color $nav-inactive-text-color
|
||||
opacity 0
|
||||
transition color background-color 0.15s
|
||||
&:hover
|
||||
background-color $nav-hover-background
|
||||
&:active
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.header-control-button--show
|
||||
@extend .header-control-button
|
||||
opacity 1
|
||||
|
||||
.newFolderForm
|
||||
width 100%
|
||||
padding 0 15px
|
||||
height 33px
|
||||
|
||||
.newFolderForm-nameInput
|
||||
width 100%
|
||||
height 33px
|
||||
padding 0 10px
|
||||
border-radius 5px
|
||||
border solid 1px $nav-border-color
|
||||
outline none
|
||||
&:focus
|
||||
border-color $focus-border-color
|
||||
&:disabled
|
||||
background-color $disabled-input-background
|
||||
|
||||
.newFolderButton
|
||||
height 33px
|
||||
width 100%
|
||||
border none
|
||||
padding-left 20px
|
||||
text-align left
|
||||
color $nav-inactive-text-color
|
||||
background-color transparent
|
||||
transition color background-color 0.15s
|
||||
&:hover
|
||||
background-color $nav-hover-background
|
||||
&:active
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.newFolderButton
|
||||
height 34px
|
||||
line-height 34px
|
||||
.newFolderButton-label
|
||||
margin-left 0
|
||||
|
||||
.root-folded
|
||||
@extend .root
|
||||
width 44px
|
||||
.header, .header--active
|
||||
width 44px
|
||||
text-align center
|
||||
overflow hidden
|
||||
&:hover
|
||||
.header-name-label
|
||||
width 134px
|
||||
padding-left 34px
|
||||
.header-control
|
||||
width 35px
|
||||
padding-right 5px
|
||||
.header-name
|
||||
width 44px
|
||||
padding-left 0
|
||||
.header-name-label
|
||||
position fixed
|
||||
display inline-block
|
||||
height 34px
|
||||
left 44px
|
||||
width 0
|
||||
box-sizing border-box
|
||||
margin-left 0
|
||||
overflow ellipsis
|
||||
background-color $nav-tooltip-background-color
|
||||
color white
|
||||
line-height 34px
|
||||
border-top-right-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
transition width 0.15s
|
||||
pointer-events none
|
||||
.header-control
|
||||
position fixed
|
||||
width 0
|
||||
height 33px
|
||||
top inherit
|
||||
bottom inherit
|
||||
left 43px
|
||||
box-sizing border-box
|
||||
overflow hidden
|
||||
.header-control-button
|
||||
display none
|
||||
.header-control-button--show
|
||||
float right
|
||||
background-color $nav-tooltip-button-background
|
||||
&:hover
|
||||
background-color $nav-tooltip-button-background--hover
|
||||
.newFolderButton
|
||||
width 44px
|
||||
padding 0
|
||||
&:hover .newFolderButton-label
|
||||
width 100px
|
||||
.newFolderButton-icon
|
||||
text-align center
|
||||
width 44px
|
||||
.newFolderButton-label
|
||||
position fixed
|
||||
display inline-block
|
||||
height 34px
|
||||
left 44px
|
||||
width 0
|
||||
box-sizing border-box
|
||||
margin-left 0
|
||||
overflow ellipsis
|
||||
background-color $nav-tooltip-background-color
|
||||
color white
|
||||
line-height 34px
|
||||
border-top-right-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
transition width 0.15s
|
||||
pointer-events none
|
||||
font-size 14px
|
||||
text-align center
|
||||
.newFolderForm-nameInput
|
||||
position fixed
|
||||
width 100px
|
||||
120
browser/main/SideNav/SideNav.styl
Normal file
120
browser/main/SideNav/SideNav.styl
Normal file
@@ -0,0 +1,120 @@
|
||||
.root
|
||||
absolute top bottom left
|
||||
width 200px
|
||||
border-right solid 1px $nav-border-color
|
||||
background-color $nav-background-color
|
||||
user-select none
|
||||
color $nav-text-color
|
||||
|
||||
.top
|
||||
height 60px
|
||||
border-bottom solid 1px $nav-border-color
|
||||
|
||||
.top-menu
|
||||
navButtonColor()
|
||||
height 59px
|
||||
padding 0 10px
|
||||
font-size 14px
|
||||
width 100%
|
||||
text-align left
|
||||
|
||||
.top-menu-label
|
||||
margin-left 5px
|
||||
|
||||
.menu
|
||||
margin-top 15px
|
||||
|
||||
.menu-button
|
||||
navButtonColor()
|
||||
height 44px
|
||||
padding 0 10px
|
||||
font-size 14px
|
||||
width 100%
|
||||
text-align left
|
||||
|
||||
.menu-button--active
|
||||
@extend .menu-button
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
&:hover
|
||||
background-color $nav-active-background
|
||||
|
||||
.menu-button-label
|
||||
margin-left 5px
|
||||
|
||||
.repositoryList
|
||||
absolute left right bottom
|
||||
top 178px
|
||||
overflow-y auto
|
||||
|
||||
.repositoryList-empty
|
||||
padding 0 10px
|
||||
margin-top 15px
|
||||
line-height 24px
|
||||
color $nav-inactive-color
|
||||
|
||||
.navToggle
|
||||
display block
|
||||
position absolute
|
||||
right 5px
|
||||
bottom 5px
|
||||
border-radius 16.5px
|
||||
height 33px
|
||||
width 33px
|
||||
color $nav-inactive-text-color
|
||||
border none
|
||||
background-color transparent
|
||||
transition color background-color 0.15s
|
||||
&:hover
|
||||
background-color $nav-hover-background
|
||||
color $nav-inactive-text-color
|
||||
&:active
|
||||
background-color $nav-active-background
|
||||
color $nav-text-color
|
||||
|
||||
.root-folded
|
||||
@extend .root
|
||||
width 44px
|
||||
.top-menu
|
||||
width 44px
|
||||
text-align center
|
||||
&:hover .top-menu-label
|
||||
width 100px
|
||||
.top-menu-label
|
||||
position fixed
|
||||
display inline-block
|
||||
height 34px
|
||||
left 44px
|
||||
width 0
|
||||
margin-top -5px
|
||||
margin-left 0
|
||||
overflow hidden
|
||||
background-color $nav-tooltip-background-color
|
||||
color white
|
||||
line-height 34px
|
||||
border-top-right-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
transition width 0.15s
|
||||
pointer-events none
|
||||
.menu-button, .menu-button--active
|
||||
width 44px
|
||||
text-align center
|
||||
&:hover .menu-button-label
|
||||
width 100px
|
||||
.menu-button-label
|
||||
position fixed
|
||||
display inline-block
|
||||
height 34px
|
||||
left 44px
|
||||
width 0
|
||||
padding-left 0
|
||||
margin-top -9px
|
||||
margin-left 0
|
||||
overflow ellipsis
|
||||
background-color $nav-tooltip-background-color
|
||||
color white
|
||||
line-height 34px
|
||||
border-top-right-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
transition width 0.15s
|
||||
pointer-events none
|
||||
135
browser/main/SideNav/index.js
Normal file
135
browser/main/SideNav/index.js
Normal file
@@ -0,0 +1,135 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './SideNav.styl'
|
||||
import { openModal } from 'browser/lib/modal'
|
||||
import Preferences from '../modals/Preferences'
|
||||
import RepositorySection from './RepositorySection'
|
||||
import NewRepositoryModal from '../modals/NewRepositoryModal'
|
||||
|
||||
const electron = require('electron')
|
||||
const { remote } = electron
|
||||
const Menu = remote.Menu
|
||||
const MenuItem = remote.MenuItem
|
||||
|
||||
class SideNav extends React.Component {
|
||||
// TODO: should not use electron stuff v0.7
|
||||
handleMenuButtonClick (e) {
|
||||
var menu = new Menu()
|
||||
menu.append(new MenuItem({
|
||||
label: 'Preferences',
|
||||
click: (e) => this.handlePreferencesButtonClick(e)
|
||||
}))
|
||||
menu.append(new MenuItem({ type: 'separator' }))
|
||||
menu.append(new MenuItem({
|
||||
label: 'Mount Repository',
|
||||
click: (e) => this.handleNewRepositoryButtonClick(e)
|
||||
}))
|
||||
menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
|
||||
}
|
||||
|
||||
handleNewRepositoryButtonClick (e) {
|
||||
openModal(NewRepositoryModal)
|
||||
}
|
||||
|
||||
handlePreferencesButtonClick (e) {
|
||||
openModal(Preferences)
|
||||
}
|
||||
|
||||
handleHomeButtonClick (e) {
|
||||
let { router } = this.context
|
||||
router.push('/repositories')
|
||||
}
|
||||
|
||||
handleStarredButtonClick (e) {
|
||||
let { router } = this.context
|
||||
router.push('/starred')
|
||||
}
|
||||
|
||||
handleToggleButtonClick (e) {
|
||||
let { dispatch } = this.props
|
||||
|
||||
dispatch({
|
||||
type: 'TOGGLE_SIDENAV'
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let { repositories, dispatch, location, status } = this.props
|
||||
|
||||
let isFolded = !status.sideNavExpand
|
||||
let isHomeActive = location.pathname.match(/^\/home$/)
|
||||
let isStarredActive = location.pathname.match(/^\/starred$/)
|
||||
|
||||
let repositorieElements = repositories
|
||||
.map((repo) => {
|
||||
return <RepositorySection
|
||||
key={repo.key}
|
||||
repository={repo}
|
||||
dispatch={dispatch}
|
||||
isFolded={isFolded}
|
||||
/>
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
className='SideNav'
|
||||
styleName={isFolded ? 'root-folded' : 'root'}
|
||||
tabIndex='1'
|
||||
>
|
||||
<div styleName='top'>
|
||||
<button styleName='top-menu'
|
||||
onClick={(e) => this.handleMenuButtonClick(e)}
|
||||
>
|
||||
<i styleName='top-menu-icon' className='fa fa-navicon fa-fw'/>
|
||||
<span styleName='top-menu-label'>Menu</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div styleName='menu'>
|
||||
<button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
|
||||
onClick={(e) => this.handleHomeButtonClick(e)}
|
||||
>
|
||||
<i styleName='menu-button-icon'
|
||||
className='fa fa-home fa-fw'
|
||||
/>
|
||||
<span styleName='menu-button-label'>Home</span>
|
||||
</button>
|
||||
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
|
||||
onClick={(e) => this.handleStarredButtonClick(e)}
|
||||
>
|
||||
<i styleName='menu-button-icon'
|
||||
className='fa fa-star fa-fw'
|
||||
/>
|
||||
<span styleName='menu-button-label'>Starred</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div styleName='repositoryList'>
|
||||
{repositories.length > 0 ? repositorieElements : (
|
||||
<div styleName='repositoryList-empty'>No repository mount.</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button styleName='navToggle'
|
||||
onClick={(e) => this.handleToggleButtonClick(e)}
|
||||
>
|
||||
{isFolded
|
||||
? <i className='fa fa-angle-double-right'/>
|
||||
: <i className='fa fa-angle-double-left'/>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SideNav.contextTypes = {
|
||||
router: PropTypes.shape({})
|
||||
}
|
||||
|
||||
SideNav.propTypes = {
|
||||
dispatch: PropTypes.func,
|
||||
repositories: PropTypes.array
|
||||
}
|
||||
|
||||
export default CSSModules(SideNav, styles)
|
||||
Reference in New Issue
Block a user