public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-15 02:36:36 +00:00
Code Issues Releases Wiki Activity

refactor hotkeys

Browse Source
This commit is contained in:
Rokt33r
2015-07-19 15:06:36 +09:00
parent 16b60ada50
commit e9308bdd69
10 changed files with 233 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
browser/main/Components/BlueprintDeleteModal.jsx
View File

@@ -9,6 +9,7 @@ var BlueprintDeleteModal = React.createClass({
},
componentDidMount: function () {
this.unsubscribe = PlanetStore.listen(this.onListen)
React.findDOMNode(this.refs.submit).focus()
},
componentWillUnmount: function () {
this.unsubscribe()
@@ -23,12 +24,18 @@ var BlueprintDeleteModal = React.createClass({
stopPropagation: function (e) {
e.stopPropagation()
},
handleKeyDown: function (e) {
if ((e.keyCode === 13 && e.metaKey)) {
e.preventDefault()
this.submit()
}
},
submit: function () {
PlanetActions.deleteBlueprint(this.props.blueprint.id)
},
render: function () {
return (
<div onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
<div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
<div className='modal-header'>
<h1>Delete Blueprint</h1>
</div>
@@ -37,8 +44,8 @@ var BlueprintDeleteModal = React.createClass({
</div>
<div className='modal-footer'>
<div className='modal-control'>
<button onClick={this.props.close} className='btn-default'>Cancle</button>
<button onClick={this.submit} className='btn-primary'>Delete</button>
<button onClick={this.props.close} className='btn-default'>Cancel</button>
<button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
</div>
</div>
</div>

1
browser/main/Components/BlueprintForm.jsx
View File

@@ -94,6 +94,7 @@ var BlueprintForm = React.createClass({
handleKeyDown: function (e) {
if (e.keyCode === 13 && e.metaKey) {
this.submit()
e.stopPropagation()
}
},
render: function () {

2
browser/main/Components/ModalBase.jsx
View File

@@ -9,7 +9,7 @@ var ModalBase = React.createClass({
render: function () {
if (this.props.isOpen) {
return (
<div onClick={this.props.close} className='ModalBase'>
<div ref='modal' onClick={this.props.close} className='ModalBase'>
{this.props.children}
</div>
)

51
browser/main/Components/PlanetArticleDetail.jsx
View File

@@ -2,11 +2,6 @@ var React = require('react/addons')
var moment = require('moment')
var CodeViewer = require('../Components/CodeViewer')
var ModalBase = require('../Components/ModalBase')
var SnippetEditModal = require('../Components/SnippetEditModal')
var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
var BlueprintEditModal = require('../Components/BlueprintEditModal')
var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
var ForceUpdate = require('../Mixins/ForceUpdate')
var Markdown = require('../Mixins/Markdown')
@@ -14,31 +9,15 @@ var Markdown = require('../Mixins/Markdown')
var PlanetArticleDetail = React.createClass({
mixins: [ForceUpdate(60000), Markdown],
propTypes: {
article: React.PropTypes.object
article: React.PropTypes.object,
onOpenEditModal: React.PropTypes.func,
onOpenDeleteModal: React.PropTypes.func
},
getInitialState: function () {
return {
isEditModalOpen: false
}
},
openEditModal: function () {
this.setState({isEditModalOpen: true})
},
closeEditModal: function () {
this.setState({isEditModalOpen: false})
},
submitEditModal: function () {
this.setState({isEditModalOpen: false})
},
openDeleteModal: function () {
this.setState({isDeleteModalOpen: true})
},
closeDeleteModal: function () {
this.setState({isDeleteModalOpen: false})
},
submitDeleteModal: function () {
this.setState({isDeleteModalOpen: false})
},
render: function () {
var article = this.props.article
@@ -55,17 +34,9 @@ var PlanetArticleDetail = React.createClass({
<div className='viewer-header'>
<i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
<span className='control-group'>
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
<button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
</span>
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
<SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
</ModalBase>
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
<SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
</ModalBase>
</div>
<div className='viewer-body'>
<div className='viewer-detail'>
@@ -84,17 +55,9 @@ var PlanetArticleDetail = React.createClass({
<div className='viewer-header'>
<i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
<span className='control-group'>
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
<button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
</span>
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
<BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
</ModalBase>
<ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
<BlueprintDeleteModal blueprint={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
</ModalBase>
</div>
<div className='viewer-body'>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>

14
browser/main/Components/PlanetArticleList.jsx
View File

@@ -8,20 +8,10 @@ var Markdown = require('../Mixins/Markdown')
var PlanetArticleList = React.createClass({
mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
propTypes: {
articles: React.PropTypes.array,
onPressDown: React.PropTypes.func,
onPressUp: React.PropTypes.func
articles: React.PropTypes.array
},
handleKeyDown: function (e) {
switch (e.keyCode) {
case 38:
e.preventDefault()
this.props.onPressUp()
break
case 40:
e.preventDefault()
this.props.onPressDown()
}
e.preventDefault()
},
render: function () {
var articles = this.props.articles.map(function (article) {

10
browser/main/Components/PlanetHeader.jsx
View File

@@ -8,7 +8,8 @@ var PlanetHeader = React.createClass({
},
getInitialState: function () {
return {
isMenuDropDownOpen: false
isMenuDropDownOpen: false,
search: ''
}
},
componentDidMount: function () {
@@ -32,6 +33,11 @@ var PlanetHeader = React.createClass({
this.setState({search: e.target.value})
this.props.onSearchChange(e.target.value)
},
handleKeyDown: function (e) {
if (e.keyCode === 27) {
React.findDOMNode(this.refs.search).blur()
}
},
render: function () {
var currentPlanetName = this.props.currentPlanet.name
@@ -48,7 +54,7 @@ var PlanetHeader = React.createClass({
</div>
<span className='searchInput'>
<i className='fa fa-search'/>
<input onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
<input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
</span>
<a className='downloadBtn btn-primary'>Download Mac app</a>
</div>

29
browser/main/Components/PlanetNavigator.jsx
View File

@@ -1,8 +1,5 @@
var React = require('react/addons')
var ModalBase = require('../Components/ModalBase')
var LaunchModal = require('../Components/LaunchModal')
var PlanetNavigator = React.createClass({
propTypes: {
currentPlanet: React.PropTypes.shape({
@@ -10,31 +7,14 @@ var PlanetNavigator = React.createClass({
}),
currentUser: React.PropTypes.shape({
name: React.PropTypes.string
})
}),
onOpenLaunchModal: React.PropTypes.func
},
getInitialState: function () {
return {
isLaunchModalOpen: false
}
},
handleKeyDown: function (e) {
if (e.keyCode === 13 && e.metaKey) {
e.preventDefault()
this.openLaunchModal()
}
},
componentDidMount: function () {
document.addEventListener('keydown', this.handleKeyDown, false)
},
componentWillUnmount: function () {
document.removeEventListener('keydown', this.handleKeyDown, false)
},
openLaunchModal: function () {
this.setState({isLaunchModalOpen: true})
},
closeLaunchModal: function () {
this.setState({isLaunchModalOpen: false})
},
submitLaunchModal: function (ret) {
console.log(ret)
this.setState({isLaunchModalOpen: false})
@@ -42,12 +22,9 @@ var PlanetNavigator = React.createClass({
render: function () {
return (
<div className='PlanetNavigator'>
<button onClick={this.openLaunchModal} className='btn-primary btn-block'>
<button onClick={this.props.onOpenLaunchModal} className='btn-primary btn-block'>
<i className='fa fa-rocket fa-fw'/> Launch
</button>
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
</ModalBase>
<nav>
<a>
<i className='fa fa-home fa-fw'/> Home

13
browser/main/Components/SnippetDeleteModal.jsx
View File

@@ -9,6 +9,7 @@ var SnippetDeleteModal = React.createClass({
},
componentDidMount: function () {
this.unsubscribe = PlanetStore.listen(this.onListen)
React.findDOMNode(this.refs.submit).focus()
},
componentWillUnmount: function () {
this.unsubscribe()
@@ -23,12 +24,18 @@ var SnippetDeleteModal = React.createClass({
stopPropagation: function (e) {
e.stopPropagation()
},
handleKeyDown: function (e) {
if ((e.keyCode === 13 && e.metaKey)) {
e.preventDefault()
this.submit()
}
},
submit: function () {
PlanetActions.deleteSnippet(this.props.snippet.id)
},
render: function () {
return (
<div onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
<div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
<div className='modal-header'>
<h1>Delete Snippet</h1>
</div>
@@ -37,8 +44,8 @@ var SnippetDeleteModal = React.createClass({
</div>
<div className='modal-footer'>
<div className='modal-control'>
<button onClick={this.props.close} className='btn-default'>Cancle</button>
<button onClick={this.submit} className='btn-primary'>Delete</button>
<button onClick={this.props.close} className='btn-default'>Cancel</button>
<button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
</div>
</div>
</div>

1
browser/main/Components/SnippetForm.jsx
View File

@@ -86,6 +86,7 @@ var SnippetForm = React.createClass({
handleKeyDown: function (e) {
if (e.keyCode === 13 && e.metaKey) {
this.submit()
e.stopPropagation()
}
},
render: function () {