diff --git a/browser/main/HomePage/ArticleDetail.js b/browser/main/HomePage/ArticleDetail.js index ae2a6acd..b07145de 100644 --- a/browser/main/HomePage/ArticleDetail.js +++ b/browser/main/HomePage/ArticleDetail.js @@ -139,10 +139,10 @@ export default class ArticleDetail extends React.Component {
diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js index adcb364d..c8363b89 100644 --- a/browser/main/HomePage/ArticleTopBar.js +++ b/browser/main/HomePage/ArticleTopBar.js @@ -2,6 +2,8 @@ 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' export default class ArticleTopBar extends React.Component { constructor (props) { @@ -65,6 +67,10 @@ export default class ArticleTopBar extends React.Component { this.focusInput() } + handleTutorialButtonClick (e) { + openModal(Tutorial) + } + render () { return (
@@ -92,7 +98,7 @@ export default class ArticleTopBar extends React.Component {
- + Boost official page 公式サイト diff --git a/browser/main/index.html b/browser/main/index.html index 364f96ed..267377d4 100644 --- a/browser/main/index.html +++ b/browser/main/index.html @@ -2,7 +2,7 @@ - + diff --git a/browser/styles/main/HomeContainer/components/ArticleDetail.styl b/browser/styles/main/HomeContainer/components/ArticleDetail.styl index 4ccb2c52..399529e5 100644 --- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl +++ b/browser/styles/main/HomeContainer/components/ArticleDetail.styl @@ -205,10 +205,10 @@ iptFocusBorderColor = #369DCD tooltip() &.editBtn .tooltip margin-top 25px - margin-left -63px + margin-left -65px &.deleteBtn .tooltip margin-top 25px - margin-left -96px + margin-left -98px &:hover color inherit .tooltip diff --git a/browser/styles/main/HomeContainer/index.styl b/browser/styles/main/HomeContainer/index.styl index d0551d0c..bb74ee2d 100644 --- a/browser/styles/main/HomeContainer/index.styl +++ b/browser/styles/main/HomeContainer/index.styl @@ -8,3 +8,4 @@ @require './lib/CreateNewTeam' @require './lib/CreateNewFolder' @require './lib/Preferences' +@require './lib/Tutorial' diff --git a/browser/styles/main/HomeContainer/lib/Tutorial.styl b/browser/styles/main/HomeContainer/lib/Tutorial.styl new file mode 100644 index 00000000..ced4547c --- /dev/null +++ b/browser/styles/main/HomeContainer/lib/Tutorial.styl @@ -0,0 +1,129 @@ + +slideBgColor0 = #2BAC8F +slideBgColor1 = #F68F92 +slideBgColor2 = #D6AD56 +slideBgColor3 = #26969B +slideBgColor4 = #00B493 + +.Tutorial.modal + background-color slideBgColor0 + color white + width 720px + height 480px + margin-top 75px + border-radius 5px + overflow hidden + + .priorBtn, .nextBtn + font-size 72px + position absolute + background-color transparent + color transparentify(white, 50%) + transition 0.1s + border none + line-height 72px + padding 0 + width 93px + height 72px + z-index 2 + top 189px + &:hover + color white + &.hide + opacity 0 + .priorBtn + left 15px + .nextBtn + right 15px + .title + text-align center + font-size 54px + margin 40px 0 + .content + text-align center + font-size 22px + line-height 1.8 + .dots + position absolute + left 0 + right 0 + bottom 25px + margin 0 auto + color gray + text-align center + z-index 2 + &>i + transition 0.3s + &.active + color white + .slide + absolute top bottom left right + z-index 1 + .slide0 + background-color slideBgColor0 + .content + margin-top 100px + .slide1 + background-color slideBgColor1 + .content + .markdown + background-color white + color textColor + width 480px + height 140px + margin 45px auto 0 + clearfix() + text-align left + border-radius 5px + overflow hidden + .left + float left + width 240px + height 140px + box-sizing border-box + font-size 0.5em + padding 30px + border-right 1px solid borderColor + .right + width 240px + height 140px + float right + box-sizing border-box + padding: 28px 0 0 10px + font-size 0.45em + marked() + ul + padding-left 20px + .slide2 + background-color slideBgColor2 + .code + border-radius 5px + overflow hidden + text-align left + width 480px + heght 140px + margin 45px auto 0 + font-size 14px + .ace_editor + height 140px + .slide3 + background-color slideBgColor3 + .content + &>img + margin-top 45px + .slide4 + background-color slideBgColor4 + .content + &>button + background-color white + color brandColor + font-size 60px + width 250px + height 250px + border-radius 125px + border none + transition 0.1s + &:hover + transform scale(1.2) + + diff --git a/lib/components/modal/Tutorial.js b/lib/components/modal/Tutorial.js new file mode 100644 index 00000000..1891ebd1 --- /dev/null +++ b/lib/components/modal/Tutorial.js @@ -0,0 +1,107 @@ +import React from 'react' +import MarkdownPreview from 'boost/components/MarkdownPreview' +import CodeEditor from 'boost/components/CodeEditor' + +export default class Tutorial extends React.Component { + constructor (props) { + super(props) + + this.state = { + slideIndex: 0 + } + } + + handlePriorSlideClick () { + if (this.state.slideIndex > 0) this.setState({slideIndex: this.state.slideIndex - 1}) + } + + handleNextSlideClick () { + if (this.state.slideIndex < 4) this.setState({slideIndex: this.state.slideIndex + 1}) + } + + startButtonClick (e) { + this.props.close() + } + + render () { + let content = this.renderContent(this.state.slideIndex) + + let dotElements = [] + for (let i = 0; i < 5; i++) { + dotElements.push() + } + + return ( +
+ + + {content} +
+ {dotElements} +
+
+ ) + } + + renderContent (index) { + switch (index) { + case 0: + return (
+
Welcome to Boost
+
+ Boost is a brand new note app for software
+ Don't waste time cleaning up your data.
+ devote that time to more creative work.
+ Hack your memory. +
+
) + case 1: + let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful' + return (
+
Write with Markdown
+
+ Markdown is available.
+ Your notes will be stylized beautifully and quickly. +
+ 
{content}
+ +
+
+
) + case 2: + let code = 'import shell from \'shell\'\r\nvar React = require(\'react\')\r\nvar { PropTypes } = React\r\nimport markdown from \'boost\/markdown\'\r\nvar ReactDOM = require(\'react-dom\')\r\n\r\nfunction handleAnchorClick (e) {\r\n shell.openExternal(e.target.href)\r\n e.preventDefault()\r\n}\r\n\r\nexport default class MarkdownPreview extends React.Component {\r\n componentDidMount () {\r\n this.addListener()\r\n }\r\n\r\n componentDidUpdate () {\r\n this.addListener()\r\n }\r\n\r\n componentWillUnmount () {\r\n this.removeListener()\r\n }' + return (
+
Beautiful code highlighting
+
+ Boost supports code syntax highlighting.
+ There are more than 100 different type of language. +
+ +
+
+
) + case 3: + return (
+
Easy to access with Finder
+
+ Finder is a small popup window.
+ With finder, You can search your articles faster.
+ +
+
) + case 4: + return (
+
Are you ready?
+
+ +
+
) + default: + return null + } + } +} diff --git a/lib/modal.js b/lib/modal.js index a445ec33..105888af 100644 --- a/lib/modal.js +++ b/lib/modal.js @@ -1,5 +1,5 @@ import React from 'react' -let ReactDOM = require('react-dom') +import ReactDOM from 'react-dom' class ModalBase extends React.Component { constructor (props) { diff --git a/package.json b/package.json index 7d862a9c..bb941c71 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "boost", - "version": "0.4.0-alpha.5", + "version": "0.4.0-alpha.6", "description": "Boost App", "main": "main.js", "scripts": { diff --git a/resources/finder.png b/resources/finder.png new file mode 100644 index 00000000..4caf9249 Binary files /dev/null and b/resources/finder.png differ