mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
tooltip, tutorial追加
This commit is contained in:
Rokt33r
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -8,3 +8,4 @@
|
||||
@require './lib/CreateNewTeam'
|
||||
@require './lib/CreateNewFolder'
|
||||
@require './lib/Preferences'
|
||||
@require './lib/Tutorial'
|
||||
|
||||
129
browser/styles/main/HomeContainer/lib/Tutorial.styl
Normal file
129
browser/styles/main/HomeContainer/lib/Tutorial.styl
Normal file
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user