1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-15 18:56:22 +00:00

Add tooltip to editmode buttons

This commit is contained in:
Rokt33r
2015-12-22 19:42:23 +09:00
parent 3f58302a14
commit c625513924
2 changed files with 19 additions and 3 deletions

View File

@@ -526,14 +526,17 @@ export default class ArticleDetail extends React.Component {
? 'Preview' ? 'Preview'
: 'Edit' : 'Edit'
} }
<span className='tooltip'>{process.platform === 'darwin' ? '⌘' : '^'} + p</span>
</button>) </button>)
: null : null
} }
<button onClick={e => this.handleCancelButtonClick(e)}> <button onClick={e => this.handleCancelButtonClick(e)} className='cancelBtn'>
Cancel Cancel
<span className='tooltip'>Esc</span>
</button> </button>
<button onClick={e => this.handleSaveButtonClick(e)} className='primary'> <button onClick={e => this.handleSaveButtonClick(e)} className='saveBtn'>
Save Save
<span className='tooltip'>{process.platform === 'darwin' ? '⌘' : '^'} + s</span>
</button> </button>
</div> </div>
</div> </div>

View File

@@ -159,6 +159,7 @@ iptFocusBorderColor = #369DCD
&:hover &:hover
background-color darken(white, 10%) background-color darken(white, 10%)
.right .right
z-index 30
button button
cursor pointer cursor pointer
height 33px height 33px
@@ -169,14 +170,26 @@ iptFocusBorderColor = #369DCD
background-color darken(white, 5%) background-color darken(white, 5%)
border solid 1px borderColor border solid 1px borderColor
border-radius 5px border-radius 5px
&>.tooltip
tooltip()
top 105px
&.preview &.preview
width inherit width inherit
.tooltip
margin-left -55px
&:hover &:hover
background-color white background-color white
&.primary .tooltip
opacity 1
&.cancelBtn
.tooltip
margin-left -25px
&.saveBtn
border none border none
background-color brandColor background-color brandColor
color white color white
.tooltip
margin-left -45px
&:hover &:hover
color white color white
background-color lighten(brandColor, 10%) background-color lighten(brandColor, 10%)