mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-15 18:56:22 +00:00
Redesign SideNav & implement add repo func
This commit is contained in:
Rokt33r
175
browser/main/modal/NewRepositoryModal.js
Normal file
175
browser/main/modal/NewRepositoryModal.js
Normal file
@@ -0,0 +1,175 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import CSSModules from 'browser/lib/CSSModules'
|
||||
import styles from './NewRepositoryModal.styl'
|
||||
import linkState from 'browser/lib/linkState'
|
||||
import RepositoryManager from 'browser/lib/RepositoryManager'
|
||||
import store from 'browser/main/store'
|
||||
import actions from 'browser/main/actions'
|
||||
|
||||
const electron = require('electron')
|
||||
const remote = electron.remote
|
||||
|
||||
function browseFolder () {
|
||||
let dialog = remote.dialog
|
||||
|
||||
let defaultPath = remote.app.getHomeDir()
|
||||
return new Promise((resolve, reject) => {
|
||||
dialog.showOpenDialog({
|
||||
title: 'Select Directory',
|
||||
defaultPath,
|
||||
properties: ['openDirectory', 'createDirectory']
|
||||
}, function (targetPaths) {
|
||||
if (targetPaths == null) return resolve('')
|
||||
resolve(targetPaths[0])
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
class NewRepositoryModal extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
name: '',
|
||||
path: '',
|
||||
isPathSectionFocused: false,
|
||||
error: null,
|
||||
isBrowsingPath: false
|
||||
}
|
||||
}
|
||||
|
||||
handleCloseButtonClick (e) {
|
||||
this.props.close()
|
||||
}
|
||||
|
||||
handlePathFocus (e) {
|
||||
this.setState({
|
||||
isPathSectionFocused: true
|
||||
})
|
||||
}
|
||||
|
||||
handlePathBlur (e) {
|
||||
if (e.relatedTarget !== this.refs.pathInput && e.relatedTarget !== this.refs.browseButton) {
|
||||
this.setState({
|
||||
isPathSectionFocused: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleBrowseButtonClick (e) {
|
||||
this.setState({
|
||||
isBrowsingPath: true
|
||||
}, () => {
|
||||
browseFolder()
|
||||
.then((targetPath) => {
|
||||
this.setState({
|
||||
path: targetPath,
|
||||
isBrowsingPath: false
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('BrowseFAILED')
|
||||
console.error(err)
|
||||
this.setState({
|
||||
isBrowsingPath: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleConfirmButtonClick (e) {
|
||||
let targetPath = this.state.path
|
||||
let name = this.state.name
|
||||
|
||||
RepositoryManager
|
||||
.addRepo({
|
||||
targetPath,
|
||||
name
|
||||
})
|
||||
.then((newRepo) => {
|
||||
store.dispatch(actions.addRepo(newRepo))
|
||||
this.props.close()
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
this.setState({
|
||||
error: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='NewRepositoryModal'
|
||||
styleName='root'
|
||||
>
|
||||
<div styleName='header'>
|
||||
<div styleName='header-title'>New Repository</div>
|
||||
<button styleName='header-closeButton'
|
||||
onClick={(e) => this.handleCloseButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-times'/>
|
||||
</button>
|
||||
</div>
|
||||
<div styleName='body'>
|
||||
<div styleName='body-section'>
|
||||
<div styleName='body-section-label'>Repository Name</div>
|
||||
<input styleName='body-section-input'
|
||||
ref='nameInput'
|
||||
valueLink={this.linkState('name')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div styleName='body-section'>
|
||||
<div styleName='body-section-label'>Repository Path</div>
|
||||
<div styleName={!this.state.isPathSectionFocused ? 'body-section-path' : 'body-section-path--focus'}>
|
||||
<input styleName='body-section-path-input'
|
||||
valueLink={this.linkState('path')}
|
||||
style={styles.body_section_path_input}
|
||||
onFocus={(e) => this.handlePathFocus(e)}
|
||||
onBlur={(e) => this.handlePathBlur(e)}
|
||||
disabled={this.state.isBrowsingPath}
|
||||
/>
|
||||
<button styleName='body-section-path-button'
|
||||
onClick={(e) => this.handleBrowseButtonClick(e)}
|
||||
onFocus={(e) => this.handlePathFocus(e)}
|
||||
onBlur={(e) => this.handlePathBlur(e)}
|
||||
disabled={this.state.isBrowsingPath}
|
||||
>
|
||||
...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
this.state.error != null && (
|
||||
<div styleName='body-error'>
|
||||
{this.state.error}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<div styleName='footer'>
|
||||
<button styleName='footer-cancelButton'
|
||||
onClick={(e) => this.handleCloseButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-times'/> Cancel
|
||||
</button>
|
||||
<button styleName='footer-confirmButton'
|
||||
onClick={(e) => this.handleConfirmButtonClick(e)}
|
||||
>
|
||||
<i className='fa fa-check'/> Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
NewRepositoryModal.propTypes = {
|
||||
close: PropTypes.func
|
||||
}
|
||||
|
||||
NewRepositoryModal.prototype.linkState = linkState
|
||||
|
||||
export default CSSModules(NewRepositoryModal, styles)
|
||||
133
browser/main/modal/NewRepositoryModal.styl
Normal file
133
browser/main/modal/NewRepositoryModal.styl
Normal file
@@ -0,0 +1,133 @@
|
||||
$modal-width = 550px
|
||||
$modal-header-color = #F2F2F2
|
||||
$body-button-background-color = #2BAC8F
|
||||
|
||||
.root
|
||||
modal()
|
||||
width $modal-width
|
||||
height 310px
|
||||
|
||||
.header
|
||||
height 50px
|
||||
background-color $modal-header-color
|
||||
|
||||
.header-title
|
||||
font-size 24px
|
||||
line-height 50px
|
||||
padding-left 15px
|
||||
|
||||
.header-closeButton
|
||||
position absolute
|
||||
top 8.5px
|
||||
right 8.5px
|
||||
width 33px
|
||||
height 33px
|
||||
font-size 20px
|
||||
background-color transparent
|
||||
border none
|
||||
color #AAA
|
||||
&:hover
|
||||
color #4D4D4D
|
||||
|
||||
.body
|
||||
absolute left right
|
||||
top 50px
|
||||
bottom 50px
|
||||
padding 35px 0
|
||||
|
||||
.body-section
|
||||
height 33px
|
||||
margin-bottom 15px
|
||||
position relative
|
||||
|
||||
.body-section-label
|
||||
absolute top bottom left
|
||||
width 175px
|
||||
text-align right
|
||||
line-height 33px
|
||||
padding-right 15px
|
||||
|
||||
.body-section-input
|
||||
absolute top bottom
|
||||
left 175px
|
||||
width 315px
|
||||
padding 0 10px
|
||||
border $default-border
|
||||
border-radius 5px
|
||||
outline none
|
||||
&:focus
|
||||
border $active-border
|
||||
|
||||
.body-section-path
|
||||
absolute top bottom
|
||||
left 175px
|
||||
width 315px
|
||||
padding 0 10px
|
||||
border $default-border
|
||||
border-radius 5px
|
||||
outline none
|
||||
overflow hidden
|
||||
|
||||
.body-section-path--focus
|
||||
@extend .body-section-path
|
||||
border $active-border
|
||||
|
||||
.body-section-path-input
|
||||
absolute top left bottom
|
||||
width 265px
|
||||
border none
|
||||
outline none
|
||||
padding 0 10px
|
||||
|
||||
.body-section-path-button
|
||||
absolute top right bottom
|
||||
width 50px
|
||||
border none
|
||||
border-left $default-border
|
||||
outline none
|
||||
color white
|
||||
background-color $body-button-background-color
|
||||
transition 0.15s
|
||||
&:hover
|
||||
background-color lighten($body-button-background-color, 7%)
|
||||
&:disabled
|
||||
background-color lighten(gray, 15%)
|
||||
|
||||
.body-error
|
||||
height 33px
|
||||
margin 35px auto 0
|
||||
width 320px
|
||||
border-radius 5px
|
||||
text-align center
|
||||
line-height 33px
|
||||
color $danger-color
|
||||
background-color $danger-lighten-color
|
||||
|
||||
.footer
|
||||
absolute left right bottom
|
||||
height 50px
|
||||
|
||||
.footer-cancelButton
|
||||
position absolute
|
||||
height 33px
|
||||
right 85.5px
|
||||
width 72px
|
||||
top 8.5px
|
||||
border-radius 5px
|
||||
border $default-border
|
||||
background-color darken(white, 0.03)
|
||||
&:hover
|
||||
background-color white
|
||||
|
||||
.footer-confirmButton
|
||||
position absolute
|
||||
height 33px
|
||||
right 8.5px
|
||||
width 72px
|
||||
top 8.5px
|
||||
color white
|
||||
border-radius 5px
|
||||
border none
|
||||
background-color #2BAC8F
|
||||
&:hover
|
||||
background-color lighten($body-button-background-color, 7%)
|
||||
Reference in New Issue
Block a user