mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
tutorial 追加
This commit is contained in:
Rokt33r
@@ -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()
|
||||
|
||||
@@ -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 = (
|
||||
<svg width='300' height='500' className='tutorial'>
|
||||
<text x='50' y='220' fill={BRAND_COLOR} fontSize='24'>Edit / Delete a post</text>
|
||||
<text x='90' y='245' fill={BRAND_COLOR} fontSize='18'>press `e`/`d`</text>
|
||||
|
||||
<svg x='150' y='35'>
|
||||
<path fill='white' d='M87.5,93.6c-16.3-5.7-30.6-16.7-39.9-31.4c-5.5-8.7-9-19.1-3.4-28.7c4.8-8.2,13.6-12.8,22.4-15.3
|
||||
c15.7-4.5,34.4-6.2,49.7,0.4c17.3,7.4,25.6,26.3,25.7,44.4c0.1,10.4-3.4,20.9-13.1,26c-8.6,4.5-19,4.1-28.4,3.7
|
||||
c-1.9-0.1-1.9,2.9,0,3c9.3,0.4,19.2,0.6,27.9-3.2c8.5-3.7,13.8-11.2,15.7-20.2c3.6-17.9-2.9-40.2-17.7-51.4
|
||||
C110.8,9.1,89,9.9,70.8,14c-17.9,4-37.4,16.8-31.3,37.9C45.6,73,66.7,89.5,86.7,96.5C88.6,97.1,89.4,94.2,87.5,93.6L87.5,93.6z'/>
|
||||
<path fill='white' d='M11.9,89.7c14.8-3.4,29.7-6,44.8-7.9c-0.5-0.6-1-1.3-1.4-1.9c-2.6,6.3-2.8,12.7-0.7,19.2
|
||||
c0.6,1.8,3.5,1,2.9-0.8c-1.9-6-1.7-11.8,0.7-17.6c0.3-0.8-0.5-2-1.4-1.9c-15.3,1.9-30.6,4.5-45.6,8C9.3,87.3,10.1,90.2,11.9,89.7
|
||||
L11.9,89.7z'/>
|
||||
<path fill='white' d='M48.6,81.5c-9.4,10.4-17,22.3-22.2,35.3c-5.5,13.6-9.3,28.9-6,43.4c0.4,1.9,3.3,1.1,2.9-0.8
|
||||
c-3.2-14,0.7-28.8,6-41.8c5.1-12.5,12.4-24,21.5-34C52,82.2,49.9,80,48.6,81.5L48.6,81.5z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const tagSelectTutorialElement = (
|
||||
<svg width='500' height='500' className='tutorial'>
|
||||
<text x='155' y='50' fill={BRAND_COLOR} fontSize='24'>Attach some tags here!</text>
|
||||
|
||||
<svg x='0' y='-15'>
|
||||
<path fill='white' d='M15.5,22.2c77.8-0.7,155.6-1.3,233.5-2c22.2-0.2,44.4-0.4,66.6-0.6c1.9,0,1.9-3,0-3
|
||||
c-77.8,0.7-155.6,1.3-233.5,2c-22.2,0.2-44.4,0.4-66.6,0.6C13.6,19.2,13.6,22.2,15.5,22.2L15.5,22.2z'/>
|
||||
<path fill='white' d='M130.8,25c-5.4,6.8-10.3,14-14.6,21.5c-0.8,1.4,1.2,3.2,2.4,1.8c1-1.2,2-2.4,3.1-3.7c1.2-1.5-0.9-3.6-2.1-2.1
|
||||
c-1,1.2-2,2.4-3.1,3.7c0.8,0.6,1.6,1.2,2.4,1.8c4.2-7.3,8.9-14.3,14.2-20.9C134.1,25.6,132,23.4,130.8,25L130.8,25z'/>
|
||||
<path fill='white' d='M132.6,22.1c8.4,5.9,16.8,11.9,25.2,17.8c1.6,1.1,3.1-1.5,1.5-2.6c-8.4-5.9-16.8-11.9-25.2-17.8
|
||||
C132.5,18.4,131,21,132.6,22.1L132.6,22.1z'/>
|
||||
<path fill='white' d='M132.9,18.6c0.4,6.7-0.7,13.3-3.5,19.3c-1.5,3.1-3.9,6.4-3.1,10c0.7,3.1,3.4,4.4,6.2,5.5
|
||||
c5.1,2.1,10.5,3.1,16.1,3.2c1.9,0,1.9-3,0-3c-4.7-0.1-9.2-0.8-13.6-2.4c-3-1.1-6.2-1.9-5.4-6.6c0.4-2,2-4.1,2.8-5.9
|
||||
c2.9-6.3,4-13.1,3.6-20.1C135.8,16.7,132.8,16.7,132.9,18.6L132.9,18.6z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const modeSelectTutorialElement = (
|
||||
<svg width='500' height='500' className='tutorial'>
|
||||
<text x='195' y='130' fill={BRAND_COLOR} fontSize='24'>Select code syntax!!</text>
|
||||
|
||||
<svg x='300' y='0'>
|
||||
<path fill='white' d='M99.9,58.8c-14.5-0.5-29-2.2-43.1-5.6c-12.3-2.9-27.9-6.4-37.1-15.5C7.9,26,28.2,18.9,37,16.7
|
||||
c13.8-3.5,28.3-4.7,42.4-5.8c29.6-2.2,59.3-1.7,89-1c3,0.1,7.5-0.6,10.2,0.6c3.1,1.4,3.1,5.3,3.3,8.1c0.3,5.2-0.2,10.7-2.4,15.4
|
||||
c-4.4,9.6-18.4,14.7-27.5,18.1c-27.1,10.1-56.7,12.8-85.3,15.6c-1.9,0.2-1.9,3.2,0,3c29.3-2.9,59.8-5.6,87.5-16.2
|
||||
c9.6-3.7,22.8-8.7,27.7-18.4c2.3-4.6,3.2-9.9,3.2-15c0-3.6,0-9.4-2.9-12c-1.9-1.7-4.7-1.8-7.1-2c-4.8-0.2-9.6-0.2-14.4-0.3
|
||||
c-8.7-0.2-17.5-0.3-26.2-0.4C116.7,6.3,99,6.5,81.3,7.8c-15.8,1.1-32.1,2.3-47.4,6.6c-7.7,2.2-22.1,6.9-20.9,17.4
|
||||
c0.6,5.4,5.6,9.4,9.9,12.1c6.7,4.3,14.4,6.9,22,9.2c17.8,5.4,36.4,8,54.9,8.6C101.8,61.8,101.8,58.8,99.9,58.8L99.9,58.8z'/>
|
||||
<path fill='white' d='M11.1,67.8c9.2-6.1,18.6-11.9,28.2-17.2c-0.7-0.3-1.5-0.6-2.2-0.9c0.9,5.3,0.7,10.3-0.5,15.5
|
||||
c-0.4,1.9,2.4,2.7,2.9,0.8c1.4-5.7,1.5-11.3,0.5-17.1c-0.2-1-1.4-1.3-2.2-0.9c-9.7,5.3-19.1,11.1-28.2,17.2
|
||||
C8,66.3,9.5,68.9,11.1,67.8L11.1,67.8z'/>
|
||||
<path fill='white' d='M31.5,52.8C23.4,68.9,0.2,83.2,7.9,104c0.7,1.8,3.6,1,2.9-0.8C3.6,83.7,26.4,69.7,34.1,54.3
|
||||
C35,52.6,32.4,51.1,31.5,52.8L31.5,52.8z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
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 {
|
||||
<i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete (d)</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{status.isTutorialOpen ? editDeleteTutorialElement : null}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
</div>
|
||||
|
||||
<div className='right'>
|
||||
{
|
||||
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}
|
||||
</div>
|
||||
|
||||
{this.state.previewMode
|
||||
|
||||
@@ -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 = (
|
||||
<svg width='300' height='300' className='tutorial'>
|
||||
<text x='15' y='30' fill={BRAND_COLOR} fontSize='24'>Preference</text>
|
||||
<svg x='-30' y='-270' width='400' height='400'>
|
||||
<path fill='white' d='M165.9,297c5.3,0,10.6,0.1,15.8,0.1c3.3,0,7.7,0.8,10.7-1c2.3-1.4,3.1-4,4.5-6.2c3.5-5.5,9.6-5.2,14.6-1.9
|
||||
c4.6,3.1,8.7,8,8.4,13.8c-0.3,5.2-3.3,10.1-6.1,14.3c-3.1,4.7-6.6,7-12.2,7.9c-5.2,0.8-11.7,1.6-15.4-3
|
||||
c-6.6-8.2,2.1-20.5,7.4-27.1c6.5-8.1,20.1-14,26.4-2.1c5.4,10.3-3.1,21.7-13,24.8c-5.7,1.8-11,0.9-16.2-1.9c-2-1.1-5-2.6-6.6-4.4
|
||||
c-3.9-4.3-0.3-8.2,2.5-11.2c1.3-1.4-0.8-3.6-2.1-2.1c-2.7,2.9-5.8,6.6-5.1,10.9c0.7,4.4,5.6,6.9,9,8.9c8.6,5.1,18.7,4.8,26.8-1.2
|
||||
c7.3-5.4,11.6-15,8-23.7c-3.3-8.1-11.7-11.8-20-9c-12.5,4.1-33.7,33.5-15.9,43.1c6.8,3.7,19.8,1.8,25.3-3.6
|
||||
c6.1-5.8,12.1-17.2,9.5-25.7c-2.6-8.4-13.7-17-22.6-13.3c-1.6,0.7-3,1.7-4.1,3c-1.6,1.9-2.2,5.1-4.1,6.6c-3.1,2.4-10.1,1-13.7,1
|
||||
c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const newPostTutorialElement = (
|
||||
<svg width='900' height='900' className='tutorial'>
|
||||
<text x='290' y='155' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
|
||||
<text x='300' y='180' fill={BRAND_COLOR} fontSize='16'>press `⌘ + Enter` or `a`</text>
|
||||
<svg x='130' y='-20' width='400' height='400'>
|
||||
<path fill='white' d='M56.2,132.5c11.7-2.9,23.9-6,36.1-4.1c8.7,1.4,16.6,5.5,23.7,10.5c13.3,9.4,24.5,21.5,40.2,27
|
||||
c1.8,0.6,2.6-2.3,0.8-2.9c-17.1-6-28.9-20.3-44-29.7c-7-4.4-14.8-7.4-23-8.2c-11.7-1.1-23.3,1.7-34.5,4.5
|
||||
C53.6,130.1,54.4,133,56.2,132.5L56.2,132.5 z'/>
|
||||
</svg>
|
||||
<svg x='130' y='-120' width='400' height='400'>
|
||||
<path fill='white' d='M82.6,218c-7.7,4.5-15.3,9.3-22.7,14.3c-1,0.7-0.9,2.4,0.4,2.7c6.2,1.8,11.5,4.8,16.2,9.2
|
||||
c1.4,1.3,3.5-0.8,2.1-2.1c-5.1-4.8-10.9-8.1-17.6-10c0.1,0.9,0.2,1.8,0.4,2.7c7.4-5,15-9.8,22.7-14.3
|
||||
C85.7,219.7,84.2,217.1,82.6,218L82.6,218z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const newFolderTutorialElement = (
|
||||
<svg width='800' height='500' className='tutorial'>
|
||||
<text x='145' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
|
||||
<svg x='115' y='-10' width='300' height='400'>
|
||||
<path fill='white' d='M36.6,3.7C28.8,8.2,21.3,13,13.9,18c-1,0.7-0.9,2.4,0.4,2.7c6.2,1.8,11.5,4.8,16.2,9.2
|
||||
c1.4,1.3,3.5-0.8,2.1-2.1c-5.1-4.8-10.9-8.1-17.6-10c0.1,0.9,0.2,1.8,0.4,2.7c7.4-5,15-9.8,22.7-14.3C39.7,5.3,38.2,2.7,36.6,3.7
|
||||
L36.6,3.7z'/>
|
||||
<path fill='white' d='M16.8,21.5c13.3-6.9,29.5-7,42.6,0.6c5.6,3.2,10.4,7.7,14.1,13c3.8,5.4,10.3,16.2,2.2,20.6
|
||||
c-1.2,0.7-2.5,1.2-3.9,1.6c-1.1,0.4-2.3,0.5-3.4,0.5c-1.3-1.4-2.6-2.8-3.9-4.2c-0.2-4.6,7.5-6,10.5-5.8
|
||||
c7.4,0.7,13.7,6.2,18.4,11.6c9.4,10.7,14.7,24.3,15.6,38.5c0.1,1.9,3.1,1.9,3,0c-0.9-15.5-6.9-30.4-17.5-41.8
|
||||
c-6.8-7.3-25.8-19.1-32.3-4.8c-1.9,4.1,0.3,8.5,4.8,9.4c4.6,0.8,11.6-1.8,14.3-5.7c3.6-5.3-0.1-12.8-2.8-17.6
|
||||
c-3.4-6.1-8.2-11.3-13.8-15.4C50.2,11.6,31,10.9,15.3,19C13.6,19.8,15.1,22.4,16.8,21.5L16.8,21.5z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default class ArticleNavigator extends React.Component {
|
||||
handlePreferencesButtonClick (e) {
|
||||
openModal(Preferences)
|
||||
@@ -61,6 +111,9 @@ export default class ArticleNavigator extends React.Component {
|
||||
<i className='fa fa-fw fa-chevron-down'/>
|
||||
<span className='tooltip'>Preferences</span>
|
||||
</button>
|
||||
|
||||
{status.isTutorialOpen ? preferenceTutorialElement : null}
|
||||
|
||||
</div>
|
||||
|
||||
<div className='controlSection'>
|
||||
@@ -68,6 +121,9 @@ export default class ArticleNavigator extends React.Component {
|
||||
New Post
|
||||
<span className='tooltip'>Create a new Post (⌘ + Enter or a)</span>
|
||||
</button>
|
||||
|
||||
{status.isTutorialOpen ? newPostTutorialElement : null}
|
||||
|
||||
</div>
|
||||
|
||||
<div className='folders'>
|
||||
@@ -77,6 +133,9 @@ export default class ArticleNavigator extends React.Component {
|
||||
<i className='fa fa-fw fa-plus'/>
|
||||
<span className='tooltip'>Create a new folder</span>
|
||||
</button>
|
||||
|
||||
{status.isTutorialOpen ? newFolderTutorialElement : null}
|
||||
|
||||
</div>
|
||||
<div className='folderList'>
|
||||
<button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>
|
||||
|
||||
@@ -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 = (
|
||||
<svg width='750' height='120' className='tutorial'>
|
||||
<text x='450' y='33' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
|
||||
<text x='450' y='60' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
|
||||
<text x='450' y='85' fill={BRAND_COLOR} fontSize='18'>
|
||||
{'- Search by folder : in:{folder_name}\n'}</text>
|
||||
|
||||
<svg width='500' height='300'>
|
||||
<path fill='white' d='M54.5,51.5c-12.4,3.3-27.3-1.4-38.4-7C11.2,42,5,38.1,5.6,31.8c0.7-6.9,8.1-11.2,13.8-13.7
|
||||
c12.3-5.4,26.4-6.8,39.7-7.7C72.4,9.6,85.7,9.7,99,9.8c55.2,0.3,110.4,2.2,165.5-1.5C291,6.5,317.7,3.8,344.1,7
|
||||
c12.8,1.6,25.8,4.4,37.5,10c1.2,0.6,2.4,1.1,3.5,1.8c2.4,1.4,3.2,1.5,3.3,4.5c0.1,3.6-2.3,5.9-4.8,8.3c-3.9,3.8-8.6,6.8-13.5,9.2
|
||||
c-12.6,6-26.5,7.2-40.3,7.7c-13.7,0.5-27.5,0.6-41.2,1.1c-27.7,0.9-55.3,2.2-82.9,4c-30.8,2-61.6,4.5-92.3,7.6
|
||||
c-15.4,1.5-30.8,3.7-46.3,4.9c-13.6,1.1-30.7,1.5-41.8-7.8c-1.5-1.2-3.6,0.9-2.1,2.1c8.9,7.5,21.4,9.2,32.7,9.2
|
||||
c15.3,0,30.6-2.6,45.8-4.2c31.3-3.3,62.7-6,94.2-8.1c30.9-2.1,61.8-3.7,92.8-4.7c15.7-0.5,31.4-0.5,47-1.3
|
||||
c13.1-0.7,26.3-2.7,38.1-8.9c4.4-2.3,8.5-5.1,12-8.6c2.8-2.8,7.3-7.3,6.4-11.7c-0.8-4.3-6.4-6.3-9.8-7.9
|
||||
c-5.6-2.6-11.4-4.6-17.3-6.2c-28.3-7.5-58.1-5.6-87-3.6c-62.3,4.4-124.5,2.6-187,2.4c-16.4,0-32.8,0-49,2.4
|
||||
C29.9,11,13.4,13.8,5.5,24.6c-7.3,10,0.7,18.4,9.8,22.9c11.9,5.8,26.9,10.4,40,7C57.2,53.9,56.4,51,54.5,51.5L54.5,51.5z'/>
|
||||
<path fill='white' d='M446.5,21.4c-9.1-1.6-18.1-3.5-27.4-3.5c-10.2,0-20.4,1.4-30.5,2.8c-1.9,0.3-1.9,3.3,0,3
|
||||
c9.5-1.3,19.1-2.6,28.8-2.7c9.6-0.2,18.9,1.7,28.3,3.4C447.6,24.7,448.4,21.8,446.5,21.4L446.5,21.4z'/>
|
||||
</svg>
|
||||
</svg>
|
||||
)
|
||||
|
||||
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 (
|
||||
<div className='ArticleTopBar'>
|
||||
<div className='left'>
|
||||
@@ -94,14 +120,34 @@ export default class ArticleTopBar extends React.Component {
|
||||
- Search by folder : in:{'{folder_name}'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{status.isTutorialOpen ? searchTutorialElement : null}
|
||||
|
||||
</div>
|
||||
<div className='right'>
|
||||
<button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span></button>
|
||||
<button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
|
||||
</button>
|
||||
<ExternalLink className='logo' href='http://b00st.io'>
|
||||
<img src='../../resources/favicon-230x230.png' width='44' height='44'/>
|
||||
<span className='tooltip'>Boost official page</span>
|
||||
</ExternalLink>
|
||||
</div>
|
||||
|
||||
{status.isTutorialOpen ? (
|
||||
<div className='tutorial'>
|
||||
<div onClick={e => this.handleTutorialButtonClick(e)} className='clickJammer'/>
|
||||
<svg width='500' height='250' className='finder'>
|
||||
<text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder</text>
|
||||
<text x='120' y='55' fontSize='18' fill={BRAND_COLOR}>with pressing `Control` + `shift` + `tab`</text>
|
||||
</svg>
|
||||
<svg width='450' className='global'>
|
||||
<text x='100' y='45' fontSize='24' fill={BRAND_COLOR}>Hope you to enjoy our app :D</text>
|
||||
<text x='50' y='75' fontSize='18' fill={BRAND_COLOR}>Press any key or click to escape tutorial mode</text>
|
||||
</svg>
|
||||
<div className='back'></div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -85,6 +85,10 @@ iptFocusBorderColor = #369DCD
|
||||
&.edit
|
||||
.detailInfo
|
||||
.left
|
||||
&>.tutorial
|
||||
position fixed
|
||||
z-index 35
|
||||
font-style italic
|
||||
.folder
|
||||
border none
|
||||
width 150px
|
||||
@@ -99,6 +103,8 @@ iptFocusBorderColor = #369DCD
|
||||
position relative
|
||||
margin-top 5px
|
||||
noSelect()
|
||||
z-index 30
|
||||
background-color #E6E6E6
|
||||
.tagItem
|
||||
background-color brandColor
|
||||
border-radius 2px
|
||||
@@ -155,7 +161,13 @@ iptFocusBorderColor = #369DCD
|
||||
.detailBody
|
||||
.detailPanel
|
||||
&>.header
|
||||
&>.tutorial
|
||||
fixed right
|
||||
z-index 35
|
||||
font-style italic
|
||||
.mode
|
||||
position relative
|
||||
z-index 30
|
||||
absolute top bottom right
|
||||
display block
|
||||
height 33px
|
||||
@@ -226,6 +238,10 @@ iptFocusBorderColor = #369DCD
|
||||
outline none
|
||||
&.idle
|
||||
.detailInfo
|
||||
&>.tutorial
|
||||
fixed top right
|
||||
z-index 35
|
||||
font-style italic
|
||||
.left
|
||||
right 99px
|
||||
.info
|
||||
@@ -248,14 +264,17 @@ iptFocusBorderColor = #369DCD
|
||||
span.noTags
|
||||
color noTagsColor
|
||||
.right
|
||||
z-index 30
|
||||
button
|
||||
border-radius 16.5px
|
||||
cursor pointer
|
||||
height 33px
|
||||
width 33px
|
||||
border none
|
||||
margin-right 5px
|
||||
font-size 18px
|
||||
color inactiveTextColor
|
||||
background-color transparent
|
||||
background-color darken(white, 5%)
|
||||
padding 0
|
||||
.tooltip
|
||||
tooltip()
|
||||
@@ -266,7 +285,7 @@ iptFocusBorderColor = #369DCD
|
||||
margin-top 25px
|
||||
margin-left -73px
|
||||
&:hover
|
||||
color inherit
|
||||
color textColor
|
||||
.tooltip
|
||||
opacity 1
|
||||
.detailBody
|
||||
|
||||
@@ -21,6 +21,16 @@ articleNavBgColor = #353535
|
||||
color white
|
||||
padding-left 20px
|
||||
margin-top 3px
|
||||
.tutorial
|
||||
position fixed
|
||||
z-index 35
|
||||
top 0
|
||||
left 0
|
||||
pointer-event none
|
||||
font-style italic
|
||||
transition 0.1s
|
||||
&.hide
|
||||
opacity 0
|
||||
.settingBtn
|
||||
width 22px
|
||||
height 22px
|
||||
@@ -33,6 +43,7 @@ articleNavBgColor = #353535
|
||||
padding 0
|
||||
background-color transparent
|
||||
border 1px solid white
|
||||
z-index 31
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-top -5px
|
||||
@@ -47,7 +58,16 @@ articleNavBgColor = #353535
|
||||
height 88px
|
||||
padding 22px 15px
|
||||
margin-bottom 44px
|
||||
.tutorial
|
||||
fixed top left
|
||||
z-index 35
|
||||
pointer-event none
|
||||
font-style italic
|
||||
transition 0.1s
|
||||
&.hide
|
||||
opacity 0
|
||||
.newPostBtn
|
||||
position relative
|
||||
border none
|
||||
background-color brandColor
|
||||
color white
|
||||
@@ -56,6 +76,7 @@ articleNavBgColor = #353535
|
||||
border-radius 5px
|
||||
font-size 20px
|
||||
transition 0.1s
|
||||
z-index 30
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-left 48px
|
||||
@@ -70,6 +91,8 @@ articleNavBgColor = #353535
|
||||
padding-bottom 5px
|
||||
margin-bottom 10px
|
||||
clearfix()
|
||||
position relative
|
||||
z-index 30
|
||||
.title
|
||||
float left
|
||||
padding-left 10px
|
||||
@@ -103,6 +126,12 @@ articleNavBgColor = #353535
|
||||
absolute bottom
|
||||
top 200px
|
||||
width 100%
|
||||
.header
|
||||
.tutorial
|
||||
position fixed
|
||||
z-index 35px
|
||||
top 200px
|
||||
font-style italic
|
||||
.folderList
|
||||
absolute bottom
|
||||
top 38px
|
||||
|
||||
@@ -15,8 +15,32 @@ infoBtnActiveBgColor = #3A3A3A
|
||||
left 200px
|
||||
height 60px
|
||||
background-color bgColor
|
||||
&>.tutorial
|
||||
.clickJammer
|
||||
fixed top left bottom right
|
||||
z-index 40
|
||||
background transparent
|
||||
.global
|
||||
fixed bottom right
|
||||
height 100px
|
||||
z-index 35
|
||||
.finder
|
||||
fixed bottom right
|
||||
height 250px
|
||||
left 50%
|
||||
margin-left -250px
|
||||
z-index 35
|
||||
.back
|
||||
fixed top left bottom right
|
||||
z-index 20
|
||||
background-color transparentify(black, 80%)
|
||||
&>.left
|
||||
float left
|
||||
&>.tutorial
|
||||
fixed top
|
||||
left 200px
|
||||
z-index 36
|
||||
font-style italic
|
||||
&>.search
|
||||
position relative
|
||||
float left
|
||||
@@ -28,6 +52,7 @@ infoBtnActiveBgColor = #3A3A3A
|
||||
transition 0.1s
|
||||
font-size 16px
|
||||
border 1px solid transparent
|
||||
z-index 30
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-left -24px
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
var fs = require('fs')
|
||||
var path = require('path')
|
||||
|
||||
var rootUrl = process.cwd()
|
||||
if (rootUrl === '/') rootUrl = require('remote').require('app').getAppPath()
|
||||
var url = path.resolve(rootUrl, './submodules/ace/src-min')
|
||||
console.log(url)
|
||||
|
||||
module.exports = fs.readdirSync(url)
|
||||
.filter(function (file) {
|
||||
return file.match(/^mode-/)
|
||||
})
|
||||
.map(function (file) {
|
||||
var match = file.match(/^mode-([a-z0-9\_]+).js$/)
|
||||
return match[1]
|
||||
})
|
||||
@@ -11,6 +11,7 @@ export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
|
||||
export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER'
|
||||
export const SET_TAG_FILTER = 'SET_TAG_FILTER'
|
||||
export const CLEAR_SEARCH = 'CLEAR_SEARCH'
|
||||
export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
|
||||
|
||||
// Status - mode
|
||||
export const IDLE_MODE = 'IDLE_MODE'
|
||||
@@ -96,3 +97,9 @@ export function clearSearch () {
|
||||
type: CLEAR_SEARCH
|
||||
}
|
||||
}
|
||||
|
||||
export function toggleTutorial() {
|
||||
return {
|
||||
type: TOGGLE_TUTORIAL
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@ import superagentPromise from 'superagent-promise'
|
||||
import auth from 'boost/auth'
|
||||
|
||||
export const API_URL = 'http://boost-api4.elasticbeanstalk.com/'
|
||||
// export const WEB_URL = 'http://b00st.io/'
|
||||
export const WEB_URL = 'http://localhost:3333/'
|
||||
export const WEB_URL = 'https://b00st.io/'
|
||||
// export const WEB_URL = 'http://localhost:3333/'
|
||||
|
||||
export const request = superagentPromise(superagent, Promise)
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { combineReducers } from 'redux'
|
||||
import _ from 'lodash'
|
||||
import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, CLEAR_SEARCH, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_UPDATE, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
|
||||
import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, CLEAR_SEARCH, TOGGLE_TUTORIAL, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_UPDATE, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
|
||||
import dataStore from 'boost/dataStore'
|
||||
import keygen from 'boost/keygen'
|
||||
import activityRecord from 'boost/activityRecord'
|
||||
|
||||
const initialStatus = {
|
||||
mode: IDLE_MODE,
|
||||
search: ''
|
||||
search: '',
|
||||
isTutorialOpen: false
|
||||
}
|
||||
|
||||
let data = dataStore.getData()
|
||||
@@ -125,6 +126,9 @@ function articles (state = initialArticles, action) {
|
||||
function status (state = initialStatus, action) {
|
||||
state = Object.assign({}, state)
|
||||
switch (action.type) {
|
||||
case TOGGLE_TUTORIAL:
|
||||
state.isTutorialOpen = !state.isTutorialOpen
|
||||
return state
|
||||
case SWITCH_FOLDER:
|
||||
state.mode = IDLE_MODE
|
||||
state.search = `in:${action.data} `
|
||||
|
||||
Reference in New Issue
Block a user