Skip to content

Commit 293c6f2

Browse files
authored
Merge pull request #30 from ModusCreateOrg/floating-components-3
Floating components - sync code to articles
2 parents 237c84a + bf770fe commit 293c6f2

File tree

6 files changed

+30
-41
lines changed

6 files changed

+30
-41
lines changed

21-floating-components/a-ad-hoc-menus/src/App.js

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React, { Component } from 'react';
22
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+
}
512

613
class App extends Component {
714
state = {}
@@ -19,21 +26,13 @@ class App extends Component {
1926
const { menuShow, x, y } = this.state;
2027

2128
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>
3736
</div>
3837
);
3938
}

21-floating-components/b-tooltips/src/App.js

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
32
import Tooltip from './Tooltip';
4-
import './App.css';
53

64
class App extends Component {
75
render() {
86
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&nbsp;
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>
1912
</div>
2013
);
2114
}

21-floating-components/b-tooltips/src/Tooltip.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
.tooltip {
22
position: relative;
33
display: inline-block;
4+
white-space: nowrap;
45
}
56
.tooltip:after {
67
content: attr(data-tiptext);
78
opacity: 0;
89
position: absolute;
910
padding: 6px 12px;
10-
background: #dadada;
11-
color: #555;
11+
background: #555;
12+
color: white;
1213
font-size: 12px;
1314
border-radius: 4px;
1415
pointer-events: none;

21-floating-components/c-modal/src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class App extends Component {
1616
const { floating } = this.state;
1717

1818
return (
19-
<div>
19+
<div style={{width: 400, height: 400, position: 'relative'}}>
2020
<button onClick={this.showFloating}>Show Floating</button>
2121
<Floating modal show={floating} viewport closeOnModalClick>
2222
<div className="modal-msg">

21-floating-components/c-modal/src/Floating.css

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
html {
2-
height: 100%;
3-
}
4-
body {
5-
position: relative;
6-
height: 100%;
7-
}
8-
91
.float-wrap {
102
position: absolute;
113
top: 0;
@@ -28,6 +20,9 @@ body {
2820
border: 3px solid #61dafb;
2921
color: #555;
3022
}
23+
.viewport {
24+
position: fixed;
25+
}
3126
.modal-msg > * {
3227
vertical-align: middle;
3328
}

21-floating-components/c-modal/src/Floating.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ class Floating extends Component {
2323
const { show } = this.state;
2424
const isModal = modal ? ' modal' : '';
2525
const doShow = show ? ' show' : '';
26-
const clsName = `float-wrap${isModal}${doShow}`;
26+
const isViewport = viewport ? ' viewport' : '';
27+
const clsName = `float-wrap${isModal}${doShow}${isViewport}`;
2728
const props = {
2829
onClick: closeOnModalClick ? this.handleModalClick : null
2930
};

0 commit comments

Comments
 (0)