File tree Expand file tree Collapse file tree 6 files changed +30
-41
lines changed Expand file tree Collapse file tree 6 files changed +30
-41
lines changed Original file line number Diff line number Diff line change 1
1
import React , { Component } from 'react' ;
2
2
import Menu from './Menu' ;
3
- import logo from './logo.svg' ;
4
- import './App.css' ;
3
+
4
+ const style = {
5
+ height : 300 ,
6
+ width : 300 ,
7
+ background : '#e02d42' ,
8
+ padding : 12 ,
9
+ color : 'white' ,
10
+ textAlign : 'center'
11
+ }
5
12
6
13
class App extends Component {
7
14
state = { }
@@ -19,21 +26,13 @@ class App extends Component {
19
26
const { menuShow, x, y } = this . state ;
20
27
21
28
return (
22
- < div className = "App" >
23
- < header className = "App-header" onContextMenu = { this . handleContextMenu } >
24
- < img src = { logo } className = "App-logo" alt = "logo" />
25
- < h1 className = "App-title" > Welcome to React</ h1 >
26
-
27
- < Menu show = { menuShow } x = { x } y = { y } >
28
- < div className = "menu-item" > First Menu Item</ div >
29
- < hr />
30
- < div className = "menu-item" > Second Menu Item</ div >
31
- </ Menu >
32
-
33
- </ header >
34
- < p className = "App-intro" >
35
- To get started, edit < code > src/App.js</ code > and save to reload.
36
- </ p >
29
+ < div style = { style } onContextMenu = { this . handleContextMenu } >
30
+ right-click in this div to show a menu
31
+ < Menu show = { menuShow } x = { x } y = { y } >
32
+ < div className = "menu-item" > First Menu Item</ div >
33
+ < hr />
34
+ < div className = "menu-item" > Second Menu Item</ div >
35
+ </ Menu >
37
36
</ div >
38
37
) ;
39
38
}
Original file line number Diff line number Diff line change 1
1
import React , { Component } from 'react' ;
2
- import logo from './logo.svg' ;
3
2
import Tooltip from './Tooltip' ;
4
- import './App.css' ;
5
3
6
4
class App extends Component {
7
5
render ( ) {
8
6
return (
9
- < div className = "App" >
10
- < header className = "App-header" >
11
- < img src = { logo } className = "App-logo" alt = "logo" />
12
- < h1 className = "App-title" > Welcome to
13
- < Tooltip tiptext = "Example" > React</ Tooltip >
14
- </ h1 >
15
- </ header >
16
- < p className = "App-intro" >
17
- To get started, edit < code > src/App.js</ code > and save to reload.
18
- </ p >
7
+ < div style = { { fontSize : 20 , color : '#555' , margin : 60 } } >
8
+ < span > THAT'S NO </ span >
9
+ < Tooltip tiptext = "DEATH STAR" >
10
+ < span style = { { color : '#a0a0a0' } } > MOON</ span >
11
+ </ Tooltip >
19
12
</ div >
20
13
) ;
21
14
}
Original file line number Diff line number Diff line change 1
1
.tooltip {
2
2
position : relative;
3
3
display : inline-block;
4
+ white-space : nowrap;
4
5
}
5
6
.tooltip : after {
6
7
content : attr (data-tiptext);
7
8
opacity : 0 ;
8
9
position : absolute;
9
10
padding : 6px 12px ;
10
- background : # dadada ;
11
- color : # 555 ;
11
+ background : # 555 ;
12
+ color : white ;
12
13
font-size : 12px ;
13
14
border-radius : 4px ;
14
15
pointer-events : none;
Original file line number Diff line number Diff line change @@ -16,7 +16,7 @@ class App extends Component {
16
16
const { floating } = this . state ;
17
17
18
18
return (
19
- < div >
19
+ < div style = { { width : 400 , height : 400 , position : 'relative' } } >
20
20
< button onClick = { this . showFloating } > Show Floating</ button >
21
21
< Floating modal show = { floating } viewport closeOnModalClick >
22
22
< div className = "modal-msg" >
Original file line number Diff line number Diff line change 1
- html {
2
- height : 100% ;
3
- }
4
- body {
5
- position : relative;
6
- height : 100% ;
7
- }
8
-
9
1
.float-wrap {
10
2
position : absolute;
11
3
top : 0 ;
28
20
border : 3px solid # 61dafb ;
29
21
color : # 555 ;
30
22
}
23
+ .viewport {
24
+ position : fixed;
25
+ }
31
26
.modal-msg > * {
32
27
vertical-align : middle;
33
28
}
Original file line number Diff line number Diff line change @@ -23,7 +23,8 @@ class Floating extends Component {
23
23
const { show } = this . state ;
24
24
const isModal = modal ? ' modal' : '' ;
25
25
const doShow = show ? ' show' : '' ;
26
- const clsName = `float-wrap${ isModal } ${ doShow } ` ;
26
+ const isViewport = viewport ? ' viewport' : '' ;
27
+ const clsName = `float-wrap${ isModal } ${ doShow } ${ isViewport } ` ;
27
28
const props = {
28
29
onClick : closeOnModalClick ? this . handleModalClick : null
29
30
} ;
You can’t perform that action at this time.
0 commit comments