diff --git a/browser/main/HomePage.js b/browser/main/HomePage.js
index 2f6f2983..57094068 100644
--- a/browser/main/HomePage.js
+++ b/browser/main/HomePage.js
@@ -1,6 +1,6 @@
import React, { PropTypes} from 'react'
import { connect } from 'react-redux'
-import { CREATE_MODE, EDIT_MODE, IDLE_MODE, NEW } from 'boost/actions'
+import { CREATE_MODE, EDIT_MODE, IDLE_MODE, NEW, toggleTutorial } from 'boost/actions'
// import UserNavigator from './HomePage/UserNavigator'
import ArticleNavigator from './HomePage/ArticleNavigator'
import ArticleTopBar from './HomePage/ArticleTopBar'
@@ -32,9 +32,15 @@ class HomePage extends React.Component {
return
}
- let { status } = this.props
+ let { status, dispatch } = this.props
let { nav, top, list, detail } = this.refs
+ if (status.isTutorialOpen) {
+ dispatch(toggleTutorial())
+ e.preventDefault()
+ return
+ }
+
// Search inputがfocusされていたら大体のキー入力は無視される。
if (top.isInputFocused() && !e.metaKey) {
if (e.keyCode === 13 || e.keyCode === 27) top.escape()
diff --git a/browser/main/HomePage/ArticleDetail.js b/browser/main/HomePage/ArticleDetail.js
index cf861ff9..10c702c5 100644
--- a/browser/main/HomePage/ArticleDetail.js
+++ b/browser/main/HomePage/ArticleDetail.js
@@ -13,6 +13,65 @@ import TagSelect from 'boost/components/TagSelect'
import ModeSelect from 'boost/components/ModeSelect'
import activityRecord from 'boost/activityRecord'
+const BRAND_COLOR = '#18AF90'
+
+const editDeleteTutorialElement = (
+
+ Edit / Delete a post
+ press `e`/`d`
+
+
+
+
+)
+
+const tagSelectTutorialElement = (
+
+ Attach some tags here!
+
+
+
+
+)
+
+const modeSelectTutorialElement = (
+
+ Select code syntax!!
+
+
+
+
+)
+
function makeInstantArticle (article) {
return Object.assign({}, article)
}
@@ -95,7 +154,7 @@ export default class ArticleDetail extends React.Component {
}
renderIdle () {
- let { activeArticle, folders } = this.props
+ let { status, activeArticle, folders } = this.props
let tags = activeArticle.tags != null ? activeArticle.tags.length > 0
? activeArticle.tags.map(tag => {
@@ -140,6 +199,9 @@ export default class ArticleDetail extends React.Component {
Delete (d)
+
+ {status.isTutorialOpen ? editDeleteTutorialElement : null}
+
)
}
@@ -234,15 +296,14 @@ export default class ArticleDetail extends React.Component {
}
handleTitleKeyDown (e) {
- console.log(e.keyCode)
- if (e.keyCode === 9) {
+ if (e.keyCode === 9 && !e.shiftKey) {
e.preventDefault()
this.refs.mode.handleIdleSelectClick()
}
}
renderEdit () {
- let { folders } = this.props
+ let { folders, status } = this.props
let folderOptions = folders.map(folder => {
return (
@@ -266,7 +327,11 @@ export default class ArticleDetail extends React.Component {
tags={this.state.article.tags}
onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
/>
+
+ {status.isTutorialOpen ? tagSelectTutorialElement : null}
+
+
{
this.state.article.mode === 'markdown'
@@ -290,6 +355,8 @@ export default class ArticleDetail extends React.Component {
className='mode'
onBlur={() => this.handleModeSelectBlur()}
/>
+
+ {status.isTutorialOpen ? modeSelectTutorialElement : null}
{this.state.previewMode
diff --git a/browser/main/HomePage/ArticleNavigator.js b/browser/main/HomePage/ArticleNavigator.js
index 5f353e4a..8a5abd7e 100644
--- a/browser/main/HomePage/ArticleNavigator.js
+++ b/browser/main/HomePage/ArticleNavigator.js
@@ -9,6 +9,56 @@ import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
import remote from 'remote'
let userName = remote.getGlobal('process').env.USER
+const BRAND_COLOR = '#18AF90'
+
+const preferenceTutorialElement = (
+
+ Preference
+
+
+
+)
+
+const newPostTutorialElement = (
+
+ Create a new post!!
+ press `⌘ + Enter` or `a`
+
+
+
+
+
+)
+
+const newFolderTutorialElement = (
+
+ Create a new folder!!
+
+
+
+)
+
export default class ArticleNavigator extends React.Component {
handlePreferencesButtonClick (e) {
openModal(Preferences)
@@ -61,6 +111,9 @@ export default class ArticleNavigator extends React.Component {
Preferences
+
+ {status.isTutorialOpen ? preferenceTutorialElement : null}
+
@@ -68,6 +121,9 @@ export default class ArticleNavigator extends React.Component {
New Post
Create a new Post (⌘ + Enter or a)
+
+ {status.isTutorialOpen ? newPostTutorialElement : null}
+
@@ -77,6 +133,9 @@ export default class ArticleNavigator extends React.Component {
Create a new folder
+
+ {status.isTutorialOpen ? newFolderTutorialElement : null}
+
this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders
diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js
index a7391d20..24cda08e 100644
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -1,9 +1,32 @@
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import ExternalLink from 'boost/components/ExternalLink'
-import { setSearchFilter, clearSearch } from 'boost/actions'
-import { openModal } from 'boost/modal'
-import Tutorial from 'boost/components/modal/Tutorial'
+import { setSearchFilter, clearSearch, toggleTutorial } from 'boost/actions'
+
+const BRAND_COLOR = '#18AF90'
+
+const searchTutorialElement = (
+
+ Search some posts!!
+ {'- Search by tag : #{string}'}
+
+ {'- Search by folder : in:{folder_name}\n'}
+
+
+
+
+)
export default class ArticleTopBar extends React.Component {
constructor (props) {
@@ -66,10 +89,13 @@ export default class ArticleTopBar extends React.Component {
}
handleTutorialButtonClick (e) {
- openModal(Tutorial)
+ let { dispatch } = this.props
+
+ dispatch(toggleTutorial())
}
render () {
+ let { status } = this.props
return (
@@ -94,14 +120,34 @@ export default class ArticleTopBar extends React.Component {
- Search by folder : in:{'{folder_name}'}
+
+ {status.isTutorialOpen ? searchTutorialElement : null}
+
-
this.handleTutorialButtonClick(e)}>?How to use
+
this.handleTutorialButtonClick(e)}>?How to use
+
Boost official page
+
this.handleTutorialButtonClick(e)} className='clickJammer'/>
+
+ Also, you can open Finder
+ with pressing `Control` + `shift` + `tab`
+
+
+ Hope you to enjoy our app :D
+ Press any key or click to escape tutorial mode
+
+
+
+ ) : null}
+
Boost official page