tooltip, tutorial追加

2025-12-13 17:56:25 +00:00 · 2015-11-01 21:59:59 +09:00
parent 522c0edd90
commit 72f6468d12
10 changed files with 251 additions and 8 deletions
--- a/browser/main/HomePage/ArticleDetail.js
+++ b/browser/main/HomePage/ArticleDetail.js
@@ -139,10 +139,10 @@ export default class ArticleDetail extends React.Component {
              </div>
              <div className='right'>
                <button onClick={e => this.handleEditButtonClick(e)} className='editBtn'>
-                  <i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit 編集(e)</span>
+                  <i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit 編集 (e)</span>
                </button>
                <button onClick={e => this.handleDeleteButtonClick(e)} className='deleteBtn'>
-                  <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete 削除(d)</span>
+                  <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete 削除 (d)</span>
                </button>
              </div>
            </div>
--- 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 (
      <div className='ArticleTopBar'>
@@ -92,7 +98,7 @@ export default class ArticleTopBar extends React.Component {
          </div>
        </div>
        <div className='right'>
-          <button>?<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>
--- a/browser/main/index.html
+++ b/browser/main/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
  <meta charset="utf-8">
-  <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
--- 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
--- 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'
--- a/browser/styles/main/HomeContainer/lib/Tutorial.styl
+++ 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)
+
+
--- a/lib/components/modal/Tutorial.js
+++ 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(<i key={i} className={'fa fa-fw fa-circle' + (i === this.state.slideIndex ? ' active' : '')}/>)
+    }
+
+    return (
+      <div className='Tutorial modal'>
+        <button onClick={e => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
+          <i className='fa fa-fw fa-angle-left'/>
+        </button>
+        <button onClick={e => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
+          <i className='fa fa-fw fa-angle-right'/>
+        </button>
+        {content}
+        <div className='dots'>
+          {dotElements}
+        </div>
+      </div>
+    )
+  }
+
+  renderContent (index) {
+    switch (index) {
+      case 0:
+        return (<div className='slide slide0'>
+          <div className='title'>Welcome to Boost</div>
+          <div className='content'>
+            Boost is a brand new note app for software<br/>
+            Don't waste time cleaning up your data.<br/>
+            devote that time to more creative work.<br/>
+            Hack your memory.
+          </div>
+        </div>)
+      case 1:
+        let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful'
+        return (<div className='slide slide1'>
+          <div className='title'>Write with Markdown</div>
+          <div className='content'>
+            Markdown is available.<br/>
+            Your notes will be stylized beautifully and quickly.
+            <div className='markdown'>
+              <pre className='left'>{content}</pre>
+              <MarkdownPreview className='right' content={content}/>
+            </div>
+          </div>
+        </div>)
+      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 (<div className='slide slide2'>
+          <div className='title'>Beautiful code highlighting</div>
+          <div className='content'>
+            Boost supports code syntax highlighting.<br/>
+            There are more than 100 different type of language.
+            <div className='code'>
+              <CodeEditor readOnly mode='jsx' code={code}/>
+            </div>
+          </div>
+        </div>)
+      case 3:
+        return (<div className='slide slide3'>
+          <div className='title'>Easy to access with Finder</div>
+          <div className='content'>
+            Finder is a small popup window.<br/>
+            With finder, You can search your articles faster.<br/>
+            <img width='480' src='../../resources/finder.png'/>
+          </div>
+        </div>)
+      case 4:
+        return (<div className='slide slide4'>
+          <div className='title'>Are you ready?</div>
+          <div className='content'>
+          <button onClick={e => this.startButtonClick(e)}>Start<br/>Boost</button>
+          </div>
+        </div>)
+      default:
+        return null
+    }
+  }
+}
--- 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) {
--- 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": {
--- a/resources/finder.png
+++ b/resources/finder.png