Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #44. Added React Modal! #206

Open
wants to merge 10 commits into
base: develop
Choose a base branch
from
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@
"react-dom": "^15.6.1",
"react-icons": "^2.2.7",
"react-markdown": "^2.5.0",
"react-modal": "^3.4.5",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-toastify": "^2.2.0",
42 changes: 42 additions & 0 deletions src/components/Content/Pursuance/PursuancePage.css
Original file line number Diff line number Diff line change
@@ -21,13 +21,52 @@
order: 1;
}

.Modal{
position: absolute; top: 120px; left: 60px; right: 60px; bottom: 60px; border: 1px solid rgb(204, 204, 204); background: rgb(255, 255, 255); overflow: auto; border-radius: 10px; outline: none; padding: 20px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greg-han One CSS rule per line, please 👍

}

.ReactModal__Content {
opacity: 0;
}

.ReactModal__Content--after-open {
opacity: 1;
transition: opacity 350ms;
}

.ReactModal__Content--before-close {
opacity: 0;
}
.close{
color: #aaa;
float: right;
font-size: 20px;.????
font-weight: bold;
}

.close:hover,
.close:focus{
color:black;
text-decoration: none;
cursor: pointer;
}

kbd{
background: #fafafa;
color: #444d56;
box-shadow: 1px 1px 1px 1px #c6bcd1;
}

@media (max-width: 1279px) {
#pursuance-page {
padding-left: 0;
}
#pursuance-page > article {
margin-left: 80px;
}
.Modal{
position: absolute; top: 100px; left: 40px; right: 40px; bottom: 40px;
}
}

@media (max-width: 639px) {
@@ -37,4 +76,7 @@
#pursuance-page > article {
margin-left: 0;
}
.Modal{
position: absolute; top: 80px; left: 20px; right: 20px; bottom: 20px;
}
}
51 changes: 48 additions & 3 deletions src/components/Content/Pursuance/PursuancePage.js
Original file line number Diff line number Diff line change
@@ -9,19 +9,64 @@ import DiscussView from './views/DiscussView';
import ParticipantsView from './views/ParticipantsView';
import RightPanel from '../RightPanel/RightPanel';
import './PursuancePage.css';
import ReactModal from 'react-modal';

class PursuancePage extends Component {

constructor(){
super();
this.state={
modalIsOpen : false
}
}
componentWillMount() {
let { setCurrentPursuance, match, currentPursuanceId } = this.props;
currentPursuanceId = Number(match.params.pursuanceId) || currentPursuanceId;
setCurrentPursuance(currentPursuanceId);
ReactModal.setAppElement('body');
}
componentDidMount(){
this.openModal();
}
openModal = () => {
this.setState({modalIsOpen : true});
}
closeModal = () => {
this.setState({modalIsOpen: false});
}
handleKeyDown = (event) => {
if(event.key === "?"){
this.setState({modalIsOpen : true});
}
}

render() {
return (
<Router>
<div id="pursuance-page" className="content-ctn">
<div id="pursuance-page" className="content-ctn" onKeyDown={this.handleKeyDown} tabIndex="-1">
<ReactModal className="Modal" shouldCloseOnEsc={true} shouldFocusAfterRender={true} isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} closeTimeoutMS={350} style={{overlay:{background:"none"}}}>
<span className='close' onClick={this.closeModal}>&times;</span>
<h3>Keyboard Shortcuts</h3>
<hr style={{border:"1.5px solid grey"}}/>
<div className="columns">
<div className="column one-half">
<table className="keyboard-mappings">
<tbody>
<tr>
<td className="keys">
<kbd>?</kbd>
</td>
<td>&nbsp; Open shortcut window</td>
</tr>
<tr>
<td className="keys">
<kbd>Everything Else</kbd>
</td>
<td> &nbsp; Do Nothing</td>
</tr>
</tbody>
</table>
</div>
</div>
</ReactModal>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greg-han Please indent properly so it's clear which tags are nested inside other tags. Use 2 spaces of indentation per level.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greg-han Turn this into its own component and then use it here just like PursuanceMenu or the like is used -- like this: <PursuanceMenu /> (rather than putting all the code in-line).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greg-han Sorry for all the changes, but the React way of doing things is very different from the vanilla JS way.

Copy link
Author

@greg-han greg-han Jun 28, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem, I appreciate the feedback!
Thanks for helping me improve.
Do you want the component on PursuancePage.js or in it's own js file such as Modal.js?

<nav id="pursuance-nav">
<PursuanceMenu />
</nav>