Skip to content

Commit ca2c072

Browse files
kazup01kazup01
authored
Merge pull request #1321 from mslourens/tooltips
added tooltips like the new note button
2 parents f90786d + 6ce1922 commit ca2c072

21 files changed

Lines changed: 347 additions & 135 deletions

‎browser/main/Detail/FullscreenButton.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import PropTypes from 'prop-types'
2+
import React from 'react'
3+
import CSSModules from 'browser/lib/CSSModules'
4+
import styles from './FullscreenButton.styl'
5+
6+
const FullscreenButton = ({
7+
onClick
8+
}) => (
9+
<button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
10+
<img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
11+
<span styleName='tooltip'>Fullscreen</span>
12+
</button>
13+
)
14+
15+
FullscreenButton.propTypes = {
16+
onClick: PropTypes.func.isRequired
17+
}
18+
19+
export default CSSModules(FullscreenButton, styles)

‎browser/main/Detail/FullscreenButton.styl‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.control-fullScreenButton
2+
top 80px
3+
topBarButtonRight()
4+
&:hover .tooltip
5+
opacity 1
6+
7+
.tooltip
8+
tooltip()
9+
position absolute
10+
pointer-events none
11+
top 26px
12+
right 0
13+
z-index 200
14+
padding 5px
15+
line-height normal
16+
border-radius 2px
17+
opacity 0
18+
transition 0.1s
19+
20+
body[data-theme="dark"]
21+
.control-fullScreenButton
22+
topBarButtonDark()

‎browser/main/Detail/InfoButton.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const InfoButton = ({
1010
onClick={(e) => onClick(e)}
1111
>
1212
<img className='infoButton' src='../resources/icon/icon-info.svg' />
13+
<span styleName='tooltip'>Info</span>
1314
</button>
1415
)
1516

‎browser/main/Detail/InfoButton.styl‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
.control-infoButton
22
top 10px
33
topBarButtonRight()
4+
&:hover .tooltip
5+
opacity 1
6+
7+
.tooltip
8+
tooltip()
9+
position absolute
10+
pointer-events none
11+
top 26px
12+
right 0
13+
z-index 200
14+
padding 5px
15+
line-height normal
16+
border-radius 2px
17+
opacity 0
18+
transition 0.1s
419

520
.infoButton
621
padding 0px

‎browser/main/Detail/MarkdownNoteDetail.js‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ import { findNoteTitle } from 'browser/lib/findNoteTitle'
1818
import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
1919
import ConfigManager from 'browser/main/lib/ConfigManager'
2020
import TrashButton from './TrashButton'
21+
import FullscreenButton from './FullscreenButton'
2122
import PermanentDeleteButton from './PermanentDeleteButton'
2223
import InfoButton from './InfoButton'
24+
import ToggleModeButton from './ToggleModeButton'
2325
import InfoPanel from './InfoPanel'
2426
import InfoPanelTrashed from './InfoPanelTrashed'
2527
import { formatDate } from 'browser/lib/date-formatter'
@@ -355,18 +357,9 @@ class MarkdownNoteDetail extends React.Component {
355357
onChange={(e) => this.handleChange(e)}
356358
/>
357359

358-
<div styleName='mode-tab'>
359-
<div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
360-
<img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
361-
</div>
362-
<div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
363-
<img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
364-
</div>
365-
</div>
360+
<ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
366361

367-
<TodoListPercentage
368-
percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
369-
/>
362+
<TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
370363
</div>
371364
<div styleName='info-right'>
372365
<InfoButton
@@ -393,11 +386,7 @@ class MarkdownNoteDetail extends React.Component {
393386
)
394387
})()}
395388

396-
<button styleName='control-fullScreenButton'
397-
onMouseDown={(e) => this.handleFullScreenButton(e)}
398-
>
399-
<img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
400-
</button>
389+
<FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
401390

402391
<TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
403392

‎browser/main/Detail/MarkdownNoteDetail.styl‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@
1919
top 40px
2020
position relative
2121

22-
.control-fullScreenButton
23-
top 80px
24-
topBarButtonRight()
25-
2622
.body
2723
absolute left right
2824
left 0
@@ -32,26 +28,6 @@
3228
margin 0 45px
3329
.body-noteEditor
3430
absolute top bottom left right
35-
36-
.mode-tab
37-
border 1px solid #eee
38-
height 34px
39-
display flex
40-
align-items center
41-
div
42-
width 40px
43-
height 100%
44-
background-color #f9f9f9
45-
display flex
46-
align-items center
47-
justify-content center
48-
cursor pointer
49-
&:first-child
50-
border-right 1px solid #eee
51-
.active
52-
background-color #fff
53-
box-shadow 2px 0px 7px #eee
54-
z-index 1
5531

5632
body[data-theme="white"]
5733
.root

‎browser/main/Detail/PermanentDeleteButton.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const PermanentDeleteButton = ({
1010
onClick={(e) => onClick(e)}
1111
>
1212
<img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
13+
<span styleName='tooltip'>Permanent Delete</span>
1314
</button>
1415
)
1516

‎browser/main/Detail/SnippetNoteDetail.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ class SnippetNoteDetail extends React.Component {
634634
isActive={note.isStarred}
635635
/>
636636

637-
<button styleName='control-fullScreenButton'
637+
<button styleName='control-fullScreenButton' title='Fullscreen'
638638
onMouseDown={(e) => this.handleFullScreenButton(e)}>
639639
<img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
640640
</button>

‎browser/main/Detail/StarButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ class StarButton extends React.Component {
4646
onMouseDown={(e) => this.handleMouseDown(e)}
4747
onMouseUp={(e) => this.handleMouseUp(e)}
4848
onMouseLeave={(e) => this.handleMouseLeave(e)}
49-
onClick={this.props.onClick}
50-
>
49+
onClick={this.props.onClick}>
5150
<img styleName='icon'
5251
src={this.state.isActive || this.props.isActive
5352
? '../resources/icon/icon-starred.svg'
5453
: '../resources/icon/icon-star.svg'
5554
}
5655
/>
56+
<span styleName='tooltip'>Star</span>
5757
</button>
5858
)
5959
}

‎browser/main/Detail/StarButton.styl‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,22 @@
44
&:hover
55
transition 0.2s
66
color alpha($ui-favorite-star-button-color, 0.6)
7+
&:hover .tooltip
8+
opacity 1
9+
10+
.tooltip
11+
tooltip()
12+
position absolute
13+
pointer-events none
14+
top 26px
15+
right 0
16+
width 100%
17+
z-index 200
18+
padding 5px
19+
line-height normal
20+
border-radius 2px
21+
opacity 0
22+
transition 0.1s
723

824
.root--active
925
@extend .root

0 commit comments

Comments
 (0)